@charset "UTF-8";


/* btn --------------------*/

.btn_request {
    background: linear-gradient(to right, var(--color-gradient-orange));
}
.btn_request::before {
    background: var(--color-darkorange);
}
.btn_contact {
    background: linear-gradient(to right, var(--color-gradient-blue));
}
.btn_contact::before {
    background: var(--color-blue-03);
}


/*
    Main visual
------------------------------*/
.mv {
    background: url("../images/bg_mv.png") no-repeat center top /cover;
    position: relative;
    padding: 100px 5% 0;
}
.mv_inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(3.125rem, 0.625rem + 3.91vw, 5.313rem);
    text-align: center;
    padding: 40px 0 60px;
}
.mv_content {
    color: var(--color-navy);
    width: 100%;
    max-width: 640px;
}
.mv_catch {
    font-size: var(--font-size-heading-lv3);
	font-weight: 700;
}
.mv_logo {
    margin: 20px 0 0;
}
.mv_logo img {
	display: block;
	max-width: 420px;
	margin: 0 auto;
	width: 100%;
 }
.mv_point {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0 0;
}
.mv_point-item {
    background-color: var(--color-lightblue-02);
    border: 1px solid var(--color-blue-03);
    border-radius: 10px;
    padding: 14px 10px 9px;
    width: 33%;
}
.mv_point_text {
    font-size: var(--font-size-text-s);
    font-weight: bold;
    line-height: 1.6;
    margin-top: 10px;
}
.mv_point_text .text_em {
    background: linear-gradient(to right, var(--color-gradient-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: var(--font-size-text-m);
}

.mv_point_text .text_large {
    font-size: 20px;
}

.mv_desc {
    font-size: var(--font-size-text-m);
    line-height: 1.666;
    margin-top: 25px;
	font-weight: 600;
}

.mv_image {
    width: clamp(31.25rem, 9.607rem + 33.82vw, 50.188rem);
    aspect-ratio: 803 / 505;
}
.mv_releaseNotes {
	margin: 20px 0 0;
	text-align: center;
}

.mv_releaseNotes span {
	display: inline-block;
	background: linear-gradient(to right, var(--color-gradient-orange));
    color: var(--color-white);
    font-size: 1.25rem;
    line-height: 1;
    padding: 3px 15px 5px 18px;
    border-radius: 30px;
	font-weight: 600;
}
@media (max-width: 1280px) {
    .mv_image {
        max-width: 40%;
    }
}

@media (max-width: 1023px) {
    .mv_inner {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
	.mv_inner {
    	padding: 10px 0 30px;
	}
	.mv_catch {
    	font-size: 1rem;
    	font-weight: 700;
    	line-height: 1.7;
    	letter-spacing: .08em;
	}
    .mv_logo {
        width: 69%;
		margin: 20px auto 24px;
    }
    .mv_point {
        flex-direction: column;
        margin-top: 20px;
		gap: 10px;
    }
    .mv_point-item {
        display: flex;
        align-items: center;
        margin-inline: auto;
        padding-inline: 15px;
        width: 80%;
    }
    .mv_point_image {
        width: 25%;
    }
    .mv_point_text {
        text-align: left;
        margin-left: 20px;
	    line-height: 1.3;
    }
    .mv_point-item {
        width: 100%;
		padding: 5px 10px;
	}
	.mv_point li .mv_point_image img {
		margin: 0 auto;
		display: block;		
	}
	.mv_point li:first-child .mv_point_image img {
		width: 29.03px;
	}
	.mv_point li:nth-child(2) .mv_point_image img {
		width: 47.65px;
	}
	.mv_point li:nth-child(3) .mv_point_image img {
		width: 41px;
	}
	.mv_point_text {
		margin: 0;
	}
	.mv_point_text .text_em {
		font-size: .875rem;
	}
	.mv_image {
		display: none;
	}
	.mv_releaseNotes span {
    	font-size: 1.125rem;
	}
}


/*
    PROBLEM:課題・お悩み
------------------------------*/
.sec-problem {
    background-color: var(--color-lightblue);
}
.problem-item {
    background-color: var(--color-white);
    border-radius: var(--border-radius-corners);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-text-m);
    margin-bottom: 20px;
    padding-inline: 48px 30px;
    position: relative;
}
.problem-item_num {
    font-size: clamp(3.125rem, 2.411rem + 1.12vw, 3.75rem);
    font-weight: 400;
    margin-right: clamp(1.875rem, 0.161rem + 2.68vw, 3.375rem);
}
.problem-item_content {
    display: flex;
    width: 70%;
}
.problem-item_before,
.problem-item_after {
    width: 50%;
    max-width: 340px;
    position: relative;
}
.problem-item_before > .problem-item_label {
    color: var(--color-navy);
}
.problem-item_after > .problem-item_label {
    color: var(--color-darkorange);
    font-weight: bold;
}
.problem-item_after {
    margin-left: clamp(3.75rem, 0.679rem + 4.8vw, 6.438rem);
}
.problem-item_after::before {
    --_arrow-width: 20px;
    --_arrow-height: 35px;

    background-color: var(--color-darkorange);
    content: "";
    display: inline-block;
    width: var(--_arrow-width);
    height: var(--_arrow-height);
    clip-path: var(--triangle-right);
    position: absolute;
    top: 50%;
    left: calc((var(--_arrow-width) * 2) * -1);
    transform: translateY(-50%);
}
.problem-item_text {
    font-size: var(--font-size-text-m);
    line-height: 1.666;
}
.problem-item_image img {
    width: clamp(11.25rem, 6.25rem + 7.81vw, 15.625rem);
    aspect-ratio: 250 / 200;
    object-fit: cover;
}
.problem-item:nth-of-type(4) .problem-item_image img {
    object-position: 50% 90%;
}

.problem-solution {
    background: linear-gradient(to right, rgb(from #20BDFF r g b / 0.3) 0%, rgb(from #5433FF r g b / 0.3) 100%);
    border: 1px solid var(--color-gray-02);
    border-radius: var(--border-radius-corners);
    font-size: var(--font-size-text-l);
    margin-top: 89px;
    padding: clamp(1.25rem, -1.607rem + 4.46vw, 3.75rem) 5%;
    text-align: center;
    line-height: 2.8;
    position: relative;
}
.problem-solution::before {
    background: linear-gradient(to left, var(--color-gradient-blue));
    content: "";
    display: inline-block;
    width: 100px;
    height: 40px;
    clip-path: var(--triangle-bottom);
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
}
.problem-solution .text_em {
    color: #005281;
}
.problem-solution .text_logo img {
    margin-inline: 10px;
    vertical-align: text-bottom;
}

@media (max-width: 1023px) {
    .problem-item {
        padding: 20px 30px;
    }
    .problem-item_image {
        width: 20%;
    }
}

@media (max-width: 1023px) {
    .problem-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .problem-item_num {
        font-size: 40px;
    }
    .problem-item_content {
        flex-direction: column;
        width: auto;
    }
    .problem-item_before,
    .problem-item_after {
        width: auto;
    }
    .problem-item_after {
        margin-left: 0;
        margin-top: 50px;
    }
    .problem-item_after::before {
        top: calc((var(--_arrow-width) + 20px) * -1);
        left: 10%;
        transform: rotate(90deg);
    }
    .problem-item_image {
        position: absolute;
        top: 20px;
        right: 0;
        width: 40%;
    }
    .problem-item_image img {
        width: auto;
    }
    .problem-solution {
        line-height: 2;
    }
}


/*
    Can Do:ナレツグでできること
------------------------------*/
.point-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(2.5rem, -1.571rem + 6.36vw, 6.063rem);
    margin-top: 60px;
}
.point-item:first-child {
    margin-top: 0;
}
.point-item_desc,
.point-item_image {
    width: 50%;
}
.point-item_image img {
    border-radius: 10px;
}

.point-item:nth-of-type(even) .point-item_desc { order: 2; }
.point-item:nth-of-type(even) .point-item_image { order: 1; }

.point-item_title {
    color: var(--color-navy);
    font-size: clamp(1.375rem, 0.946rem + 0.67vw, 1.75rem);
    font-weight: bold;
}
.point-item_title-label {
    background: linear-gradient(to right, var(--color-gradient-blue));
    border-radius: var(--border-radius-circle);
    color: var(--color-white);
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
    padding: 8px 19px;
    margin-bottom: clamp(0.938rem, -0.205rem + 1.79vw, 1.938rem);
}
.point-item_text {
    font-size: var(--font-size-text-m);
    font-weight: 500;
    margin-top: clamp(1.25rem, -0.464rem + 2.68vw, 2.75rem);
}
.point-item_text .hp_small {
	font-size: .875rem;
}

@media screen and (max-width: 767px) {
    .point-item {
        flex-direction: column;
    }
    .point-item_desc,
    .point-item_image {
        width: auto;
    }
    .point-item:nth-of-type(even) .point-item_desc,
    .point-item:nth-of-type(even) .point-item_image {
        order: 1;
    }
	.problem-solution p span:nth-of-type(1) {
		margin: 0 0 8px;
		display: block;
	}
	.point-item_text {
    	margin-top: 5px;
	}
	.point-item_title {
    	font-size: 1.25rem;
	}
}


/*
    FUNCTION:ナレツグの主な機能
------------------------------*/
.sec-function {
    background-color: var(--color-lightblue);
}
.sec-function_notes {
	font-size: .875rem;
	text-align: center;
	margin: 20px 0 0;
}
.function-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px clamp(1.25rem, -0.288rem + 2.4vw, 1.875rem);
}
.function-item {
    background-color: var(--color-white);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 38px 5%;
    position: relative;
    text-align: center;
}
.function-item_icon {
    background-color: var(--color-gray-03);
    border-radius: var(--border-radius-circle);
    content: "";
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(7.5rem, 3.929rem + 5.58vw, 10.625rem);
    aspect-ratio: 1 / 1;
}
.function-item_icon img {
    height: 50px;
}
.function-item .function-item_icon::before {
    background: no-repeat center center / contain;
    content: "";
    display: block;
}
.function-item_title {
    font-size: clamp(1.25rem, 0.964rem + 0.45vw, 1.5rem);
    font-weight: 500;
    line-height: 1.666;
    margin: 22px 12px;
    text-align: center;
}
.function-item_text {
    font-size: var(--font-size-text-s);
    line-height: 1.625;
}
.function-list .licence {
    color: var(--color-gray-04);
    font-size: 14px;
    position: absolute;
    top: .5em;
    left: 2em;
}

@media screen and (max-width: 767px) {
    .function-list {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
	.sec-function_notes {
		text-align: left;
	}
}


/*
    SCENE:利用シーン
------------------------------*/
.sec-scene {
    background: linear-gradient(to right, var(--color-gradient-blue));
}
.sec-scene .section_title {
    color: var(--color-white);
}
.scene-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 41px 30px;
}
.scene-item {
    background-color: var(--color-lightblue);
    border-radius: 20px;
    padding: 10px 10px 20px;
    text-align: center;
}
.scene-item_title {
    font-size: var(--font-size-text-l);
    font-weight: 400;
    margin-bottom: 9px;
}
.scene-item_text {
    font-size: var(--font-size-text-s);
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.scene-item .btn {
    margin: 20px auto 0;

    width: 80%;
}
.scene-item .btn a {
    font-size: var(--font-size-text-s);
    font-weight: normal;
}
.scene-item .btn a::after {
    border-top-width: 2px;
    border-right-width: 2px;
    width: .7em;
}

@media screen and (max-width: 1023px) {
    .scene-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .scene-item {
        width: calc(33.33% - clamp(1.875rem, -0.625rem + 3.91vw, 4.063rem));
    }
}

@media screen and (max-width: 767px) {
    .scene-list {
        gap: 20px;
    }
    .scene-item {
        width: calc(50% - 10px);
    }
    .scene-item .btn {
        width: 100%;
    }
}

@media screen and (max-width: 320px) {
    .scene-item {
        width: 100%;
    }
    .scene-item_text {
        text-align: center;
    }
}

/*
    STEP:導入ステップ（推奨）
------------------------------*/
.sec-step {
    --_arrow-width: 40px;
    --_arrow-height: 70px;
}
.step-flow {
    display: flex;
}
.step-item {
    flex-grow: 1;
}
.step-arrow {
    background: linear-gradient(to right, var(--color-gradient-orange));
    border: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: var(--font-size-text-l);
    height: calc(var(--_arrow-height) + 2px);
    font-weight: bold;
    line-height: calc(var(--_arrow-height) + 2px);
    margin-bottom: 25px;
    text-align: center;
    position: relative;
}
.step-item .step-arrow::before,
.step-item .step-arrow::after {
    content: "";
    clip-path: var(--triangle-right);
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
}
.step-item .step-arrow::before {
    background-color: var(--color-white);
    width: calc(var(--_arrow-width) + 2px);
    height: calc(var(--_arrow-height) + 2px);
    right: calc(calc(var(--_arrow-width) * -1) - 3px);
}
.step-item .step-arrow::after {
    background-color: var(--color-orange-02);
    width: var(--_arrow-width);
    height: var(--_arrow-height);
    right: calc(calc(var(--_arrow-width) - 1px) * -1);
}

.step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.step-item_image {
    height: 52px;
}
.step-item_title {
    color: var(--color-navy);
    font-size: clamp(1.5rem, 1.071rem + 0.67vw, 1.875rem);
    font-weight: bold;
    margin-block: 14px;
}

@media screen and (max-width: 1023px) {
    .step-flow {
        margin-right: var(--_arrow-width);
    }
    .step-item_title {
        font-size: 20px;
    }
}

@media screen and (max-width: 767px) {
    .step-flow {
        flex-direction: column;
        margin-right: 0;
    }
    .step-item {
        display: flex;
    }
    .step-arrow {
        background: linear-gradient(to bottom, var(--color-gradient-orange));
        flex-shrink: 0;
        margin: 0;
        height: auto;
        width: var(--_arrow-height);
        padding-top: var(--_arrow-width);
    }
    .step-item .step-arrow::before,
    .step-item .step-arrow::after {
        inset: auto;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
    .step-item .step-arrow::before {
        bottom: -58px;
    }
    .step-item .step-arrow::after {
        bottom: -55px;
    }
    .step-content {
        padding-block: 30px;
        width: 80%;
    }
    .step-item_title {
        margin-bottom: 5px;
    }
}


/*
    PRICE:価格
------------------------------*/
.sec-price {
    background-color: var(--color-lightblue);
}
.price-table colgroup {
    width: 20%;
}
.price-table th,
.price-table td {
    font-weight: 400;
}
.price-table tbody th {
    color: var(--color-gray-04);
}
.price-table tbody td span {
    font-size: var(--font-size-text-m);
}

.group_base {
    background-color: var(--color-gray-03);
    color: var(--color-gray-04);
}
.group_minimun { background-color: #F0F8F4; }
.group_depart { background-color: #F3F9FF; }
.group_branch { background-color: #FDF8FC; }
.group_whole { background-color: var(--color-white); }

.price-table th.th_base {
    background-color: var(--color-gray-02);
    color: var(--color-gray-04);
}
.price-table th.th_minimum { background-color: #59B585; }
.price-table th.th_depart { background-color: #68A3DA; }
.price-table th.th_branch { background-color: #EB86A5; }
.price-table th.th_whole { background-color: var(--color-darkorange); }


/*
    FAQ:よくある質問
------------------------------*/
.sec-faq {
    background-color: #595757;
}
.sec-faq .section_title-label,
.sec-faq .section_title {
    color: var(--color-white);
}
.faq-list {
    max-width: 1000px;
    margin-inline: auto;
    border-bottom: 1px solid var(--color-white);
}
.faq-item {
    border-top: 1px solid var(--color-white);
    color: var(--color-white);
    padding-block: 40px;
}
.faq-item_title {
    font-size: var(--font-size-text-l);
    font-weight: 400;
    position: relative;
    padding-inline: 30px;
}
.faq-item_text {
    font-size: 1.125rem;
    padding: 24px 30px 0;
}
.faq-item_text p {
    padding: 0 2em;
    text-indent: -2em;
}
.faq-item_text p .text_em {
    color: var(--color-orange);
    font-weight: bold;
}
.faq-item_label-q,
.faq-item_label-a {
    font-size: var(--font-size-text-l);
    margin-right: 1em;
}
.faq-item_title::after {
    content: '';
    border-bottom: 1px solid var(--color-white);
    border-left: 1px solid var(--color-white);
    display: inline-block;
    width: 23px;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(-45deg);
}
.is-open .faq-item_title::after {
    transform: rotate(-225deg);
}
.faq-item .hp_small {
	font-size: .875rem;
}
@media screen and (max-width: 767px) {
    .faq-item {
        padding-inline: 10px 15px;
    }
    .faq-item_title {
        padding-left: 2em;
        text-indent: -1.8em;
    }
    .faq-item_title::after {
        width: 14px;
        right: -10px;
    }
    .faq-item_text {
        padding-left: 0;
    }
	.faq-item_text {
    	padding: 24px 0 0;
	}
	.faq-item_text p {
    	padding: 0 0 0 2em;
	}
	.faq-item_text,
	.faq-item_title {
    	font-size: 1.0625rem;
	}
}


/*
    CV AREA
------------------------------*/

.cv-catch {
    font-size: var(--font-size-text-l);
    line-height: 1.363;
    text-align: center;
}

.cv-area-01 {
    padding: 20px 5%;
}
.cv-area-01 .btn a {
    font-weight: normal;
}

.cv-area-02 {
    background: linear-gradient(to left, var(--color-blue), 70%, var(--color-blue-02) 100%);
    padding: 70px 5%;
}
.cv-area-02 .cv-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    max-width: 1228px;
    margin-inline: auto;
}
.cv-area-02 .cv-logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.cv-area-02 .cv-catch {
    color: var(--color-white);
}
.cv-area-02 .btn-wrap {
    margin-top: 20px;
}
.cv-area-02 .btn_contact {
    background: var(--color-white);
}
.cv-area-02 .btn_contact a {
    color: var(--color-blue-04);
}
.cv-area-02 .btn_contact a:hover {
    color: var(--color-white);
}

.cv-area-03 {
    padding: 74px 5% 85px;
}
.cv-area-03 .cv-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    max-width: 1260px;
	max-width: 1092px;
    margin-inline: auto;
}
.cv-area-03 .cv-content {
    text-align: center;
}
.cv-area-03 .cv-catch {
    color: var(--color-navy);
    margin-bottom: 30px;
}
.cv-area-03 .cv-logo {
    margin-bottom: 20px;
}

.cv-area-03 .link-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(3.75rem, -1.25rem + 7.81vw, 8.125rem);
    max-width: 1120px;
    margin: 87px auto 0;
}

@media screen and (max-width: 1023px) {
    .cv-area-02 .cv-inner {
        gap: 50px;
    }
    .cv-area-02 .cv-logo-wrap {
        flex-direction: column;
    }
    .cv-area-03 .cv-content {
        width: 60%;
    }
	.cv-area-02 .btn-wrap {
		display: block;
	}
	.cv-area-02 .cv-img {
		width: 40%;
	}
	.cv-area-02 .btn {
		width: 100%;
	}
	.cv-area-02 .btn.btn_contact {
		margin-top: 15px;
	}
}

@media screen and (max-width: 767px) {
	.cv-area-02,
	.cv-area-03 {
		padding: 60px 5%;
	}
    .cv-area-02 .cv-inner,
    .cv-area-03 .cv-inner,
    .cv-area-03 .link-list {
        flex-direction: column;
    }
    .cv-area-03 .cv-content {
        width: 100%;
    }
    .cv-area-03 .link-list {
        gap: 20px;
        margin: 10px auto;
        width: 80%;
    }
	.cv-area-02 .cv-logo-wrap {
    	margin: 20px 0 0;
	}
}