@charset "shift-jis";
:root {
    --space-minus1: -1rem;  /* -16px   */
    --space-0: 0;           /* 0px   */
    --space-0_25: 0.25rem;  /* 4px   */
    --space-0_5: 0.5rem;    /* 8px   */
    --space-1: 1rem;        /* 16px  */
    --space-1_5: 1.5rem;    /* 24px  */
    --space-2: 2rem;        /* 32px  */
    --space-3: 3rem;        /* 48px  */
    --space-4: 4rem;        /* 64px  */
    --space-5: 5rem;
    --space-6: 6rem;
    --space-7: 7rem;
    --space-8: 8rem;
    --space-9: 9rem;
    --space-10: 10rem;
    --space-11: 11rem;
    --space-12: 12rem;

    --color-white: #FFFFFF;
    --color-green: #0A722E;
    --color-gray: #B3B3B3;
    --color-black: #333;
    --color-light-blue: #F5FAF7;
    --color-orange: #F05C00;
    --color-red: #F01400;
    --color-blue: #007EC4;
    --color-blk-beige: #FFFBF5;
    --color-btn-shadow: rgba(0, 0, 0, 0.25);
    --color-overray: rgba(128, 127, 127, 0.6);
    --color-stroke-gray: #EBEBEB; /* プルダウン、ラジオボタン項目の非活性もこの色 */
    --color-disable_font-gray: #777777;   /* プルダウン、ラジオボタン項目の非活性時の文字色 */

    --font-size-base: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;      /* 18px */
    --font-size-sm: 0.875rem;      /* 14px */
    --font-size-title: 1.25rem;    /* 20px */
    --font-size-kakekin: 1.25rem;  /* 20px */

    --font-weight-bold: 700;

    --btn-height-base: 60px;
    --btn-height-back: 40px;
    --btn-height-sm: 36px;

    --icon-question_title-size: 20px;
    --icon-question-size: 18px;
    --icon-s03_icon-size: 22px;
    --icon-info-size: 18px;
    --icon-btn-size: 18px;
    --icon-radio-size: 18px;
    --icon-checkbox-size: 18px;
    --icon-select_triangle-size: 12px;
}

/* ローディング */
#LoadImg {
    z-index: 99999; width: 100%; height: 100%; top: 0; left: 0; position: fixed; _position: absolute;
    background-color: var(--color-overray);
}
#LoadImg #loadImage {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
    opacity: 1.0; border-radius: 12px; z-index: 1001;

}
/* ローディング */

/* ブロック */
.c-contents {
    padding-inline: var(--space-1);
}
.c-inner {
    width: 100%;
}
/* ブロック */

/* ページタイトル */
.c-section_pagetitle {
    margin-block: var(--space-2);
}
.c-section_pagetitle .c-pagetitle {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    color: var(--color-green);
    text-align: center;
}
.c-section_pagetitle .c-pagetitle span {
    font-weight: var(--font-weight-bold);
    color: var(--color-green);
}
/* ページタイトル */

/* エラー系 */
.c-errblk {
    margin-block: var(--space-0_5);
    color: var(--color-red);
}
/* エラー系 */

/* 設問 */
.c-section_q_area {
    margin-top: var(--space-6);
}
.c-section_q_area.c-top {
    margin-top: var(--space-1);
}
.c-section_q_inline_area {
    width: 100%;
    border-radius: var(--space-0_5);
    background-color: var(--color-blk-beige);
    padding: var(--space-1);
}
.c-section_question {
    display: flex;
    gap: var(--space-0_5);
    margin-bottom: var(--space-1);
}
.c-section_question .c-question_img{
    width: var(--icon-question_title-size);
    flex-shrink: 0;
    position: relative;
    top: -1px;
}
.c-section_question .c-question_img img{
    width: var(--icon-question_title-size);
    height: var(--icon-question_title-size);
}
.c-section_item_area {
    padding-inline: var(--space-1);
}
.c-section_q_inline_area .c-section_item_area {
    padding-inline: var(--space-0);
}
/* 設問 */

