@charset "UTF-8";

/* 会社紹介 ================================================= */
/* ========================================================= */
/* 読み込み ================================================= */

/* 共通 */
@import url("./common.css");

/* 読み込み ================================================= */
/* ========================================================= */
/* ID ====================================================== */

/* body id="company" */
#company{

/* ID ====================================================== */
/* ========================================================= */
/* 項目 =====================================================

    TOP
        メインイメージ
        ボタン
        お知らせ
    フィロソフィー
    会社概要
    代表あいさつ
    プロフェッショナル

============================================================ */
/* ========================================================= */
/* TOP ===================================================== */

    &.parentPage{

        .contents{
            padding-top: 0;

            /* メインイメージ ------------------------------- */
            .mainImg{
                display: grid;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: var(--mainImg-height-Pc);
                text-align: center;
                background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa))), url(../img/company/main_img.jpg);
                background-position: top center;
                background-repeat: no-repeat;
                background-size: 1920px;
                background-attachment: fixed;

                .boxArea{

                    p{
                        color: #FFF;
                        letter-spacing: var(--letter-spacing-01);
                        text-align: center;
                        margin-top: 100px;
                    }

                }

                @container ctnHtml (width <= 1000px){
                    height: var(--mainImg-height-Tab);
                    background-size: 1700px;

                    .boxArea{

                        p{
                            width: var(--mainImg-width-Tab);
                            text-align: justify;
                            margin: 90px auto 0;

                            br{
                                display: none;
                            }

                        }

                    }

                }

                @container ctnHtml (width <= 600px){
                    display: grid;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    height: var(--mainImg-height-Sp);
                    padding-left: 0;
                    padding-right: 0;
                    background-image: url(../img/company/main_img_sp.jpg);
                    background-size: auto 62vh;

                    .boxArea{
                        position: relative;
                        display: grid;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        padding: 0 var(--contents-Sidemargin-Sp);
                        background-image: url(../img/company/main_img_sp_logo.png);
                        background-position: top 250px center;
                        background-repeat: no-repeat;
                        background-size: 300px;
                        background-attachment: fixed;
                        z-index: 10;

                        &::before{
                            position: absolute;
                            content: '';
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            width: 100%;
                            height: var(--mainImg-height-Sp);
                            background-image: linear-gradient(rgba(var(--mainImg-background-RGBa)), rgba(var(--mainImg-background-RGBa)));
                            background-position: top center;
                            background-repeat: no-repeat;
                            background-size: 100%;
                            z-index: -1;
                        }

                        p{
                            width: var(--mainImg-width-Sp);
                            text-align: justify;
                            margin: 0 auto;
                        }

                    }

                }

            }

            /* ボタン -------------------------------------- */
            .companyBt{
                margin-top: var(--mainImg-marginBottom-Pc);

                .companyBtList{
                    width: min(80%, var(--width-S));
                }

                @container ctnHtml (width <= 1000px){
                    margin-top: var(--mainImg-marginBottom-Tab);

                    .companyBtList{
                        width: 90%;
                    }

                }

                @container ctnHtml (width <= 600px){
                    margin-top: var(--mainImg-marginBottom-Sp);

                    .companyBtList{
                        width: 100%;
                    }

                }

            }

            /* お知らせ ------------------------------------- */
            .news{
                margin-top: 70px;

                .newsList{
                    width: min(80%, var(--width-S));

                    ul{
                        margin-top: 50px;
                    }

                }

                @container ctnHtml (width <= 1000px){
                    margin-top: 50px;

                    .newsList{

                        ul{
                            margin-top: 40px;
                        }

                    }

                }

                @container ctnHtml (width <= 600px){
                    margin-top: 5vh;

                    .newsList{
                        width: 100%;

                        ul{
                            margin-top: 4vh;
                        }

                    }

                }

            }

        }

    }

