/* 
=======================================================
GENERAL
=======================================================
*/

* {
    line-height: 1.5;
}

:root {
    /* カラー */
    --white: #FFFFFF;
    --main_orange: #DC762A;
    --sub_orange: #EACC90;
    --bg_green: #FFF9EB;
    --orange: #F46C00;
    --yellow: #FFF003;

    /* 各要素の高さ */
    --header_hight_pc: 8%;
    --footer_height_pc: 15%;

    /* 各デバイス幅 */
    --width_max: 1400px;
    --width_pc: 1200px;

    --box_radius: 0.5rem;
    --pc_padding: 3rem;
    --sp_padding: 1.5rem;
}

/* PC:100vh表示 */
body {
    font-size: 1rem;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    margin: auto;
    font-family: 'Zen Old Mincho', serif;
    font-family: "Noto Sans JP", sans-serif;
}

/* TAB以下: 100%表示 */
@media screen and (max-width: 768px) {
    body {
        height: 100%;
        width: 100%;
        max-width: 100%;
        margin: auto;
    }
}

form {
    width: 100%;
    margin: 0 auto;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

a {
    color: #000000;
    text-decoration: none;
}

img {
    object-fit: contain;
}

ul,
ol {
    list-style: none;
}

input[type="radio"],
input[type="checkbox"],
input[type="tel"],
input[type="email"],
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border: none;
}

/*
装飾
=======================================================
*/
.line_height_2 {
    line-height: 2;
    vertical-align: middle;
}

.text-center {
    text-align: center;
}

.bold {
    font-weight: bold;
}

.large {
    font-size: large;
}

.largr {
    font-size: larger;
}

.x-large {
    font-size: x-large;
}

.xx-large {
    font-size: xx-large;
    line-height: 0;
}

.xxx-large {
    font-size: 2.5rem;
}

@media screen and (max-width: 480px) {
    .xxx-large {
        font-size: 1.5rem;
    }
}


.xxxx-large {
    font-size: 3rem;
    line-height: 0;
    font-feature-settings: "palt";
}

.orange {
    color: var(--orange);
}

.yellow {
    color: var(--yellow);
}

.white {
    color: white;
}

.highlight_yellow_50 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, rgba(255, 240, 0, 0.4) 40% 90%, transparent 90%);
}

.edging_orange {
    color: var(--yellow);
    text-shadow: 1px 1px 0 var(--orange), -1px -1px 0 var(--orange),
        -1px 1px 0 var(--orange), 1px -1px 0 var(--orange),
        1px 0 0 var(--orange), -1px 0 0 var(--orange),
        0 1px 0 var(--orange), 0 -1px 0 var(--orange);
}

/*
PC、SPの非表示
=======================================================
*/

/* max - 画面サイズが◯◯px以下に適用 */
/* min - 画面サイズが◯◯px以上に適用 */
@media screen and (min-width: 1440px) {
    .over_1440 {
        display: block;
    }
}

@media screen and (max-width: 1200px) {
    .under_1200 {
        display: none;
    }
}

/* 
=======================================================
COMMON
=======================================================
Width 設定：一律1000px
wrapは中の要素、wrap抜きのクラス名で全面背景色の設定可能
=======================================================
*/
.confirm_wrap,
.thanks_wrap,
.recommend_wrap,
.company_wrap,
.privacy_wrap {
    max-width: var(--width_pc);
    margin: 0 auto;
}

@media screen and (max-width: 1000px) {
    .confirm_wrap,
    .thanks_wrap,
    .recommend_wrap,
    .company_wrap,
    .privacy_wrap {
        margin: 0 1rem;
    }
}


/* ============================================== */
/* HEADER : 全体の8% footer と合わせて20% */
/* ============================================== */
/* 共通：背景 */
header {
    height: var(--header_hight_pc);
    background: var(--white);
    padding: 0.5rem 1rem;
}

/* PC：ロゴ左寄せ*/
header a {
    display: block;
    margin: 0 auto;
    height: 100%;
    max-width: var(--width_max);
}

/* LAPTOP : width1000px以内にまとめる */
/* ============================================== */
@media screen and (max-width: 1440px) {
    /* PC：ロゴ左寄せ*/
    header a {
        max-width: var(--width_pc);
    }

}