/* 区切り */
.c-section_separator {
    display: flex;
    position: relative;
    padding-inline: var(--space-1);
    padding-block: var(--space-0_5);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-lg);
}
.c-section_separator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: var(--color-green);
}
/* 区切り */

/* 注釈 */
.c-comment {
    text-indent: -1em;
    margin-left: var(--space-1);
}
/* 注釈 */

/* リンク */
a.c-text_link {
    color: var(--color-green);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: var(--font-weight-bold);
    display: inline-flex;
    align-items: center;
}
a.c-text_link:hover {
    text-decoration: none;
}
/* リンク */

/** アイコン **/
/** はてな **/
.c-icon_question::after {
    content: '';
    width: var(--icon-question-size);
    height: var(--icon-question-size);
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/icon_question.svg);
    position: relative;
}

/** はてな **/
.c-icon_question_before::before {
    content: '';
    width: var(--icon-question-size);
    height: var(--icon-question-size);
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/icon_question.svg);
    position: relative;
}

/** info塗りつぶし **/
.c-icon_info_fill::before {
    content: '';
    display: inline-flex;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/icon_info_fill.svg);
    width: var(--icon-info-size);
    height: var(--icon-info-size);
    position: absolute;
    left: -1rem;
    top: 3px;
}

/** info **/
.c-section_info_area {
    display: flex;
    align-items: flex-start;
    padding: var(--space-0_5);
    border: 1px solid var(--color-blue);
    border-radius: 8px;
}
.c-section_info_area .c-info_icon {
    flex-shrink: 0;
    width: var(--icon-info-size);
    height: var(--icon-info-size);
    background-image: url('../images/icon_info.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: var(--space-0_25);
    position: relative;
    top: 2px;
}
.c-section_info_area .c-info_text {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* ボタン */
.c-section_ctabtn_area {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.c-section_btn {
    width: 100%;
}
.c-section_btn.c-section_btn-next,
.c-section_btn.c-section_btn-back_lg {
    padding-inline: var(--space-3);
}
.c-section_btn.c-section_btn-back {
    padding-inline: var(--space-7);
}
.c-section_btn.c-section_btn-back_lg a.c-btn.c-back {
    height: var(--btn-height-base);
}
a.c-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--btn-height-base);
    border: solid 1px var(--color-green);
    border-radius: 8px;
    background-color: var(--color-white);
    box-shadow: 0 2px 0 var(--color-btn-shadow);
    color: var(--color-black);
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .12s ease, transform .12s ease;
    position: relative;
}
a.c-btn.c-next {
    border-radius: 99px;
}
a.c-btn.c-back{
    border: solid 1px var(--color-black);
    height: var(--btn-height-back);
}
a.c-btn.c-font-strong {
    font-size: var(--font-size-lg);
}
a.c-btn.c-bg-green {
    border: none;
    background-color: var(--color-green);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}
a.c-btn.c-bg-orange {
    border: none;
    background-color: var(--color-orange);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}
a.c-btn.c-bg-red {
    border: none;
    background-color: var(--color-red);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}
a.c-btn.c-back::before,
a.c-btn.c-next::after,
a.c-btn.c-next_white::after{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    background-size: contain;
    background-repeat: no-repeat;
}

a.c-btn.c-next::after{
    right: 5%;
    background-image: url(../images/circle_right.svg);
}
a.c-btn.c-next_white::after{
    right: 5%;
    background-image: url(../images/circle_right_white.svg);
}
a.c-btn.c-back::before{
    left: 5%;
    background-image: url(../images/circle_left.svg);
}
a.c-btn:hover {
    opacity: 0.8;
}
a.c-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--color-btn-shadow);
}
a.c-btn.c-disabled  {
    pointer-events: none !important;
    background-color: var(--color-gray) !important;
    color: var(--color-white) !important;
    box-shadow: none !important;
    border: none !important;
}
a.c-btn.c-disabled_not_next  {
    pointer-events: none !important;
    background-color: var(--color-stroke-gray); !important;
    color: var(--color-disable_font-gray);
    box-shadow: none !important;
    border: solid 1px var(--color-gray); !important;
}
a.c-btn.c-disabled::after{
    background-image: url(../images/circle_right.svg) !important;
}
a.c-btn.c-disabled_not_next::after{
    opacity: 0.6 !important;
}
/* ボタン */

