/*
 *
 * COMPANY ページ
 * LAST UPDATE : 2023/1/24
 *
 */

/* ---------------------------------------------------------------------------------------------

　   main

--------------------------------------------------------------------------------------------- */

/* メッセージ */
#message {
    position: relative;
    
}
    #message .wrapper {
        position: relative;
        z-index: 2;
    }

    #message .wrapper p:not(.fullname) {
        margin-bottom: 1em;
        line-height: 1.5;
    }
        #message .fullname {
            margin-top: 2em;
        }
            #message .fullname span {
                font-size: 1.5em;
                line-height: 1.8;
            }
@media print,screen and (min-width: 1366px) {
    #message .wrapper p:not(.fullname) {
        max-width: 60%;
        /* background: rgb(255 255 255 / 35%); */
    }
    #message>img {
        max-width: 40%;
    }
}
@media not all and (min-width: 1366px) {
    #message {
        padding: 60px 0 56px;
        text-align: center;
    }
        #message .wrapper {
            margin-bottom: 80px;
            text-align: left;
        }
            #message .fullname span {
                font-weight: 500;
            }

        #message>img {
            width: 89.3%;
            margin: auto;
        }
}

/* パソコン */
@media print,screen and (min-width : 1366px) {
    #message {
        /* padding: 80px 0 200px; */
        padding: 80px 0 100px; /* 20240605 edit */
    }
        .lower #message h2 {
            margin-bottom: 60px;
        }

        #message>img {
            position: absolute;
            right: 0;
            top: 80px;
            z-index: 1;
        }
}





/* 獣医師紹介 */
.veterinarians {
    margin-bottom: 80px;
}


    .veterinarians_photo img {
        padding: 8px;
        background-color: #d8ab0e;
    }

/* 写真、名前、メッセージなど */
.introduction h3 {
    font-size: 2em;
    font-weight: bold;
}
    .introduction h3 span {
        margin-left: 30px;
        font-size: 1rem;
        font-weight: normal;
        vertical-align: middle;
    }

    .introduction .headline {
        /* margin: 48px 0;
        font-size: 1.5em; */
        font-size: 1.25rem;
    }


    /* タブ */
    .tab_bt {
        background-color: #d8ab0e;
        color: #fff;
        margin-top: 1.5rem;
        text-align: center;
        padding: 5px 10px;
        font-size: 1.25rem;
    }
    .tabpanel button {
        width: 100%;
        padding: 8px 0 0;
        transition: .3s;
    }

    .tabcontents {
        display: none;
        padding: 16px 0;
        line-height: 2rem;
    }
        .tabcontents.active {
            display: block;
        }



    
    /* ユーザーエージェントがスマホだった時 */
    #tabpanel_sp.tabpanel {
        font-size: 1em;
        letter-spacing: 0;
    }
        #tabpanel_sp.tabpanel button::after {
            font-size: 0.5em;
        }
    
        /* 活性、非活性設定 */
        #tabpanel_sp.tabpanel h4 button {
            color: #fff;
            background-color: #aaaaaa;
        }
    
        #tabpanel_sp.tabpanel h4 button::after {
            content: url("../common/img/arrow.png");
        }
    
        #tabpanel_sp.tabpanel h4 button.active {
            background-color: #a48106;
        }
    
        #tabpanel_sp.tabpanel h4 button {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
        }
    
        #tabpanel_sp.tabpanel h4 button.active::after {
            content: url("../common/img/arrow.png");
            transform: rotate(180deg);
        }



    /* ユーザーエージェントがパソコンだった時 */
    #tabpanel_pc.tabpanel ul {
        display: flex;
        color: #fff;
        font-size: 1.125em;
    }

    #tabpanel_pc.tabpanel ul li {
        width: 50%;
        text-align: center;

        background-color: #aaaaaa;
    }

    #tabpanel_pc.tabpanel ul li:not(:last-child) {
        border-right: 1px solid #fff;
    }

    

    #tabpanel_pc.tabpanel ul li button::after {
        content: "▲";
        display: block;

        margin-top: 6px;
        padding: 1px 0;

        font-size: 8px;

        background-color: #8a8a8a;

        transition: .3s;
    }
        /* 活性、非活性設定 */
        #tabpanel_pc.tabpanel ul li button.active {
            background-color: #a48106;
        }
    
        #tabpanel_pc.tabpanel ul li button.active::after {
            content: "▼";
            background-color: #8c7113;
        }
    
        #tabpanel_pc.tabpanel ul li button::after {
            background-color: #8a8a8a;
        }
        

/* スマホ */
@media not all and (min-width: 1366px) {
    /* 写真、名前、メッセージなど */
    .introduction {
        margin-bottom: 40px;
    }
        .introduction h3 {
            font-size: 1.5em;
            margin-top: 16px;
            margin-bottom: 24px;
        }
        .introduction h3 span {
            display: block;
            margin-top: 0.25rem;
            margin-left: 0;
        }
        .introduction .headline {
            margin-top: 16px;
            letter-spacing: 0;
        }
    .tab_bt {
        width: 100%;
    }
}

/* パソコン */
@media print,screen and (min-width : 1366px) {
    .veterinarians:not(:last-child) {
        border-bottom: 1px solid #cccccc;
    }

    /* 写真、名前、メッセージなど */
    .introduction {
        display: grid;
        grid-template-columns: 32% 1fr;
        gap: 40px;
        margin-bottom: 40px;
    }
        .introduction h3 {
            margin: 16px 0 48px;
        }

        .veterinarians_photo img {
            width: 310px;
        }

    .tab_bt {
        width: 32%;
    }
    

    
}




/* 会社概要 */
#overview {
    padding: 96px 0;
    color: #fff;
    background-color: #1c8cb8;
}


    #overview table {
        border-top: 1px solid #b9b9b9;
    }
        #overview table tbody tr {
            border-bottom: 1px solid #b9b9b9;
        }
            #overview table tbody th,
            #overview table tbody td {
                padding: 32px 0;
                line-height: 2;
            }
            #overview table tbody th {
                white-space: nowrap;
            }
            #overview table tbody td {
                padding: 32px 40px;
                
            }

/* スマホ */
@media not all and (min-width: 1366px) {
    #overview h2 {
        text-align: center;
    }

    #overview table {
        width: 100%;
    }
    #overview table tbody th, #overview table tbody td {
        display: block;
    }
    #overview table tbody th {
        padding: 1rem .5rem;
    }
    #overview table tbody td {
        padding: 0 .5rem 1rem;
        word-break: break-all;
    }
}

/* パソコン */
@media print,screen and (min-width : 1366px) {
        #overview .wrapper {
            display: grid;
            grid-template-columns: 50% 50%;
        }
}