/* TAB以下：ロゴ中央寄せ*/
@media screen and (max-width: 768px) {
    header a {
        text-align: center;
        width: fit-content
    }
}

header img {
    height: 100%;
    width: fit-content;
}

/* ============================================== */
/* MAIN : 
/* ============================================== */
main {
    height: calc(100% - (var(--header_hight_pc) + var(--footer_height_pc)));
}

main.confirm_main{
    height: 100%;
}

/* TAB以下 ：100%表記, 100vh内に収めない*/
@media screen and (max-width: 768px) {
    main{
        height: fit-content;
    }

    main.thanks_main{
        height: calc(100% - (var(--header_hight_pc) + var(--footer_height_pc)));
    }

}

/* ============================================== */
/* 帯 : 
/* ============================================== */
/* 共通: 帯 メイン内の高さ10% */
/* ---------------------------------------------- */
main .balloon {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--main_orange);
    height: 10%;
    width: 100%;
}

/* PC: 帯文字（PC） */
/* ---------------------------------------------- */
main .balloon h1 {
    text-align: center;
    margin: 0 auto;
    padding: 1rem 0;
    color: var(--white);
    font-size: x-large;
    line-height: 1.25;
}

/* SP: 帯文字 */
/* ---------------------------------------------- */
@media screen and (max-width: 480px) {
    main .balloon h1 {
        font-size: large;
    }
}

/* 帯文字吹き出し */
/* ---------------------------------------------- */
main .balloon:before {
    position: absolute;
    content: "";
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border: 1rem solid transparent;
    border-top: 20px solid var(--main_orange);
    z-index: 111;
}

