.sp {
        display: none;
}

.mb01 {
        margin-bottom: 1rem;
}

#staff h1 {
        position: absolute;
        overflow: visible;
        padding-left: 27%;
        top: 11.5rem;
        z-index: 1;
        margin: 0 auto;
        padding-top: 0;
        color: #036eb8;
        font-family: 'Kiwi Maru', serif;
        font-size: 1.4rem;
        font-weight: bold;
        background: none;
}

/* ---------- 会社案内 - スタッフ紹介 ---------- */

#staff #main {
        position: relative;
        width: 100%;
        height: 100vh;
        margin: 0;
        padding: 0;
        margin-bottom: 40px;
}

#staff #main video {
        min-width: 100%;
        min-height: 100vh;
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}

#staff #main .overlay {
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-image: linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.3) 50%,
                rgba(0, 0, 0, 0.7) 50%
        );
        background-size: 4px 4px;
        z-index: 2;
}

#staff #main .staff-header {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        overflow: hidden;
}

#staff #main .logo-box {
        width: 100%;
        height: auto;
        text-align: center;
        padding: 2rem;
}

#staff #main .navi {
        width: 100%;
        height: auto;
        overflow: hidden;
}

#staff #main .navi ul,
#staff #main .navi li {
        list-style: none;
}

#staff #main .navi li a {
        display: block;
        width: 12.5%;
        height: auto;
        float: left;
        color: #ffffff;
        text-decoration: none;
        text-align: center;
}

#staff #main .title-box a {
        display: block;
        width: fit-content;
        height: auto;
        padding: 4rem 12rem;
        font-size: 6rem;
        font-weight: bold;
        color: #ffffff;
        text-decoration: none;
        border: solid 1px #ffffff;
        border-radius: 1rem;
}

#staff #main .title-box a span.staff_jp {
        display: block;
        width: fit-content;
        height: auto;
        margin: 0 auto;
        font-size: 1.8rem;
        font-weight: normal;
        text-align: center;
}

#staff #main .title-box a span.enter_link {
        display: block;
        margin: 1rem auto;
        text-align: center;
        font-size: 4rem;
}

#staff #main .title-box a span.enter_link i {
        margin-left: 1rem;
}

#staff #main .overlay #copyright {
        position: absolute;
        left: 0;
        bottom: 1rem;
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 0.6rem 0;
        text-align: center;
        color: #ffffff;
        background: none;
        border: none;
        font-size: 1.8rem;
}

/* ---------- 会社案内 - スタッフリスト ---------- */

#main.main-contents {
        width: 100%;
        margin-bottom: 40px;
}

.staff-list-title-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 300px;
        overflow: hidden;
        background: url(images/staff_list_title.png) center top no-repeat;
        background-size: 100% auto;
        margin: 0 auto;
        margin-top: 4rem;
}

.staff-list-title-box h2 {
        width: 100%;
        height: auto;
        text-align: center;
        padding: 2rem;
        background-color: rgba(255, 255, 255, 0.6);
        font-size: 3rem;
        letter-spacing: 1rem;
        color: #000;
}

.department-link {
        max-width: calc(1200px + 6%);
        padding-left: 3%;
        padding-right: 3%;
        margin: 5rem auto 8rem;
}

.department-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        list-style-type: none;
}

.department-link-list {
        width: 24.7%;
}

.department-link-list .link-btn {
        display: inline-block;
        width: 100%;
        height: 50px;
        position: relative;
        background: #20AEE5;
        border: solid 2px #20AEE5;
        border-radius: 3px;
        transition: 0.3s;
        overflow: hidden;
        text-decoration: none;
}

.department-link-list .link-btn::before {
        content: "";
        position: absolute;
        top: -120px;
        left: -450px;
        width: 200%;
        height: 160px;
        background: white;
        transform: rotate(-45deg);
        opacity: 0.5;
        z-index: 0;
        transition: all 0.5s ease-out;
}