/** 吹き出し **/
.c-bubble {
    display: block;
    background: #fff;
    color: var(--color-green);
    border: 2px solid var(--color-green);
    border-radius: 20px;
    padding: var(--space-0_25) 0;
    position: relative;
    text-align: center;
    width: 250px;
    margin: 0 auto;
    font-weight: var(--font-weight-bold);
    top: -6px;
    font-size: var(--font-size-sm);
}
.c-bubble.c-bubble-orange {
    color: var(--color-orange);
    border: 2px solid var(--color-orange);
}
.c-bubble.c-bubble-red {
    color: var(--color-red);
    border: 2px solid var(--color-red);
}
.c-bubble::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--color-white) transparent transparent transparent;
    z-index: 2;
}
.c-bubble::before {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: var(--color-green) transparent transparent transparent;
    z-index: 1;
}
.c-bubble.c-bubble-orange::before {
    border-color: var(--color-orange) transparent transparent transparent;
}
.c-bubble.c-bubble-red::before {
    border-color: var(--color-red) transparent transparent transparent;
}
/** 吹き出し **/

/* ラジオボタン */
.c-section_radio{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-0_5);
}
label.c-radio {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--btn-height-base);
    padding: 0 var(--space-0_5);
    border: solid 1px var(--color-gray);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-black);
    font-weight: normal;
    cursor: pointer;
}
label.c-radio::before {
    content: '';
    width: var(--icon-radio-size);
    height: var(--icon-radio-size);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: var(--space-0_5);
}
label.c-radio::before {
    background-image: url("../images/radio_unchecked.svg");
}
input[type="radio"]:checked + label.c-radio::before {
    background-image: url("../images/radio_checked.svg");
}
input[type="radio"]:checked + label.c-radio {
    border: solid 1px var(--color-green);
    background: var(--color-light-blue);
}
label.c-radio:hover {border: solid 1px var(--color-green);}
/* ラジオボタン */

