@charset "utf-8";

@media only screen and (min-width: 0px) and (max-width: 750px) {

/* ────────────────────── *
 *                                              *
 * タイトル                                     *
 *                                              *
 * ────────────────────── */

.title#index {
    background: url("../../image/work/bg-title-sp.jpg") no-repeat center center / cover;
    z-index: auto;
}
.title#index:after {
    width: 70.0rem;
    height: 57.6rem;
    top: 14.0rem;
    opacity: 0.8;
}
.title#index .inner {
    max-width: 70.0rem;
}
.title#index .inner h1 {
    letter-spacing: 0.1em;
}
.title#index .inner p.ja {
    font-size: 2.8rem;
}
.title#index-interview {
    background: url("../../image/work/interview/bg-title-sp.jpg") no-repeat center center / cover;
    z-index: auto;
}
.title#index-interview:after {
    background: url("../../image/work/interview/letter-u.png") no-repeat center center / cover;
    width: 60.0rem;
    height: 77.6rem;
    top: 49.0rem;
}
.title .inner#index-interview {
    max-width: 70.0rem;
}
.title .inner#index-interview h1 {
    font-size: 4.8rem;
}
.title .inner#index-interview p.ja {
    font-size: 2.8rem;
}

/* 社員インタビュー詳細 */
.title#interview-detail {
    height: auto;
    padding-top: 70.0rem;
    padding-bottom: 9.0rem;
}
.title#interview-detail:after {
    width: 32.8rem;
    height: 48.0rem;
    bottom: auto;
    top: 55.0rem;
    opacity: 0.8;
}
.title#interview-detail p#mainvisual {
    width: 100%;
    z-index: 1;
}
.title#interview-detail .inner {
    max-width: 65.0rem;
}
.title#interview-detail .inner p.goal {
    font-size: 2.8rem;
}
.title#interview-detail .inner h1 {
    line-height: 1.5;
    margin-bottom: 5.0rem;
}
.title#interview-detail .inner dl {
    width: 48.0rem;
}
.title#interview-detail .inner dl dt {
    font-size: 2.4rem;
    border-bottom: 0.2rem solid #008dd7;
}
.title#interview-detail .inner dl dd p.name {
    font-size: 2.4rem;
}
.title#interview-detail .inner dl dd p.ruby {
    font-size: 1.8rem;
}
.title#interview-detail .inner dl dd p.history {
    font-size: 1.8rem;
}

/* ────────────────────── *
 *                                              *
 * 社員インタビュー目次                         *
 *                                              *
 * ────────────────────── */

#contents-index-interview {
    padding: 8.0rem 0 12.0rem;
    overflow: hidden;
}
#contents-index-interview .block {
    width: 65.0rem;
    margin: 0 auto 0;
}
#contents-index-interview .block .person {
    width: 31.0rem;
    margin-right: 3.0rem;
    margin-bottom: 1.5rem;
}
#contents-index-interview .block .person:nth-of-type(2) {
    margin-top: 6.0rem;
    margin-right: 0;
}
#contents-index-interview .block .person:nth-of-type(3) {
    margin-top: 0;
}
#contents-index-interview .block .person:nth-of-type(4) {
    margin-top: 6.0rem;
    margin-right: 0;
}
#contents-index-interview .block .person a {
    padding: 3.0rem;
}
#contents-index-interview .block .person p.num {
    font-size: 3.6rem;
    left: 2.0rem;
    top: 2.0rem;
}
#contents-index-interview .block .person p.face {
    text-align: center;
    margin: 0 auto 3.0rem;
}
#contents-index-interview .block .person p.face img {
    width: 100%;
}
#contents-index-interview .block .person dl dt {
    font-size: 2.8rem;
    padding-bottom: 2.0rem;
    border-bottom: 0.2 solid #008dd7;
}
#contents-index-interview .block .person dl dd {
    font-size: 2.5rem;
    line-height: 1.5;
    min-height: calc(2.5rem * 1.5 * 4);
    width: 125%;
    transform: scale(0.8);
    transform-origin: left;
}

/* ────────────────────── *
 *                                              *
 * キャリアパス                                 *
 *                                              *
 * ────────────────────── */

