@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;700&family=Noto+Sans+JP:wght@400;700&display=swap');


/********** font **********/

:root {
    --font-jp: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --font-en: 'Barlow', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body, .font_sans-serif, .font_jp {
    font-family: var(--font-jp);
}

.font_en, a[href^="tel:"] {
    font-family: var(--font-en);
}


/********** color **********/

:root {
    --color1: #1A1B1E;
    --color2: #EFF0F4;
    --color3: #555A66;
    --color4: #D2D6DB;
    --base: #F9F9FC;
    --gray: #ccc;
    --sysColor1: #1D76FC;
    --sysColor2: #0FD679;
    --sysColor3: #FB4476;
    --sysColor4: #FBC42F;
}


/********** svg **********/

.s_icon {
    fill: none;
    fill-rule: evenodd;
    stroke: currentColor;
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stroke_2 {
    stroke-width: 2px;
}

.stroke_3 {
    stroke-width: 3px;
}

path[d="m0,0h100v100H0V0Z"] {
    fill: none;
    stroke: none;
    stroke-width: 0;
}


/********** form **********/

input, select, textarea, button {
    width: 100%;
    display: block;
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    box-sizing: border-box;
    font: inherit;
    font-weight: normal;
    background: transparent;
    outline: none;
}

    /* text */

    input[type="text"]:not(.custom), input[type="number"]:not(.custom), input[type="password"], textarea, .select_label:not(.custom) select {
        color: currentColor;
        border-radius: 5px;
        background-color: var(--color2);
        min-height: calc(1.7em + 20px);
        transition: border-color 0.2s !important;
    }

        input[type="text"].border_so2:focus, input[type="password"].border_so2:focus, input[type="number"].border_so2:focus, textarea.border_so2:focus, .select_label:not(.custom) select:focus {
            background-color: transparent;
            border-color: var(--sysColor1);
        }

        input::placeholder, textarea::placeholder {
            opacity: 0.5;
        }

textarea {
    overflow: auto;
    resize: vertical
}

/* select */

.select_label:not(.custom)::before, .select_label:not(.custom)::after {
    position: absolute;
    content: "";
    margin: auto;
    pointer-events: none;
}

.select_label:not(.custom)::before {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    background-color: var(--color4);
    top: 0;
    bottom: 0;
    right: 9px;
}

.select_label:not(.custom)::after {
    width: 8px;
    height: 8px;
    border-right: solid 2px;
    border-bottom: solid 2px;
    transform: rotate(45deg);
    top: 0;
    bottom: 4px;
    right: 19px;
}

select optgroup option:checked {
    background-image: linear-gradient(to bottom, var(--sysColor1), var(--sysColor1));
    color: #fff;
}

select:not(.custom):invalid, select:not(.custom) option:first-child {
    color: var(--gray);
}

optgroup {
    font-weight: bold;
}

/* button */

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
    display: none;
}

input[type="submit"].border_so2:focus,
input[type="button"].border_so2:focus {
    outline-offset: -2px;
}

/* radio checkbox */

.radio_wrap label::before, .radio_wrap label::after, .check_wrap label::before, .check_wrap label::after {
    content: "";
    display: block;
    position: absolute;
}

.radio_wrap label::before, .radio_wrap label::after, .check_wrap label::before {
    transform: translateY(-50%);
    top: 50%;
}

.radio_wrap label::before {
    border-radius: 50%;
    background-color: var(--color2);
    border: 1px solid var(--color2);
    width: 20px;
    height: 20px;
    left: 0;
    transition: 0.2s;
}

.check_wrap label::before {
    background-color: var(--color2);
    width: 20px;
    height: 20px;
    left: 0;
    transition: 0.2s;
    border-radius: 2px;
}

.radio_wrap label::after {
    border-radius: 50%;
    background-color: var(--sysColor1);
    opacity: 0;
    width: 14px;
    height: 14px;
    left: 4px;
    transition: 0.2s;
}

.check_wrap label::after {
    opacity: 0;
    width: 10px;
    height: 5px;
    left: 4px;
    transition: 0.2s;
}

.check_wrap label::after {
    border-left: solid 2px #fff;
    border-bottom: solid 2px #fff;
    top: 6px;
    transform: translateY(-50%) rotate(-45deg);
}

.check_wrap.custom label::after {
    top: calc(50% - 2px);
}

.check_wrap:not(.custom) label.pd_l-40px::before {
    left: 12px;
}

.check_wrap:not(.custom) label.pd_l-40px::after {
    top: calc(50% - 2px);
    left: 16px;
}

.radio_wrap input:checked + label, .check_wrap.custom input:checked + label {
    color: var(--sysColor1);
}

.check_wrap:not(.custom) input:checked + label {
    color: #fff;
    background-color: var(--color1);
}

.check_wrap.result_wrap:not(.custom) input:checked + label, #scenario_list_add.check_wrap:not(.custom) input:checked + label, #added_scenario_list .check_wrap:not(.custom) input:checked + label, #tag_list_add .check_wrap:not(.custom) input:checked + label, #added_list .check_wrap:not(.custom) input:checked + label {
    background-color: var(--sysColor1);
}