/* ============================================== */
/* 3コラム 
/* ============================================== */
/* PC 背景: メインの90%*/
/* ============================================== */
main .three_columns {
    height: 90%;
    background-image: url(../img/1440x580_FV.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* TAB以下 : 横並びにする */
/* ============================================== */
@media screen and (max-width: 768px) {
    main .three_columns {
        height: fit-content;
    }
}

/* 要素をwidth_pc内にまとめる */
main .three_columns .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 100%;
    width: 100%;
    max-width: var(--width_max);
    margin: 0 auto;
}

/* LAPTOP : width1000px以内にまとめる */
/* ============================================== */
@media screen and (max-width: 1440px) {

    /* 要素をwidth_pc内にまとめる */
    main .three_columns .wrap {
        max-width: var(--width_pc)
    }
}


/* TAB以下 : 縦並びにする */
/* ============================================== */
@media screen and (max-width: 1000px) {

    /* 要素をwidth_pc内にまとめる */
    main .three_columns .wrap {
        padding: 0 1rem;
    }

}

/* TAB以下 : 縦並びにする */
/* ============================================== */
@media screen and (max-width: 768px) {

    main .three_columns .wrap {
        flex-direction: column;
        max-width: 100%;
        padding: 1rem;
        gap: 0;
    }
}

/* 共通：各コラムをdisplay */
main .column {
    display: flex;
    flex: 1;
}

/* ============================================== */
/* 自己紹介（左）
/* ============================================== */
/* PC：左 30% */
/* ---------------------------------------------- */
.intro.column {
    flex-direction: column;
    justify-content: space-between;
    width: 30%;
    height: 100%;
    padding-top: 3rem;
}

/* TAB以下：左 */
/* ---------------------------------------------- */
@media screen and (max-width: 768px) {
    .intro.column {
        flex-direction: row-reverse;
        align-items: center;
        width: 100%;
        padding-top: 0;
    }
}

/* TAB以下：左 */
/* ---------------------------------------------- */
@media screen and (max-width: 480px) {
    .intro.column {
        align-items: flex-end;
    }
}

/* 紹介文全体囲み */
.intro.column .box {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
    position: relative;
    flex-direction: column;
    padding: 1rem;
    gap: 0.5rem;
    border-radius: var(--box_radius);
    background-color: var(--white);
    height: fit-content;
}

/* 紹介文全体囲み */
.intro.column .box::before {
    position: absolute;
    content: "";
    width: 3rem;
    height: 3rem;
    background: white;
    clip-path: polygon(35% 0, 0% 100%, 100% 0);
    bottom: -1.9rem;
    right: 2rem;
}


/* 紹介文全体囲み(SP) */
/* ---------------------------------------------- */
@media screen and (max-width: 480px) {
    .intro.column .box {
        padding: 0.5rem;
        margin-bottom: 1rem;
    }

    /* 紹介文全体囲み */
    .intro.column .box::before {
        width: 2rem;
        height: 2rem;
        clip-path: polygon(100% 20%, 0 70%, 100% 80%);
        top: 60%;
        /* transform: translateY(-50%); */
        left: -1.9rem;
    }
}

/* 名前（TAB） */
/* ---------------------------------------------- */
@media screen and (max-width: 480px) {

    .intro.column .box .name_area {
        flex-direction: row;
        gap: 0.5rem;
        width: 100%;
        padding-bottom: 0.5rem;
        border-right: 0;
        border-bottom: 0.1px solid var(--main_orange);
    }
}

/* 代表名前（全体） */
/* ---------------------------------------------- */
.intro.column .box .name_area .name {
    font-weight: bold;
    font-size: larger;
    color: var(--main_orange);
}

/* 紹介文（全体） */
/* ---------------------------------------------- */
.intro.column .box .intro_area {
    gap: 0.1rem;
    font-size: small;
}

/* 人物画像（PC） */
/* ---------------------------------------------- */
.intro.column .person {
    display: flex;
    align-items: flex-end;
    height: 65%;
    width: 100%;
}

.intro.column .person img {
    height: fit-content;
    vertical-align: bottom;
}

/* 人物画像(SP) */
/* ---------------------------------------------- */
@media screen and (max-width: 768px) {
    .intro.column .person {
        width: 40%;
    }
}

/* アンケート */
/* ====================================================== */
/* PC：アンケート全体　40% */
/* ---------------------------------------------- */
.questionnaire {
    flex-direction: column;
    gap: 0.5rem;
    width: 40%;
    height: 100%;
    padding: 3rem 0;
}

/* TAB以下：アンケート全体　100% */
/* ---------------------------------------------- */
@media screen and (max-width: 768px) {
    .questionnaire {
        width: 100%;
        gap: 0;
        margin: 0 auto;
        padding-top: 0;
    }
}

@media screen and (max-width: 480px) {
    .questionnaire {
        padding-bottom: 1.5rem;
    }
}


/* STEP(PC) : HEIGHT 10%*/
.questionnaire ol {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10%;
    z-index: 3;
    width: 100%;
}

/* STEP(TAB)  */
/* ---------------------------------------------- */
@media screen and (max-width: 1279px) {
    .questionnaire ol {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 10%;
        max-width: var(--width_tab);
        z-index: 3;
        margin: 0 auto;
    }
}

/* 各ステップ（PC） */
/* ---------------------------------------------- */
.questionnaire .form-step_num {
    position: relative;
    display: flex;
    width: 25%;
    height: 30px;
    font-size: small;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 3px 0;
    line-height: 1.5;
    background: var(--sub_orange);
    color: #fff;
    cursor: pointer;
}

@media screen and (max-width: 480px) {

    .questionnaire .form-step_num {
        font-size: x-small;
        font-weight: bold;
    }
    
}


/* 各ステップ（TAB） */
/* ---------------------------------------------- */
@media screen and (max-width: 1279px) {
    .questionnaire .form-step_num_sp {
        position: relative;
        width: 25%;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 1rem 0;
        line-height: 1.5;
        background: var(--sub_orange);
        color: #fff;
        cursor: pointer;
    }

}

/* 各ステップの三角（PC） */
/* ---------------------------------------------- */
.questionnaire .form-step_num:not(:last-child)::before,
.questionnaire .form-step_num:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    border: 15px solid transparent;
    border-left: 10px solid var(--sub_orange);
    margin: auto;
}

/* 各ステップの三角（TAB） */
/* ---------------------------------------------- */
@media screen and (max-width: 1279px) {

    .questionnaire .form-step_num_sp:not(:last-child)::before,
    .questionnaire .form-step_num_sp:not(:last-child)::after {
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: 100%;
        content: '';
        border: 1.7rem solid transparent;
        border-left: 10px solid var(--sub_orange);
        margin: auto;
    }
}

.questionnaire .form-step_num:not(:last-child)::before {
    margin-left: 1px;
    border-left-color: #FFF;
}

.questionnaire .form-step_num.is-active {
    z-index: 1;
    background: var(--main_orange);
    color: #FFF;
}