/* TOP ===================================================== */
/* ========================================================= */
/* フィロソフィー =========================================== */

    .philosophy{

        .boxArea{

            p{
                line-height: 2;
            }

            /* コピー -------------------------------------- */
            .philosophyCopy{
                position: relative;
                width: fit-content;
                font-family: var(--font-family-Serif);
                font-size: 30px;
                font-weight: 700;
                line-height: 1.6;
                letter-spacing: var(--letter-spacing-01);
                color: var(--color-Design-Green);
                text-align: center;
                margin: 90px auto 0;
                z-index: 10;

                /* アイコン */
                &::before{
                    position: absolute;
                    content: "●";
                    top: -5px;
                    left: -15px;
                    font-size: 30px;
                    line-height: 1;
                    color: var(--color-Design-Yellow);
                    z-index: -1;
                }

                .fL{
                    letter-spacing: 0;
                }

            }

            .philosophyLead{
                position: relative;
                text-align: center;
                margin-top: 150px;

                /* 縦線 */
                &::before{
                    position: absolute;
                    content: "";
                    top: -70px;
                    left: 50%;
                    width: 2px;
                    height: 50px;
                    border-left: 1px solid var(--color-Design-Green);
                    transform: translateX(-50%);
                }

            }

            /* ブロック01 ----------------------------------- */
            .philosophy01{
                display: grid;
                gap: 0 20px;
                grid-template-columns: 1fr 420px;
                justify-content: space-between;
                align-items: flex-end;
                width: min(100%, var(--width-S));
                margin: 150px auto 0;

                p{
                    margin-bottom: 30px;
                }

                img{
                    width: 90%;
                    aspect-ratio: 7/4;
                    object-fit: cover;
                    object-position: center;
                }

            }

            /* ブロック02 ----------------------------------- */
            .philosophy02{
                display: grid;
                gap: 0 60px;
                grid-template-columns: 1fr 380px;
                justify-content: flex-start;
                align-items: flex-end;
                width: min(100%, var(--width-M));
                margin: 80px auto 0;

                img{
                    width: 60%;
                    aspect-ratio: 7/5;
                    object-fit: cover;
                    object-position: center;
                }

            }

            /* ブロック03 ----------------------------------- */
            .philosophy03{
                width: min(100%, var(--width-S));
                margin: -50px auto 0;
                padding-left: 10%;

                img{
                    width: 320px;
                    aspect-ratio: 3/2;
                    object-fit: cover;
                    object-position: center;
                }

            }

            /* 中間コピー ----------------------------------- */
            .philosophySecondCopy{
                color: var(--color-Design-Green);
                text-align: center;
                margin-top: 170px;
            }

            /* ブロック04 ----------------------------------- */
            .philosophy04{
                display: grid;
                gap: 0 80px;
                grid-template-columns: 1fr 320px;
                justify-content: space-between;
                align-items: flex-start;
                width: min(100%, var(--width-S));
                margin: 200px auto 0;

                p{
                    text-align: right;
                }

                img{
                    width: 100%;
                    aspect-ratio: 5/3;
                    object-fit: cover;
                    object-position: center;
                    margin-top: 50px;
                }

            }

            /* ブロック05 ----------------------------------- */
            .philosophy05{
                width: min(100%, var(--width-M));
                margin: -80px auto 0;
                padding-left: 430px;

                img{
                    width: 260px;
                    aspect-ratio: 3/2;
                    object-fit: cover;
                    object-position: center;
                }

            }

            /* ブロック06 ----------------------------------- */
            .philosophy06{
                display: grid;
                gap: 0 100px;
                grid-template-columns: 260px 1fr;
                grid-template-rows: 1fr auto;
                justify-content: flex-end;
                align-items: flex-start;
                width: min(100%, var(--width-M));
                margin: 80px auto 0;

                div:nth-of-type(1){
                    grid-column: 1 / 2;
                    grid-row: 1 / 3;

                    img{
                        width: 100%;
                        aspect-ratio: 4/5;
                        object-fit: cover;
                        object-position: center;
                    }

                }

                .philosophyCom{
                    grid-column: 2 / 3;
                    grid-row: 1 / 2;
                    /* text-align: right; */
                    padding-top: 50px;
                }

                div:nth-of-type(3){
                    grid-column: 2 / 3;
                    grid-row: 2 / 3;
                    padding-top: 130px;

                    img{
                        width: 280px;
                        aspect-ratio: 7/4;
                        object-fit: cover;
                        object-position: center;
                        /* margin-bottom: 40px; */
                        margin-left: 25%;
                    }

                }

            }

            /* ブロック08 ----------------------------------- */
            .philosophy08{
                display: grid;
                gap: 0 40px;
                grid-template-columns: 200px 1fr;
                justify-content: flex-start;
                align-items: flex-end;
                width: 75%;
                margin: 10px 0 0 auto;

                img{
                    width: 100%;
                    aspect-ratio: 3/5;
                    object-fit: cover;
                    object-position: right center;
                }

                p{
                    /* text-align: right; */
                    margin-bottom: 60px;
                }

            }

            /* ブロック09 ----------------------------------- */
            .philosophy09{
                width: min(100%, var(--width-S));
                text-align: right;
                margin: 20px auto 0;
                padding-right: 50px;

                img{
                    width: 80px;
                    aspect-ratio: 1/1;
                    object-fit: cover;
                    object-position: center;
                }

            }

            @container ctnHtml (width <= 1000px){

                p{
                    line-height: 1.6;

                    &.fS{
                        font-size: clamp(14px, 0.50125vw + 10.91228px, 16px);   /* 横：MIN 616px ～ MAX 1015px */
                    }

                    &.fL{
                        font-size: clamp(18px, 1.00251vw + 11.82456px, 22px);   /* 横：MIN 616px ～ MAX 1015px */
                    }

                }

                /* コピー ----------------------------------- */
                .philosophyCopy{
                    font-size: 26px;
                    margin-top: 80px;

                    /* アイコン */
                    &::before{
                        top: -4px;
                        left: -13px;
                        font-size: 25px;
                    }

                }

                .philosophyLead{
                    margin-top: 130px;
                }

                /* ブロック01 ------------------------------- */
                .philosophy01{
                    gap: 0 20px;
                    grid-template-columns: auto clamp(220px, 40.10025vw - 7.01754px, 400px);   /* 横：MIN 616px ～ MAX 1015px */
                    margin-top: clamp(100px, 12.53133vw + 22.80702px, 150px);   /* 横：MIN 616px ～ MAX 1015px */

                    p{
                        margin-bottom: clamp(20px, 2.50627vw + 4.5614px, 30px);   /* 横：MIN 616px ～ MAX 1015px */
                    }

                    img{
                        aspect-ratio: 7/5;
                    }

                }

                /* ブロック02 ------------------------------- */
                .philosophy02{
                    gap: 0 clamp(15px, 16.29073vw - 85.35088px, 80px);   /* 横：MIN 616px ～ MAX 1015px */
                    grid-template-columns: clamp(230px, 37.59398vw - 1.57895px, 380px) auto;   /* 横：MIN 616px ～ MAX 1015px */
                    width: 100%;
                    margin: 70px 0 0;

                    img{
                        width: 80%;
                    }

                }

                /* ブロック03 ------------------------------- */
                .philosophy03{
                    width: 100%;
                    margin: -30px auto 0;

                    img{
                        width: clamp(160px, 35.08772vw - 56.14035px, 300px);   /* 横：MIN 616px ～ MAX 1015px */
                    }

                }

                /* 中間コピー ------------------------------- */
                .philosophySecondCopy{
                    margin-top: clamp(130px, 10.02506vw + 68.24561px, 170px);   /* 横：MIN 616px ～ MAX 1015px */
                }

                /* ブロック04 ------------------------------- */
                .philosophy04{
                    gap: 0 clamp(30px, 12.53133vw - 47.19298px, 80px);   /* 横：MIN 616px ～ MAX 1015px */
                    grid-template-columns: 1fr clamp(250px, 22.55639vw + 111.05263px, 340px);   /* 横：MIN 616px ～ MAX 1015px */
                    justify-content: flex-start;
                    margin-top: clamp(120px, 10.02506vw + 58.24561px, 160px);   /* 横：MIN 616px ～ MAX 1015px */

                    img{
                        width: 80%;
                        margin-top: 40px;
                    }

                }

                /* ブロック05 ----------------------------------- */
                .philosophy05{
                    margin-top: -60px;
                    padding-left: clamp(200px, 50.12531vw - 108.77193px, 400px);   /* 横：MIN 616px ～ MAX 1015px */

                    img{
                        width: clamp(180px, 15.03759vw + 87.36842px, 240px);   /* 横：MIN 616px ～ MAX 1015px */
                    }

                }

                /* ブロック06 ----------------------------------- */
                .philosophy06{
                    gap: 0 clamp(50px, 12.53133vw - 27.19298px, 100px);   /* 横：MIN 616px ～ MAX 1015px */
                    grid-template-columns: clamp(160px, 25.06266vw + 5.61404px, 260px) 1fr;   /* 横：MIN 616px ～ MAX 1015px */

                    .philosophyCom{
                        padding-top: clamp(40px, 2.50627vw + 24.5614px, 50px);   /* 横：MIN 616px ～ MAX 1015px */
                    }

                    div:nth-of-type(3){
                        padding-top: clamp(60px, 17.54386vw - 48.07018px, 130px);   /* 横：MIN 616px ～ MAX 1015px */

                        img{
                            width: clamp(200px, 20.05013vw + 76.49123px, 280px);   /* 横：MIN 616px ～ MAX 1015px */
                        }

                    }

                }

                /* ブロック08 ----------------------------------- */
                .philosophy08{
                    gap: 0 30px;
                    grid-template-columns: 1fr 70%;
                    width: clamp(500px, 50.12531vw + 191.22807px, 700px);   /* 横：MIN 616px ～ MAX 1015px */

                    p{
                        margin-bottom: 60px;
                    }

                }

                /* ブロック09 ------------------------------- */
                .philosophy09{
                    margin-top: 40px;
                    padding-right: 40px;

                    img{
                        width: clamp(60px, 5.01253vw + 29.12281px, 80px);   /* 横：MIN 616px ～ MAX 1015px */
                    }

                }

            }

            @container ctnHtml (width <= 600px){

                p{
                    line-height: 2;
                }

                /* コピー ---------------------------------- */
                .philosophyCopy{
                    font-size: 22px;
                    line-height: 1.4;
                    margin-top: 10vh;

                    /* アイコン */
                    &::before{
                        top: -6px;
                        left: -13px;
                        font-size: 22px;
                    }

                    .fL{
                        font-size: 14px !important;
                        font-weight: 500;
                    }

                }

                .philosophyLead{
                    font-size: 16px;
                    margin-top: 18vh;

                    /* 縦線 */
                    &::before{
                        top: -70px;
                        height: 50px;
                    }

                }

                /* ブロック01 ------------------------------- */
                .philosophy01{
                    display: grid;
                    gap: 5vh 0;
                    grid-template-columns: 1fr;
                    grid-template-rows: auto auto;
                    grid-auto-flow: column;
                    justify-content: center;
                    align-items: flex-start;
                    width: 100%;
                    margin: 12vh 0 0;

                    p{
                        margin-bottom: 0;
                    }

                    img{
                        width: 70%;
                        aspect-ratio: 7/4;
                        object-fit: cover;
                        object-position: center;
                        margin-left: 30%;
                    }

                }

                /* ブロック02 ------------------------------ */
                .philosophy02{
                    display: grid;
                    gap: 6vh 0;
                    grid-template-columns: 1fr;
                    grid-template-rows: auto auto;
                    grid-auto-flow: column;
                    justify-content: center;
                    align-items: flex-start;
                    width: 100%;
                    margin: 10vh 0 0;

                    .anim{
                        order: 2;

                        img{
                            width: 60%;
                            aspect-ratio: 7/5;
                            object-fit: cover;
                            object-position: center;
                        }

                    }

                    .philosophyCom{
                        order: 1;

                        p{
                            text-align: right;
                            margin-bottom: 0;
                        }

                    }

                }

                /* ブロック03 ------------------------------ */
                .philosophy03{
                    width: 100%;
                    text-align: right;
                    margin: -35px 0 0;
                    padding-right: 30px;

                    img{
                        width: 70%;
                        aspect-ratio: 3/2;
                        object-fit: cover;
                        object-position: center;
                    }

                }

                /* 中間コピー ------------------------------ */
                .philosophySecondCopy{
                    margin-top: 25vh;
                }

                /* ブロック04 ------------------------------ */
                .philosophy04{
                    display: grid;
                    gap: 5vh 0;
                    grid-template-columns: 1fr;
                    grid-template-rows: auto auto;
                    grid-auto-flow: column;
                    justify-content: center;
                    align-items: flex-start;
                    width: 100%;
                    margin: 25vh 0 0;

                    p{
                        text-align: left;
                    }

                    img{
                        width: 60%;
                        aspect-ratio: 5/3;
                        object-fit: cover;
                        object-position: center;
                        margin-left: 40%;
                        margin-top: 3vh;
                    }

                }

                /* ブロック05 ------------------------------ */
                .philosophy05{
                    width: 100%;
                    margin: -30px auto 0;
                    padding-left: 20%;

                    img{
                        width: 60%;
                        aspect-ratio: 3/2;
                        object-fit: cover;
                        object-position: center;
                    }

                }

                /* ブロック06 ------------------------------ */
                .philosophy06{
                    display: grid;
                    gap: 2vh 0;
                    grid-template-columns: 1fr;
                    grid-template-rows: 1fr auto;
                    justify-content: flex-start;
                    align-items: flex-start;
                    width: 100%;
                    margin: 8vh 0 0;

                    div:nth-of-type(1){
                        grid-column: 1 / 2;
                        grid-row: 2 / 3;

                        img{
                            width: 40%;
                            aspect-ratio: 4/5;
                            object-fit: cover;
                            object-position: center;
                            margin-top: 3vh;
                        }

                    }

                    .philosophyCom{
                        grid-column: 1 / 2;
                        grid-row: 1 / 2;
                        text-align: right;
                        padding-top: 0;
                    }

                    div:nth-of-type(3){
                        grid-column: 1 / 2;
                        grid-row: 3 / 4;
                        padding-top: 2vh;

                        img{
                            width: 70%;
                            aspect-ratio: 7/4;
                            object-fit: cover;
                            object-position: center;
                            margin-left: 30%;
                        }

                    }

                }

                /* ブロック08 ------------------------------ */
                .philosophy08{
                    display: grid;
                    gap: 2vh 0;
                    grid-template-columns: 1fr;
                    grid-template-rows: 1fr auto;
                    justify-content: flex-start;
                    align-items: flex-end;
                    width: 100%;
                    margin: 15vh 0 0 auto;

                    img{
                        width: 50%;
                        aspect-ratio: 5/3;
                        object-fit: cover;
                        object-position: right bottom;
                    }

                    p{
                        margin-top: 2vh;
                        margin-bottom: 0;
                    }

                }

                /* ブロック09 ------------------------------ */
                .philosophy09{
                    width: 100%;
                    text-align: right;
                    margin: 10vh 0 0;
                    padding-right: 20px;

                    img{
                        width: 60px;
                        aspect-ratio: 1/1;
                        object-fit: cover;
                        object-position: center;
                    }

                }

            }

        }

    }