.radio_wrap input:checked + label::before {
    background-color: transparent;
    border-color: var(--sysColor1);
}

.check_wrap:not(.custom) input:checked + label::before {
    opacity: 0.2;
}

.check_wrap.custom input:checked + label::before {
    background-color: var(--sysColor1);
}

.radio_wrap input:checked + label::after, .check_wrap input:checked + label::after {
    opacity: 1;
}

.radio_wrap .visually-hidden, .check_wrap .visually-hidden {
    position: absolute;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
}

/* use_check */

.use_check label::before, .use_check label::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    margin: auto;
    transition: 0.2s;
    border-radius: 50px;
}

.use_check label::before {
    width: 30px;
    height: 10px;
    background-color: var(--color3);
    right: 5px;
    opacity: 0.3;
}

.use_check label::after {
    width: 20px;
    height: 20px;
    background-color: var(--color3);
    right: 20px;
}

.use_check input:checked + label {
    color: var(--sysColor1);
}

    .use_check input:checked + label::before {
        background-color: var(--sysColor1);
    }

    .use_check input:checked + label::after {
        background-color: var(--sysColor1);
        right: 0;
    }


/********** custom **********/

.font_60 {
    font-size: 60px;
}

.font_70 {
    font-size: 70px;
}

.font_80 {
    font-size: 80px;
}

.font_90 {
    font-size: 90px;
}

.motion02s {
    transition: 0.2s;
}

.pd_15px {
    padding: 15px;
}

.pd_l-60px {
    padding-left: 60px;
}

.pd_l-70px {
    padding-left: 70px;
}

.pd_l-80px {
    padding-left: 80px;
}

.pd_l-90px {
    padding-left: 90px;
}

.width_15 {
    width: 15px;
}

.width_25 {
    width: 25px;
}

.width_35 {
    width: 35px;
}

.width_45 {
    width: 45px;
}

.width_60 {
    width: 60px;
}

.width_70 {
    width: 70px;
}

.width_80 {
    width: 80px;
}

.width_90 {
    width: 90px;
}

.width_250 {
    width: 250px;
}

.n_width_900 {
    width: calc(100% - 900px);
}

.n_width_800 {
    width: calc(100% - 800px);
}

.n_width_700 {
    width: calc(100% - 700px);
}

.n_width_600 {
    width: calc(100% - 600px);
}

.n_width_500 {
    width: calc(100% - 500px);
}

.n_width_400 {
    width: calc(100% - 400px);
}

.n_width_300 {
    width: calc(100% - 300px);
}

.n_width_250 {
    width: calc(100% - 250px);
}

.n_width_200 {
    width: calc(100% - 200px);
}

.n_width_150 {
    width: calc(100% - 150px);
}

.n_width_100 {
    width: calc(100% - 100px);
}

.n_width_90 {
    width: calc(100% - 90px);
}

.n_width_80 {
    width: calc(100% - 80px);
}

.n_width_70 {
    width: calc(100% - 70px);
}

.n_width_60 {
    width: calc(100% - 60px);
}