.questionnaire .form-step_num.is-active:not(:last-child)::after {
    border-left-color: var(--main_orange);
}

.questionnaire .form-step_num.is-active:not(:last-child)::before {
    border-left: none;
}

/* sp用 */
/* ====================================================== */

.questionnaire .form-step_num_sp:not(:last-child)::before {
    margin-left: 1px;
    border-left-color: #FFF;
}

.questionnaire .form-step_num_sp.is-active {
    z-index: 1;
    background: var(--main_orange);
    color: #FFF;
}

.questionnaire .form-step_num_sp.is-active:not(:last-child)::after {
    border-left-color: var(--main_orange);
}

.questionnaire .form-step_num_sp.is-active:not(:last-child)::before {
    border-left: none;
}

/* フォーム部分 : アンケートの90% */
.questionnaire form {
    display: flex;
    flex-direction: column;
    height: 90%;
    background: var(--bg_green);
}

/* 問共通(PC) */
/* ====================================================== */
.questionnaire .question {
    display: flex;
    flex-direction: column;
    background: var(--bg_green);
    height: 100%;
    width: 100%;
    border-radius: var(--box_radius);
    gap: 0.5rem;
    padding: 1rem;
}

/* 問見出し　共通 : 問内の20% */
.questionnaire .question h2,
.remodal h2 {
    line-height: 1.5;
    text-align: center;
    font-size: large;
}

/* 選択肢部分 共通 : 問内の90%*/
.questionnaire .question .choice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 85%;
    gap: 1rem;
}

/* ボタン 共通 : 問内の10% */
.pageNation,
.submit {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.pageNation {
    height: 15%;
    gap: 1rem;
}

.pageNation img {
    height: 2rem;
}

@media screen and (max-width: 480px) {

    /* PC : ボタン内のイメージ */
    .pageNation img {
        height: 32px;
    }
}

/* Q1「次へ」ボタン右寄せ　 */
.questionnaire .q1.question .pageNation {
    justify-content: flex-end;
}

/*「次へ」「戻る」ボタンのデザイン */
.questionnaire .question .pageNation .next,
.questionnaire .question .pageNation .prev {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--orange);
    color: var(--white);
    border-radius: var(--box_radius);
    padding: 1rem;
    gap: 0.5rem;
    width: fit-content;
    cursor: pointer;
}

/* 設問デザイン */
/* ====================================================== */
/* 見出しを含んだ各設問 */
.questionnaire .question .choices_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 0.75rem;
}

/* 設問だけの囲み */
.questionnaire .question .choice_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.5rem;
}

.questionnaire .question .choice_wrap.address {
    align-items: flex-start;
}

.questionnaire .q1.question .choice_wrap {
    height: 100%;
}

/* 2コラムの場合は横並び */
.questionnaire .question .choice_wrap.two_col {
    flex-direction: row;
}

/* 設問だけの囲み */
.questionnaire .question .choice_licenses {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.5rem;
}

/* Q2 住所部分のinput */
/* ====================================================== */
.questionnaire .question .choice_wrap.address .input,
.questionnaire .question .choice_wrap.address input {
    width: 100%;
}

.questionnaire .question .choice_wrap.address h2{
    width: fit-content;
    margin: 0 auto;
}

.questionnaire .question .choice_wrap.address input {
    padding: 0.25rem;
}

.questionnaire .question .choice_wrap.address .input label{
    font-weight: bold;
}

.capacitor {
    display: flex;
    width: 100%;
    gap: 1rem;
}

.capacitor div{
    flex: 1;
}

.questionnaire .question .choice_wrap.address .capacitor input{
    width: 0;
}



/* ラジオボタン(PC) */
/* ====================================================== */
form .option {
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--main_orange) solid 2px;
    border-radius: var(--box_radius);
    background: var(--white);
    padding: 0.5rem 1rem;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 480px) {
    form .option {
        padding: 0.5rem;
    }
}

form .option .label {
    width: 70%;
}

form .option .icon {
    height: 60px;
}

form .option .icon img {
    height: 100%;
    margin: 0 auto;
}

/* Q1, 3のみheight max 20% */
form .q1 .option {
    max-height: 30%;
}

form .q3 .age.option {
    max-height: 50%;
}

form .option:hover,
form .option:active {
    background-color: var(--sub_orange);
}

