@charset "UTF-8";

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

    

------------------------------------------------------*/
.font-01 { font-family: 'Noto Serif JP', sans-serif;}
.font-02 { font-family: 'Noto Sans JP', sans-serif; }


:root {
    --color-01: #F8F4F2;
    --color-02: #604E46;    /* 文字色 */
    --color-03: #BE8663;
    --color-04: #F5EAEA;
    --color-05: #CD8484;
    --color-06: #FFE562;
}

body { background-color: #fff;}
main { margin-bottom: 0;}
main > section { color: var(--color-02); letter-spacing: 0.05em;}

.pageTitle { box-shadow: 0 0 0 100px rgb(248, 244, 242); background: url(../images/method/st_method-visual.png) no-repeat center center / cover; display: block; position: relative;}
.pageTitle h1 { color: var(--color-02); font-weight: 700; background-color: transparent; display: block; margin-bottom: 10px; padding: 0; }
.pageTitle figure { position: absolute; max-width: calc(574px / 2); height: auto; left: 0; right: 0; top: 15px; bottom: auto; margin: auto;}
.pageTitle figure img {}
.pageTitle div { width: 100%; text-align: center;}
.pageTitle p { color: var(--color-05); font-weight: 700; line-height: 1; border-radius: 30px; background-color: #fff;  display: inline-block; }
.pageTitle p span { color: var(--color-02);}

.breadcrumb-b { margin-bottom: 20px;}


@media (min-width: 768px) {
    .pageTitle { padding-top: 135px;}
    .pageTitle h1 { font-size: 4rem; }
    .pageTitle figure { width: calc(574px / 2); }
    .pageTitle p { letter-spacing: 0.2em; font-size: 2.2rem; height: 40px; line-height: 40px; padding: 0 30px;}

    .breadcrumb-b.foot { display: none;}
}

@media (max-width: 767px) {
    .pageTitle { padding-top: 85px;}
    .pageTitle h1 { font-size: 2rem;}
    .pageTitle figure { width: 42%; max-width: 150px;}
    .pageTitle p { font-size: 1.4rem; height: 30px; line-height: 30px; padding: 0 15px; }

    .breadcrumb-b { display: none;}
    .breadcrumb-b.foot { display: block; margin-bottom: 0; background-color: var(--color-01);}
}


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

    outline

------------------------------------------------------*/
#outline { background-color: var(--color-01); text-align: center; }
#outline .container {}
#outline .l_col-4 {}
#outline .l_col-4 figure { margin-bottom: 0;}
#outline .l_col-4 figure img {}
#outline .lead { font-weight: 700; line-height: 1.4; letter-spacing: 0.05em; margin-bottom: 20px;}
#outline .title { letter-spacing: 0.1em; line-height: 1.6; border: 1px solid var(--color-02); border-radius: 18px; padding-bottom: 0; padding: 20px 10px; font-weight: 700;}
#outline .title::before { display: none;}
#outline .text { line-height: 2;}
#outline .text span { color: var(--color-03); font-weight: 700;}

#outline .l_col-contents {}
#outline .l_col-contents > div { width: 100%;}

@media (min-width: 768px) {
    #outline { margin-bottom: 80px; padding-bottom: 60px;}
    #outline .l_col-4 { margin-bottom: 40px;}
    #outline .l_col-4 figure img { border-radius: 20px; }
    #outline .lead { font-size: 2rem; }
    #outline .text { font-size: 1.8rem; }

}

@media (max-width: 767px) {
    #outline { margin-bottom: 40px; padding-bottom: 30px; padding-top: 18px; }
    #outline .l_col-4 figure { width: calc(50% - 7px);}
    #outline .l_col-4 figure:nth-child(n+3) { margin-top: 15px;}
    #outline .l_col-4 figure img { border-radius: 10px; }
    #outline .lead { font-size: 1.6rem; }
    #outline .title { font-size: 2rem; padding: 10px 5px; margin-bottom: 15px;}
    #outline .text { font-size: 1.6rem; text-align: left; }

    #outline .l_col-contents { flex-direction: column-reverse;}
    #outline .l_col-contents > div { margin-bottom: 0;}
}



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

    client

------------------------------------------------------*/
.title-a { text-align: center; line-height: 1; }
.title-a .title { padding-bottom: 0; font-weight: 700; letter-spacing: 0.1em; }
.title-a .title::before { display: none; }
.title-a p { font-weight: 700; letter-spacing: 0.1em; }

#client {}
#client .title-a {}
#client .l_col-3 {}
#client .l_col-3 figure { margin-bottom: 0;}
#client .l_col-3 figure img {}

#client .lead { color: var(--color-03); font-weight: 700; line-height: 1.55; }

#client ul {}
#client ul li { font-weight: 700; letter-spacing: 0.1em; border-bottom: 1px solid var(--color-02); margin-bottom: 0; background: url(../images/method/icon_check.svg) no-repeat left center / 30px auto; padding-left: 40px;}
#client ul li::before { display: none;}

@media (min-width: 768px) {
    .title-a { margin-bottom: 40px; }
    .title-a .title { font-size: 2.8rem; margin-bottom: 5px; }
    .title-a p { font-size: 1.6rem; }

    #client { max-width: 990px;}
    #client .l_col-3 { max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 40px;}
    #client .l_col-3 figure { max-width: 230px;}

    #client .lead { text-align: center; font-size: 1.8rem; margin-bottom: 35px;}

    #client ul { max-width: 800px; margin-left: auto; margin-right: auto;}
    #client ul li { font-size: 2.8rem; line-height: 2; }
}

@media (max-width: 767px) {
    .title-a { margin-bottom: 25px; }
    .title-a .title { font-size: 2.4rem; margin-bottom: 10px;}
    .title-a p { font-size: 1.4rem; }

    #client { margin-bottom: 80px;}
    #client .l_col-3 { margin-bottom: 20px;}
    #client .l_col-3 figure { width: calc(100% / 3 - 10px); }

    #client .lead { font-size: 1.6rem; margin-bottom: 15px; }

    #client ul li { font-size: 2rem; background-size: 25px auto; background-position: 10px 12px; line-height: 1.4; padding-top: 10px; padding-bottom: 10px; padding-left: 50px; }
}



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

    point

------------------------------------------------------*/
#point { background: url(../images/method/icon_arrow.svg) no-repeat center bottom / 124px 30px; margin-bottom: 40px;}
#point .title-a {}
#point .lead { color: var(--color-03); font-weight: 700; line-height: 1.55;  }
#point .l_col-2 {}
#point .l_col-2 li { border-radius: 80px; text-align: center; font-weight: 700; line-height: 1.4; background-color: var(--color-04); position: relative; margin-bottom: 0;}
#point .l_col-2 li::before { content: ""; background: url(../images/method/img_point.svg) no-repeat left top / 78px 19px; width: 78px; height: 19px; position: absolute; left: 0; right: 0; top: 10px; bottom: auto; margin: auto;}

@media (min-width: 768px) {
    #point { max-width: 990px; padding-bottom: 160px; }
    #point .lead { text-align: center; font-size: 1.8rem; margin-bottom: 40px;}
    #point .l_col-2 li { font-size: 2rem; min-height: 120px; display: inline-flex; justify-content: center; align-items: center; padding: 10px 15px 10px;}
}

@media (max-width: 767px) {
    #point { padding-bottom: 40px;}
    #point .lead { font-size: 1.6rem; margin-bottom: 20px; }
    #point .l_col-2 li { font-size: 1.8rem; margin-bottom: 20px; padding: 35px 15px 20px;}
}



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

    future

------------------------------------------------------*/
#future { background-color: var(--color-04); margin-bottom: 0; border-radius: 10px 10px 0px 0px; overflow: hidden;}
#future .title-b { background-color: var(--color-05); color: #fff;}
#future .title-b .title { padding-bottom: 0; letter-spacing: 0.1em;}
#future .title-b .title::before { display: none;}
#future .title-b .title > span { display: inline-block; position: relative;}
#future .title-b .title > span::before ,
#future .title-b .title > span::after { content: ""; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; position: absolute; top: calc(50% - 4px);}
#future .title-b .title span span { color: var(--color-06);}

#future .container {}

#future .lead { color: var(--color-03); font-weight: 700; line-height: 1.55;  }

#future .l_col-2 {}
#future .l_col-2 li { border-radius: 80px; text-align: center; font-weight: 700; line-height: 1.6; font-size: 2.4rem; background-color: #fff; position: relative; margin-bottom: 0; box-shadow: 0px 10px 10px 0px rgba(106, 45, 45, 0.10); }
#future .l_col-2 li::before { display: none;}

#future figure {}
#future figure img {}


@media (min-width: 768px) {
    #future { padding-bottom: 80px; }
    #future .title-b .title { height: 80px; line-height: 72px;}
    #future .title-b .title > span::before { left: -50px;}
    #future .title-b .title > span::after { right: -50px;}

    #future .container { max-width: 990px;}

    #future .lead { text-align: center; font-size: 1.8rem; margin-bottom: 40px;}

    #future .l_col-2 { margin-bottom: 70px;}
    #future .l_col-2 li {  min-height: 120px; display: inline-flex; justify-content: center; align-items: center; padding: 22px 15px 22px; }

}

@media (max-width: 767px) {
    #future { padding-bottom: 50px; }
    #future .title-b .title { padding: 10px; line-height: 1.4; margin-bottom: 25px;}
    #future .title-b .title span { display: block; font-size: 2rem; }
    #future .title-b .title > span::before ,
    #future .title-b .title > span::after { width: 6px; height: 6px; top: calc(50% - 3px);}
    #future .title-b .title > span::before { left: 10px;}
    #future .title-b .title > span::after { right: 10px;}

    #future .lead { font-size: 1.6rem; margin-bottom: 20px;}

    #future .l_col-2 { margin-bottom: 20px;}
    #future .l_col-2 li { font-size: 1.8rem; margin-bottom: 20px; padding: 20px 15px 20px; }

}


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

    entry

------------------------------------------------------*/
#entry { background-color: var(--color-01); padding-top: 80px; margin-bottom: 0;}
#entry .container {}
#entry .l_col-2 {}
#entry .l_col-2 > div {}
#entry .l_col-2 section { margin-bottom: 40px;}
#entry .l_col-2 section:last-child { margin-bottom: 0;}
#entry .l_col-2 .title { padding-bottom: 0; padding-left: 0; border-top: 1px solid var(--color-02); border-bottom: 1px solid var(--color-02); text-align: center; font-weight: 700; line-height: 2; color: var(--color-02); margin-bottom: 20px;}
#entry .l_col-2 .title::before { display: none;}
#entry .l_col-2 .text {}
#entry .l_col-2 .text p {}
#entry .l_col-2 > figure {}
#entry .l_col-2 > figure img {}

#entry .consult { background-color: #fff; border-radius: 20px; text-align: center; }
#entry .consult .text {}
#entry .consult .text p {}
#entry .consult .text p:first-child { line-height: 1.75; }
#entry .consult .text p:nth-child(2) { font-weight: 700; }
#entry .consult .text p:last-child { line-height: 1.33; margin-bottom: 20px;}
#entry .consult .text p .highlighter { font-weight: 700; background: linear-gradient(rgba(254, 248, 166, 0) 50%, rgba(255, 229, 95, 1) 0%);}
#entry .consult .btn-a { border-radius: 20px; background: var(--color-03); box-shadow: 0px 4px 0px 0px #906C57; color: #FFF; font-weight: 700; line-height: 1; display: block; text-decoration: none;  max-width: 520px; margin-left: auto; margin-right: auto; position: relative; }
#entry .consult .btn-a::after { content: ""; position: absolute; width: 40px; height: 40px; background: url(../images/method/icon_arrow-2.svg) no-repeat left top / 40px auto; right: 20px; top: calc(50% - 20px);}

#entry .bnr { max-width: 800px; margin-left: auto; margin-right: auto;}
#entry .bnr a {}
#entry .bnr img {}


@media (min-width: 768px) {
    #entry { padding-bottom: 150px;}
    #entry .l_col-2 { margin-bottom: 40px;}
    #entry .l_col-2 .title { font-size: 2.4rem; }
    #entry .l_col-2 .text { font-size: 20px; }
    #entry .l_col-2 > figure { margin-bottom: 0;}

    #entry .consult { margin-bottom: 80px; padding: 40px 20px;}
    #entry .consult .text p:first-child { font-size: 1.6rem; }
    #entry .consult .text p:nth-child(2) { font-size: 2.4rem; line-height: 1.15;}
    #entry .consult .text p:last-child { font-size: 2.1rem; }
    #entry .consult .btn-a { font-size: 2.8rem; height: 80px; line-height: 80px; transition: top 0.2s;}
    #entry .consult .btn-a:hover { box-shadow: 0 0 0 0 #906C57; position: relative; top: 4px; }

}

@media (max-width: 767px) {
    #entry {  padding-bottom: 100px; }
    #entry .l_col-2 { margin-bottom: 40px;}
    #entry .l_col-2 .title { font-size: 2rem; }
    #entry .l_col-2 .text { font-size: 1.6rem; }
    #entry .l_col-2 > figure { margin-bottom: 0;}

    #entry .consult { padding: 30px 20px 40px; margin-bottom: 40px;}
    #entry .consult .text p:first-child { font-size: 1.4rem; }
    #entry .consult .text p:nth-child(2) { font-size: 2rem; line-height: 1.5; }
    #entry .consult .text p:last-child { font-size: 1.4rem; }
    #entry .consult .btn-a { font-size: 2rem; height: 60px; line-height: 60px; }
    #entry .consult .btn-a::after { width: 30px; height: 30px; top: calc(50% - 15px); background-size: cover; }

}


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

    

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

@media (min-width: 768px) {

}

@media (max-width: 767px) {

}