.n_width_50 {
    width: calc(100% - 50px);
}

.n_width_40 {
    width: calc(100% - 40px);
}

.n_width_30 {
    width: calc(100% - 30px);
}

.n_width_25 {
    width: calc(100% - 25px);
}

.n_width_20 {
    width: calc(100% - 20px);
}

.n_width_15 {
    width: calc(100% - 15px);
}

.n_width_10 {
    width: calc(100% - 10px);
}

.n_width_5 {
    width: calc(100% - 5px);
}

.width_15, .width_25, .width_30, .width_35, .width_45, .width_60, .width_70, .width_80, .width_90, .width_250, .n_width_900, .n_width_800, .n_width_700, .n_width_600, .n_width_500, .n_width_400, .n_width_300, .n_width_250, .n_width_200, .n_width_150, .n_width_100, .n_width_90, .n_width_80, .n_width_70, .n_width_60, .n_width_50, .n_width_40, .n_width_30, .n_width_25, .n_width_20, .n_width_15, .n_width_10, .n_width_5 {
    box-sizing: border-box;
}

.height_50 {
    height: 50px;
}

.height_100 {
    height: 100px;
}

.height_150 {
    height: 150px;
}

.height_200 {
    height: 200px;
}

.height_250 {
    height: 250px;
}

.height_300 {
    height: 300px;
}

.height_400 {
    height: 400px;
}

.height_500 {
    height: 500px;
}

.height_600 {
    height: 600px;
}

.height_100-max {
    max-height: 100px;
}

.height_200-max {
    max-height: 200px;
}

.height_300-max {
    max-height: 300px;
}

.height_400-max {
    max-height: 400px;
}

.height_500-max {
    max-height: 500px;
}

.over_auto {
    overflow: auto;
}

.over_auto-x {
    overflow-x: auto;
}

.over_auto-y {
    overflow-y: auto;
}

.tb_center {
    top: 0;
    bottom: 0;
    margin: auto;
}

.lr_center {
    left: 0;
    right: 0;
    margin: auto;
}

.top_0 {
    top: 0px;
}

.top_5 {
    top: 5px;
}

.top_10 {
    top: 10px;
}

.top_15 {
    top: 15px;
}

.top_20 {
    top: 20px;
}

.top_25 {
    top: 25px;
}

.top_30 {
    top: 30px;
}

.bottom_0 {
    bottom: 0px;
}

.bottom_5 {
    bottom: 5px;
}

.bottom_10 {
    bottom: 10px;
}

.bottom_15 {
    bottom: 15px;
}

.bottom_20 {
    bottom: 20px;
}

.bottom_25 {
    bottom: 25px;
}

.bottom_30 {
    bottom: 30px;
}

.left_0 {
    left: 0px;
}

.left_5 {
    left: 5px;
}

.left_10 {
    left: 10px;
}

.left_15 {
    left: 15px;
}

.left_20 {
    left: 20px;
}

.left_25 {
    left: 25px;
}

.left_30 {
    left: 30px;
}

.right_0 {
    right: 0px;
}

.right_5 {
    right: 5px;
}

.right_10 {
    right: 10px;
}

.right_15 {
    right: 15px;
}

.right_20 {
    right: 20px;
}

.right_25 {
    right: 25px;
}

.right_30 {
    right: 30px;
}

.rotate_-90 {
    transform: rotate(-90deg);
}

.rotate_-45 {
    transform: rotate(-45deg);
}

.rotate_45 {
    transform: rotate(45deg);
}

.rotate_90 {
    transform: rotate(90deg);
}

.rotate_180 {
    transform: rotate(180deg);
}

.border_rad100 {
    border-radius: 100px !important;
}

.pointer_none {
    pointer-events: none;
}

.cursor_p {
    cursor: pointer;
}

.shadow-s {
    box-shadow: 0 0 10px rgba(0,0,0,0.08);
}


/********** all **********/

*:focus {
    outline: none;
}

html {
    font-size: 100%;
}

body {
    letter-spacing: 0;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    background-color: var(--base);
}

