@charset "UTF-8";

/* -------------------------------------------------

    共通

------------------------------------------------- */
.l_col-2 .right .img { position: relative; max-width: 470px; }
.l_col-2 .right .img::before { content: ''; position: absolute; bottom: -10px; right: -10px; width: 100%; height: 100%; background: #F5F2EB; z-index: -1; }

.btn { text-align: center; }

.list-bg-yellow { background: #FFFAEA; }
.list-bg-yellow .heading-4 { padding-left: 0; }
.list-bg-yellow .heading-4::before { content: none; }
.list-bg-yellow ul { padding: 0 0; }
.list-bg-yellow ul li { padding-left: 16px; position: relative; }
.list-bg-yellow ul li::before { content: ''; position: absolute; top: 10px; left: 0; background: #F1AD1B; width: 8px; height: 8px; border-radius: 50%; }
.list-bg-yellow p { padding-left: 16px; }
.list-bg-yellow .indent-text { display: block; text-indent: -1.6rem; padding-left: 1.6rem; }

@media (min-width: 768px) {
    .l_col-2 { margin-bottom: 70px;}

    .btn { margin-top: 40px; }

    .list-bg-yellow { padding: 23px 20px; }
}

@media (max-width: 767px) {
    .l_col-2 { margin-bottom: 25px; }
    .l_col-2 > div { margin-left: auto; margin-right: auto; }
    .l_col-2 .right { padding-right: 10px; }

    .btn { margin-top: 30px; }

    .list-bg-yellow { padding: 13px 18px; font-size: 1.5rem; }
}


/* -------------------------------------------------

    service / index.php

------------------------------------------------- */
#service .sub-heading { color: #61524E; font-weight: bold; }
#service .sub-heading span { display: block; }
#service .bubble { color: #F42911; font-size: 1.8rem; line-height: 1.889; }
#service .bubble span { position: relative; }
#service .l_col-2 .left { max-width: 510px; }
#service .l_col-2 .right { max-width: 480px; }
#service01 .list-bg-yellow { margin-bottom: 20px; }
#service01-1 .text { margin-bottom: 10px; }
#service01-1 .list-bg-yellow ul li { display: inline-block; margin-right: 40px; }

@media (min-width: 768px) {
    [id^='service0'] { margin-bottom: 80px; }
    #service .heading-1 { margin-bottom: 45px; }
    #service .sub-heading { font-size: 2.0rem; margin-bottom: 45px; }
    #service .bubble { text-align: center; }
    #service .bubble span::before { content: ''; position: absolute; top: 50%; right: -60px; background: #F1AD1B; width: 60px; height: 1px; transform: rotate(135deg); }
    #service .bubble span::after { content: ''; position: absolute; top: 50%; left: -60px; background: #F1AD1B; width: 60px; height: 1px; transform: rotate(-135deg); }
    #service01-2 { margin-bottom: 45px; }
}

@media (max-width: 767px) {
    [id^='service0'] { margin-bottom: 60px; }
    #service .heading-1 { margin-bottom: 25px; }
    #service .sub-heading { font-size: 1.6rem; text-align: left; margin-bottom: 25px; line-height: 1.625; }
    #service .sub-heading span { margin-top: 16px; }
    #service .bubble { line-height: 1.625; }

    #service01 .l_col-2 { margin-bottom: 30px; }
    #service01 .l_col-2 .left { margin-bottom: 0; }
    #service01-2 { margin-bottom: 30px; }
}


/* -------------------------------------------------

    service / flow.php

------------------------------------------------- */
#flow .flowlist { counter-reset: number 0; padding-left: 0; padding-right: 0; }
#flow .flowlist li .text a,
#flow .flowlist li .text span { color: #EA5711; }
#flow .flowlist li .text a:hover { text-decoration: none; }
#flow .flowlist li .title {  font-weight: bold; color: #000; letter-spacing: 0.1em; border-bottom: 1px solid #ddd; margin-bottom: 23px; position: relative; }
#flow .flowlist li .title::before { content: "0" counter(number); counter-increment: number 1; position: absolute; background: #F1AD1B; color: #fff; border-radius: 50%; text-align: center; font-weight: bold; letter-spacing: -0.05em; }
#flow .flowlist li .l_col-2 { margin-bottom: 0; }
#flow .flowlist li .l_col-2 .right { max-width: 330px; }
#flow .flowlist li .l_col-2 .right .img { max-width: 320px; }


@media (min-width: 768px) {
    #flow .flowlist li { margin-bottom: 20px; }
    #flow .flowlist li .text { line-height: 2.1875; }
    #flow .flowlist li .l_col-2 .left { width: calc((100% - 330px) - 40px); }
    #flow .flowlist li .title { font-size: 2.8rem; padding: 10px 0 25px 100px; }
    #flow .flowlist li .title::before { top: 0; left: 10px; font-size: 3.9rem; width: 65px; height: 65px; line-height: 65px; }
    #flow .flowlist li .body { border-left: 1px solid #F1AD1B; padding-left: 50px; margin-left: 40px; min-height: 200px; }
}

@media (max-width: 767px) {
    #flow .flowlist li { margin-bottom: 80px; position: relative; }
    #flow .flowlist li:not(:last-of-type)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -65px; margin: 0 auto; width: 1px; height: 40px; background: #F1AD1B; }
    #flow .flowlist li .text { line-height: 1.875; }
    #flow .flowlist li .title { font-size: 2.4rem; text-align: center; padding: 60px 0 15px 0; }
    #flow .flowlist li .title::before { top: 0; left: 0; right: 0; margin: 0 auto; font-size: 3.2rem; width: 55px; height: 55px; line-height: 55px; }
    #flow .flowlist li .l_col-2 .right { margin-bottom: 0; }
}