@charset "utf-8";
/* ========
全体共通
=========*/
.lp-section-title {
    color:#F79B0A;
    font-size: 24px;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    margin: 0 auto;
    text-align: center;
    line-height: 1;
}

.container500 {
    max-width: 500px;
    width: 90%;
    margin: 0 auto;
}
.lp-text-link {
    color: #F79B0A;
    border-bottom: 1px solid #F79B0A;
}

/* =======
CV
=========*/
.lp-cv {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    margin-top: 40px;
}
.cv-btn-wrapper {
    display: flex;
    justify-content: center;
    gap: 40px;
}
.cv-btn-area {
    width: 200px;
}
.cv-btn-area .basic-btn {
    padding: 15px 0;
}

/* =======
ヘッダー
=========*/
/* 全体 */
.header {
    padding: 25px 0;
}
.header-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* ロゴ */
.header-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}
.header-logo {
    margin: 0;
    width: 55px;
}
.header-logo-text {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 500;
    line-height: 1.3;
}
/* コンタクトボタン */
.header-btn-wrapper {
    display: flex;
    justify-content: end;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 500;
    flex-shrink: 0;
    width: 180px;
}
.contact-btn-area {
    margin-top: 0;
    flex-shrink: 0;
    width: 180px;
}
.basic-btn.contact-btn {
    width: 100%;
}
.contact-btn-area+.contact-btn-area {
    margin-left: 10px;
}
.basic-btn {
    border-radius: 40px;
    font-size: 16px;
}
.bottom-nav-item {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 600;
    font-size: 17px;
}


/* ===================
こんなお悩みありませんか？
====================*/
.lp-problem {
    margin-top: 30px;
}
.problem-block {
    display: flex;
    justify-content: center;
    gap: 50px;
    font-weight: bold;
    color: #545454;
    margin-top: 40px;
    background-image: url(../../images/problem-pc-bgimg.png);
    background-size: cover;
}
.problem-list+.problem-list {
    margin-top: 20px;
}

