@charset "utf-8";

/* トップ画像の設定 */

.key {
    /* 高さを画面いっぱいにする */
    height: 100vh;
    /* 幅を画面いっぱいにする */
    width: 100%;
    /* 画像パス */
    background-image: url(../img/top_bg_img.jpg);
    /* 画像の高さを画面の高さに合わせる */
    background-size: cover;
    /* 画像の中心位置を中心に合わせる */
    background-position: center;
    /* 基準位置にする */
    position: relative;
}

.key .key_text_wrap {
    /* key_textをkeyの中心に配置する */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 320px;
    height: 240px;
    margin: auto;
    content: '';
}

.key .key_text_wrap .key_text {
    /* 背景色を半透明の白にする */
    background-color: var(--white-transparent);
    /* 文字の周りに余白を設ける */
    padding: var(--gutter-3x);
    /* 文字サイズを大きめにする */
    font-size: var(--size-lg);
}

/* PC版の設定 */
@media screen and (min-width:950px) {
    .key .key_text_wrap {
        /* 横幅を倍にする */
        max-width: 640px;
    }

    .key .key_text_wrap .key_text {
        /* 文字の周りに余白を倍にする */
        padding: var(--gutter-6x);
        /* 文字サイズを1サイズ大きくする */
        font-size: var(--size-xl);
    }
}

/*=====min-width:950px=====*/

/* 20240706 追記 */
/* 「キャッチコピー」の配置を向かって左上にする */
@media screen and (min-width:950px) {
    .key .key_text_wrap {
        max-width: 520px;
        margin: 0;
        top: 160px;
        left: 80px;
    }
}

/*=====min-width:950px=====*/


/* 20240706 追記ここまで */

/* トップ画像の設定ここまで */

/* セクション共通設定 */

.section_title {
    /* 明朝体にする */
    font-family: var(--font-serif);
    /* 文字サイズを大きめにする */
    font-size: var(--size-lg);
    /* 中央配置する */
    text-align: center;
    /* コンテンツとの間に余白を設ける */
    margin-bottom: var(--content-gutter);
}

.section_caption {
    /* セクションタイトルとキャプションの間の余白を16pxにする */
    transform: translateY(-24px);
    /* キャプションとコンテンツとの余白を40pxにする */
    margin-bottom: 24px;
    /* テキスト左右余白 */
    margin-left: var(--gutter-base);
    margin-right: var(--gutter-base);
}

/* PC版の設定 */
@media screen and (min-width:950px) {
    .section_title {
        /* 文字サイズを1サイズ大きくする */
        font-size: var(--size-xl);
        /* コンテンツとの間の余白 PC版 */
        margin-bottom: var(--content-gutter-pc);
    }

    .section_caption {
        /* 中央配置 */
        text-align: center;
        /* セクションタイトルとキャプションの間の余白を32pxにする */
        transform: translateY(-56px);
        /* キャプションとコンテンツとの余白を80pxにする */
        margin-bottom: 56px;
    }
}

/*=====min-width:950px=====*/


/* セクション共通設定ここまで */

/* プロフィールの設定 */

.profile_wrap {
    /* ヘッダー間との余白 */
    margin-top: var(--header-gutter);
    /* 次のセクションとの間の余白 */
    margin-bottom: var(--section-gutter);
}

.profile_img_wrap {
    /* プロフィールの画像とテキスト間の余白 */
    margin-bottom: var(--content-gutter);
}

.profile_img_wrap .profile_img {
    /* プロフィール画像を横幅いっぱいにする */
    width: 100%;
}

.profile_text_wrap {
    /* テキストの左右下に余白 */
    margin: 0 var(--gutter-base) var(--content-gutter) var(--gutter-base);
}

.profile_text_wrap .profile_text_name {
    /* 名前の下に余白 */
    margin-bottom: var(--content-gutter);
    /* 名前の文字サイズを大きめにする */
    font-size: var(--size-lg);
}