.department-link-list .link-btn > span {
        display: inline-block;
        position: absolute;
        width: 100%;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        z-index: 2;
        font-size: 14px;
}

.department-link-list .link-btn:hover::before {
        top: 100%;
        left: 100%;
}

.group-box {
        margin: 0 auto 5rem;
}

/* hover_action */
.image_box {
        width: 100%;
        display: block;
        margin-bottom: 1rem;
}

.hover {
        position: relative;
}

.hover img {
        display: block;
        width: 100%;
}

.hover .image-box01 {
        transition: 0.3s;
}

.hover .image-box02 {
        transform: rotateY(-180deg);
        opacity: 0;
        transition: 0.3s;
        position: absolute;
        left: 0;
        top: 0;
}

.hover:hover .image-box01 {
        transform: rotateY(-180deg);
}

.hover:hover .image-box02 {
        opacity: 1;
        transform: rotateY(0);
}

/* ReadMoreここから */

.topmain-txt {
        max-height: 43px;
        overflow: hidden;
}

a.opnbtn {
        clear: both;
        padding-top: 10px !important;
        z-index: 15000;
        text-align: right;
        text-decoration: none;
}

a.clsbtn {
        clear: both;
        padding-top: -10px !important;
        z-index: 15000;
        text-align: right;
        text-decoration: none;
}

/* ReadMoreここまで */

.staff-detail-box {
        max-width: calc(1200px + 6%);
        padding-left: 3%;
        padding-right: 3%;
        margin: 2rem auto 0;
}

.content-title {
        width: max-content;
        padding-bottom: 1rem;
        margin: 5rem auto 3rem;
        border-bottom: 2px solid #333333;
}

.content-title h3 {
        font-size: 3rem;
        font-weight: bold;
        color: #111111;
}

.staff-detail-box .image_box_ceo {
        width: 33%;
}

.staff-detail-box .ceo-box {
        margin: 0 auto 5rem;
}

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

.ceo-box .image-box {
        width: 32%;
}

.ceo-box .image-box img {
        width: 100%;
        height: auto;
}

.ceo-box .detail-box {
        width: 65%;
}

.ceo-box .detail-box .name-box {
        width: 80%;
        height: auto;
}

.ceo-box .detail-box .name-box img {
        width: 70%;
        height: auto;
}

.ceo-box .detail-item {
        padding: 1rem 0;
}

.ceo-box .detail-item .president {
        font-size: 2rem;
        font-weight: bold;
        color: #333333;
}

.group-box h4 {
        margin: 0 auto 2rem;
        text-align: center;
        font-size: 2.5rem;
        color: #111111;
}

.group-box .staff-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
}

.group-box .staff-row::before {
        content: "";
        display: block;
        width: 24%;
        height: 0;
        order: 1;
}

.group-box .staff-row::after {
        content: "";
        display: block;
        width: 24%;
        height: 0;
}

.group-box .staff-box {
        width: 24%;
        margin-bottom: 3rem;
}

.group-box .staff-box .image-box {
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
}

.group-box .staff-box .image-box img {
        width: 100%;
        height: auto;
        vertical-align: top;
}

.staff-box .name-box {
        width: 100%;
        height: auto;
}

.staff-box .name-box img {
        width: 100%;
        height: auto;
        display: flex;
}

.staff-box .detail-box {
        width: 100%;
}

.staff-box .detail-item {
        padding: 1rem 0 0;
        font-size: 1.45rem;
}

#staff .staff-header .header-inner {
        max-width: 1200px;
        width: 94%;
        margin: 3% auto;
        padding-bottom: 5px;
        margin-top: 8rem;
        height: 7rem;
        position: relative;
        background-color: #bae3f9;
        background-image:
                radial-gradient(#d3edfb 20%, transparent 20%),
                radial-gradient(#d3edfb 20%, transparent 20%);
        background-size: 40px 40px;
        background-position: 0 0, 20px 20px;
        border-radius: 5px;
}

#staff .staff-header .staff-img-ico {
        position: absolute;
        bottom: 0;
        right: 10%;
        width: auto;
        height: 150%;
}