#career {
    padding: 9.0rem 0 10.0rem;
    margin: 0 auto;
}
#career .inner {
    width: 55.0rem;
}
#career .inner h2 {
    font-size: 3.5rem;
    text-align: center;
    margin: 0 auto 6.0rem;
}
#career .inner ol {
    display: block;
}
#career .inner ol li {
    color: #fff;
    text-align: center;
    width: 100%;
    height: 20.0rem;
    padding-top: 4.0rem;
    margin-bottom: 6.0rem;
    margin-right: 0;
    border: 0.2rem solid #fff;
    border-radius: 10.0rem;
}
#career .inner ol li.valign-center {
    padding-top: 4.0rem;
    display: block;
}
#career .inner ol li:last-child {
    margin-bottom: 0;
}
#career .inner ol li:before {
    width: 0.2rem;
    height: 6.0rem;
    top: -4.5rem;
    left: 50%;
    transform: translateX(-50%);
}
#career .inner ol li p.year {
    font-size: 2.0rem;
    margin-bottom: 1.5rem;
}
#career .inner ol li p.history {
    font-size: 2.2rem;
    line-height: 1.6;
    width: 65.0rem;
    height: calc(2.2rem * 1.6 * 2);
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
#career .inner ol li p.history.small {
    transform: none;
}
#career .inner ol li p.history span {
    font-size: 1.8rem;
}
#career .inner p.notice {
    font-size: 1.8rem;
    right: -5.0rem;
    top: calc(100% + 12.0rem);
}

/* ────────────────────── *
 *                                              *
 * 社員インタビュー（詳細）                     *
 *                                              *
 * ────────────────────── */

#contents-interview {
    padding-top: 16.0rem;
}
#contents-interview p#letter-detail-m {
    width: 40.0rem;
    opacity: 0.5;
}
#contents-interview .interview-wrap p.image {
    width: 45.8rem;
    margin-bottom: 10.0rem;
    position: static;
}
#contents-interview .interview-wrap p.image.right {
    margin-left: auto;
}
#contents-interview .interview-wrap .phase {
    width: 65.0rem;
    margin: 0 auto 9.0rem;
}
#contents-interview .interview-wrap .phase.right {
    padding-left: 0;
}
#contents-interview .interview-wrap .phase.left {
    padding-right: 0;
}
#contents-interview .interview-wrap .phase p.question {
    font-size: 2.0rem;
    margin-bottom: 3.0rem;
}
#contents-interview .interview-wrap .phase h3 {
    font-size: 3.6rem;
}
#contents-interview .interview-wrap .phase .body {
    font-size: 2.2rem;
    line-height: 2;
}
#contents-interview .interview-wrap .phase .body p.subtitle {
    font-size: 2.6rem;
}
#contents-interview .interview-wrap p#letter-detail-k {
    width: 24.0rem;
    top: 25.0rem;
    opacity: 0.3;
}
#contents-interview p.image-full {
    margin: 0 auto 10.0rem;
}
#contents-interview p.image-full span.overflow {
    display: block;
    overflow: hidden;
}
#contents-interview p.image-full:after {
    width: 28.0rem;
    height: 48.0rem;
    top: 23.0rem;
    z-index: -1;
}
#contents-interview p.image-full img {
    width: auto;
    max-width: none;
    height: 45.0rem;
    margin-left: -22.5rem;
}

/* ────────────────────── *
 *                                              *
 * 次のコンテンツ                               *
 *                                              *
 * ────────────────────── */

#next {
    padding: 10.0rem 0 12.5rem;
}
#next .inner {
    width: 55.0rem;
}
#next .inner p.title-next {
    font-size: 4.0rem;
    margin: 0 auto 7.0rem;
}
#next .inner .pagelink dl.child {
    width: 100%;
}
#next .inner .pagelink dl.child dt {
    font-size: 2.0rem;
    margin: 0 auto 2.0rem;
}
#next .inner .pagelink dl.child dd {
    font-size: 2.6rem;
}