/* ======
原因は
========*/
.cause-illust-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.cause-illust {
    width: 10%;
}
.lp-section-title.cause-title {
    margin: 0;
}
.cause-icon-block {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.cause-icon-wrapper {
    border: 2px solid #F79B0A;
    border-radius: 20px;
    width: calc(25% - 10px);
    height: 150px;
    text-align: center;
    padding-top: 12px;
}
.cause-icon-wrapper.case1 {
    padding-top: 20px;
}
.cause-icon {
    width: 50%;
}
.case1 .cause-icon {
    margin-top: 5px;
}
.cause-icon-title {
    line-height: 1.1;
    color: #F79B0A;
    font-size: 17px;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
}

/* ======
LEGITの強み
========*/
.lp-strength {
    margin-top: 60px;
}
.strength-block {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.lp-section-title.strength-title {
    color: #fff;
    background: linear-gradient(45deg, #F79B0A 20%, #F2B01C 50%, #EDC528 100%);
    font-size: 22px;
    padding: 10px 0;
    border-radius: 5px;
    line-height: 1.2;
}   
.strength-img-wrapper {
    text-align: center;
}
.strength-subtitle {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    line-height: 1.2;
    color: #F79B0A;
    margin-top: 15px;
    font-size: 18px;
}
.strength-img {
    width: 75%;
    margin-top: 20px;
}
.lp-strength-text {
    margin-top: 40px;
    text-align: center;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    line-height: 2;
    color: #545454;
    font-size: 18px;
}
/* ========
画像スライド
==========*/
.lp-slide {
    margin-top: 60px;
}
.lp-slide-image-wrapper {
    display: flex;
    gap: 10px;
    animation: infinity-scroll-left 30s infinite linear 1s both;
}
.lp-slide-image {
    width: 300px;
    max-width: initial;
    object-fit: cover;
}
.lp-slide {
    display: flex;
    overflow: hidden;
    margin-top: 40px;
}
.lp-slide-image-wrapper+.lp-slide-image-wrapper {
    margin-left: 10px;
}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* =========
アプローチ
==========*/
/* 全体 */
.lp-approach {
    background-color: #FEFAF1;
    padding: 40px 0 40px;
}
.lp-approach-subtitle {
    font-size: 15px;
    text-align: center;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    color: #F79B0A;
}
.lp-approach-title {
    margin-top: 5px
}
.lp-approach-title.fukidashi {
    background-color: #FEFAF1;
}
.lp-approach-title.fukidashi:before {
    background-color: #FEFAF1;
}
.lp-approach-title.fukidashi:after {
    background-color: #FEFAF1;
    z-index: 0;
    bottom: -7.5px;
}
.lp-approach-item-wrapper {
    margin-top: 40px;
}
/* お客様の声 タイトル・名前 */
.approach-item-name {
    font-size: 12px;
    margin-top: 16px;
}
.approach-item-title {
    margin-top: 10px;
    line-height: 1.4;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    color: #545454;
    font-size: 18px;
}
.approach-item-title-wrapper {
    text-align: center;
}

/* お客様の声 */
.approach-item-img-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.approach-item-img {
    width: 35%;
}
.approach-item-text {
    width: 60%;
}

/* 改善アプローチポイント */
.approach-point-icon-wrapper {
    text-align: center;
    margin-top: 30px;
}
.approach-point-icon {
    width: 15%;
}
.approach-point-title {
    font-size: 20px;
    color: #F79B0A;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    line-height: 1;
}
.approach-point-img-wrapper {
    max-width: 450px;
    width: 100%;
    margin: 20px auto 0;

}
.approach-point-btn {
    background: linear-gradient(45deg, #EDC528 20%, #F2B01C 50%, #F79B0A 100%);
    color: #fff;
    text-align: center;
    padding: 8px 0;
    position: relative;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 500;
}
.approach-point-btn::after {
    position: absolute;
    top: 45%;
    right: 2em;
    display: block;
    content: '';
    border: 1px solid;
    width: 0.5em;
    height: 0.5em;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    border-top: 0;
    border-left: 0;
    color: #fff;
}
.approach-point-btn.lp-close::after {
    top: 55%;
    transform: translateX(-50%) translateY(-50%) rotate(225deg);
}
.approach-point-text-wrapper {
    background-color: #fff;
    padding: 0px 20px 16px;
    margin: 0 auto;
    text-align: justify;
    border-left: 4.5px solid #fddd58;
    border-right: 4.5px solid #F79B0A;
}
.approach-point-text+.approach-point-text {
    margin-top: 8px;
}
.lp-approach-item+.lp-approach-item {
    margin-top: 60px;
}

/* =========
5つのこだわり
==========*/
.lp-point {
    margin-top: 60px;
}
.lp-point-title {
    max-width: 250px;
    width: 60%;
    margin: 0 auto;
}
.lp-point-item-wrapper {
    margin-top: 30px;
}
.lp-point-item .number {
    padding: 8px 15px;
}
.lp-point-item {
    text-align: center;
}
.lp-point-text {
    text-align: start;
    margin-top: 10px;
}
.lp-point-subtitle {
    font-size: 18px;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    color: #F79B0A;
    margin-top: 15px;
    line-height: 1.3;
}
.lp-point-img {
    margin-top: 15px;
}

/* =======
こんなお客様が
========*/
.lp-customer {
    margin-top: 60px;
}
.customer-inner.lp-customer-inner {
    margin-top: 0;
    padding: 40px 0 0;
}
.lp-customer-title {
    color: #fff;
    background: linear-gradient(45deg, #F79B0A 20%, #F2B01C 50%, #EDC528 100%);
    font-size: 22px;
    padding: 10px 0;
    border-radius: 5px;
    text-align: center;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    line-height: 1.2;
}

/* =======
スタッフ
========*/
.lp-staff-item-img {
    max-width: 150px;
}
.lp-staff-item {
    text-align: center;
    width: calc(45% - 10px);
}
.lp-staff-item-wrapper {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.lp-staff-title {
    font-size: 12px;
    margin-top: 6px;
    font-family: "Zen Maru Gothic", serif;
}
.lp-staff-name {
    font-size: 20px;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 500;
    color: #545454;
    line-height: 1.2;
}
.lp-staff-text {
    margin-top: 10px;
    text-align: start;
    text-align: justify;
}
.lp-staff-item:nth-child(n + 3) {
    margin-top: 40px;
}

/* =========
料金プラン
==========*/
.lp-price {
    margin-top: 70px;
}
.lp-section-title.lp-price-title {
    color: #fff;
    background: linear-gradient(45deg, #F79B0A 20%, #F2B01C 50%, #EDC528 100%);
    font-size: 22px;
    padding: 20px 0;
    border-radius: 5px 5px 0 0;
} 
.lp-price-inner {
    background-color: #FEFAF1;
    padding: 15px 60px 40px;
    text-align: center;
    border-radius: 0 0 5px 5px;
}
.note-text {
    text-align: center;
    font-size: 13px;
}
.lp-price-img {
    max-width: 500px;
    width: 100%;
    margin-top: 15px;
}
.lp-price-item-wrapper {
    margin-top: 40px;
}
.lp-price-subtitle {
    font-size: 18px;
}
.lp-price-text td {
    background-color: #fff;
}
.lp-price-item {
    text-align: center;
}
.lp-price-block {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.lp-price-table-wrapper {
    width: calc(50% - 15px);
}
.lp-experience {
    max-width: 430px;
    width: 100%;
    margin: 0 auto;
}
.lp-price-item+.lp-price-item {
    margin-top: 60px;
}
.lp-price-table-wrapper:nth-child(n + 3) {
    margin-top: 30px;
}
.lp-price-subtitle {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    color: #F79B0A;
    font-size: 20px;
    margin-bottom: 3px;
}
.lp-price-block.personal {
    margin-top: 20px;
}
.price-table {
    margin-top: 10px
}
.lp-price-text.personal {
    font-size: 15px;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 500;
    color: #545454;
}
.lp-price-text td span {
    font-size: 12px;
}

/* =========
流れ
==========*/
.lp-flow {
    margin-top: 90px;
}
.lp-flow-item-wrapper {
    margin-top: 70px;
    text-align: center;
}
.lp-flow-title {
    margin-top: 15px;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 500;
    color: #545454;
    font-size: 18px;
}
.lp-flow-text {
    margin-top: 7px;
    text-align: start;
    text-align:justify;
}
.lp-flow-item+.lp-flow-item {
    margin-top: 50px;
}

/* =======
アクセス
========*/
.lp-access {
    margin-top: 80px;
    background-color: #FEFAF1;
    padding: 60px 0;
}
.lp-access-inner {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}
.lp-access-text dt {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 500;
    color: #545454;
    font-size: 16px;
}
.lp-access-text {
    display: flex;
    flex-wrap: wrap;
    width: 40%;
}
.lp-access-map {
    width: 45%;
}
.lp-access-text dt {
    width: 30%;
    padding: 10px 0;
}

.lp-access-text dd {
    width: 70%;
    padding: 10px 0;
}
.lp-access-map iframe {
    width: 100%;
    height: 100%;
}
.map-btn {
    font-size: 12px;
    padding: 8px 0;
    background-color: transparent;
    color: #545454;
}
.lp-access-btn-area {
    display: flex;
    justify-content: flex-end;
}
.lp-access-sns {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}
.lp-access-sns .fa-instagram,
.lp-access-sns .fa-pencil {
    border: 1px solid #545454;
    border-radius: 20px;
    padding: 8px;
    color: #545454;
    font-size: 13px;
}

/* ======
よくある質問
=======*/
.lp-qa {
    margin-top: 70px;
}

/* ======
フッター
=======*/
.footer.lp-footer {
    background-color: #fff;
    color: #545454;
    padding: 0 0 20px;
}
.footer-btn-wrapper {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
}




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

/* ======
料金プラン
=======*/
.lp-price-text {
    font-size: 13px;
    white-space: nowrap;
}
}


@media screen and (max-width:699px) {
/* =========
全体共通
==========*/
.lp-section-title {
    font-size: 20px;
}
/* =======
CV
=========*/
.cv-btn-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.cv-btn-area {
    width: 100%;
    text-align: center;
}

/* =======
ヘッダー
========*/
/* 全体 */
.lp-mv {
    margin-top: 98px;
}
.header-content-wrapper {
    display: block;
}
/* コンタクトボタン */
.contact-btn-area {
    display: none;
}
/* ロゴ */
.header-logo-wrapper {
    justify-content: center;
}
.header-logo-text {
    text-align: center;
}
.header-logo {
    width: 40px;
}
.header-logo-text {
    font-size: 13px;
}



/* =======
ボトムメニュー
=========*/
.bottom-nav-item {
    padding: 12px 0;
    border-radius: 40px;
}
.bottom-nav-reserve {
    background: linear-gradient(25deg, #0763CD 20%, #699DFF 50%, #99d8f1 100%);
}

/* ==================
こんなお悩みありませんか？
===================*/
.problem-block {
    flex-direction: column;
    gap: 20px;
    margin: 40px auto 0;
    width: 90%;
    line-height: 1.4;
    text-align: center;
    background-image: url(../../images/problem-sp-bgimg.png);
    background-size: contain;
}
.problem-pc-br {
    display: none;
}

/* ========
原因は
==========*/
.lp-cause {
    margin-top: 15px;
}
.cause-icon-block {
    flex-wrap: wrap;
    margin-top: 15px;
}
.cause-icon-wrapper {
    width: calc(40% - 15px);
}
.cause-icon {
    width: 80px;
}
.lp-section-title.cause-title {
    line-height: 1.2;
    text-align: center;
}
.cause-illust {
    width: 18%;
}


/* ========
LEGITの強み
==========*/
.lp-strength {
    margin-top: 40px;
}
.lp-strength-text,
.strength-subtitle {
  font-size: 2.6vw;
}
.lp-section-title.strength-title {
    font-size: 18px;
}
.lp-strength-text {
    margin-top: 20px;
}
.strength-title .sp-br {
    display: none;
}

/* =============
アプローチポイント
===============*/
.approach-item-img-wrapper {
    flex-direction: column;
    gap: 20px;
}
.approach-item-img {
    max-width: 400px;
    width: 90%;
}
.approach-item-text {
    max-width: 500px;
    width: 90%;
}
.approach-point-text-wrapper {
    border-left: 4px solid #fddd58;
    border-right: 4px solid #F79B0A;
}
.approach-point-icon {
    width: 20%;
}

/* =========
こんなお客様が
==========*/
.lp-customer-title {
    font-size: 18px;
}

/* =========
スタッフ
==========*/
.lp-staff-item-wrapper {
    flex-direction: column;
    align-items: center;
}
.lp-staff-item:nth-child(n + 2) {
    margin-top: 40px;
}
.lp-staff-item {
    max-width: 350px;
    width: 90%;
}

/* ======
料金プラン
=======*/
.lp-price {
    margin-top: 50px;
} 

.lp-price-block {
    flex-direction: column;
}
.lp-price-table-wrapper {
    width: 100%;
}
.lp-price-inner {
    padding: 15px 20px 40px;
}
.lp-price-table-wrapper:nth-child(n + 2) {
    margin-top: 25px;
}
.lp-price-subtitle {
    font-size: 16px;
}
.lp-price-item+.lp-price-item {
    margin-top: 25px;
}
.lp-price-item-wrapper {
    margin-top: 20px;
}
.lp-price-block.personal {
    margin-top: 10px;
}

/* =========
流れ
==========*/
.lp-flow .container500 {
    width: 80%;
}
.lp-flow {
    margin-top: 60px;
}
.lp-flow-item-wrapper {
    margin-top: 50px;
}
.lp-flow-item+.lp-flow-item {
    margin-top: 30px;
}
.lp-flow-title {
    font-size: 16px;
    color: #F79B0A;
    font-weight: 600;
}
/* ======
アクセス
========*/
.lp-access {
    margin-top: 50px;
    padding: 40px 0 50px;
}
.lp-access-inner {
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}
.lp-access-text {
    width: 80%;
}
.lp-access-map {
    width: 90%;
    margin-top: 20px;
}
.lp-access-btn-area {
    justify-content: center;
    margin-top: 10px;
}
.lp-access-btn-area .basic-btn {
    max-width: 150px;
}
.lp-access-btn-area .map-btn {
    border: 1px solid #545454;
}

/* ======
よくある質問
=======*/
.lp-pa {
    margin-top: 40px;
}

}

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

/* ==================
こんなお悩みありませんか？
===================*/
.problem-block {
    width: 100%;
    text-align: start;

}
.problem-list-wrapper {
    width: 80%;
    margin: 0 auto;
}

/* =======
原因は？
=========*/
.cause-icon-wrapper {
    width: calc(50% - 15px);
    height: 140px;
}
.cause-icon {
    width: 70px;
    margin-top: 5px;
}

/* =======
LEGITの強み
=========*/
.strength-title .sp-br {
    display: block;
}
.strength-block {
    flex-direction: column;
    gap: 30px;
}
.strength-subtitle {
    font-size: 17px;
}
.lp-strength-text {
    font-size: 16px;
}

/* ============
アプローチポイント
==============*/
.approach-point-icon {
    width: 30%;
}
.approach-point-icon-wrapper {
    margin-top: 20px;
}

/* ============
料金プラン
==============*/
.lp-experience {
    max-width: initial;
    width: 100%;
    margin: 0 auto;
}

/* ========
画像スタイド
==========*/
.lp-slide-image {
    width: 200px;
}


}