@charset "utf-8";

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

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

.title#index {
    background: url("../../image/workstyle/bg-title-sp.jpg") no-repeat center center / cover;
}
.title#index:after {
    width: 29.0rem;
    height: 38.0rem;
    left: 24.0rem;
    top: 70.0rem;
}
.title#young {
    background: url("../../image/workstyle/young/bg-title-sp.jpg") no-repeat center center / cover;
    height: 52.0rem;
    margin-top: 10.0rem;
}
.title#veteran {
    background: url("../../image/workstyle/veteran/bg-title-sp.jpg") no-repeat center top / contain;
    height: auto;
    min-height: 52.0rem;
    margin-top: 10.0rem;
    z-index: 10;
}
.title .inner {
    max-width: 70.0rem;
}
.title#veteran .inner {
    background: #fff;
    width: 70.0rem;
    padding: 11.0rem 14.0rem 14.0rem 5.0rem;
    margin: 0;
    box-sizing: border-box;
    border-top-right-radius: 100.0rem;
    border-bottom-right-radius: 100.0rem;
    position: absolute;
    top: 46.0rem;
}
.title .inner p.ja {
    font-size: 2.8rem;
}
.title#veteran .inner h1 {
    line-height: 1.75;
}
.title#veteran .inner h1 span.small {
    font-size: 2.2rem;
}
.title#veteran .inner p.en {
    font-size: 2.0rem;
    padding: 0.8rem 2.0rem 0.5rem;
    margin-bottom: 2.0rem;
}
.title#veteran .inner p.txt {
    font-size: 2.2rem;
    line-height: 1.75;
    width: 100%;
}

/* ────────────────────── *
 *                                              *
 * イントロ                                     *
 *                                              *
 * ────────────────────── */

#intro {
    max-width: 65.0rem;
    padding: 5.0rem;
    margin: -28.0rem auto 12.0rem;
}
#intro p {
    font-size: 2.2rem;
    margin: 0 auto 4.0rem;
}
#intro ul#categorize {
    font-size: 2.2rem;
    line-height: 1.36;
    display: block;
}
#intro ul#categorize li {
    height: auto;
    padding-left: 5.0rem;
    margin-bottom: 1.5rem;
}
#intro ul#categorize li:last-child {
    margin-bottom: 0;
}
#intro ul#categorize li:before {
    width: 3.0rem;
    height: 3.0rem;
    border-radius: 0.2rem;
}

/* ────────────────────── *
 *                                              *
 * ビジョン                                     *
 *                                              *
 * ────────────────────── */

#vision .flex {
    max-width: 65.0rem;
}
#vision .flex .flexitem {
    width: 31.0rem;
    margin-bottom: 5.0rem;
    border-radius: 0.5rem;
}
#vision .flex .flexitem a {
    padding: 3.0rem 1.5rem 5.0rem;
}
#vision .flex .flexitem dl dt {
    font-size: 1.8rem;
    line-height: 1.11;
    letter-spacing: normal;
    min-height: calc(1.8rem * 1.11 * 2 + 2.0rem);
    padding: 1.0rem;
    border-radius: 6.0rem;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#vision .flex .flexitem dl dt {
    font-size: 2.5rem;
    line-height: 1.11;
    letter-spacing: normal;
    min-height: calc(2.5rem * 1.11 * 2 + 1.0rem);
    width: 28.0rem;
    padding: 0.5rem;
    border-radius: 6.0rem;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
}
#vision .flex .flexitem dl dt span {
    display: inline-block;
    transform: scale(0.72);
}
#vision .flex .flexitem dl dd {
    font-size: 2.4rem;
    line-height: 1.45;
    font-feature-settings: "palt" 1;
    min-height: calc(2.4rem * 1.45 * 3);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#vision .flex .flexitem#num23 dl dd {
    min-height: calc(2.4rem * 1.45 * 5);
}
#vision .flex .flexitem p.btn-open {
    width: 6.0rem;
    height: 6.0rem;
    bottom: -2.0rem;
}
#vision .flex .flexitem p.btn-open img {
    width: 2.6rem;
}

