@charset "UTF-8";

/* -------------------------------
I型
------------------------------- */

/* CSS Document */
:root {
    --preset--color--main: #c5334a;
    --preset--color--main-2: #df653a;
    --preset--color--logo: #333333;
    --preset--color--btn-contact: #26c10d;
    --preset--color--btn-handout: #e69d00;
    --preset--color--base: #ffffff;
    --preset--color--base-2: #fff4f0;
    --preset--color--base-3: #ffffe4;
    --preset--color--contrast: #000000;
    --preset--color--accent: #fff76a;
    --preset--color--sumi-200: #E8E8EB;
    --preset--color--sumi-100: #f1f1f4;
    --preset--color--sumi-50: #F8F8FB;
    --preset--color--gray: #cccccc;
    --preset--color--yagish: #308c37;

    --preset--color--accent-2: #EFEC09;
    --preset--color--link: #3399ff;
    --preset--color--link-hover: #ff6600;

    --preset--spacing--10: 10px;
    --preset--spacing--20: clamp(1rem, 0.8555rem + 0.6163vw, 1.25rem);
    --preset--spacing--30: clamp(1.25rem, 0.8889rem + 1.5408vw, 1.875rem);
    --preset--spacing--50: clamp(1.875rem, 1.1527rem + 3.0817vw, 3.125rem);
    --preset--spacing--70: clamp(3.125rem, 2.4027rem + 3.0817vw, 4.375rem);
    --preset--spacing--100: clamp(4.375rem, 3.2916rem + 4.6225vw, 6.25rem);

    --preset--font-size--body: clamp(0.875rem, 0.8021rem + 0.3333vw, 1rem);
    /* 16-14px */
    --preset--font-size--h2: clamp(2rem, 1.3438rem + 3vw, 3.125rem);
    /* 50-32px */
    --preset--font-size--h2-2: clamp(1.75rem, 1.2396rem + 2.3333vw, 2.625rem);
    /* 42-28px */
    --preset--font-size--h3: clamp(1.5rem, 1.1739rem + 1.3913vw, 2rem);
    /* 32-24px */
    --preset--font-size--h4: clamp(1.375rem, 1.1304rem + 1.0435vw, 1.75rem);
    /* 28-22px */
    --preset--font-size--h5: clamp(1.125rem, 0.962rem + 0.6957vw, 1.375rem);
    /* 22-18px */

}

/* -------------------------------
基本設定
------------------------------- */

/* body全体の初期スタイル */
body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--preset--font-size--body);
    font-weight: 400;
    background-color: var(--preset--color--base);
    margin: 0;
}

img {
    display: block;
    /* imgの下に余計な空白が入るのを防ぐ */
    width: 100%;
}

/* リンク文字の設定 */
a {
    text-decoration: none;
}

.smalltext {
    font-size: 0.8rem;
}

/* -------------------------------
見出しタグ設定
------------------------------- */

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700;
    line-height: 1.5;
    min-height: 0vw;
    /* clampをSafariで機能させるため */
}

h2 {
    font-size: var(--preset--font-size--h2);
    margin-bottom: var(--preset--spacing--50);
    margin-top: var(--preset--spacing--70);
    text-align: center;
}

h3 {
    font-size: var(--preset--font-size--h3);
    margin-bottom: var(--preset--spacing--30);
    margin-top: var(--preset--spacing--50);
}

h4 {
    font-size: var(--preset--font-size--h4);
    margin-bottom: var(--preset--spacing--20);
    margin-top: var(--preset--spacing--30);
}

h5 {
    font-size: var(--preset--font-size--h5);
    margin-bottom: var(--preset--spacing--20);
    margin-top: var(--preset--spacing--30);
}

/* -------------------------------
全体レイアウト／背景設定
------------------------------- */

/* 記事（ボディ）エリア */
article {
    width: 100%;
}

article p {
    line-height: 1.7;
}

article p:first-of-type {
    margin-top: 0;
}

/* 全体の幅を設定する */
.header_inr,
.section_inr {
    margin: 0 auto;
    max-width: 1200px;
    /* 画面幅が375pxの時に左右の余白が15px -> 92% */
    width: 92%;
}

