@charset "utf-8";


/* メインプロフィールの設定 */
.profile_main_wrap {
    /* 次のセクションとの余白 */
    margin-bottom: var(--section-gutter);
    /* 画像とテキストの基準位置にする */
    position: relative;
    /* 横幅を画面幅に合わせる */
    width: 100%;
    /* はみ出たら非表示 */
    overflow: hidden;
}

.profile_main_img {
    /* プロフィールの画像のパス */
    background-image: url(../../img/profile_img.jpg);
    /* 高さを画面に合わせる */
    height: 100vh;
    /* 要素と画像の高さを合わせる */
    background-size: 1000px;
    /* 要素に対して画像を中央配置 */
    background-position: 52% 30%;
}

.profile_main_text_wrap {
    /* テキストを画像と重ねる */
    position: absolute;
    bottom: 0;
    left: 0;
    /* 背景色を白半透明にする */
    background-color: var(--white-transparent);
    /* 横幅を画面幅に合わせる */
    width: 100%;
}

.profile_main_text_inner {
    /* テキスト周りの余白 */
    margin: var(--content-gutter) var(--gutter-base);
}

.profile_main_text_name {
    /* 微調整のため、字詰めを1文字分にする */
    line-height: 1;
    /* 名前の下に余白を設ける */
    margin-bottom: var(--gutter-2x);
    /* 文字の大きさを大きめにする */
    font-size: var(--size-lg);
}

.profile_main_text_job_title {
    /* 後ろに改行を入れる */
    display: block;
    /* 文字の強さを普通にする */
    font-weight: normal;
    /* 文字の大きさを普通にする */
    font-size: var(--size-md);
    /* 職業名の下に余白を設ける */
    margin-bottom: var(--gutter-base);
}

.profile_main_text_ruby {
    /* 後ろに改行を入れる */
    display: block;
    /* 文字の強さを普通にする */
    font-weight: normal;
    /* 文字の大きさを小さめにする */
    font-size: var(--size-sm);
    /* 少し右へ位置の微調整 */
    margin-left: 4px;
    /* ふりがなと名前の間に余白を設ける */
    margin-bottom: 4px;
}

.profile_main_text_birthday,
.profile_main_text_history_wrap,
.profile_main_text_current_position {
    /* プロフィール項目毎に、下に余白を設ける */
    margin-bottom: var(--gutter-base);
}


/* タブレット(縦長端末)の設定 */
@media screen and (min-width:768px) {

    .profile_main_img {
        /* 画像の高さを画面の7割程度にする */
        height: 70vh;
    }
}

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

/* PC版の設定 */
@media screen and (min-width:950px) {
    .profile_main_wrap {
        /* 次のセクションとの余白 */
        margin-bottom: var(--section-gutter-pc);
    }

    .profile_main_img {
        background-image: url(../../img/profile_img_pc.jpg);
        /* 画像の高さを画面に合わせる */
        height: 100vh;
        /* 要素に対する画像のサイズを微調整 */
        background-size: cover;
        /* 要素に対して画像の位置を微調整 */
        background-position: 90%;
    }

    .profile_main_text_wrap {
        /* テキストを画像と重ねる */
        position: absolute;
        bottom: 10%;
        left: 60%;
        /* 画面幅が少し小さいので横幅を小さめに */
        max-width: 400px;
    }

    .profile_main_text_inner {
        /* テキスト周りの余白 見栄え重視 */
        margin: var(--gutter-5x) var(--gutter-3x);
    }

    .profile_main_text_name {
        /* 名前の下に余白を設ける PC版 */
        margin-bottom: var(--gutter-4x);
        /* 文字の大きさを大きめにする PC版 */
        font-size: var(--size-xl);
    }

    .profile_main_text_job_title {
        /* 職業名の下に余白を設ける PC版 */
        margin-bottom: var(--gutter-2x);
    }

    .profile_main_text_ruby {
        /* 少し右へ位置の微調整 見栄え重視 */
        margin-left: 16px;
    }

    .profile_main_text_birthday,
    .profile_main_text_history_wrap,
    .profile_main_text_current_position {
        /* プロフィール項目毎に、下に余白を設ける PC版 */
        margin-bottom: var(--gutter-2x);
    }

}

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

/* もう少し大きい画面のPCの場合の微調整 */
@media screen and (min-width:1240px) {
    .profile_main_img {
        /* 要素に対して画像の位置を微調整 */
        background-position: 0 0;
    }

    .profile_main_text_wrap {
        /* 画面幅が大きいので横幅を少し大きく */
        max-width: 480px;
    }
}

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

/* サブプロフィールの設定 */
.sub_profile_inner {
    /* テキスト左右に余白 プロフィール項目ごとに余白 */
    margin: 0 var(--gutter-base) var(--content-gutter) var(--gutter-base);
}

.sub_profile_title {
    /* 見出し文字を大きめにする */
    font-size: var(--size-md);
    /* 見出し下に余白を設ける */
    margin-bottom: var(--gutter-2x);
}

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

.sub_profile_category_text:not(:last-child) {
    /* プライベート欄の最後の項目以外、下に余白を設ける */
    margin-bottom: var(--gutter-base);
}

/* PC版の設定 */
@media screen and (min-width:950px) {
    .sub_profile_wrap {
        /* 最大幅を950pxにして中央配置 */
        max-width: 950px;
        margin-left: auto;
        margin-right: auto;
    }

    .sub_profile_inner {
        /* プロフィール項目ごとに余白 PC版 */
        margin: 0 var(--gutter-base) var(--content-gutter-pc) var(--gutter-base);
    }

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

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

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

/* 240727追記 */
/* トップ画像を設定 */
.page_title_wrap {
    background-image: url(../../img/profile_top_img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* 240727追記ここまで */