﻿.staffArea .innerBlock {
    display: flex;
    flex-wrap: wrap;
    max-width: 1140px;
    width: 100%;
    margin: 11.25vw auto 0
}

@media screen and (max-width: 1200px) {
    .staffArea .innerBlock {
        max-width: none;
        width: auto;
        margin: 11.25vw 2.7777777778vw 0
    }
}

@media screen and (max-width: 1200px)and (max-width: 768px) {
    .staffArea .innerBlock {
        margin: 13.3333333333vw 7.2vw 0
    }
}

.staffArea .item {
    width: calc(25% - 20px);
    margin: 0 10px
}

@media screen and (max-width: 768px) {
    .staffArea .item {
        width: calc(50% - 6px)
    }
}

.staffArea .item .img {
    position: relative
}

.staffArea .item .img img {
    width: 100%;
    height: 27.7777777778vw;
    object-fit: cover;
    object-position: center
}

@media screen and (max-width: 768px) {
    .staffArea .item .img img {
        height: 61.3333333333vw
    }
}

@media screen and (min-width: 768px) {
    .staffArea .item:nth-child(n+5) {
        margin-top: 74px
    }
}

@media screen and (max-width: 768px) {
    .staffArea .item {
        margin: 0 3px 0
    }

    .staffArea .item:nth-child(n+3) {
        margin-top: 10.6666666667vw
    }
}

.staffArea .detail {
    margin: 21px 0 0
}

.staffArea .detail .company,
.staffArea .detail .position {
    font-size: clamp(.75rem, .75rem + 0vw, .75rem);
    line-height: 140%;
    letter-spacing: .1em;
    color: #8d8d8d
}

.staffArea .detail .position {
    margin: 2px 0 0
}

.staffArea .detail .name {
    margin: 4px 0 0;
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    line-height: 140%;
    letter-spacing: .1em;
    color: #303030
}

.staffArea.__single {
    margin: 250px 0 0
}

@media screen and (max-width: 768px) {
    .staffArea.__single {
        margin: 177px 0 0
    }
}

.staffArea.__single .innerBlock {
    max-width: 1046px;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 0 auto
}

@media screen and (max-width: 1200px) {
    .staffArea.__single .innerBlock {
        max-width: none;
        margin: 0 4.1666666667vw
    }
}

@media screen and (max-width: 1200px)and (max-width: 768px) {
    .staffArea.__single .innerBlock {
        flex-wrap: wrap;
        margin: 0 7.4666666667vw
    }
}

.staffArea.__single .detail {
    margin-top: 0
}

@media screen and (max-width: 768px) {
    .staffArea.__single .detail {
        margin-top: 21px
    }
}

.staffArea.__single .detail .company,
.staffArea.__single .detail .position {
    color: #303030
}

.staffArea.__single .detail .position {
    margin: 2px 0 0
}

.staffArea.__single .detail .name {
    margin: 11px 0 53px;
    padding-bottom: 30px;
    font-size: 20px;
    border-bottom: 1px solid #c4c4c4
}

@media screen and (max-width: 768px) {
    .staffArea.__single .detail .name {
        margin: px 0 70px;
        font-size: 16px;
        border-bottom: none
    }
}

.staffArea.__single .left {
    max-width: 315px;
    width: 100%
}

@media screen and (max-width: 768px) {
    .staffArea.__single .left {
        width: auto;
        margin: auto
    }
}

.staffArea.__single .left .img img {
    width: 100%;
    height: 520px;
    object-fit: cover
}

.staffArea.__single .right {
    max-width: 560px;
    width: 100%;
    margin: 0 0 0 4.1666666667vw
}

.staffArea.__single .right .contents {
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    margin: 91px 0 146px
}

@media screen and (max-width: 768px) {
    .staffArea.__single .right .contents {
        margin: 20.2666666667vw 0 16vw
    }
}

