/******************ヘッダー部分******************/
html {
    font-family: "Roboto", "Noto Sans JP", "Helvetica Neue", "Helvetica", "Arial", "Hiragino Sans", "ヒラギノ角ゴシック", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: var(--fntColor-Main);
    line-height: 27px;
}
body{
    font-size:16px;
}
.br-sp{
    display:none;
}
.headLogo {
    margin: 10px;
    text-align: center;
}
    .headLogo img {
        height: 55px;
    }
.headTitle {
    margin-top: 10px;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 4px;
    background-color: var(--bgColor-HeadTitle);
    color: var(--fntColor-Title);
    font-size: 14px;
    height:38px;
}

.screenName {
    position: relative;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #F7F7F8;
    font-size: 22px;
    font-weight: bold;
    min-width: 600px;
}

/*******************メイン*****************/
.mainSection{
    margin:0 auto;
    width:600px;
    padding:0px;
}
.subTitle {
    margin-top:40px;
    font-weight: bold;
    font-size: 22px;
    line-height:35px;
}
.subTitle.min {
    font-size: 16px;
}
    .mainText {
        margin-top: 20px;
        font-size: 15px;
    }
    .mainText .pMargin {
        margin-top:10px;
    }
    .LimitInfo {
        margin-top: 28px;
        background-color: var(--bgColor-Info);
        text-align: center;
        padding: 13px;
        font-size: 16px;
        font-weight: bold;
    }
.actionArea {
    margin-top: 48px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    vertical-align: middle;
    min-width: 600px;
}
    .actionArea .BigButton {
        width: 288px;
        height: 156px;
        flex: 1 1 calc(50% - 16px);
        border-style: solid;
        border-width: 1px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-radius: 4px;
        gap: 4px;
        font-size:20px;
    }

    .actionArea .WideButton {
        width: 600px;
        height: 80px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-radius: 4px;
        border-style: solid;
        border-color: var(--bgColor-Orange);
        color: var(--bgColor-Orange);
        font-size:20px;
        font-weight:bold;
        border-width: 1px;
        border-radius: 4px;
        gap:4px;
    }
.WideButton.green {
    border-color: #379850;
    color: #379850;
}

.WideButton.silver {
    border-color: #dcdcdc;
    color: #465050;
}
/*****************アンケート*******************/
.questionTitle {
    margin-top: 40px;
    font-weight: bold;
    font-size: 16px;
    line-height: 35px;
    display: flex;
}
    .questionTitle .number {
        color: var(--fntColor-QuestionNumber);
        width:35px;
    }

.questionSelectList{
}
.btnNext {
    width: 288px;
    height: 64px;
    flex: 1 1 calc(50% - 16px);
    border-style: solid;
    border-width: 1px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 4px;
    gap: 4px;
    font-size: 20px;
    border-color: #dcdcdc;
    position: relative;
}
    .btnNext:after {
        position: absolute;
        font-family: "Material Icons";
        content: "\e5cc";
        right: 10px;
    }

.btnBack {
    width: 288px;
    height: 64px;
    flex: 1 1 calc(50% - 16px);
    border-style: solid;
    border-width: 1px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 4px;
    gap: 4px;
    font-size: 20px;
    border-color: #dcdcdc;
    position: relative;
}
    .btnBack:before {
        position: absolute;
        font-family: "Material Icons";
        content: "\e5cb";
        left: 10px;
    }



/*****************確認画面*******************/
.conQuestion {
    margin-top:40px;
    background-color: #EEEFF0;
    border-radius:4px;
    padding-top:12px;
    padding-bottom:12px;
    font-weight:bold;
    display:flex;
    font-size:16px;
}
    .conQuestion .number {
        color: var(--fntColor-QuestionNumber);
        width: 35px;
        padding-left:16px;
        margin-right:12px;
    }
.conQuestionSelect {
    font-size: 16px;
    margin-top: 16px;
}
.conFreeText{
    padding-top:16px;
}
header,footer{
    min-width:600px;
}
/******************フッター**********************/
.footText {
    text-align: center;
    color: #9F9F9F;
    font-size: 10px;
    padding: 13px;
    margin-top: 160px;
}



/******************共通**********************/
.bgOrange {
    color: var(--fntColor-Title);
    background-color: var(--bgColor-Orange);
}
.bgBlue {
    color: var(--fntColor-Title);
    background-color: var(--bgColor-Blue);
}
.bdrBlue {
    border-color: var(--bgColor-Blue) !important;
    color: var(--bgColor-Blue);
    background-color: var(--bgColor-White);
}
.bdBlue {
    border-color: var(--bgColor-Blue);
    color: var(--bgColor-Blue);
}
.info {
    font-size: 14px;
    font-weight: normal;
}

.reqIcon:after {
    position: relative;
    content: "必須";
    font-size: 9px;
    font-weight: normal;
    border-style: solid;
    border-width: 1px;
    border-color: FF6D6D;
    padding: 2px;
    margin-left: 4px;
    bottom: 1px;
    color: #FF6D6D;
}

.AspArea {
    display: none;
}

textarea {
    margin-top:16px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    width:100%;
    height:100px;
    padding:1rem;
    resize:none;
}

    textarea:disabled {
        background-color: #dcdcdc;
    }

.center {
    text-align: center;
    margin: 0 auto;
}

.completeCheck {
    margin-top:72px;
}
    .completeCheck:after {
        font-family: "Material Icons";
        content: "\e86c";
        font-size: 100px;
        color: #32AF5A;
    }