/* フィロソフィー =========================================== */
/* ========================================================= */
/* 会社概要 ================================================= */

    .profile{
        width: min(90%, var(--width-S));
        margin: 0 auto;

        img.companyLogo{
            width: 150px;
        }

        @container ctnHtml (width <= 1000px){
            width: 90%;
        }

        @container ctnHtml (width <= 600px){
            width: 100%;
        }

    }

/* 会社概要 ================================================= */
/* ========================================================= */
/* 代表あいさつ ============================================= */

    .message{
        display: grid;
        gap: 30px 7%;
        grid-template-columns: 30% auto;
        grid-template-rows: auto 1fr;
        justify-content: space-between;
        align-items: flex-start;
        width: min(90%, var(--width-M));
        margin: 0 auto;

        img{
            order: 1;
            grid-column: 1 / 2;
            grid-row: 1 / 2;
            width: 100%;
        }

        .messageCom{
            order: 2;
            grid-column: 2 / 3;
            grid-row: 1 / 3;

            .job{
                text-align: right;
                margin-top: 100px !important;

                & + img{
                    display: block;
                    width: 200px;
                    margin-top: 20px;
                    margin-left: auto;
                }

            }

        }

        .linkBt{
            order: 3;
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }

        @container ctnHtml (width <= 600px){
            display: grid;
            gap: 5vh 0;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr auto;
            grid-auto-flow: column;
            justify-content: center;
            align-items: flex-start;
            width: 100%;

            img{
                grid-column: 1 / 2;
                grid-row: 1 / 2;
                width: 50%;
                margin: 0 auto;
            }

            .messageCom{
                grid-column: 1 / 2;
                grid-row: 2 / 3;

                .job{
                    margin-top: 5vh !important;

                    & + img{
                        width: 130px;
                        margin: 2vh 0 0 auto;
                    }

                }

            }

            .linkBt{
                grid-column: 1 / 2;
                grid-row: 3 / 4;
                margin-left: auto;
            }

        }

    }