#wrap {
    position: relative;
    min-height: 100vh;
    transition: opacity 0.2s;
}

#copyright {
    z-index: -1;
}

.s_icon {
    pointer-events: none;
}

.delete_active {
    background-color: #faeaee;
}

/* copy */

.copied {
    position: relative;
}

    .copied::before {
        position: absolute;
        display: block;
        padding: 5px 0;
        font-size: 12px;
        font-weight: normal;
        border-radius: 5px;
        left: 50%;
        bottom: calc(100% + 5px);
        transform: translateX(-50%);
        background-color: var(--color3);
        color: #fff;
        transition: 0.2s;
    }

#questionnaire .copied::before {
    content: "URLをコピーしました";
    width: 140px;
}

#route .copied::before {
    content: "アドレスをコピーしました";
    width: 160px;
}

/* section type */
.sect_type_wrap.d_flex {
    column-gap: 30px;
    row-gap: 30px;
    align-items: stretch
}

.sect_column2, .sect_column3, .sect_column4 {
    box-sizing: border-box;
}

.sect_column2 {
    width: calc((100% / 2) - (30px / 2));
}

.sect_column3 {
    width: calc((100% / 3) - ((30px * 2) / 3));
}

.sect_column4 {
    width: calc((100% / 4) - ((30px * 3) / 4));
}

.sect_type1 {
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.08);
}

.sect_type2 {
    padding: 50px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.08);
}

/* box type */
.box_type_wrap.d_flex {
    column-gap: 10px;
    row-gap: 10px;
    align-items: stretch
}

.box_column2, .box_column3, .box_column4 {
    box-sizing: border-box;
}

.box_column2 {
    width: calc((100% / 2) - (10px / 2));
}

.box_column3 {
    width: calc((100% / 3) - ((10px * 2) / 3));
}

.box_column4 {
    width: calc((100% / 4) - ((10px * 3) / 4));
}

/* pop up */

.pop .pop_wrap {
    transition: transform 0.2s;
    transform: translateY(-5px);
    top: 100%;
    left: 0;
}

    .pop .pop_wrap.active {
        transform: translateY(0);
    }

/* circle before */

.circle_before {
    position: relative;
    padding-left: 60px;
}

    .circle_before::before {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: currentColor;
        top: 0;
        bottom: 0;
        left: 20px;
        margin: auto;
    }

/* circle2 before */

.circle2_before {
    position: relative;
    padding-left: 25px;
}

    .circle2_before::before {
        position: absolute;
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: currentColor;
        opacity: 0.2;
        top: 0;
        bottom: 0;
        left: 10px;
        margin: auto;
    }

/* line before */

.line_before {
    position: relative;
    padding-left: 20px;
}

    .line_before::before {
        position: absolute;
        content: "";
        width: 4px;
        border-radius: 4px;
        background-color: currentColor;
        top: 8px;
        bottom: 8px;
        left: 8px;
    }

/* line2 before */

.line2_before {
    position: relative;
    padding-left: 20px;
}

    .line2_before::before {
        position: absolute;
        content: "";
        width: 2px;
        background-color: currentColor;
        top: 8px;
        bottom: 8px;
        left: 8px;
    }

/* cate title */

.title_line {
    position: relative
}

    .title_line::before {
        position: absolute;
        content: "";
        width: 5px;
        height: 100%;
        background-color: currentColor;
        top: 0;
        left: -30px;
        border-radius: 0 5px 5px 0;
    }

/* modal */

.modal .modal_box {
    z-index: 10;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    pointer-events: none;
    transition: opacity 0.2s;
}

    .modal .modal_box.active {
        opacity: 1;
        pointer-events: auto;
    }

    .modal .modal_box::-webkit-scrollbar {
        display: none;
    }

    .modal .modal_box .modal_close {
        cursor: pointer;
        top: 10px;
        right: 10px;
    }

.tag_list_add_wrap .modal_item, .scenario_list_add_wrap .modal_item {
    height: calc(100% - 100px);
    min-height: 300px;
}

/* result */

.result_wrap .result_box:last-child {
    border-bottom: none;
}