.staffArea.__single .right .contents p,
.staffArea.__single .right .contents pre {
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    font-size: clamp(.875rem, .875rem + 0vw, .875rem);
    font-weight: 400;
    line-height: 200%;
    text-align: justify;
    letter-spacing: .1em;
    color: #000
}

.staffArea.__single .right .contents h1,
.staffArea.__single .right .contents h2 {
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    padding: .7638888889vw 1.1111111111vw;
    font-size: clamp(1.25rem, 1.1074rem + .2972vw, 1.375rem);
    font-weight: 700;
    line-height: clamp(1.8125rem, 1.5985rem + .4458vw, 2rem);
    border-left: 4px solid #303030;
    background: #f9f6f6;
    color: #000
}

@media screen and (max-width: 768px) {

    .staffArea.__single .right .contents h1,
    .staffArea.__single .right .contents h2 {
        width: calc(100% + 16vw);
        margin: 0 0 0 -8vw;
        padding: 1.6vw 12.5333333333vw 1.6vw 5.3333333333vw;
        border-left: 11px solid #303030
    }
}

.staffArea.__single .right .contents h3 {
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    position: relative;
    padding: 0 0 0 66px;
    font-size: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
    font-weight: 700;
    line-height: clamp(1.625rem, 1.625rem + 0vw, 1.625rem);
    letter-spacing: .1em;
    color: #000
}

@media screen and (max-width: 768px) {
    .staffArea.__single .right .contents h3 {
        padding: 0 0 0 30px
    }
}

.staffArea.__single .right .contents h3::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 1px;
    margin: auto;
    background: #303030
}

@media screen and (max-width: 768px) {
    .staffArea.__single .right .contents h3::before {
        width: 21px
    }
}

.staffArea.__single .right .contents h4 {
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    padding: 0 0 0 8px;
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    font-weight: 700;
    line-height: clamp(1.4375rem, 1.4375rem + 0vw, 1.4375rem);
    letter-spacing: .1em;
    border-left: 4px solid #8d8d8d;
    color: #303030
}

.staffArea.__single .right .contents h5,
.staffArea.__single .right .contents h6 {
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    font-size: clamp(.875rem, .875rem + 0vw, .875rem);
    font-weight: 700;
    line-height: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
    letter-spacing: .1em;
    color: #303030
}

.staffArea.__single .right .contents ul,
.staffArea.__single .right .contents ol {
    padding: 3.0555555556vw 55px 3.0555555556vw 39px;
    border: 1px solid #c4c4c4
}

@media screen and (max-width: 768px) {

    .staffArea.__single .right .contents ul,
    .staffArea.__single .right .contents ol {
        padding: 36px 30px 30px
    }
}

.staffArea.__single .right .contents ul li,
.staffArea.__single .right .contents ol li {
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    position: relative;
    padding: 0 0 0 1.7361111111vw;
    font-size: clamp(.875rem, .875rem + 0vw, .875rem);
    font-weight: 400;
    line-height: 200%;
    letter-spacing: .1em;
    color: #303030
}

@media screen and (max-width: 768px) {

    .staffArea.__single .right .contents ul li,
    .staffArea.__single .right .contents ol li {
        padding: 0 0 0 4vw
    }
}

.staffArea.__single .right .contents ul li::before,
.staffArea.__single .right .contents ol li::before {
    content: "・";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    color: #8d8d8d
}

.staffArea.__single .right .contents ol li {
    margin: 0 0 0 1.7361111111vw;
    padding: 0;
    list-style: auto
}

@media screen and (max-width: 1200px) {
    .staffArea.__single .right .contents ol li {
        margin: 0 0 0 4vw
    }
}

.staffArea.__single .right .contents ol li::marker {
    color: #8d8d8d
}

.staffArea.__single .right .contents ol li::before {
    content: none
}

.staffArea.__single .right .contents blockquote {
    position: relative;
    padding: 2.6388888889vw 68px;
    background: #f9f6f6
}