/* ラジオボタン選択時のデザイン */
form .radio.active {
    color: var(--white);
    background: var(--main_orange);
}

form .select_box.active {
    background-color: #FF8F24;
    /* 例として薄いグレーの背景色を設定 */
}

/* リンク選択時のデザイン */
.remodal-open.option.active {
    color: var(--white);
    background: var(--main_orange);
}

/* チェックボックス囲み */
/* ====================================================== */
form .checkbox-group {
    width: 100%;
    height: 100%;
}

/* チェックボックスの装飾 */
form .checkbox-group label {
    position: relative;
    padding-left: 1.5rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

form .checkbox-group label::before {
    position: absolute;
    background: #fff;
    border: 1px solid var(--main_orange);
    border-radius: 3px;
    content: '';
    display: block;
    height: 16px;
    margin-top: -8px;
    top: 50%;
    width: 16px;
}

form .checkbox-group label::after {
    border-right: 6px solid var(--main_orange);
    border-bottom: 3px solid var(--main_orange);
    content: '';
    display: block;
    height: 20px;
    left: 5px;
    margin-top: -16px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 9px;
}

/* チェックボックス選択時のデザイン */
form .checkbox-group input[type=checkbox]:checked+label::before {
    border-color: #666;
}

form .checkbox-group input[type=checkbox]:checked+label::after {
    opacity: 1;
}

/* セレクトボタンデザイン */
/* ====================================================== */
form .select_box {
    position: relative;
    text-align-last: center;
    -moz-text-align-last: center;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    background: transparent;
}

/* モーダル */
/* ====================================================== */

.remodal .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.remodal .checkbox-item {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background-color: var(--bg_green);
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.remodal .checkbox-item input[type="checkbox"] {
    display: none;
}

.remodal .checkbox-item label {
    background-color: var(--bg_green);
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

/* SP：ボタン内のイメージ */
@media screen and (max-width: 480px) {
    .remodal .checkbox-item label {
        font-size: smaller;
    }
}

.remodal .checkbox-item.active,
.remodal .checkbox-item input[type="checkbox"]:checked+label {
    background-color: var(--main_orange);
    color: #fff;
}

.remodal .checkbox-item label:before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    margin-right: 10px;
}

.remodal .checkbox-item input[type="checkbox"]:checked+label:before {
    background-color: var(--main_orange);
    border-color: var(--main_orange);
}

/* プルリスト */
/* ====================================================== */
/* 矢印▼ */
form .pull_list {
    position: relative;
}

.form .pull_list::after {
    display: block;
    content: " ";
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding-right: 2rem;
    background: url(../img/arrow.png) 0 0 no-repeat;
    background-size: contain;
    pointer-events: none;
}

/* セレクトオプション選択時に背景の色を変える */
form .pull_list.option.active {
    background: var(--main_orange);
    color: var(--white);
}

/* type=tel, type=emailのデザイン */
/* ====================================================== */
form .hand_putin {
    width: 100%;
    padding: 1rem;
    background: var(--white);
    border-radius: var(--box_radius);
    border: 1px solid var(--sub_orange);
}

form .hand_putin input {
    background: transparent;
    padding: 0.5rem 1rem;
}

/* SUBMIT デザイン */
/* ====================================================== */
.questionnaire .question .submit {
    height: 20%;
    background: var(--main_orange);
    color: var(--white);
    border-radius: var(--box_radius);
    justify-content: center;
    font-weight: bold;
    font-size: x-large;
}

/* TAB以下：ボタン内のイメージ */
@media screen and (max-width: 1279px) {

    .questionnaire .question .submit {
        height: 100%;
        width: 90%;
        padding: 1.5rem 0;
        margin: 0 auto;
        background: var(--main_orange);
        color: var(--white);
        border-radius: var(--box_radius);
        font-weight: bold;
        justify-content: center;
        font-size: x-large;
    }

}

/* SP：ボタン内のイメージ */
@media screen and (max-width: 480px) {
    .questionnaire .question .submit {
        width: 100%;
        margin: 0;
    }

}

/* スライダー設定 */
/* ====================================================== */
/* slick-setting */
.questionnaire .slick01 {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /* スライダーの幅を指定*/
    list-style: none;
}

.questionnaire .slick01 .slick-track {
    height: 100%;
    width: 100%;
}

/* TAB以下：質問部分を中央寄せ */
@media screen and (max-width: 1279px) {

    .questionnaire .slick01 .slick-track {
        display: flex;
        align-items: center;
        height: 100%;
    }
}

.questionnaire .slick01 .slick-list {
    height: 100%;
    width: 100%;
}

/* スライダー設定 for sp */
/* ====================================================== */
/* slick-setting */
.questionnaire .slick02 {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /* スライダーの幅を指定*/
    list-style: none;
}

.questionnaire .slick02 .slick-track {
    height: 100%;
    width: 100%;
}

/* TAB以下：質問部分を中央寄せ */
@media screen and (max-width: 1279px) {

    .questionnaire .slick02 .slick-track {
        display: flex;
        align-items: center;
        height: 100%;
    }
}

.questionnaire .slick02 .slick-list {
    height: 100%;
    width: 100%;
}

/* 3 ポイント */
/* ====================================================== */
/* 3ポイント全体（PC） */
/* ---------------------------------------------- */
main .point.column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 100%;
    gap: 1.5rem;
}


@media screen and (max-width: 480px) {
    main .point.column {
        width: 100%;
    }
}

.above {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media screen and (max-width: 480px) {
    .above {
        gap: 1.5rem;
    }
}

.orange_circle {
    background: var(--orange);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 128rem;
    text-align: center;
    width: fit-content;
    font-size: x-large;
    font-weight: 500;
}

.yellow_dot {
    background-image: radial-gradient(circle at center, var(--yellow) 20%, transparent 20%);
    background-position: top left;
    background-repeat: repeat-x;
    background-size: 1em 0.3em;
    padding-top: 0.3rem;
}

.shadow {
    text-shadow: 2px 2px 5px black;
    line-height: 1.2;
}

/* 3ポイント全体（PC） */
/* ---------------------------------------------- */
.three_appeal
{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.three_appeal li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--orange);
    background: white;
    border: 0.2rem solid var(--orange);
    border-radius: 4px;
    padding: 0.25rem;
    min-height: 50px;
}

.three_appeal li img {
    height: 24px;
    width: 24px;
}


/* 
*******************************************************
=======================================================
confirm.html
送信内容確認画面
=======================================================
*******************************************************
*/
/* 
=======================================================
CONFIRM
=======================================================
*/
/* 全体にかかる設定 */
/* ---------------------------------- */
/* 背景 */
.confirm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background-image: url(../img/1440x580_FV.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 480px) {
    .confirm {
    }
}

.confirm .confirm_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    background: white;
}