/* 代表あいさつ ============================================= */
/* ========================================================= */
/* プロフェッショナル ======================================== */

    .leadCopy{
        margin-top: 0;
    }

    section.introduce{
        position: relative;
        padding-top: var(--titleBig-marginTop-Pc);

        /* 写真の背景色 */
        &::before{
            position: absolute;
            content: "";
            top: calc(var(--titleBig-marginTop-Pc) + 215px);
            left: 0;
            width: 40%;
            height: 60px;
            background-color: var(--color-Design-Green);
        }

        .boxArea{

            .professional{
                position: relative;
                display: grid;
                gap: 0 7%;
                grid-template-columns: 40% auto;
                justify-content: space-between;
                align-items: flex-start;
                z-index: 10;   /* sectionの疑似要素の背景色より上にする */

                /* 写真 */
                .photo{
                    display: grid;
                    gap: 30px 0;
                    grid-template-columns: 1fr;
                    grid-template-rows: 1fr auto auto;
                    grid-auto-flow: column;
                    justify-content: flex-start;
                    align-items: flex-start;
                    width: fit-content;
                    padding-left: clamp(40px, 29.06977vw - 255.34884px, 140px);   /* 横：MIN 1016px ～ MAX 1360px */

                    img{
                        width: 250px;
                    }

                    .name{
                        padding-left: 50px;

                        h3{
                            position: relative;
                            font-size: 32px;
                            font-weight: 500;
                            line-height: 1.2;
                            letter-spacing: var(--letter-spacing-01);
                            color: var(--color-Design-Green);
                            margin-top: 15px;
                            margin-bottom: 10px;

                            /* アイコン */
                            &::before{
                                position: absolute;
                                content: "●";
                                top: -12px;
                                left: -15px;
                                font-size: 28px;
                                line-height: 1;
                                color: var(--color-Design-Yellow);
                                z-index: -1;
                            }

                            & + p{
                                word-break: break-all;
                                /* white-space: nowrap; */
                                margin-top: 0;
                            }

                        }

                    }

                    .tagList{
                        margin-left: 50px;
                    }

                }

                /* プロフィール */
                .career{
                    padding-right: clamp(0px, 23.25581vw - 236.27907px, 80px);   /* 横：MIN 1016px ～ MAX 1360px */

                    .careerCom{
                        text-align: justify;
                    }

                    .workImg{
                        margin-top: 50px;

                        img{
                            width: 48%;
                            aspect-ratio: 3/2;
                            object-fit: cover;
                            object-position: center;

                            & + img{
                                margin-left: 3%;
                            }

                        }

                        & + .linkBt{
                            margin-top: 30px;
                        }

                    }

                }

            }

            /* Books */
            .books{
                margin-top: 60px;
                padding-left: clamp(30px, 26.16279vw - 235.81395px, 120px);   /* 横：MIN 1016px ～ MAX 1360px */
                padding-right: clamp(0px, 23.25581vw - 236.27907px, 80px);   /* 横：MIN 1016px ～ MAX 1360px */

                h4{
                    position: relative;
                    width: fit-content;
                    font-size: 24px;
                    color: var(--color-Design-Green);
                    margin-left: 95px;

                    /* 左の線 */
                    &::before{
                        position: absolute;
                        content: "";
                        top: 50%;
                        left: -95px;
                        width: 80px;
                        height: 0;
                        border-top: 1px solid var(--color-Design-Green);
                        transform: translateY(-50%);
                    }

                }

                .bookList{
                    clear: both;
                    display: flow-root;
                    width: 100%;
                    margin-top: 0;

                    > li{
                        float: left;
                        display: grid;
                        gap: 0 10px;
                        grid-template-columns: 180px auto;
                        justify-content: flex-start;
                        align-items: flex-start;
                        width: 48%;
                        margin-top: 30px;

                        & + li{
                            margin-left: 3%;
                        }

                        img{
                            width: 100%;
                            aspect-ratio: 1.2/1;
                            object-fit: contain;
                            object-position: center;
                        }

                        .bookTitle{

                            h5{
                                line-height: 1.2;

                                & + p{
                                    margin-top: 5px;
                                }

                            }

                            /* ボタン */
                            .linkBt{

                                a{
                                    height: 36px;   /* var(--smallBt-height-Pc)より小さくしている */
                                }

                            }

                        }

                    }

                }

            }

        }

        @container ctnHtml (width <= 1000px){
            padding-top: var(--titleBig-marginTop-Tab);

            /* 背景色 */
            &::before{
                top: calc(var(--titleBig-marginTop-Tab) + 214px);
                height: 50px;
            }

            .boxArea{

                .professional{
                    gap: 0 5%;

                    /* 写真 */
                    .photo{
                        gap: 25px 0;
                        padding-left: clamp(10px, 15.07538vw - 113.01508px, 40px);   /* 横：MIN 816px ～ MAX 1015px */

                        img{
                            width: 240px;
                        }

                        .name{
                            padding-left: 40px;

                            h3{
                                font-size: 26px;
                                margin-top: 15px;
                                margin-bottom: 10px;

                                /* アイコン */
                                &::before{
                                    top: -13px;
                                    left: -15px;
                                    font-size: 30px;
                                }

                            }

                        }

                        .tagList{
                            margin-left: 40px;
                        }

                    }

                    /* プロフィール */
                    .career{
                        padding-right: 0;

                        .workImg{
                            margin-top: 40px;
                        }

                    }

                }

                /* Books */
                .books{
                    margin-top: 40px;
                    padding-left: 20px;
                    padding-right: 0;

                    h4{
                        font-size: 22px;
                        margin-left: 75px;

                        /* 左の線 */
                        &::before{
                            left: -75px;
                            width: 60px;
                        }

                    }

                    .bookList{

                        li{
                            grid-template-columns: 160px auto;
                            margin-top: 35px;

                            .bookTitle{

                                /* ボタン */
                                .linkBt{

                                    a{
                                        height: 36px;   /* var(--smallBt-height-Tab)より小さくしている */
                                    }

                                }

                            }

                        }

                    }

                }

            }

        }

        @container ctnHtml (width <= 800px){
            padding-top: var(--titleBig-marginTop-Tab);

            /* 背景色 */
            &::before{
                top: calc(var(--titleBig-marginTop-Tab) + 180px);
                height: 40px;
            }

            .boxArea{

                .professional{

                    /* 写真 */
                    .photo{
                        gap: 20px 0;
                        padding-left: clamp(10px, 15.07538vw - 82.86432px, 40px);   /* 横：MIN 616px ～ MAX 815px */

                        img{
                            width: 200px;
                        }

                        .name{
                            padding-left: 30px;

                            h3{
                                font-size: 24px;
                                margin-top: 20px;
                                margin-bottom: 10px;

                                /* アイコン */
                                &::before{
                                    top: -12px;
                                    left: -14px;
                                    font-size: 26px;
                                }

                            }

                        }

                        .tagList{
                            margin-left: 30px;
                        }

                    }

                    /* プロフィール */
                    .career{

                        .workImg{
                            margin-top: 30px;
                        }

                    }

                }

                /* Books */
                .books{
                    margin-top: 35px;
                    padding-left: 30px;
                    padding-right: 0;

                    h4{
                        font-size: 20px;
                    }

                    .bookList{

                        li{
                            float: none;
                            grid-template-columns: 120px auto;
                            width: 100%;
                            margin-top: 30px;

                            & + li{
                                margin-left: 0;
                            }

                            .bookTitle{

                                /* ボタン */
                                .linkBt{

                                    a{
                                        height: 32px;   /* var(--smallBt-height-Tab)より小さくしている */
                                    }

                                }

                            }

                        }

                    }

                }

            }

        }

        @container ctnHtml (width <= 600px){
            padding-top: var(--titleBig-marginTop-Sp);

            /* 背景色 */
            &::before{
                top: calc(var(--titleBig-marginTop-Sp) + 141px);
                width: 90%;
                height: 35px;
            }

            .boxArea{

                .professional{
                    gap: 3vh 0;
                    grid-template-columns: 100%;
                    grid-template-rows: 1fr auto auto;
                    grid-auto-flow: column;
                    width: 100%;

                    /* 写真 */
                    .photo{
                        gap: 2vh 30px;
                        grid-template-columns: 160px auto;
                        grid-template-rows: 1fr auto;
                        grid-auto-flow: row;
                        justify-content: flex-start;
                        align-items: flex-start;
                        width: 100%;
                        padding-left: 0;
                        padding-right: 0;

                        img{
                            grid-column: 1 / 2;
                            grid-row: 1 / 2;
                            width: 100%;
                        }

                        .name{
                            grid-column: 2 / 3;
                            grid-row: 1 / 2;
                            margin-top: 1vh;
                            padding-left: 0;

                            h3{
                                font-size: 22px;
                                font-weight: 500;
                                margin-top: 20px;

                                /* アイコン */
                                &::before{
                                    top: -8px;
                                    left: -10px;
                                    font-size: 18px;
                                }

                                span{
                                    margin-top: 10px;
                                }

                            }

                        }

                        .tagList{
                            grid-column: 1 / 3;
                            grid-row: 2 / 3;
                            margin-left: 0;

                            /* li{
                                margin-left: 10px;
                                margin-right: 0;
                            } */

                        }

                    }

                    /* プロフィール */
                    .career{
                        padding-left: 0;
                        padding-right: 0;

                        .workImg{
                            margin-top: 2vh;

                            & + .linkBt{
                                margin-top: 2vh;
                            }

                        }

                    }

                }

                /* Books */
                .books{
                    margin-top: 0;
                    padding-left: 0;
                    padding-right: 0;

                    h4{
                        font-size: 20px;
                        margin-left: 60px;

                        /* 左の線 */
                        &::before{
                            left: -60px;
                            width: 50px;
                        }

                    }

                    .bookList{
                        margin-top: 3vh;

                        li{
                            float: none;
                            grid-template-columns: 120px auto;
                            width: 100%;
                            margin-top: 3vh;

                            &:first-child{
                                margin-top: 0;
                            }

                            & + li{
                                margin-left: 0;
                            }

                            .bookTitle{

                                /* ボタン */
                                .linkBt{
                                    margin-top: 1.6vh;

                                    a{
                                        height: 30px;   /* var(--smallBt-height-Sp)より小さくしている */
                                    }

                                }

                            }

                        }

                    }

                }

            }

        }

        &#hatanaka{

            /* 写真の背景色 */
            &::before{
                top: calc(var(--titleBig-marginTop-Pc) + 215px + 25px);
            }

            @container ctnHtml (width <= 1000px){

                &::before{
                    top: calc(var(--titleBig-marginTop-Tab) + 214px + 24px);
                }

            }

            @container ctnHtml (width <= 800px){

                &::before{
                    top: calc(var(--titleBig-marginTop-Tab) + 180px + 20px);
                }

            }

            @container ctnHtml (width <= 600px){

                &::before{
                    top: calc(var(--titleBig-marginTop-Sp) + 141px + 16px);
                }

            }

        }

    }

/* プロフェッショナル ======================================== */
/* ========================================================= */

}