/* over txt */

.over_txt2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.over_txt3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.over_txt4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

/* border right custom */

.border_r_c {
    position: relative;
}

    .border_r_c::before {
        position: absolute;
        content: "";
        width: 1px;
        height: 40px;
        background-color: var(--color4);
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

/* scroll bar */

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 20px;
    scrollbar-width: thin;
    border: 3px solid transparent;
    background-color: var(--color3);
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--color1);
    }

/* c_select */

.c_select .c_select_thumbnail[color-data="#fff"] {
    color: var(--color1);
    box-shadow: 0 0 1px var(--color3) inset;
}

.c_select .c_select_wrap {
    left: 50%;
    top: calc(100% + 10px);
    transform: translate(-50%, -5px);
    z-index: 1;
    transition: transform 0.2s;
}

    .c_select .c_select_wrap.active {
        transform: translate(-50%, 0);
    }

.c_select .c_select_box[color-data="#fff"] .c_select_color {
    box-shadow: 0 0 1px var(--color3) inset;
}

.c_select .c_select_box {
    transition-property: background-color;
}

/* tag_add_wrap icon */

.tag_add_wrap .tag_add_title::before {
    position: absolute;
    content: "タグ付けの選択肢は\Aタグ一覧より登録してください";
    display: block;
    padding: 5px 0;
    font-size: 12px;
    font-weight: normal;
    border-radius: 5px;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    background-color: var(--color3);
    color: #fff;
    transition: opacity 0.2s;
    white-space: pre;
    width: 190px;
    z-index: 1;
    text-align: center;
    opacity: 0;
}

.tag_add_wrap .tag_add_title::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: solid 5px transparent;
    border-bottom: solid 10px var(--color3);
    border-right: solid 5px transparent;
    left: 50%;
    top: calc(100% + 1px);
    transform: translateX(-50%);
    transition: opacity 0.2s;
    opacity: 0;
}

.tag_add_wrap .tag_add_title:hover::before, .tag_add_wrap .tag_add_title:hover::after {
    opacity: 1;
}


/********** header **********/

#header {
    top: 0;
    left: 0;
    z-index: 1;
    height: 80px;
}

    #header #user .pop_item .s_icon {
        top: 0;
        bottom: 0;
        right: 10px;
        margin: auto;
        transform: rotate(90deg);
    }

#side_nav {
    top: 0;
    left: 0;
}

    #side_nav li.active a {
        color: var(--sysColor1);
    }

        #side_nav li.active a::before {
            content: "";
            position: absolute;
            width: 5px;
            height: 80%;
            background-color: currentColor;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 5px;
        }


/********** index **********/

#top_sales .sect_box:last-child, #questionnairedetail .sect_box:last-child, #questionnaireresult .sect_box:last-child, #form .sect_box:last-child {
    border-bottom: none;
}

#top_news .sect_box:last-child, #form .sect_box:last-child {
    margin-bottom: 0;
}

#top_transition .cate_list li.active {
    border-color: var(--sysColor4);
    background-color: var(--sysColor4);
    color: #fff;
}

/*---------------------------------------------------------------------------*/
/*1300px resize*/
@media screen and (max-width: 1300px) {
    .d_none_re {
        display: none;
    }

    .d_block_re {
        display: block;
    }

    .d_inline_re {
        display: inline;
    }

    .grid_6_re {
        width: 50% !important;
        box-sizing: border-box;
    }

    .grid_12_re {
        width: 100% !important;
        box-sizing: border-box;
    }

    .n_width_100_re {
        width: calc(100% - 100px) !important;
        box-sizing: border-box;
    }

    .width_100_re {
        width: 100px !important;
        box-sizing: border-box;
    }

    .border_rad10_re {
        border-radius: 10px !important;
    }

    .mg_b-10px_re {
        margin-bottom: 10px;
    }

    .pd_clear_re {
        padding: 0;
    }

    .border_clear_re {
        border: none;
    }

    .border_so1-b_re {
        border-bottom: solid 1px
    }

        .border_so1-b_re.border_color4 {
            border-color: var(--color4);
        }
}