section {
    clear: both;
    overflow: auto;
    padding: var(--preset--spacing--70) 0;
}

section h2:first-of-type {
    margin-top: 0;
}

/* ボタン */
.wrap_btn a:hover {
    opacity: 0.9;
}

/* 強調テキスト */
.emphasize_phrase {
    background-image: linear-gradient(rgba(0 0 0 / 0) 70%,
            var(--preset--color--accent) 70%);
    font-weight: 700;
}

/* セクション見出し */
h2.h_section {
    background-image: url(../images/logo.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: clamp(200px, 30vw, 300px);
    padding-top: var(--preset--spacing--70);
}

/* 見出し：下線 */
:is(h1, h2, h3, h4, h5, h6).underline {
    border-bottom: 2px solid var(--preset--color--main);
    padding-bottom: 5px;
}

/* 見出し：短い下線 */
:is(h1, h2, h3, h4, h5, h6).short-line {
    margin-bottom: var(--preset--spacing--50);
    padding-bottom: 20px;
    position: relative;
    text-align: center;
}

:is(h1, h2, h3, h4, h5, h6).short-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background-color: var(--preset--color--main);
}

/* 見出し：左右線 */
:is(h1, h2, h3, h4, h5, h6).lr-lines {
    display: flex;
    justify-content: center;
    align-items: center;
}

:is(h1, h2, h3, h4, h5, h6).lr-lines::before,
:is(h1, h2, h3, h4, h5, h6).lr-lines::after {
    content: '';
    width: 70px;
    height: 3px;
    background-color: var(--preset--color--main);
}

:is(h1, h2, h3, h4, h5, h6).lr-lines::before {
    margin-right: var(--preset--spacing--30);
}

:is(h1, h2, h3, h4, h5, h6).lr-lines::after {
    margin-left: var(--preset--spacing--30);
}

/* -------------------------------
上部固定ヘッダー設定
------------------------------- */

/* 上部固定ヘッダー全体 */
header {
    background-color: var(--preset--color--base);
    border-bottom: 1px solid var(--preset--color--gray);
    height: clamp(100px, 12vw, 120px);
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 5000;
}

@media screen and (max-width: 767px) {
    header {
        height: 60px;
    }
}

/* ヘッダー内部 */
.header_inr {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
    justify-content: center;
}

.header_main {
    display: flex;
    gap: var(--preset--spacing--30);
    justify-content: space-between;
    width: 100%;

}

.header_inr img {
    width: 100%;
}

.header_logo {
    margin-right: auto;
    max-width: 260px;
}

.header_menu {
    align-items: center;
    display: flex;
    gap: var(--preset--spacing--30);
}

.header_menu .wrap_tel {
    max-width: 240px;
    min-width: 200px;
}

.header_btns {
    align-items: center;
    display: flex;
    gap: var(--preset--spacing--10);
}


.header_btns .wrap_btn {
    max-width: 200px;
    min-width: 120px;
}