.profile_text_wrap .profile_text_name .profile_text_job_title {
    /* 職業名と名前の間で改行する */
    display: block;
    /* 職業名の文字サイズを普通にする */
    font-size: var(--size-md);
    /* 職業名の文字装飾を普通にする */
    font-weight: normal;
}

.profile_btn {
    /* ボタンの最大値を400pxにする */
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.profile_btn .profile_btn_link {
    /* リンク部分を親要素いっぱいにする */
    display: block;
    width: 100%;
    /* 背景色 */
    background-color: var(--sub-color);
    /* 中央配置 */
    text-align: center;
    /* ボタン内部上下余白 */
    padding: var(--content-gutter) 0;
    /* リンクの下線を消す */
    text-decoration: none;
    /* 文字色を白にする */
    color: var(--white);
}

/* PC版の設定 */
@media screen and (min-width:950px) {
    .profile_wrap {
        /* ヘッダー間との余白 PC版 */
        margin-top: var(--header-gutter-pc);
        /* 次のセクションとの間の余白 PC版 */
        margin-bottom: var(--section-gutter-pc);
        /* コンテンツ幅を950pxにして中央配置 */
        width: 950px;
        margin-left: auto;
        margin-right: auto;
    }

    .profile_box {
        /* 3マス x 3マスのグリッド配置 */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    .profile_img_wrap {
        /* 画像 右1マス 上2マス */
        grid-column: 3/4;
        grid-row: 1/3;
    }

    .profile_text_wrap {
        /* テキスト 上2マス 左2マス */
        grid-column: 1/3;
        grid-row: 1/3;
        /* 横幅480px */
        width: 480px;
    }

    .profile_btn {
        /* ボタン 上2マス 左2マス */
        grid-column: 1/3;
        grid-row: 3/4;
    }

    .profile_btn {
        /* ボタンの最大値を480pxにする */
        width: 480px;
        /* 余白を0にする */
        margin: 0;
    }

    .profile_btn .profile_btn_link {
        /* リンク文字を大きめにする */
        font-size: var(--size-lg);
        /* hover時間 */
        transition: 0.2s;
    }

    .profile_btn .profile_btn_link:hover {
        /* 背景色 */
        background-color: var(--hover-color);
    }
}

/*=====min-width:950px=====*/

/* プロフィールの設定ここまで */

/* 事業内容の設定 */

.works_wrap {
    /* 最大幅を950pxにして中央配置 */
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}

.works_wrap .works_inner .btn {
    /* ボタンの下に余白 */
    margin-bottom: var(--section-gutter);
}

.works_explanation_box {
    /* テキスト左右余白 */
    margin: 0 var(--gutter-base);
}

.works_explanation_box .question {
    /* ～ですか？見出しの下の余白 */
    margin-bottom: var(--gutter-2x);
}

.works_explanation_box .question::before {
    /* ～ですか？見出し頭の装飾(長方形) */
    content: "";
    padding: 1px 4px;
    margin: 1px 4px;
    background-color: var(--main-color);
}

.works_explanation_box .answer {
    /* ～ですか？段落ごとの余白 */
    margin-bottom: var(--content-gutter);
}

/* PC版 */
@media screen and (min-width:950px) {
    .works_wrap .works_inner .btn {
        /* ボタンの下に余白 PC版 */
        margin-bottom: var(--section-gutter-pc);
    }

    .works_explanation_box .question {
        /* ～ですか？見出しの下の余白を倍にする */
        margin-bottom: var(--gutter-4x);
        /* ～ですか？の文字を大きめにする */
        font-size: var(--size-lg);
    }

    .works_explanation_box .question::before {
        /* 長方形の横幅を2倍にする */
        padding: 1px 8px;
        /* 右余白だけ4倍にする */
        margin: 1px 16px 1px 4px;
    }

    .works_explanation_box .answer {
        /* ～ですか？段落ごとの余白 PC版 */
        margin-bottom: var(--content-gutter-pc);
    }
}

/*=====min-width:950px=====*/

/* このようなケースは…見出し */
.works_case_caption {
    /* 文字サイズを大きくする */
    font-size: var(--size-lg);
    /* テキスト左右余白 */
    margin: 0 var(--gutter-base);
    /* スマホ版折り返し発生のためbudoux+中央配置 */
    text-align: center;
    /* 下余白 */
    margin-bottom: var(--content-gutter);
}

.works_case_box {
    /* 場合ごとの背景色 */
    background-color: var(--main-color);
    /* 最大幅は467px(950/2-16)にして中央配置 */
    max-width: 467px;
    margin-left: auto;
    margin-right: auto;
}

.works_case div:not(:last-child) {
    /* 最後の場合以外下余白 */
    margin-bottom: var(--gutter-base);
}

.works_case_box .works_case_box_inner {
    /* 場合の背景色を入れる大きさ用余白 */
    padding: var(--content-gutter) var(--gutter-base);
}

.works_case_box .works_case_box_inner .works_case_box_title {
    /* 場合タイトル下余白 */
    margin-bottom: var(--gutter-2x);
}

.works_case_box .works_case_box_inner .works_case_box_title::before {
    /* 場合ごと見出し頭の装飾(逆三角形) */
    content: "▼";
    background-color: var(--main-color);
}

.works_case_box_list_wrap {
    /* 場合例一覧の左余白 */
    margin-left: var(--gutter-3x);
}

.works_case .btn {
    /* コンテンツとボタンとの余白 */
    margin-top: var(--content-gutter);
}

/* PC版の設定 */
@media screen and (min-width:950px) {

    /* このようなケースは…見出し */
    .works_case_caption {
        /* 文字サイズを1サイズ大きくする */
        font-size: var(--size-xl);
        /* 下余白 PC版 */
        margin-bottom: var(--content-gutter-pc);
    }

    .works_case_box {
        /* 場合の背景の大きさを定めておく */
        width: 467px;
        height: 208px;
    }

    .works_case_box_wrap {
        /* 場合を3マス x 2マスの並びにする */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .works_case_box .works_case_box_inner .works_case_box_title {
        /* 場合タイトル左余白 */
        margin-left: var(--gutter-5x);
    }

    .works_case_box_list_wrap {
        /* 場合例一覧の左余白 スマホ版余白+場合タイトル左余白分 */
        margin-left: calc(var(--gutter-3x) + var(--gutter-5x));
    }

    .works_case div:not(:last-child) {
        /* 最後の場合以外下余白をリセット */
        margin-bottom: 0;
    }

    .works_case .works_case_box:nth-child(odd) {
        /* 場合の左3つ(偶数)の右に余白を設ける */
        margin-right: var(--gutter-2x);
    }

    .works_case .works_case_box:nth-last-child(n + 3) {
        /* 場合の下2つを除き下に余白を設ける */
        margin-bottom: var(--gutter-2x);
    }

    .works_case .btn {
        /* コンテンツとボタンとの余白 PC版 */
        margin-top: var(--content-gutter-pc);
    }
}

/*=====min-width:950px=====*/

/* 事業内容の設定ここまで */

/* 240706追加 */
/* トップページ花の下に追加文章 */
.key_caption_wrap {
    /* 中央配置 基準位置(key)下部より少し上に配置 */
    position: absolute;
    right: 0;
    left: 0;
    bottom: 120px;
    margin: 0 auto;
}

.key_caption {
    /* 文字を中央配置 */
    text-align: center;
    /* 文字サイズを大きめにする */
    font-size: var(--size-lg);
    /* 文字縁取り */
    text-shadow:
        1px 1px 0 #fff,
        -1px 1px 0 #fff,
        -1px -1px 0 #fff,
        1px -1px 0 #fff;
    /* 太字にする */
    font-weight: bold;
}

@media screen and (min-width:950px) {
    .key_caption_wrap {
        /* 基準位置(key)下部より少し上に配置 PC版 */
        bottom: 80px;
        /* 希望によりもう少し下げる */
        bottom: 40px;
    }

    .key_caption {
        /* 文字サイズを1サイズ大きくする */
        font-size: var(--size-xl);
    }
}

/*=====min-width:950px=====*/

/* 240706追加ここまで */