#staff .pc-staff-title {
        position: absolute;
        left: 10%;
        bottom: 0;
        color: #036eb8;
        font-family: 'Kiwi Maru', serif;
        font-size: 4rem;
}

/* ---------- 画面サイズが767px以下の場合読み込む---------- */

@media only screen and (max-width: 768px) {
        .sp {
                display: block;
        }

        .pc {
                display: none;
        }

        /* ---------- 会社案内 - ドロップダウンメニュー ---------- */

        .top-title {
                width: 100%;
        }

        .top-title-box {
                margin-top: 1rem;
        }

        .top-title-box span.en {
                color: #999999;
                font-size: 2rem;
        }

        .top-title-box h2,
        .top-title-box span.jp {
                font-size: 2.4rem;
                font-weight: bold;
                color: #FF6C1B;
        }

        .top-navi {
                width: 100%;
        }

        .top-navi li::before {
                display: none;
        }

        .top-navi ul.navi {
                display: block;
                width: 100%;
                height: auto;
                margin-top: 0;
                overflow: hidden;
                background-color: #ffffff;
        }

        .top-navi li a {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 50%;
                height: 6rem;
                float: left;
                text-align: center;
                padding: 0.5rem;
                color: #757575;
                background-color: #ffffff;
        }

        .top-navi li.navi01 a,
        .top-navi li.navi03 a,
        .top-navi li.navi05 a {
                border-right: solid 1px #dddddd;
        }

        .top-navi li.navi01-2 a,
        .top-navi li.navi02-2 a {
                border-top: solid 1px #dddddd;
        }

        .top-navi li.navi01 a,
        .top-navi li.navi02 a,
        .top-navi li.navi03 a,
        .top-navi li.navi04 a,
        .top-navi li.navi05 a,
        .top-navi li.navi06 a {
                border-bottom: solid 1px #dddddd;
        }

        .top-navi li.navi07 a {
                border-bottom: solid 2px #dddddd;
                border-right: solid 1px #dddddd;
        }
        #tab.top-navi {
                position: relative;
                width: 100%;
                color: #fff;
                /* アコーディオン タブ文字色 */
                overflow: hidden;
                margin-top: 2rem;
        }

        #tab.top-navi input {
                position: absolute;
                opacity: 0;
                z-index: -1;
        }

        #tab.top-navi label {
                position: relative;
                display: block;
                padding: 1em;
                color: #ffffff;
                background: #FF6C1B;
                /* アコーディオン タブ背景色 */
                font-size: 1.8rem;
                font-weight: bold;
                cursor: pointer;
        }

        #tab.top-navi .menu {
                position: absolute;
                top: 0;
                right: 70px;
                width: auto;
                width: max-content;
                height: 60px;
                line-height: 60px;
                font-size: 1.6rem;
                font-weight: bold;
        }

        #tab.top-navi .tab-content {
                max-height: 0;
                overflow: hidden;
                -webkit-transition: max-height 0.35s;
                -o-transition: max-height 0.35s;
                transition: max-height 0.35s;
        }

        /* :checked */
        #tab.top-navi input:checked ~ .tab-content {
                max-height: 30em;
                background: #e5001b;
                border-top: solid 1px rgba(255, 255, 255, 0.5);
        }

        /* Icon */
        /* Icon */
        #tab.top-navi label::after {
                background: #ff4e00;
                content: "+";
                display: block;
                line-height: 60px;
                position: absolute;
                right: 0;
                text-align: center;
                top: 0;
                width: 60px;
                height: 60px;
                font-size: 2.4rem;
                font-weight: bold;
        }

        #tab.top-navi input[type="checkbox"]:checked + label::after {
                content: "-";
        }

        #tab.top-navi input[type="radio"] + label::after {
                content: "\25BC";
        }

        #tab.top-navi input[type="checkbox"]:checked + label::after {
                transform: rotate(540deg);
        }

        #tab.top-navi input[type="radio"]:checked + label::after {
                transform: rotateX(180deg);
        }

        /* ---------- 会社案内 - スタッフ紹介 ---------- */
        #staff #main {
                margin-bottom: 0;
        }

        #staff #main video {
                width: auto;
                height: 100vh;
        }

        #staff #main .overlay {
                display: block;
        }

        #staff #main .staff-header {
                position: relative;
        }

        #staff #main .logo-box a img {
                width: 100%;
                height: auto;
        }

        #staff #main .navi {
                margin-bottom: 2rem;
        }

        #staff #main .navi li a {
                width: 50%;
                padding: 1rem;
        }

        #staff #main .title-box a {
                width: 94%;
                margin: 0 auto;
                padding: 4rem 0;
                text-align: center;
        }

        /* ---------- 会社案内 - スタッフリスト ---------- */

        .staff-detail-box .image_box_ceo {
                width: 49%;
        }

        #main.main-contents {
                margin-bottom: 0;
        }

        .breadcrumb {
                width: 94%;
        }

        .staff-detail-box .ceo-box {
                margin: 1rem auto 3rem;
        }

        .staff-list-title-box {
                height: 20rem;
                background-size: cover;
                margin: 0 auto;
        }

        .ceo-box .content-title {
                width: 100%;
        }

        .ceo-box .image-box {
                width: 100%;
                float: none;
                padding: 0;
        }

        .ceo-box .detail-box {
                width: 48%;
                float: none;
                padding: 0;
                margin-top: 2rem;
        }

        .ceo-box .detail-box .name-box {
                width: 100%;
        }

        .ceo-box .detail-box .name-box img {
                width: 70%;
        }

        .content-title {
                width: 100%;
                margin: 2rem auto;
        }

        .content-title h3 {
                font-size: 2.2rem;
        }

        .ceo-box .detail-item {
                padding: 0.5rem 0;
        }

        .department-link-list .link-btn {
                height: 60px;
        }

        .department-link {
                margin: 1rem auto;
        }

        .department-link-list {
                width: 49%;
        }

        .department-link-list .link-btn > span {
                padding: 0.5rem;
                font-size: 12px;
        }

        .group-box {
                margin: 0 auto 2rem;
        }

        .group-box h4 {
                margin-bottom: 1.5rem;
                font-size: 2rem;
        }

        .group-box .staff-box {
                width: 48%;
        }

        .staff-box .detail-box {
                padding: 0;
        }

        .group-click {
                margin-bottom: 2rem;
        }

        .staff-detail-item-box {
                width: 100%;
                margin-left: 0;
        }

        .staff-detail-wrap {
                margin-top: 2rem;
        }

        .group-box .staff-box .image-box img {
                width: 100%;
                height: auto;
        }

        .staff-box .name-box {
                width: 100%;
                height: auto;
                margin-top: 1.5rem;
        }

        .staff-box .name-box img {
                width: 90%;
                height: auto;
        }

        .group-box .staff-box {
                display: block;
                margin-bottom: 2rem;
        }

        .group-box .staff-box .image-box {
                width: 100%;
                height: auto;
        }

        .group-box .staff-detail-item {
                width: 100%;
        }

        #staff h1 {
        position: static;
	max-width: 1200px;
	width: 94%;
	margin: 3% auto 0;
	height: 0;
	overflow: hidden;
	padding-top: 24%;
	margin-bottom: 20px;
	background: url(https://www.city-tokudai.com/images/home_staff_title.png) center center no-repeat;
	background-size: 100% auto;
}
}

@media screen and (max-width: 599px) {
        .ceo-box .staff-ceo {
                display: block;
        }

        .staff-detail-box .image_box_ceo {
                width: 100%;
        }

        .ceo-box .detail-box {
                width: 100%;
        }

        .group-box .staff-box {
                width: 100%;
        }

        .staff-box .name-box img {
                width: 70%;
        }
}