/* 飾り文字 */
.letter ul li {
    position: absolute;
}
.letter.index ul li:nth-child(1) {
    width: 61.6rem;
    top: 130.0rem;
}
.letter.index ul li:nth-child(2) {
    width: 32.0rem;
    top: 330.0rem;
}
.letter.index ul li:nth-child(3) {
    width: 28.0rem;
    left: 44.0rem;
}
.letter.young ul li:nth-child(1) {
    width: 33.0rem;
    top: 83.0rem;
    opacity: 0.3;
}
.letter.young ul li:nth-child(2) {
    width: 74.0rem;
    top: 320.0rem;
    opacity: 0.5;
}
.letter.young ul li:nth-child(3) {
    width: 29.0rem;
    top: 690.0rem;
    opacity: 0.5;
}
.letter.young ul li:nth-child(4) {
    width: 25.0rem;
    left: 11.0rem;
    bottom: 22.0rem;
    z-index: -1;
    opacity: 0.4;
}

/* ────────────────────── *
 *                                              *
 * モーダル                                     *
 *                                              *
 * ────────────────────── */

.modal {
    width: 63.0rem;
    padding: 0;
    box-shadow: 0.5rem 0.5rem 1.0rem rgba(0,0,0, 0.15);
}
.modaal-container {
    width: 63.0rem;
    box-shadow: 0.5rem 0.5rem 1.0rem rgba(0,0,0, 0.15);
}
.modaal-container .flex {
    display: block;
}
.modaal-container .flex .head {
    width: 100%;
    padding: 6.0rem 8.0rem 8.0rem;
    border-radius: 0.5rem 0.5rem 0 0;
}
.modaal-container .flex .head dl dt {
    font-size: 2.5rem;
    padding: 1.0rem;
    margin-bottom: 3.0rem;
    border: 1px solid #fff;
    border-radius: 4.0rem;
    white-space: nowrap;
}
.modaal-container .flex .head dl dt span {
    display: inline-block;
    width: 113%;
    transform: scale(0.88);
    transform-origin: left;
}
.modaal-container .flex .head dl dd {
    font-size: 3.0rem;
    line-height: 1.8;
}
.modaal-container .flex .body {
    font-size: 2.2rem;
    width: 63.0rem;
    padding: 6.0rem;
    display: block;
}
.modaal-container .flex .body p.txt {
    margin-bottom: 5.0rem;
}
.modaal-container .flex .body dl {
    min-height: 1.0rem;
    padding-left: 12.0rem;
}
.modaal-container .flex .body dl:before {
    width: 10.0rem;
    height: 10.0rem;
}
.modaal-container .flex .body dl dt {
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
}
.modaal-container .flex .body dl dd {
    font-size: 2.2rem;
}
.modaal-container p.btn-close {
    width: 6.0rem;
    height: 6.0rem;
    bottom: -2.0rem;
}
.modaal-container p.btn-close img {
    width: 2.4rem;
}
.modaal-content-container {
    padding: 0;
}

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

#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 .pagelink dl.child dd span.small {
    font-size: 2.0rem;
}

/* ────────────────────── *
 *                                              *
 * クロストーク                                 *
 *                                              *
 * ────────────────────── */

#crosstalk {
    padding-top: 5.0rem;
    margin: 0 auto 12.0rem;
}
#crosstalk .inner {
    width: 65.0rem;
}
#crosstalk .inner h1 span.small {
    font-size: 2.2rem;
}
#crosstalk .inner p.en {
    font-size: 2.0rem;
    margin: 0 auto 3.0rem;
}
#crosstalk .inner p.txt {
    font-size: 2.2rem;
    margin-bottom: 2.0rem;
}
#crosstalk .inner p.notice {
    font-size: 2.0rem;
}

/* ────────────────────── *
 *                                              *
 * トークメンバー                               *
 *                                              *
 * ────────────────────── */

#talkmember {
    padding: 9.0rem 0 4.0rem;
}
#talkmember.veteran {
    padding: 100.0rem 0 4.0rem;
}
#talkmember .inner {
    width: 65.0rem;
}
#talkmember .inner h2 {
    font-size: 3.5rem;
}
#talkmember .inner .profile {
    margin: 0 auto 10.0rem;
    overflow: hidden;
}
#talkmember .inner .profile p.image {
    width: 20.0rem;
    margin-right: 3.0rem;
}
#talkmember .inner .profile p.image span.job {
    font-size: 2.2rem;
    width: 16.0rem;
    padding: 0.9rem 0;
    border-radius: 4.0rem;
    bottom: -2.0rem;
}
#talkmember .inner .profile .data {
    width: 42.0rem;
}
#talkmember .inner .profile .data dl dt {
    font-size: 2.5rem;
}
#talkmember .inner .profile .data dl dd {
    font-size: 2.2rem;
}
#talkmember .inner .profile .career {
    width: 100%;
    padding-left: 0;
    margin-top: 4.0rem;
}
#talkmember .inner .profile .career:before {
    content: none;
}
#talkmember .inner .profile .career p {
    font-size: 2.8rem;
    margin-bottom: 2.0rem;
}
#talkmember .inner .profile .career p span {
    display: inline-block;
    position: relative;
}
#talkmember .inner .profile .career p span:after {
    content: "";
    background: #fff;
    width: 65.0rem;
    height: 1px;
    position: absolute;
    left: calc(100% + 2.0rem);
    top: 50%;
}
#talkmember .inner .profile .career dl {
    font-size: 2.2rem;
}
#talkmember .inner p.notice {
    font-size: 2.0rem;
    margin-top: 16.0rem;
}

