/* ------------------------------------------------
/*
/*  このファイルは、下記ページで共通のCSSを記載しています。
/*  
/*  メンバー紹介/メンバー紹介詳細
/*  　member/member_detail.php
/*  
/*  採用情報/組織紹介
/*  　recruit/organisation.php
/*  
/*  採用情報/教育・研修
/*  　recruit/training.php
/*  
/*  経営理念
/*  　company/policy.php
/*  
/*  事業紹介/地域活動
/*  　service/community_acitivities.php
/*  
/* ------------------------------------------------ */

@charset "UTF-8";
.wrapper {
    text-align: justify;
    /* padding-inline: 5%; */
}

.cont-ttl-block {
    text-align: inherit;
}

/**************************************/
/*  MV
/**************************************/
.mv-image {
    width: 100%;
    position: relative;
    z-index: 10;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}


/****************************************************************/
/*  メンバー紹介/メンバー詳細 member/member_detail.php: その他の写真02-04
/****************************************************************/

.photo-figure {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.photo-figure img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


/******************************************************************/
/*  メンバー紹介/メンバー詳細 member/member_detail.php: メンバーのメッセージ
/*  採用情報/組織紹介 recruit/organisation.php:　部門のメッセージ
/******************************************************************/

.message-wrapper.wrapper {
    background: var(--white);
    color: var(--black);
}

.message-wrapper .container {
    padding: 0 5%;
    margin: 0;
    margin-inline: auto;
}

.message-wrapper .content {
    width: 60%;
}

.message-wrapper .cont-ttl-block {
    display: inline;
    text-align: left;
}

.cont-ttl-block .cont-ttl-jp {
    letter-spacing: 0.03em;
}


/* 部門のメッセージの小見出しで使用（文字が黒で日本語） */
.message-wrapper .cont-ttl-jp.black {
    display: block;
    font-size: var(--base-font18);
    color: var(--black);
}

/* メッセージのラインマーカー文字で使用（文字が白で日本語） */
.message-wrapper .cont-ttl-jp {
    display: inline;
    color: var(--white);
    padding: 0 0.2em;
    font-size: var(--base-font45);
    line-height: 1.8;
    text-align: justify;
}

.relative {
    position: relative;
}

/* 組織紹介の部門メッセージ右下の英語 */
.deco-text {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: min(122px, 8.1vw);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 0.8;
}


/******************************************************************/
/*　メンバー紹介/メンバー詳細 member/member_detail.php: プロフィール 
/*　採用情報/組織紹介 recruit/organisation.php:　保険営業とは
/******************************************************************/
.profile-wrapper.wrapper {
    background: var(--black);
    color: var(--white);
    text-align: justify;
}

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

.inner {
    width: calc((100% - var(--space60)) / 2);
}

.cont-body-block > .cont-body-p + .cont-body-p {
    margin-top: 0.5em;
}

.profile-wrapper .cont-body-introduction {
    color: var(--light-grey);
}

#Member_detail .profile-wrapper .cont-body-introduction {
    margin-top: 0.8em;
}


/***************************************************************************/
/*　メンバー紹介/メンバー詳細 member/member_detail.php: 仕事の中で大切にしていることは？
/*　採用情報/組織紹介 recruit/organisation.php:　保険営業の魅力とは
/***************************************************************************/

.work-wrapper.wrapper {
    color: var(--black);
    background: var(--light-grey);
}

.row-reverse {
    flex-direction: row-reverse;
}

.text-group {
    width: 55%;
    margin-top: var(--space80);
    padding-right: var(--space60);
}

.row-reverse .text-group {
    padding-left: var(--space60);
    padding-right: 0;
}

.text-group .cont-ttl-block {
    margin-bottom: var(--space20);
}

.stretch-left {
    width: calc(45% + (50vw - 50%));
    margin-left: calc(50% - 50vw);
    margin-right: 0;
}

.stretch-right {
    width: calc(45% + (50vw - 50%));
    margin-right: calc(50% - 50vw);
}

/* 組織紹介で使用: 連番リストのテキストインデント */
.indent-list {
    text-indent: -1em;
    padding-left: 1em;
}

/* 経営理念で使用: 番号付きリスト */
.numbering-list {
    margin-top: 0.5em;
}
.indent-list.numbering {
    margin-left: 0.2em;
}

.mt-05 {
    margin-top: 0.5em;
}

.lh-vertical-size {
    line-height: var(--vertical-size);
}
/******************************************************************/
/*  採用情報/教育・研修 recruit/training.php: カリキュラム
/******************************************************************/




.holiday-wrapper.wrapper {
    color: var(--black);
    background: var(--light-grey);
    padding-block-start: 0;
}

@media screen and (max-width: 960px) {
    .message-wrapper .content {
        width: 100%;
    }
}


@media screen and (max-width: 768px) {
    .message-wrapper .container {
        width: 100%;
    }
    .content {
        flex-direction: column-reverse;
        row-gap: var(--space60);
    }
    .inner {
        width: 100%;
    }
    .cont-body-block > .cont-body-p + .cont-body-p {
        margin-top: 0;
    }
    .cont-body-top {
        display: flex;
        flex-wrap: wrap;
        column-gap: 1.5em;
    }
    .text-group {
        margin-top: 0;
        padding-right: 0;
    }
    .row-reverse .text-group {
        padding-left: 0;
    }
    .stretch-left {
        margin-left: 0;
    }
}

@media screen and (max-width: 600px) {
    /* メッセージのラインマーカー文字で使用（文字が白で日本語） */
    .message-wrapper .cont-ttl-jp {
        font-size: 28px;
    }
}