@media screen and (max-width: 480px) {
    .confirm .confirm_wrap {
    }
}

/* タイトル */
/* ---------------------------------- */
.confirm h2.deco {
    color: var(--main_orange);
    text-align: center;
    width: 100%;
    border-bottom: 1px solid orangered;
}

/* 確認依頼 */
/* ---------------------------------- */
.confirm .caution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: fit-content;
    background-color: var(--bg_green);
    padding: 1rem;
    background-image:
        linear-gradient(-45deg, #f9f871 0.5rem, transparent 0),
        linear-gradient(135deg, #f9f871 0.5rem, transparent 0);
}

@media screen and (max-width: 480px) {
    .confirm .caution {
        flex-direction: column;
        padding: 0.5rem;
        gap: 0.5rem;
    }
}

/* アイコン */
.confirm .caution .icon {
    max-width: 80px;
}

@media screen and (max-width: 480px) {
    .confirm .caution .icon {
        max-width: 48px;
    }
}

.confirm .caution .icon img {
    width: 100%;
}

/* フロー図 */
/* ---------------------------------- */
ol.flow {
    display: flex;
    width: 100%;
    max-width: 70%;
    gap: 1.5rem;
    margin: 0 auto;
}

@media screen and (max-width: 480px) {
    ol.flow {
        max-width: unset;
    }
}

ol.flow li {
    position: relative;
    text-align: center;
    font-size: larger;
    width: calc(100% / 3 - -1.5rem);
    padding: 0.5rem 1rem;
    background-color: var(--yellow);
}

@media screen and (max-width: 480px) {
    ol.flow li {
        font-size: medium;
        padding: 0.25rem;
    }
}

ol.flow li::before {
    position: absolute;
    content: "";
    display: inline-block;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    top: 0;
    right: calc(-1rem + 0.5px);
    width: 1rem;
    height: 100%;
    background-color: var(--yellow);
}

ol.flow li.current {
    font-weight: bold;
    color: var(--white);
    background-color: var(--orange);
}

ol.flow li.current::before {
    background-color: var(--orange);
}

/* 最後のステップからは三角を消す */
ol.flow li:last-child:before {
    display: none;
}

/* 入力内容 */
/* ---------------------------------- */
.confirm .data_entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

dl {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--main_orange);
    border-bottom: none;
    vertical-align: middle;
}