#next .inner #another .navigation {
    width: 20.0rem;
}
#next .inner #another .navigation p.image {
    width: 18.0rem;
    margin: 0 auto 2.0rem;
}
#next .inner #another .navigation p.image:before {
    content: none;
}
#next .inner #another .navigation dl dt {
    font-size: 2.2rem;
    line-height: 1.5;
}
#next .inner #another .navigation dl dd {
    font-size: 2.2rem;
}
#next .inner #another #goto-index {
    font-size: 1.8rem;
    line-height: 1.3;
    text-align: center;
    margin-top: 4.0rem;
}
#next .inner #another #goto-index a {
    padding-top: 7.5rem;
}
#next .inner #another #goto-index a:before {
    width: 5.6rem;
    height: 5.6rem;
}


/* 飾り文字 */
.letter.index-interview ul li:nth-child(1) {
    width: 26.6rem;
    left: -4.0rem;
    top: 150.0rem;
}
.letter.index-interview ul li:nth-child(2) {
    right: 8.5rem;
    bottom: 0;
}

/* ────────────────────── *
 *                                              *
 * 職種情報                                     *
 *                                              *
 * ────────────────────── */

#job-description {
    padding-top: 9.0rem;
}
#job-description h2 {
    font-size: 3.0rem;
}
#job-description #matrix {
    background: transparent;
    width: 65.0rem;
    padding: 0;
    margin: 0 auto 10.0rem;
    box-shadow: none;
}
#job-description #matrix dl dt {
    margin-bottom: 2.0rem;
}
#job-description #matrix dl dd {
    font-size: 2.4rem;
}
#job-description #matrix dl dd ul {
    display: block;
}
#job-description #matrix dl dd ul li:nth-child(2) {
    font-size: 2.2rem;
    line-height: 1.363636363636364;
    margin-top: 1.0rem;
    text-indent: -1em;
    padding-left: 1em;
}
.matrix-popup .modaal-container {
    max-width: none;
    max-height: 80vh;
    height: 100%;
}
.matrix-popup .modaal-container img {
    width: auto;
    height: 100%;
    margin: 0 auto;
}
.matrix-popup .modaal-content-container {
    height: 100%;
    padding: 5px;
}
.matrix-popup .modaal-content {
    height: 100%;
}
.matrix-popup .modaal-inner-wrapper {
    padding: 80px 10px;
}
.matrix-popup .modaal-wrapper .modaal-close {
    right: 10px;
    top: 10px;
}
#job-description #job-detail {
    padding: 9.0rem 0 10.0rem;
}
#job-description #job-detail .job-detail-item {
    width: 65.0rem;
    padding: 7.0rem 5.0rem 9.0rem;
    margin: 0 auto 3.0rem;
}
#job-description #job-detail .job-detail-item h3 {
    font-size: 3.6rem;
}
#job-description #job-detail .job-detail-item .flex dl {
    width: 26.0rem;
}
#job-description #job-detail .job-detail-item .flex dl dt {
    font-size: 2.4rem;
    padding: 1.5rem;
}
#job-description #job-detail .job-detail-item .flex dl dt span {
    display: inline-block;
    transform-origin: left;
    transform: scaleX(0.82);
    white-space: nowrap;
}
#job-description #job-detail .job-detail-item .flex dl dd {
    font-size: 2.0rem;
    line-height: 1.5;
}
#job-description #job-detail .job-detail-item dl.special-skill {
    padding: 7.5rem 5.0rem;
    margin-top: 7.0rem;
}
#job-description #job-detail .job-detail-item dl.special-skill dt {
    font-size: 3.0rem;
    margin-bottom: 4.0rem;
}
#job-description #job-detail .job-detail-item dl.special-skill dd {
    font-size: 2.0rem;
    line-height: 2;
}

/* 飾り文字 */
.letter.index ul li:nth-child(1) {
    width: 21.6rem;
    left: 4.5rem;
    top: -13.0rem;
    opacity: 0.8;
}
.letter.index ul li:nth-child(2) {
    width: 23.0rem;
    right: 3.0rem;
    top: 42.0rem;
}
.letter.index ul li:nth-child(3) {
    width: 29.2rem;
    left: 30.0rem;
    bottom: -5.0rem;
}

}