#talkmember .inner ul {
    width: 55.0rem;
    margin: 0 auto 5.0rem;
    display: block;
}
#talkmember .inner ul li {
    width: 100%;
    margin-bottom: 3.0rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#talkmember .inner ul li p.image {
    width: 19.6rem;
    margin-right: 4.4rem;
    margin-bottom: 0;
    flex-shrink: 0;
}
#talkmember .inner ul li dl {
    text-align: left;
    width: 31.0rem;
}
#talkmember .inner ul li dl dt {
    font-size: 1.8rem;
    text-align: center;
    margin: 0;
    position: absolute;
    left: -1.2rem;
    top: 16.5rem;
    
}
#talkmember .inner ul li dl dd {
    font-size: 2.4rem;
}
#talkmember .inner ul li dl dd p.history {
    font-size: 2.2rem;
}

/* ────────────────────── *
 *                                              *
 * トーク                                       *
 *                                              *
 * ────────────────────── */

#talk {
    padding-top: 12.0rem;
}
#talk .term {
    width: 65.0rem;
    margin: 0 auto 8.0rem;
    display: block;
}
#talk .term .head {
    width: 100%;
    margin-bottom: 5.0rem;
}
#talk .term .head p.section {
    font-size: 1.8rem;
    padding-left: 6.0rem;
}
#talk .term .head p.section:before {
    width: 5.0rem;
}
#talk .term .head h3 {
    font-size: 3.6rem;
}

#talk .term .body {
    font-size: 2.2rem;
    width: 100%;
}
#talk .term .body dl dt {
    width: 4.0em;
}
#talk .term .body dl dd {
    width: calc(100% - 4.0em);
}
#talk p.image {
    width: 65.0rem;
    margin: 0 auto 10.0rem;
}

/* ────────────────────── *
 *                                              *
 * ベテラントーク                               *
 *                                              *
 * ────────────────────── */

#veteran-talk {
    padding-top: 8.0rem;
}
#veteran-talk .term {
    width: 65.0rem;
    margin: 0 auto 14.0rem;
}
#veteran-talk .wrap.bgchange {
    padding-top: 21.0rem;
    padding-bottom: 21.0rem;
    margin-top: -21.0rem;
}
#veteran-talk .term .head {
    margin: 0 auto 6.0rem;
}
#veteran-talk .term .head p.section {
    font-size: 1.8rem;
    margin-bottom: 2.0rem;
}
#veteran-talk .term .head h3 {
    font-size: 3.6rem;
}
#veteran-talk .term .body {
    font-size: 2.2rem;
}
#veteran-talk .term .body:after {
    content: none;
}
#veteran-talk .term .body dl {
    width: 65.0rem;
}
#veteran-talk .term .body dl:first-of-type {
    margin-bottom: 3.0rem;
}
#veteran-talk .term .body dl dt {
    width: 4.0em;
}
#veteran-talk .term .body dl dd {
    width: calc(100% - 4.0em);
}
#veteran-talk p.image {
    max-width: 56.5rem;
    margin-bottom: 11.0rem;
    z-index: 5;
}
#veteran-talk .wrap p#letter-veteran-o {
    width: 55.0rem;
    top: 170.0rem;
    opacity: 0.3;
}
#veteran-talk .wrap p#letter-veteran-k {
    width: 33.0rem;
    top: 130.0rem;
    opacity: 0.5;
}
#veteran-talk .wrap p#letter-veteran-u {
    width: 30.0rem;
    top: -120.0rem;
    opacity: 0.3;
}
#veteran-talk .wrap p#letter-veteran-r {
    width: 15.8rem;
    top: -7.0rem;
}

}