/* 項目名 */
dl dt {
    font-weight: bold;
    color: white;
    background: var(--orange);
    padding: 1rem;
    width: 30%;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    vertical-align: middle;
}

dl dt:last-of-type {
    border-bottom: 1px solid var(--main_orange);
}


@media screen and (max-width: 480px) {
    dl dt {
        width: 40%;
        padding: 0.25rem;
    }
}

/* 入力内容 */
dl dd {
    color: var(--main_grey);
    background: white;
    padding: 1rem;
    width: 70%;
    border-bottom: 1px solid var(--orange);
    vertical-align: middle;
}

@media screen and (max-width: 480px) {
    dl dd {
        width: 60%;
        padding: var(--padding_sp);
    }
}

dl dd span {
    display: block
}

/* ボタン */
/* ---------------------------------- */
.confirm_btn {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.confirm_btn .back_btn,
.confirm_btn .send_btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    height: fit-content;
    min-width: 20%;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: larger;
    font-weight: bolder;
}

@media screen and (max-width: 480px) {

    .confirm_btn .back_btn,
    .confirm_btn .send_btn {
        width: fit-content;
        min-width: unset;
        padding: 0.5rem 1rem;
    }
}

.confirm_btn .back_btn::before,
.confirm_btn .send_btn::before {
    content: '';
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border-radius: calc(0.5rem + 2px);
    position: absolute;
    top: -3px;
    left: -3px;
}

/* 戻る */
.confirm_btn .back_btn {
    background-color: var(--sub_orange);
}

@media screen and (max-width: 480px) {

    .confirm_btn .back_btn {
        padding-left: 2rem;
    }
}

.confirm_btn .back_btn::before {
    border: 1px solid var(--sub_orange);
}

/* 送信する */
.confirm_btn .send_btn {
    background-color: var(--main_orange);
}

@media screen and (max-width: 480px) {

    .confirm_btn .send_btn {
        padding-right: 2rem;
    }
}

.confirm_btn .send_btn::before {
    border: 1px solid var(--main_orange);
}

/* 注意書き */
/* ---------------------------------- */
.note p {
    font-size: x-small;
}

/* 
*******************************************************
=======================================================
thanks.html
送信完了
=======================================================
*******************************************************
*/
/* 
=======================================================
THANKS
=======================================================
*/
/* 全体にかかる設定 */
/* ---------------------------------- */
/* 背景 */
.thanks {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background-image: url(../img/1440x580_FV.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 480px) {
    .thanks {
    }
}

.thanks .thanks_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    background: white;
}

@media screen and (max-width: 480px) {
    .thanks .thanks_wrap {
    }
}

/* タイトル */
/* ---------------------------------- */
.thanks h2.deco {
    color: var(--main_grey);
}

/* 本文 */
.thanks .text {
    background-color: var(--bg_green);
    padding:1rem;
}

@media screen and (max-width: 480px) {
    .thanks .text {
        padding: 0.5rem;
    }
}

/* 


/* FOOTER : 全体の12% */
/* ============================================== */
footer {
    height: var(--footer_height_pc);
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: white;
    background: var(--main_orange);
}

/* FOOTER（SP） */
/* ---------------------------------------------- */
@media screen and (max-width: 480px) {
    footer {
        width: 100%;
        height: fit-content;
    }
}

footer ul {
    display: flex;
    gap: 1rem;
    max-width: var(--width_max);
    margin: 0 auto;
}


/* FOOTER（SP） */
/* ---------------------------------------------- */
@media screen and (max-width: 480px) {
    footer ul {
        flex-wrap: wrap;
        gap: 0.5rem;
        text-align: center;
    }

    footer ul li {
        width: calc(100% / 2 - 0.25rem);
    }
}

footer ul li a {
    color: var(--white);
}