/* プルダウン */
.c-section_select{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-0_5);
}
label.c-select {
    display: flex;
    width: 100%;
    cursor: pointer;
    position: relative;
}
label.c-select::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 24px;
    width: var(--icon-select_triangle-size);
    height: var(--icon-select_triangle-size);
    transform: translateY(-50%);
    background-image: url(../images/pulldown_arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
label.c-select select {
    outline: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: flex;
    border-radius: 8px;
    padding: var(--space-0_5) var(--space-1);
    width: 100%;
    font-size: var(--font-size-base);
    font-weight: normal;
    cursor: pointer;
    align-items: center;
    height: var(--btn-height-base);
    border: solid 1px var(--color-gray);
    background: var(--color-white);
    color: var(--color-black);
}
label.c-select select:hover {border: solid 1px var(--color-green);}
label.c-select select:valid {
    border: solid 1px var(--color-green);
    background: var(--color-light-blue);
}
label.c-select select:disabled {
    background-color: var(--color-stroke-gray);
    color: var(--color-disable_font-gray);
    cursor: not-allowed;
}
label.c-select select:required:invalid {
    color: var(--color-disable_font-gray);
}
label.c-select select option[value=""] {
    color: var(--color-disable_font-gray);
}
/* プルダウン */

/* チェックボックス */
.c-section_checkbox{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
label.c-checkbox{
    cursor: pointer;
    display: flex;
    align-items: center;
}
label.c-checkbox.c-unknown,
label.c-checkbox.c-unknown + .c-unknown_area {
    margin-top: var(--space-0_5);
}
label.c-checkbox::before,
input[type="checkbox"]:checked + label.c-checkbox::before {
    content: "";
    position: relative;
    width: var(--icon-checkbox-size);
    height: var(--icon-checkbox-size);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: var(--space-0_5);
    background-color: var(--color-white);
}
label.c-checkbox::before{
    background-image: url(../images/check_box_off.svg);
}
input[type="checkbox"]:checked + label.c-checkbox::before {
    background-image: url(../images/check_box_on.svg);
}
label.c-checkbox.c-checkbox_border{
    width: 100%;
    height: var(--btn-height-base);
    padding: 0 var(--space-0_5);
    border: solid 1px var(--color-gray);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-black);
    font-weight: normal;
    cursor: pointer;
}
input[type="checkbox"]:checked + label.c-checkbox.c-checkbox_border {
    border: solid 1px var(--color-green);
    background: var(--color-light-blue);
}
input[type="checkbox"] + label.c-checkbox.c-checkbox_border:hover {border: solid 1px var(--color-green);}
/* チェックボックス */

/* テキストボックス */
.c-input_text input[type="text"],
.c-input_text input[type="tel"],
.c-input_text input[type="email"]{
    height: var(--btn-height-base);
    width: 100%;
    padding: var(--space-0_5) var(--space-1);
    border: 1px solid var(--color-green);
    font-size: var(--font-size-base);
    border-radius: 8px;
}
/* テキストボックス */

/* お見積もり再開 */
#q_sub_omitsumori_saikai .s-input_title,
#q_sub_omitsumori_saikai .s-hozon_title {
  margin-bottom: var(--space-1);
}
#q_sub_omitsumori_saikai .s-hozon_title {
  margin-top: var(--space-3);
}
#q_sub_omitsumori_saikai #s-list_saved {
  width: 100%;
  border-collapse: separate;
  color: var(--color-black);
  border-block: 1px solid var(--color-green);
  border-spacing: 1px 0;
}
#q_sub_omitsumori_saikai #s-list_saved thead th,
#q_sub_omitsumori_saikai #s-list_saved tbody td {
  padding: var(--space-0_5);
  text-align: center;
  vertical-align: middle;
  width: auto;
}
#q_sub_omitsumori_saikai #s-list_saved thead th {
  background-color: var(--color-light-blue);
}
#q_sub_omitsumori_saikai #s-list_saved tbody td {
  border-top: 1px solid var(--color-stroke-gray);
}
#q_sub_omitsumori_saikai #s-list_saved .s-number {
  color: var(--color-green);
  text-decoration: underline;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
#q_sub_omitsumori_saikai .s-list_saved_comment {
  margin-top: var(--space-1);
}
/* お見積もり再開 */

/* 線色 */
.c-border-green { border-color: var(--color-green); }
.c-border-gray  { border-color: var(--color-gray); }
.c-border-black  { border-color: var(--color-black); }
/* 線色 */

/* 文字色 */
.c-cl-green { color: var(--color-green); }
.c-cl-white  { color: var(--color-white); }
.c-cl-orange  { color: var(--color-orange); }
/* 文字色 */

/* 文字サイズ */
.c-small {
    font-size: var(--font-size-sm);
}
.c-large {
    font-size: var(--font-size-lg);
}
.c-strong {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}
.c-bold {
    font-weight: var(--font-weight-bold);
}
/* 文字サイズ */

/* 文字配置 */
.c-vertical_text {
    width:40px;
}
.c-letter-spacing_1rem {
    letter-spacing: 1rem;
}
.c-text_left {
    text-align: left;
}
.c-text_center {
    text-align: center;
}
.c-text_indent {
    display: block;
    text-indent: -1em;
    padding-left: 1em;
}

/* 表示制御 */
.c-hide {
    display: none;
}
/* 表示制御 */

/* 塗りつぶし色 */
.c-bg-green { background-color: var(--color-green); }
.c-bg-white  { background-color: var(--color-white); }
.c-bg-orange  { background-color: var(--color-orange); }
.c-bg-beige { background-color: var(--color-blk-beige); }
/* 塗りつぶし色 */

/* テーブル内の×印 */
.c-table_bastu {
    color: var(--color-disable_font-gray);
    font-size: 1.25rem;
    text-align: center;
}