@media screen and (max-width: 1023px) {
    .header_menu .handout {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .header_menu {
        display: none;
    }

    .header_inr {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ページ内メニュー */

.header_sub a {
    color: var(--preset--color--contrast);
}

.header_sub ul {
    margin: var(--preset--spacing--20) auto 0;
}

/* -------------------------------
ファーストビュー設定
------------------------------- */

.top_image {
    background-image: url(../images/top_image_back.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    height: auto;
}

.top_image_in {
    margin: 0 auto;
    max-width: 1200px;
}

@media screen and (max-width: 1200px) {
    .top_image {
        background-image: none;
    }

    .top_image_in {
        max-width: none;
        width: 100%;
    }
}

.top_image_in img {
    width: 100%;
}

/* -------------------------------
section別設定
------------------------------- */

/* CTA */

.area_cta {
    background-image: linear-gradient(to right, var(--preset--color--main) 0%, var(--preset--color--main-2) 100%);
    padding: var(--preset--spacing--50) 0;
}

.cta_top {
    padding-top: 0;
}

.area_cta .section_inr {
    background-color: var(--preset--color--base);
    display: flex;
    gap: var(--preset--spacing--50);
    justify-content: center;
    max-width: 1104px;
    padding: 0 var(--preset--spacing--30);
}

.cta_img {
    align-self: flex-end;
    flex-shrink: 0;
    padding-top: var(--preset--spacing--30);
    /* width: clamp(200px, 30vw, 300px); */
    width: 300px;
}

@media screen and (max-width: 1023px) {
    .cta_img {
        display: none;
    }
}

.cta_main {
    align-self: center;
    padding-bottom: var(--preset--spacing--30);
    padding-top: var(--preset--spacing--20);
    max-width: 650px;
}

.cta_microcopy {
    margin-top: var(--preset--spacing--30);
}

.cta_btns {
    align-items: center;
    display: flex;
    gap: var(--preset--spacing--10);
    margin-top: var(--preset--spacing--30);
}

.cta_tel {
    margin-top: var(--preset--spacing--30);
}

/* 導入部 */
.sec_intro-1 {
    background-color: var(--preset--color--sumi-200);
    padding-bottom: 0;
    padding-top: var(--preset--spacing--50);
}

.sec_intro-2 {
    padding-top: var(--preset--spacing--30);
}

/* ヒロガリ採用とは */
.sec_about {
    padding-top: 0;
    scroll-margin-top: 300px;
}

.sec_about .section_inr {
    background-color: var(--preset--color--sumi-50);
    padding: var(--preset--spacing--30);
}

.sec_about h2 {
    margin-bottom: var(--preset--spacing--30);
    max-width: 600px;
}

.wrap_about {
    display: flex;
    gap: var(--preset--spacing--30);
}

@media screen and (max-width: 767px) {
    .wrap_about {
        flex-direction: column;
    }
}

.about_checklist {
    background-color: var(--preset--color--base);
    border: 1px solid var(--preset--color--main-2);
    padding: var(--preset--spacing--20);
}

.about_checklist .checklist {
    font-weight: 700;
    margin: 0;
    padding: 0;
}

/* 3つの特長 */
.sec_points {
    padding-top: 0;
}

.wrap_points {
    display: flex;
    gap: var(--preset--spacing--30);
}

@media screen and (max-width: 767px) {
    .wrap_points {
        flex-direction: column;
    }
}

.point_item {
    flex: 1;
}

.point_num {
    background-color: var(--preset--color--main);
    color: var(--preset--color--base);
    font-size: var(--preset--font-size--h5);
    padding: 5px;
    text-align: center;
}

.point_item h3 {
    font-size: var(--preset--font-size--h4);
    margin: 5px 0;
}

/* 事例 */
.sec_cases {
    background-color: var(--preset--color--sumi-50);
}

.wrap_cases {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--preset--spacing--30);
}

@media screen and (max-width: 1023px) {
    .wrap_cases {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .wrap_cases {
        grid-template-columns: repeat(1, 1fr);
    }
}

.case_item {
    position: relative;
    background-color: var(--preset--color--base);
    border: 1px solid var(--preset--color--gray);
    padding: var(--preset--spacing--20);
}

.case_num {
    position: absolute;
    top: -20px;
    right: 2px;
    z-index: 1;
}

.case_num img {
    height: 80px;
    width: auto;
}

@media screen and (max-width: 767px) {
    .case_num {
        top: -10px;
    }
}

.case_item h3 {
    font-size: var(--preset--font-size--h4);
    margin: 0 0 10px;
    position: relative;
    z-index: 2;
}

.case_item h4 {
    font-size: var(--preset--font-size--h5);
    margin: 10px 0;
}

.case_item h3 span,
.case_item h4 span {
    font-weight: 400;
}

.case_item h4 span {
    display: block;
    font-size: var(--preset--font-size--body);
}


.case_step,
.case_total {
    display: flex;
    justify-content: space-between;
}

.case_step {
    background-color: var(--preset--color--sumi-50);
    padding: 5px;
}

.case_step.final {
    background-color: var(--preset--color--main);
    color: var(--preset--color--base);
}

.case_arrow {
    text-align: center;
}

.case_total {
    color: var(--preset--color--main);
    font-size: var(--preset--font-size--h5);
    font-weight: 700;
    margin-top: 10px;
}

.industries {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

@media screen and (max-width: 1023px) {
    .industries {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .industries {
        grid-template-columns: repeat(3, 1fr);
    }
}

.industry_item h4 {
    font-size: var(--preset--font-size--body);
    margin: 5px 0;
}

/* ヤギッシュ */

.yagish_intro p {
    margin: 0;
}

.about_yagish {
    border: 5px solid var(--preset--color--yagish);
    border-radius: 20px;
    margin-top: var(--preset--spacing--50);
    position: relative;
    padding: var(--preset--spacing--20);
}

.yagish_logo {
    background-color: var(--preset--color--base);
    border: 5px solid var(--preset--color--base);
    position: absolute;
    top: -45px;
    right: 40px;
    width: 200px;
}

@media screen and (max-width: 1023px) {
    .yagish_logo {
        top: -40px;
        right: 30px;
        width: 160px;
    }
}

@media screen and (max-width: 767px) {
    .yagish_logo {
        border: 3px solid var(--preset--color--base);
        top: -25px;
        right: 20px;
        width: 100px;
    }
}

.about_yagish h3 {
    border-bottom: 2px solid var(--preset--color--yagish);
    font-size: var(--preset--font-size--h4);
    margin-bottom: var(--preset--spacing--20);
    margin-top: 0;
    padding-bottom: 5px;
    text-align: left;
}

.yagish {
    display: flex;
    gap: var(--preset--spacing--30);
}

.yagish_img img {
    border: 1px solid var(--preset--color--gray);
    max-width: 200px;
}

.yagish h4 {
    font-size: var(--preset--font-size--h5);
    margin: var(--preset--spacing--20) 0;
}

.yagish h4:first-of-type {
    margin-top: 0;
}

.yagish_dairi {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    margin-top: var(--preset--spacing--30);
}

.yagish_dairi_arrow {
    flex-shrink: 0;
    width: 50px;
}

.yagish_dairi p {
    font-size: var(--preset--font-size--h5);
    font-weight: 700;
    margin: 0;
}

/* 料金プラン */
.sec_plan {
    background-color: var(--preset--color--sumi-50);
}

.sec_plan .wrap_table {
    overflow-x: auto;
}

.sec_plan table {
    min-width: 700px;
    /* 横スクロールさせるため */
}

.note_table_scroll {
    display: none;
}

@media screen and (max-width: 750px) {
    .note_table_scroll {
        display: block;
        text-align: right;
    }
}

.sec_plan th {
    background-color: var(--preset--color--logo);
    color: var(--preset--color--base);
}

.sec_plan .th_trial {
    background-color: var(--preset--color--btn-handout);
}

.sec_plan .th_middle {
    background-color: var(--preset--color--main-2);
}

.sec_plan .th_pro {
    background-color: var(--preset--color--main);
}

.sec_plan .th_other {
    background-color: var(--preset--color--gray);
    color: var(--preset--color--contrast);
}

.sec_plan td.other {
    background-color: var(--preset--color--sumi-100);
}

.sec_plan .th_expected {
    background-color: var(--preset--color--base-3);
    color: var(--preset--color--contrast);
}


.plan_support {
    /* text-align: left; */
    white-space: nowrap;
}

.sec_plan .wrap_checklist {
    display: flex;
    justify-content: center;
    margin-top: var(--preset--spacing--30);
}

.sec_plan .checklist {
    margin: 0;
    padding: 0;
}

/* サービスの流れ */

.sec_flow {
    background-image: url(../images/bg_dot.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.wrap_steps {
    display: flex;
    justify-content: center;
}

.steps_content {
    background-color: var(--preset--color--base);
    border: 1px solid var(--preset--color--sumi-200);
    padding: var(--preset--spacing--30);
}

.step_item {
    display: flex;
    gap: var(--preset--spacing--20);
}

.step_num_line {
    padding-bottom: 30px;
    position: relative;
}

.step_num_line::before {
    content: "";
    width: 5px;
    background-color: var(--preset--color--main);
    display: block;
    position: absolute;
    top: 32px;
    bottom: 0;
    left: 77px;
}

@media screen and (max-width: 767px) {
    .step_num_line::before {
        width: 4px;
        top: 24px;
        left: 46px;
    }
}

.step_num {
    flex-shrink: 0;
    width: 100px;
}

@media screen and (max-width: 767px) {
    .step_num {
        width: 60px;
    }
}

.step_content {
    display: flex;
    gap: var(--preset--spacing--20);
}

.step_img {
    flex-shrink: 0;
    width: clamp(120px, 22vw, 260px);
}

.step_txt h3 {
    font-size: var(--preset--font-size--h5);
    line-height: 1;
    margin: 0 0 10px;
}

.step_txt p {
    margin: 0;
}

.flow_message {
    font-weight: 700;
    margin-top: var(--preset--spacing--30);
    text-align: center;
}

@media screen and (max-width: 767px) {
    .flow_message {
        text-align: left;
    }
}

/* よくある質問 */
.sec_faq {
    background-color: var(--preset--color--sumi-50);
}

.faq_item {
    background-color: var(--preset--color--base);
    border-radius: 10px;
    margin-top: var(--preset--spacing--30);
    padding: var(--preset--spacing--30);
}

.faq_item a {
    color: var(--preset--color--link);
}

.faq_item a:hover {
    color: var(--preset--color--link-hover);
    text-decoration: underline;
}

.faq_q h4 {
    font-size: var(--preset--font-size--h5);
    margin: 0;
}

.faq_a {
    margin-top: var(--preset--spacing--20);
}

.faq_a p {
    margin: 0;
}

.faq_q,
.faq_a {
    display: flex;
    gap: var(--preset--spacing--20);
}

.faq_q_img,
.faq_a_img {
    flex-shrink: 0;
    width: 28px;
}

.faq_q_img {
    margin-top: 2px;
}

.faq_a_img {
    margin-top: 0.5em;
}

/* 会社概要 */
.sec_company {
    background-image: linear-gradient(to right, var(--preset--color--main) 0%, var(--preset--color--main-2) 100%);
    padding-top: 0;
}

.sec_company .section_inr {
    display: flex;
    justify-content: center;
}

.sec_company h2 {
    border-bottom: 1px solid var(--preset--color--base);
    color: var(--preset--color--base);
    font-size: var(--preset--font-size--h5);
    margin: 0;
    padding-bottom: 10px;
}

.company_content {
    color: var(--preset--color--base);
    margin-top: var(--preset--spacing--20);
}

.company_info {
    display: flex;
    flex-direction: column;
    gap: var(--preset--spacing--20);
    margin: 0;
    padding: 0;
}

.company_info>div {
    display: flex;
    gap: 10px;
}

.company_info dt {
    font-weight: 700;
    white-space: nowrap;
    width: 4em;
}

.company_info dd {
    margin: 0;
}

/* -------------------------------
フッター部分
------------------------------- */

.footer {
    background-color: var(--preset--color--logo);
    color: var(--preset--color--base);
    padding: var(--preset--spacing--30) 0;
    text-align: center;
}

.footer a {
    color: var(--preset--color--base);
}

.footer a:hover {
    text-decoration: underline;
}

.footer p {
    padding-top: var(--preset--spacing--30);
}

/*--------------------------------------------------
スマホ用下部固定フッター（PCは非表示）
https://lpdesignermasterschool.com/
アニメーションの指定は「上へ戻るボタン」と一緒にcommon.cssに
-----------------------------------------------------*/

#fix_menu_smartphone {
    display: none;
}

@media screen and (max-width: 767px) {
    #fix_menu_smartphone {
        align-items: center;
        background-color: var(--preset--color--btn);
        bottom: 0px;
        box-shadow: 0px 0px 3px #594a42;
        display: flex;
        left: 0px;
        position: fixed;
        width: 100%;
        z-index: 10000;
        /*はじめは非表示*/
        opacity: 0;
        transform: translateY(100px);
    }

    #fix_menu_smartphone a {
        padding: 1em;
        margin: 0 auto;
    }

    #fix_menu_smartphone img {
        max-width: 300px;
    }


    /* footer下スペース広げる */
    .footer {
        padding-bottom: 4em;
    }
}