@media screen and (max-width: 768px) {
    .staffArea.__single .right .contents blockquote {
        padding: 50px 30px
    }
}

.staffArea.__single .right .contents blockquote::before,
.staffArea.__single .right .contents blockquote::after {
    content: "";
    display: block;
    position: absolute;
    width: 31px;
    height: 29px;
    background: url(../../dist/images/news/img_quotation_marks.svg) no-repeat;
    background-size: contain
}

.staffArea.__single .right .contents blockquote::before {
    top: 15px;
    left: 15px
}

@media screen and (max-width: 768px) {
    .staffArea.__single .right .contents blockquote::before {
        top: 5px;
        left: 5px
    }
}

.staffArea.__single .right .contents blockquote::after {
    right: 15px;
    bottom: 15px;
    transform: rotate(180deg)
}

@media screen and (max-width: 768px) {
    .staffArea.__single .right .contents blockquote::after {
        right: 5px;
        bottom: 5px
    }
}

.staffArea.__single .right .contents span {
    display: inline
}

.staffArea.__single .right .contents span.is-marker {
    position: relative
}

.staffArea.__single .right .contents span.is-marker::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: #fff386;
    z-index: -1
}

.staffArea.__single .right .contents a {
    display: inline;
    text-decoration-line: underline;
    color: #06f;
    transition: .3s ease-in-out
}

@media screen and (min-width: 768px) {
    .staffArea.__single .right .contents a:hover {
        opacity: .6
    }
}

.staffArea.__single .right .contents span {
    display: inline
}

.staffArea.__single .right .contents img {
    display: inline
}

.staffArea.__single .right .contents img:not(.small-img) {
    width: 100%
}

@media screen and (max-width: 768px) {
    .staffArea.__single .right .contents img:not(.small-img) {
        max-width: none;
        width: calc(100% + 16vw);
        margin: 0 0 0 -8vw
    }
}

@media screen and (max-width: 768px) {
    .staffArea.__single .right .contents iframe {
        width: 100%
    }
}

@media screen and (max-width: 768px) {
    .staffArea.__single .right {
        max-width: none;
        margin: 0
    }
}

.staffArea.__single .right .contents {
    margin: 0
}

.staffArea.__single .right .contents p {
    color: #303030;
    text-decoration: none
}

.relatedArticleArea {
    margin: 83px 0 0;
    padding: 131px 0 196px;
    background: #f9f6f6
}

.relatedArticleArea .slick-track {
    display: flex
}

.relatedArticleArea .slick-slider {
    position: relative
}

.relatedArticleArea .slick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 90px;
    margin: auto;
    z-index: 990
}

.relatedArticleArea .slick-arrow.slick-disabled {
    display: none !important
}

@media screen and (max-width: 800px) {
    .relatedArticleArea .slick-arrow {
        display: none !important
    }
}

.relatedArticleArea .slick-arrow .arrow svg circle,
.relatedArticleArea .slick-arrow .arrow svg rect {
    transition: .3s ease-in-out
}

@media screen and (min-width: 768px) {
    .relatedArticleArea .slick-arrow:hover .arrow svg circle {
        fill: #000
    }

    .relatedArticleArea .slick-arrow:hover .arrow svg rect {
        fill: #fff
    }
}

.relatedArticleArea .slick-prev {
    left: 50px
}

.relatedArticleArea .slick-next {
    right: 50px
}

@media screen and (max-width: 768px) {
    .relatedArticleArea {
        margin: 48px 0 0;
        padding: 81px 0 129px
    }
}

.relatedArticleArea .slick-arrow {
    display: block !important
}

@media screen and (max-width: 768px) {
    .relatedArticleArea .slick-arrow .arrow svg {
        width: 55px;
        height: 55px
    }
}

.relatedArticleArea .slick-arrow.slick-prev {
    left: 40px
}

.relatedArticleArea .slick-arrow.slick-next {
    right: 40px
}