.actionAreaSingle {
    margin-top: 48px;
}
.btnGoTop {
    width: 288px;
    height: 64px;
    flex: 1 1 calc(50% - 16px);
    border-style: solid;
    border-width: 1px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 4px;
    gap: 4px;
    font-size: 20px;
    border-color: #dcdcdc;
    position: relative;
    margin:0 auto;
}

input[type='text'],
input[type='password'] {
    border-style: solid;
    border-width: 1px;
    border-color: #BDC3C6;
    border-radius: 2px;
    height: 47px;
    width: 100%;
    padding:12px 16px 12px 16px
}
.colTitle{
    font-weight:bold;
    margin-bottom:10px;
}
.formArea{
    margin-top:40px;
    font-size:15px;
}
.formTitle{
    font-size:18px;
    font-weight:bold;
}
.mgn66 {
    margin-top: 66px;
}
.mgn33 {
    margin-top: 33px;
}
.mgn16 {
    margin-top: 16px;
}

.infoLink {
    font-size: 12px;
    color: #465050;
    text-decoration:underline;
}
.info {
    font-size: 12px;
}

.privacyPolicyArea {
    padding: 12px;
    height: 206px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-style: solid;
    border-width: 1px;
    border-radius: 2px;
    border-color: #BDC3C6;
}

.logout{
    position:absolute;
    font-size:9px;
    top:21px;
    right:20px;
}
    .logout:before {
        font-family: "Material Icons";
        content: "\e879";
        font-size:21px;
        position:relative;
        top:-10px;
        left:35px;
    }





.progressArea {
    display: flex;
    width: 55%;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom:30px;
    position: relative; /* 必要 */
}
    .progressArea::before {
        content: "";
        position: absolute;
        top: 50%; /* 高さ中央に配置 */
        left: 0;
        right: 0;
        height: 1px; /* 横線の太さ */
        background-color: #BDC3C6; /* 横線の色 */
        z-index: 0; /* progress の下に配置 */
    }
.progress {
    width: 56px;
    height: 56px;
    font-weight: bold;
    color: #969FA3;
    border-style: solid;
    border-width: 1px;
    border-radius: 100%;
    border-color: #BDC3C6;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* 横線の上に配置 */
    background-color: white;
    position:relative;
    font-size:20px;
}
    .progress.active {
        background-color: #0091D7;
        border-color: #0091D7;
        color:white;
    }
    .progress.end {
        background-color: #CACFD2;
        border-color: #CACFD2;
        color: white;
    }

    .progress .text {
        position: absolute;
        bottom: -30px;
        color: #465050;
        font-size: 12px;
        font-weight:normal;
    }
    .progress.active .text {
        color: #0091D7;
        font-weight:bold;
    }
    .progress.end .text {
        color: #CACFD2;
    }


/* 未選択状態のラジオボタンの背景色やボーダーの指定 */
.check-btn-only label {
    display: flex; /* 中の文字の上下中央揃えを行うための設定 */
    align-items: center; /* 中の文字の上下中央揃えを行うための設定 */
    justify-content:center;
    position: relative; /* 疑似要素の位置調整のための設定 */
}

/* 中の文字列の位置調整 */
.check-btn-only span {
    display: block; /* ラジオボタン内の文字の上下中央揃えを行うための設定 */
    padding-left: 46px; /* 左側のボタン設置スペース確保のための設定 */
    padding-right: 4px; /* 文字列が右側にギリギリにならないようにするための設定 */
}

/* 選択/未選択時の両方に存在する白い丸を作成 */
.check-btn-only label::before {
    margin-left: 12px;
    content: "";
    width: 22px; /* 白い丸の横の長さ */
    height: 22px; /* 白い丸の縦の長さ */
    position: absolute; /* 位置調整の起点をlabelの左上の角とするための設定 */
    top: 50%;
    left: 170px;
    transform: translate(-50%, -50%); /* topとleftが丸の中心を基準とするための設定 */
    z-index: 10;
    border-style: solid;
    border-width: 1px;
    border-color: #dcdcdc;
}

.check-btn-only input:checked + label::before {
    margin-left: 12px;
    content: "";
    width: 22px; /* 白い丸の横の長さ */
    height: 22px; /* 白い丸の縦の長さ */
    position: absolute; /* 位置調整の起点をlabelの左上の角とするための設定 */
    top: 50%;
    left: 170px;
    transform: translate(-50%, -50%); /* topとleftが丸の中心を基準とするための設定 */
    z-index: 10;
    border-style: solid;
    border-width: 1px;
    border-color: #0091D7;
}

/* 選択時のみに存在する青い丸を作成, 基本は白い丸とすべて同じ */
.check-btn-only input:checked + label::after {
    content: "";
    width: 22px;
    height: 22px;
    background-color: #0091D7;
    position: absolute;
    top: 50%;
    left: 182px;
    transform: translate(-50%, -50%);
    background-image: url("../image/checkbox.svg");
    background-repeat: no-repeat;
    background-size: contain;
}


.backIconArea {
    width:600px;
    margin:0 auto;
    position:relative;
    display:flex;
    top:-100px;
    cursor:pointer;
}
    .backIconArea .icon {
    }
        .backIconArea .icon:before {
            font-family: "Material Icons";
            content: "\e5cb";
            border-style: solid;
            border-width: 1px;
            border-color: #465050;
            color: #465050;
            border-radius: 2px;
        }

    .backIconArea .text {
        position: absolute;
        left: 30px;
        font-size: 12px;
        color: #465050;
    }