/* Margin */
.c-m-0      { margin: var(--space-0); }
.c-m-0_25   { margin: var(--space-0_25); }
.c-m-0_5    { margin: var(--space-0_5); }
.c-m-1      { margin: var(--space-1); }
.c-m-1_5    { margin: var(--space-1_5); }
.c-m-2      { margin: var(--space-2); }
.c-m-3      { margin: var(--space-3); }
.c-m-4      { margin: var(--space-4); }
.c-m-5      { margin: var(--space-5); }
.c-m-6      { margin: var(--space-6); }
.c-m-7      { margin: var(--space-7); }
.c-m-8      { margin: var(--space-8); }
.c-m-9      { margin: var(--space-9); }
.c-m-10     { margin: var(--space-10); }
.c-m-11     { margin: var(--space-11); }
.c-m-12     { margin: var(--space-12); }
.c-m-minus1 { margin: var(--space-minus1); }

.c-mt-0_5 { margin-top: var(--space-0_5); }
.c-mt-1 { margin-top: var(--space-1); }
.c-mt-2 { margin-top: var(--space-2); }
.c-mr-1 { margin-right: var(--space-1); }
.c-mb-1 { margin-bottom: var(--space-1); }
.c-ml-1 { margin-left: var(--space-1); }

/* Padding */
.c-p-0      { padding: var(--space-0); }
.c-p-0_25   { padding: var(--space-0_25); }
.c-p-0_5    { padding: var(--space-0_5); }
.c-p-1      { padding: var(--space-1); }
.c-p-1_5    { padding: var(--space-1_5); }
.c-p-2      { padding: var(--space-2); }
.c-p-3      { padding: var(--space-3); }
.c-p-4      { padding: var(--space-4); }
.c-p-5      { padding: var(--space-5); }
.c-p-6      { padding: var(--space-6); }
.c-p-7      { padding: var(--space-7); }
.c-p-8      { padding: var(--space-8); }
.c-p-9      { padding: var(--space-9); }
.c-p-10     { padding: var(--space-10); }
.c-p-11     { padding: var(--space-11); }
.c-p-12     { padding: var(--space-12); }
.c-p-minus1 { padding: var(--space-minus1); }

.c-pi-0_5 { padding-inline: var(--space-0_5); }
.c-pi-1 { padding-inline: var(--space-1); }
.c-pt-1 { padding-top: var(--space-1); }
.c-pr-1 { padding-right: var(--space-1); }
.c-pb-1 { padding-bottom: var(--space-1); }
.c-pl-1 { padding-left: var(--space-1); }
.c-pl-1_5 { padding-left: var(--space-1_5); }
.c-pl-2 { padding-left: var(--space-2); }

@keyframes fade {
    from {opacity:0;}
    to   {opacity:1;}
}

/*********** PCのみ ******************/
@media screen and (min-width: 768px) {

    :root {
        --btn-height-base: 70px;
        --btn-height-back: 50px;
        --btn-height-sm: 46px;

        --icon-question_title-size: 22px;
        --icon-question-size: 20px;
        --icon-info-size: 20px;
        --icon-btn-size: 20px;
        --icon-radio-size: 20px;
        --icon-checkbox-size: 20px;
        --icon-select_triangle-size: 14px;
    }

    .c-inner {
        width: 700px;
        margin: 0 auto;
    }

    .c-section_btn.c-section_btn-next,
    .c-section_btn.c-section_btn-back_lg {
        padding-inline: var(--space-8);
    }
    .c-section_btn.c-section_btn-back {
        padding-inline: var(--space-12);
    }

    /* ヘッダー */
    .c-header .c-logoArea img#c-logo_zenrosai,
    .c-header.shokuiki .c-logoArea img#c-logo_zenrosai {
        width: 236px;
        height: 46px;
    }

    .c-header .c-logoArea img#c-logo_mycar {
        width: 180px;
        height: 55px;
    }

    .c-header .c-logoArea a.c-btn {
        width: 140px;
    }

    .c-header.shokuiki .c-logoArea .c-box {
        flex: none;
    }

    .c-header .c-logoArea a.c-btn {
        font-size: var(--font-size-base);
    }
    /* ヘッダー */

}
/*********** PCのみ ******************/