.relatedArticleArea .head {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto 26px;
    font-size: 27px;
    line-height: 200%;
    letter-spacing: .1em;
    color: #303030
}

@media screen and (max-width: 1200px) {
    .relatedArticleArea .head {
        max-width: none;
        width: auto;
        margin: 0 0 26px 4.1666666667vw
    }
}

@media screen and (max-width: 1200px)and (max-width: 768px) {
    .relatedArticleArea .head {
        margin: 0 0 35px 8vw;
        line-height: 160%;
        letter-spacing: .05em
    }
}

.relatedArticleArea .item {
    position: relative;
    margin: 0 8.5px
}

.relatedArticleArea .item::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 100%
}

.relatedArticleArea .item .img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

.relatedArticleArea .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: ease 1s
}

.relatedArticleArea .item .img::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 990
}

.relatedArticleArea .is-deactivate {
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width: 800px) {
    .relatedArticleArea .is-deactivate {
        display: block;
        margin: 0 7.2vw
    }
}

.relatedArticleArea .is-deactivate .item {
    width: 34.7222222222vw;
    height: 34.7222222222vw
}

@media screen and (min-width: 1441px) {
    .relatedArticleArea .is-deactivate .item {
        width: 500px;
        height: 500px
    }
}

@media screen and (max-width: 800px) {
    .relatedArticleArea .is-deactivate .item {
        width: 100%;
        height: 100%;
        margin: 0
    }

    .relatedArticleArea .is-deactivate .item+.item {
        margin-top: 20px
    }
}

.otherStaffArea {
    margin: 135px 0 0
}

.otherStaffArea .slick-track {
    display: flex
}

.otherStaffArea .slick-slider {
    position: relative
}

.otherStaffArea .slick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 90px;
    margin: auto;
    z-index: 990
}

.otherStaffArea .slick-arrow.slick-disabled {
    display: none !important
}

@media screen and (max-width: 800px) {
    .otherStaffArea .slick-arrow {
        display: none !important
    }
}

.otherStaffArea .slick-arrow .arrow svg circle,
.otherStaffArea .slick-arrow .arrow svg rect {
    transition: .3s ease-in-out
}

@media screen and (min-width: 768px) {
    .otherStaffArea .slick-arrow:hover .arrow svg circle {
        fill: #000
    }

    .otherStaffArea .slick-arrow:hover .arrow svg rect {
        fill: #fff
    }
}

.otherStaffArea .slick-prev {
    left: 50px
}

.otherStaffArea .slick-next {
    right: 50px
}

@media screen and (max-width: 768px) {
    .otherStaffArea {
        margin: 100px 0 0
    }
}

.otherStaffArea .__staff .slick-arrow {
    display: none !important
}

.otherStaffArea .item {
    margin: 0 8.5px
}

@media screen and (max-width: 768px) {
    .otherStaffArea .item {
        margin: 0 3px
    }
}

.otherStaffArea .item .img {
    width: 100%;
    height: 100%
}

.otherStaffArea .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: ease 1s
}

.otherStaffArea .upper {
    width: 18.75vw;
    height: 27.7777777778vw
}

@media screen and (max-width: 800px) {
    .otherStaffArea .upper {
        width: 100%;
        height: 83.3333333333vw
    }
}

@media screen and (max-width: 800px)and (max-width: 500px) {
    .otherStaffArea .upper {
        height: 61.3333333333vw
    }
}

.otherStaffArea .detail {
    padding: 21px 0 0
}

.otherStaffArea .detail .company,
.otherStaffArea .detail .position {
    font-size: clamp(.75rem, .75rem + 0vw, .75rem);
    line-height: 140%;
    letter-spacing: .1em;
    color: #8d8d8d
}

.otherStaffArea .detail .position {
    margin: 2px 0 0
}

.otherStaffArea .detail .name {
    margin: 4px 0 0;
    font-size: clamp(1rem, 1rem + 0vw, 1rem);
    line-height: 140%;
    letter-spacing: .1em;
    color: #303030
}