@charset "utf-8";
/* ----------------------------------------------------

★top.css
-------------------------------------------------------

build:2017-07
lastupdate:2017-07
version:1.1
author:om

-------------------------------------------------------

★目次
00.hamburger
01.about
02.reference
03.interview
04.system
05.outline
06.application
---------------------------------------------------- */

/*------------------------------------------------------------ 
■ variable
------------------------------------------------------------ */
:root {
    --noto: "Helvetica Neue", Helvetica, YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --ryumin: "Ryumin Medium KL", serif;
    --default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
    --helvetica: "Helvetica Neue", Helvetica, sans-serif;
    --letter-spacing01: .02em;
    --letter-spacing02: .1em;
    --navy: #13326C;
    --white: #FFF;
    --black: #1a1a1a;
    --blue01: #EDF2F7;
    --blue02: #D7E3F2;
    --blue03: #ABC6E9;
    --blue04: #4365AB;
    --blue05: #13326C;
    --soft-blue01: #8AA8E5;
    --soft-pink01: #F29E91;
}

body { position: relative;}
a{ transition: ease-in-out 0.3s; text-decoration: none;}
.layer_none{ display: none; }

.breadcrumb { max-width: 1400px; margin: 20px auto; }
.breadcrumb a { text-decoration: underline; color: #121f45; font-weight: 600; }
.breadcrumb a:hover { text-decoration: none; }

.about .breadcrumb,
.reference .breadcrumb,
.outline .breadcrumb,
.system .breadcrumb,
.application .breadcrumb { max-width: 1200px; }

/*------------------------------------------------------------ 
■01.
------------------------------------------------------------ */
.headbox .wrap {
    border: solid 2px #fff;
    margin: auto;
    padding: 40px 0;
}
.headbox h1 { margin: auto; }
.headbox h1 img { width: 100%; }
.headbox{ padding: 100px 0; }
.page_catch {
    margin: 140px auto;
    width: 90%;
    max-width: 1400px;
}
.page_catch h1 { text-align: center; }

/*------------------------------------------------------------ 
■01.about
------------------------------------------------------------ */
.about .headbox{ 
    background: url(../img/about/img_main.png) no-repeat center;
    background-size: cover;
}
.about .headbox .wrap {
    width: 39.2%;
    max-width: 550px;
}
.about .headbox h1 { max-width: 299px; }
.about .headbox h1 img { width: 100%; }

.about .page_catch {
    margin: 140px auto 70px auto;
    width: 90%;
    max-width: 1200px;
}
.about .page_catch h1 img {
    width: 100%;
    max-width: 567px;
}
.about .page_catch p {
    /*font-family: "Yu Mincho", "YuMincho";*/
    font-weight: 400;
    text-align: center;
    margin-top: 40px;
}
.about_list { margin-bottom: 120px; }
.about_list ul { max-width: 1200px; width: 90%; margin: auto; }
.about_list ul li {
    width: 47.15%;
    float: left;
    margin-right: 5.7%;
    margin-bottom: 60px;
}
.about_list ul li:nth-child(2n) { margin-right: 0; }
.about_list ul li img { width: 100%; }
.about_list .box_name {
    background-color: #f2f2f2;
    position: relative;
    display: table;
    width: 100%;
}
.about_list .box_name .num {
    position: absolute;
    float: left;
    color: #121f45;
    opacity: 0.1;
    font-size: 1000%;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    top: -10%;
    font-family: 'Helvetica';
}
.about_list .box_name .name {
    font-size: 128%;
    font-weight: 600;
    color: #153173;
    text-decoration: underline;
    text-align: center;
    padding: 40px 0;
    display: table-cell;
    margin: auto;
    vertical-align: middle;
}
.about_list ul li:nth-child(2) .box_name .name {
    padding: 24px 0;
}
.about_list a { position: relative; }
.about_list a .hover{
    background-color: rgba(21,49,115,0.7);
   position: absolute;
    width: 100%;
    top: 0;
    z-index: 5;
    opacity: 0;
    transition: ease-in-out 0.3s;
    height: 100%;
    
}
.about_list a .hover .wrap {
    display: table;
    width: 40%;
    margin: auto;
    text-align: center; 
    height: 100%;
}
.about_list a .hover .wrap div{
    display: table-cell;
    vertical-align: middle;
}
.about_list a .hover .wrap div p{ 
    border: solid 1px #fff;
    color: #fff; 
    padding: 15px 0;
}

/* 数字で見るJAバンク大阪信連 */
.about .about_info-graph {
    all: unset;
    container-type: inline-size;
    display: block; 
    font-family: var(--noto);
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    * {
        all: unset;
        display: revert;
        box-sizing: border-box;
    }
    img {
        width: 100%;
        vertical-align: middle;
    }
    ul {
        list-style: none;
    }
    > h1 {
        font-family: var(--ryumin);
        font-size: 40px;
        margin-block-end: 60px;
        text-align: center;
        letter-spacing: var(--letter-spacing01);
        line-height: 1.5;
        @container (max-width: 767px) {
            font-size: 28px;
            margin-block-end: 20px;
        }
        br {
            display: none;
            @container (max-width: 767px) {
                display: block;
            }
        }
    }
    h2 {
        font-size: 20px;
        font-weight: bold;
        margin-block-end: 20px;
        text-align: center;
        letter-spacing: var(--letter-spacing02);
        line-height: 1.2;
    }
    [data-two-line-title-pc] > h2 {
        min-block-size: calc(1em * 1.2 * 2);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        @container (max-width: 767px) {
            display: block;
            min-block-size: auto;
        }
    }
    .small-text {
        font-size: 16px;
    }
    .list-asterisk {
        font-family: var(--default-font);
        font-size: 14px;
        li {
            position: relative;
            padding-inline-start: 1.25em;
            &::before {
                content: "※";
                display: inline-block;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
    > .flex {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 20px;
        margin-block-end: 28px;
        @container (max-width: 1119px) {
            grid-template-columns: repeat(2, 1fr);
        }
        @container (max-width: 767px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }
    .flex_box {
        display: flex;
        flex-direction: column;
        padding: 20px;
        background: var(--blue01);
        &.spacer {
            padding-block: 20px 40px;
            padding-inline: 20px;
            @container (max-width: 767px) {
                padding-block: 20px;
            }
        }
        &.card-black .flex_content {
            margin-block-start: -20px;
            @container (max-width: 767px) {
                margin-block-start: 0;
            }
        }
    }
    .flex_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: auto;
        text-align: center;
        @container (max-width: 767px) {
            margin-block-start: 10px; 
        }
        &.right {
            width: fit-content;
            margin-inline: auto;
            text-align: end;
        }
        p {
            font-size: 18px;
            font-weight: bold;
            letter-spacing: var(--letter-spacing01);
            line-height: 1;
        }
        .small-text > .number {
            font-family: var(--helvetica);
            font-size: 28px;
            margin-inline: 4px;
            color: var(--blue04);
        }
        .small-text,
        .small-text3 {
            margin-block-start: 8px;
        }
        .small-text2 {
            font-size: 12px;
            font-weight: bold;
        }
        .small-text3 {
            font-size: 14px;
            font-weight: bold;
            line-height: 1.2;
        }
        .number {
            font-family: var(--helvetica);
            font-size: 48px;
            margin-inline: 4px;
            color: var(--blue04);
            vertical-align: -2px;
        }
        .note {
            font-size: 14px;
            font-weight: 400;
            margin-block-start: 20px;
        }
        .flex {
            display: flex;
            justify-content: end;
            align-items: end;
            gap: 0;
            .flex_label {
                font-size: 18px;
                font-weight: bold;
                display: flex;
                flex-direction: column;
                align-items: end;
                padding-block: 6px;
                line-height: 1.2;
                > span:first-child {
                    margin-inline-end: 8px;
                }
            }
            .number {
                margin-inline: 0;
            }
        }
    }
    .table-retention-rate {
        width: 100%;
        background: var(--white);
    }
    .table-retention-rate th,
    .table-retention-rate td {
        font-size: 14px;
        font-weight: bold;
        padding-block: 8px;
        text-align: center;
        letter-spacing: var(--letter-spacing01);
        line-height: 1.2;
        .number {
            font-size: 20px;
        }
    }
    .table-retention-rate tr:not(:first-child) th {
        padding-inline: 4px;
    }
}

/*--------------------------------------- 
about - 01-04.html
----------------------------------------- */
.cont_head {
    margin: 80px auto 50px auto;
    position: relative;
}
.cont_head h1 { 
    width: 90%;
    max-width: 1200px;
    text-align: center; 
    font-size: 242%; 
    font-weight: 600; 
    color: #121f45; 
    border-bottom: solid 3px #121f45;
    margin: auto;
    padding-bottom: 25px;
    position: relative;
    z-index: 1;
}
.cont_head h1 span { 
    font-size: 41%;
    background: url("../img/about/bg_lblue.gif") repeat-x;
    background-blend-mode: multiply;
}
.cont_head .num{
    width: 10%;
    position: absolute;
    font-size: 1000%;
    color: #121f45;
    opacity: 0.1;
    top: -25%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 0.8;
    letter-spacing: 0;
    font-weight: 600;
    font-family: 'Helvetica';
}

.about .cont h1 {
    font-size: 214%;
    font-weight: 600;
    color: #121f45;
    margin-bottom: 40px;
}
.about .cont { margin-bottom: 100px; }

.about .bg_orange {
    background: url(../img/about/01/bg_border.png) repeat-x;
    background-position: bottom;
    background-blend-mode: multiply;
}

/* ■01.about01
--------------------------------------------------- */
.about01 .catch_img {
    width: 90%;
    max-width: 1200px;
    position: relative;
    margin: auto;
}
.about01 .catch_img div {
    position: absolute;
    top: 20%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
.about01 .catch_img img{ width: 100%; max-width: 1200px; }
.about01 .catch_img div img { width: 90%; max-width: 929px; }
.about01 .cont01 {
    max-width: auto;
    width: 100%;
    margin: 80px auto 100px auto;
    background-image: url(../img/about/01/bg_cont01.png);
    background-color: #f7f7f7;
    background-repeat: no-repeat;
    background-position: right;
}
.about01 .cont01 .wrap {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 90px 0;
}
.about01 .cont01 .txt { width: 54%; }
.about01 .cont01 .txt p {
    margin-bottom: 30px;
    font-weight: 400;
}
.about01 .cont02 {
    width: 90%;
    max-width: 1200px; 
    margin: 0 auto 120px auto;
}
.about01 .cont02 .box_txt {
    width: 62.5%;
    float: left;
    font-weight: 400;
}
.about01 .cont02 .box_txt p{ margin-bottom: 10px; }
.about01 .cont02 .box_img {
    float: right;
    width: 32.6%;
}
.about01 .cont02 .box_img img { width: 100%; }

/* ■02.about02
--------------------------------------------------- */
.about02 .catch_img {
    width: 90%;
    max-width: 1200px;
    position: relative;
    margin: auto;
}
.about02 .catch_img div {
    position: absolute;
    top: 28%;
    left: 8%;
    margin: auto;
    text-align: center;
}
.about02 .catch_img img{ width: 100%; max-width: 1200px; }
.about02 .catch_img div img { width: 100%; max-width: 654px; }
 
.about02 .cont { width: 90%; margin: auto; max-width: 1200px; }
.about02 .cont .head {
    width: 100%;
    background: url(../img/about/02/bg_border.gif) repeat-x left 18%;
    text-align: center;
    margin: 80px auto 50px auto;
    position: relative;
}
.about02 .cont .head h1 {
    background-color: #fff;
    width: 32%;
    font-size: 214%;
    max-width: 1200px;
    text-align: center; 
    font-weight: 600; 
    color: #121f45; 
    margin: auto;
}
.about02 .cont .head h1 span { font-size: 43%; }
.about02 .box_txt {
    width: 52.5%;
    float: left;
    margin-right: 3.75%;
}
.about02 .box_txt p { margin-bottom: 30px; }
.about02 .box_img {
    width: 43.75%;
    float: right;
}
.about02 .box_img img { width: 100%; }
.about02 .box_wrap {
    margin: 80px auto 120px auto;
}
.about02 .box_wrap div.box {
    background-color: #f5f5f5;
    width: 35.6%;
    padding: 40px 3%;
    float: left;
}
.about02 .box_wrap div.box p {
    margin-top: 20px;
    font-weight: 400;
}
.about02 .box_wrap .arrow {
    max-width: 70px;
    width: 5%;
    float: left;
    margin: 0 5.5%;
    display: table;
}
.about02 .box_wrap .arrow div {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}
.about02 .box_wrap .arrow img { width: 100%; }
.about02 .box_wrap div h2 {
    font-size: 214%;
    font-weight: 600;
    color: #121f45;
}

/* ■02.about03
--------------------------------------------------- */
.about03 .catch_img {
    width: 90%;
    max-width: 1200px;
    position: relative;
    margin: auto;
}
.about03 .catch_img div {
    max-width: 841px;
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
    margin: auto;
    text-align: center;
}
.about03 .catch_img img{ width: 100%; max-width: 1200px; }
.about03 .catch_img div img { width: 100%; max-width: 841px; }

.about03 .cont01 .wrap {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 90px 0 0 0;
}
.about03 .cont01 .box_txt {
    width: 33.3%;
    float: left;
}
.about03 .cont01 .txt p {
    margin-bottom: 30px;
    font-weight: 400;
}
.about03 .cont01 .box_img {
    width: 57.5%;
    float: right;
}
.about03 .cont01 .box_img img { width: 100%; }
.about03 .cont02 {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 120px auto;
    background: url("../img/about/03/bg_cont02.png") no-repeat;
    background-size: cover;
    background-position: right;
    padding: 40px 0;
}
.about03 .cont02 .wrap {
    width: 62%;
    background-color: rgba(255,255,255,0.9);
    margin: auto;
    padding: 60px 5%;
    text-align: center;
}
.about03 .cont02 h1 { line-height: 1.4; }
.about .about03  .cont { margin-bottom: 70px; }

/* ■02.about04
--------------------------------------------------- */
.about04 .catch_img {
    width: 90%;
    max-width: 1200px;
    position: relative;
    margin: auto;
}
.about04 .catch_img div {
    max-width: 836px;
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
    margin: auto;
    text-align: center;
}
.about04 .catch_img img{ width: 100%; max-width: 1200px; }
.about04 .catch_img div img { width: 100%; max-width: 835px; }
.about04 .cont{ margin-bottom: 60px; }
.about04 .cont01 .wrap {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    margin: 90px auto ;
}
.about04 .cont01 .box_txt {
    width: 52.5%;
    float: left;
}
.about04 .cont01 .txt p {
    font-weight: 400;
}
.about04 .cont01 .box_img {
    width: 40.4%;
    float: right;
    max-width: 483px;
}
.about04 .cont01 .box_img img {
    width: 100%;
}
.about04 .cont .head {
    width: 90%;
    max-width: 1200px;
    background: url(../img/about/02/bg_border.gif) repeat-x left 18%;
    text-align: center;
    margin: 80px auto 50px auto;
    position: relative;
}
.about04 .cont .head h1 {
    background-color: #fff;
    width: 32%;
    font-size: 214%;
    max-width: 1200px;
    text-align: center; 
    font-weight: 600; 
    color: #121f45; 
    margin: auto;
    max-width: 180px;
}
.about04 .cont .head h1 span { font-size: 43%; }
.about04 .cont .catch_txt { 
    font-size: 142%;
    color: #153173;
    font-weight: 600;
    max-width: 1200px;
    width: 90%;
    text-align: center;
    margin: auto;
    line-height: 1.6;
}
.about04 .cont .catch_txt span { font-size: 120%; color: #eca22a; }
.about04 .cont02 {
    background: url(../img/about/04/bg_cont02.gif);
}
.about04 .cont02 .wrap {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 60px 0;
}
.about04 .cont02 .box_txt {
    width: 52.5%;
    float: left;
}
.about04 .cont02 .txt p { font-weight: 400; }
.about04 .cont02 .box_img {
    width: 40.4%;
    float: right;
    max-width: 465px;
}
.about04 .cont02 .box_img img { width: 100%; }

.about04 .cont03 .wrap {
    width: 90%;
    max-width: 1200px;
    margin: 60px auto 120px auto;
}


/*------------------------------------------------------------ 
■01.reference
------------------------------------------------------------ */
/* ■02.index
-------------------------------------- */
.reference .headbox{ 
    background: url(../img/reference/img_main.png) no-repeat center;
    background-size: cover;
}
.reference .headbox .wrap {
    width: 39.2%;
    max-width: 550px;
}
.reference .headbox h1 { max-width: 156px; }
.reference .headbox h1 img { width: 100%; }
.reference .cont { width: 90%; margin: auto; max-width: 1200px; }
.reference .cont h1 { 
    width: 100%;
    text-align: center; 
    font-size: 242%; 
    font-weight: 600; 
    color: #121f45; 
    border-bottom: solid 3px #121f45;
    margin: 100px auto 0 auto;
    padding-bottom: 30px;
    line-height: 1.2;
}
.reference .cont h1 span { font-size: 53%; background-color: #c5e8ec; }
.reference .txt { 
    margin: 50px auto; 
    width: 100%; 
    text-align: center;
    font-weight: 400;
}

.reference .list .box { width: 100%; }
.reference .list .left { 
    width: 25%;
    float: left; 
    margin-right: 5%;
    background-image: url(../img/bg_lblue.gif);
    padding: 30px 0;
    text-align: center;
}
.reference .list .operation .left { background: #3D63AB; }
.reference .list .support .left { background: #42B035; }
.reference .list .planning .left { background: #CD592D; }
.reference .list .left img { max-width: 87px; }
.reference .list .left p {
    font-size: 128%;
    color: #fff;
    font-weight: 400;
    margin-top: 15px;
}
.reference .list .right { 
    float: right;
    width: 69%;
    box-sizing: border-box;
}
.reference .list .right li { 
    border: solid 1px #ccc;
    background-image: url(../img/reference/bg_white.gif);
    margin-bottom: 30px;
    padding: 25px 3%;
    cursor: pointer;
}
.reference .list .right li dt {
    color: #192950;
    font-size: 150%;
    font-weight: 600;
    text-decoration: underline;
    position: relative;
}
.reference .list .right li dd {
    margin-top: 30px;
    font-weight: 400;
    line-height: 2;
    text-align: justify;
    overflow: hidden;
    /*opacity: 0;*/
    display: none;
    /*transition: all  0.3s ease;*/
}
.reference .list .right li dd.open { opacity: 1; }
.reference .role {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 120px auto;
}
.reference .role img { width: 100%; }

.reference .list .right li dt::after {
    content: "";
    width: 12px;
    height: 21px;
    display: inline-block;
    background-image: url("../img/allow-right.png");
    background-repeat: no-repeat;
    transform: rotate(-270deg);
    position: absolute;
    top: 5px;
    right: 5px;
    background-size: contain;
}
.reference .list .right li dt.open::after {
    content: "";
    width: 12px;
    height: 21px;
    display: inline-block;
    background-image: url("../img/allow-right.png");
    background-repeat: no-repeat;
    transform: rotate(-90deg);
    position: absolute;
    top: 5px;
    right: 5px;
    background-size: contain;
}
/*------------------------------------------------------------ 
■02.interview
------------------------------------------------------------ */
.int_index{ 
    background: url("../img/interview/img_main.png") no-repeat center;
    background-size: cover;
}
.int_index .wrap {
    width: 39.2%;
    max-width: 550px;
    border: solid 2px #fff;
    margin: auto;
}
.int_index h1 { max-width: 279px; margin: auto; }
.int_index h1 img { width: 100%; }

/*interview - index.html
----------------------------------------- */
.int_index{ 
    background: url("../img/interview/img_main.png") no-repeat center;
    background-size: cover;
}
.int_index .wrap {
    width: 39.2%;
    max-width: 550px;
    border: solid 2px #fff;
    margin: auto;
}
.int_index h1 { max-width: 279px; margin: auto; }
.int_index h1 img { width: 100%; }

.page_catch h1 img {
    width: 100%;
    max-width: 893px;
}
/* -------  interview list  ------- */
.int_sogo {
    width: 100%;
    background-color: #f2f2f2;
    position: relative;
    padding-bottom: 50px;
    margin-bottom: 60px;
}
.int_sogo .wrap,.int_ippan .wrap {
    width: 90%;
    max-width: 1400px;
    margin: auto;
}
.int_sogo h1, .int_ippan h1 {
    font-size: 285%; 
    font-weight: 600; 
    color: #121f45; 
}
.int_sogo h1 {
    position: relative;
    top: -20px;
}
.int_sogo .txt,.int_ippan .txt { font-weight: 400; margin: 40px auto 40px auto; }
.int_sogo ul li, .int_ippan ul li {
    width: 48.6%;
    float: left;
    background-color: #fff;
    margin-right: 2.8%;
    margin-bottom: 40px;
}
.int_sogo ul li:nth-child(2n){ margin-right: 0; }
.int_sogo ul li a,.int_ippan ul li a{
    color: #000;
    display: block;
}
.int_sogo ul li a,.int_ippan ul li a{ position: relative; }

.int_sogo .box_name,.int_ippan .box_name {
    width: 55.2%;
    position: relative;
    float: left;
}
.int_sogo .box_name .wrap,.int_ippan .box_name .wrap {
    margin: auto;
    display: table-cell;
    vertical-align: middle;
    width: 65%;
    padding: 0 15%;
}
.int_sogo .box_name .wrap div,.int_ippan .box_name .wrap div {
    position: relative;
    z-index: 1;
}
.int_sogo .num,.int_ippan .num  { 
    color: #e5e5e5;
    font-size: 450%;
    font-weight: bold;
    line-height: 1em;
    letter-spacing: 0;
    position: absolute;
    top: -2.5%;
    left: -0.5%;
}
.int_sogo .box_name div span.name,.int_ippan .box_name div span.name {
    font-size: 214%;
    text-decoration: underline;
    font-weight: 600;
    display: inline-block;
}
.int_sogo .box_name div span.name_rm,.int_ippan .box_name div span.name_rm { 
    font-size: 85%; 
    display: inline-block; 
    /* margin-left:10px;   */
}

.int_sogo .box_img,.int_ippan .box_img {
    width: 44.8%;
    float: left;
}
.int_sogo .box_img img,.int_ippan .box_img img { width: 100%; }
.int_sogo .hover,.int_ippan .hover{
    position: absolute;
    width: 100%;
    max-width: 681px;
    z-index: 5;
    opacity: 0;
    transition: ease-in-out 0.3s;
}
.int_sogo .hover img,.int_ippan .hover img { width: 100%; }
.block { opacity: 1 !important; }

.int_ippan {
    position: relative;
    margin-bottom: 60px;
}
.int_ippan ul li { background-color: #f2f2f2; }
.int_ippan .num { color: #fff; }

.int_movie h1 { 
    width: 100%;
    text-align: center; 
    font-size: 314%; 
    font-weight: 600; 
    color: #121f45; 
    border-bottom: solid 3px #121f45;
    max-width: 1400px;
    margin: auto;
    padding-bottom: 25px;
}
.int_movie { position: relative; margin-bottom: 120px; }
.int_movie h1 span { font-size: 41%; background-color: #c5e8ec; }
.int_movie video {
    display: block;
    width: 90%;
    max-width: 1400px;
    margin: 60px auto;
}
.int_movie .none { display: none; }
/* ===== UNUSED START: 旧 .int_main（01-06.html用・main_img.png参照） ===== */
/* /*---------------------------------------  */
/* interview - 01-06.html */
/* ----------------------------------------- * / */
/* /* ■02-02.main */
/* -------------------------------------- * / */
/* .int_main{ */
/*     background-repeat: repeat, no-repeat; */
/*     background-size: auto, cover; */
/*     background-position: center; */
/* } */
/* .interview01 .int_main{ background-image: url(../img/bg_main.png), url("../img/interview/01/main_img.png"); } */
/* .interview02 .int_main{ background-image: url(../img/bg_main.png), url("../img/interview/02/main_img.png"); } */
/* .interview03 .int_main{ background-image: url(../img/bg_main.png), url("../img/interview/03/main_img.png"); } */
/* .interview04 .int_main{ background-image: url(../img/bg_main.png), url("../img/interview/04/main_img.png"); } */
/* .interview05 .int_main{ background-image: url(../img/bg_main.png), url("../img/interview/05/main_img.png"); } */
/* .interview06 .int_main{ background-image: url(../img/bg_main.png), url("../img/interview/06/main_img.png"); background-position: center top; } */
/*  */
/* .int_main .txt { */
/*     float: right; */
/*     width: 35%; */
/*     max-width: 467px; */
/*     padding: 115px 0; */
/*     margin-right: 1.5%; */
/* } */
/*  */
/*  */
/* .interview01 .int_main .txt, */
/* .interview02 .int_main .txt, */
/* .interview06 .int_main .txt { */
/*     float: left; */
/*     margin-left: 1.5%; */
/* } */
/* .int_main .wrap { max-width: 1400px; margin: auto; overflow: hidden; } */
/* .int_main h1 { border-bottom: solid 2px #fff; } */
/* .int_main h1 img { width: 100%; } */
/*  */
/* .int_main .box_name{ background-color: #fff; } */
/* .int_main p { font-size: 114%; font-weight: 400; } */
/* .int_main p.name { */
/*     margin-top: 5px; */
/*     font-size: 81%; */
/* } */
/* .int_main p.name span{ */
/*     font-size: 316%; */
/*     font-weight: 600; */
/*     color: #121f45; */
/* } */
/* ===== UNUSED END ===== */

/* ■02-02.interview
-------------------------------------- */
.btn_back { margin-bottom: 120px; }
.btn_back a { width: 50%; max-width: 200px; margin: auto; display: block; text-align: center; color: #19264b; padding: 15px 3%; border: solid 1px #19264b; font-size: 109%; }
.btn_back a:hover { background-color: #19264b; color: #fff; }

.interview h1 { 
    width: 100%;
    text-align: center; 
    font-size: 314%; 
    font-weight: 600; 
    color: #121f45; 
    border-bottom: solid 3px #121f45;
    max-width: 1400px;
    margin: auto;
    padding-bottom: 25px;
}
.interview h1 span { font-size: 41%; background-color: #c5e8ec; }

/* ===== UNUSED START: 旧 box01-03（01-06.html用） ===== */
/* /* -------  box01  ------- * / */
/* .box01 .wrap { max-width: 1400px; margin: auto; } */
/* .box01 .txt { */
/*     width: 45%; */
/*     float: left; */
/*     margin-right: 5%; */
/*     position: relative; */
/* } */
/*  */
/* .interview01 .box01 h2 { max-width: 600px; } */
/* .interview02 .box01 h2 { max-width: 482px; } */
/* .interview03 .box01 h2 { max-width: 521px; } */
/* .interview04 .box01 h2 { max-width: 686px; } */
/* .interview05 .box01 h2 { max-width: 764px; } */
/* .interview06 .box01 h2 { max-width: 522px; } */
/*  */
/* .box01 h2 img { width: 100%; } */
/* .box01 .txt p { margin-top: 40px; text-align: justify; } */
/* .box01 .num {  */
/*     position: absolute; */
/*     max-width: 220px; */
/*     top: 30%; */
/*     right: 0; */
/* } */
/* .box01 .num img { width: 100%; } */
/* .box01 .img { */
/*     float: right; */
/*     width: 50%; */
/* } */
/* .box01 .img img { width: 100%; } */
/* /* -------  box02  ------- * / */
/* .box02 { position: relative; } */
/*  */
/* .box02:before { */
/*   content: ''; */
/*   position: absolute; */
/*   top: 0; */
/*   left: 0; */
/*   width: 120%; */
/*   height: 80%; */
/*   margin: 3% -10% 0; */
/*   background: url("../img/interview/bg_lblue.gif");; */
/*   -webkit-transform-origin: right center; */
/*   -ms-transform-origin: right center; */
/*   transform-origin: right center; */
/*   -webkit-transform: rotate(4deg); */
/*   -ms-transform: rotate(4deg); */
/*   transform: rotate(4deg); */
/*   z-index: -1; */
/* } */
/* .box02:after { */
/*   content: ''; */
/*   position: absolute; */
/*   top: 0; */
/*   left: 0; */
/*   width: 120%; */
/*   height: 80%; */
/*   margin: 3% -10% 0; */
/*   background: url("../img/interview/bg_lblue.gif");; */
/*   -webkit-transform-origin: right center; */
/*   -ms-transform-origin: right center; */
/*   transform-origin: right center; */
/*   -webkit-transform: rotate(-4deg); */
/*   -ms-transform: rotate(-4deg); */
/*   transform: rotate(-4deg); */
/*   z-index: -1; */
/* } */
/*  */
/* .box02 .wrap { */
/*   box-sizing: boder-box; */
/*   width: 100%; */
/*   height: 100%; */
/*   padding: 100px 0; */
/*   color: #fff; */
/*   text-align: center; */
/*     max-width: 1400px; */
/*     margin: 0 auto; */
/*     position: relative; */
/* } */
/* .box02 h2 { */
/*     width: 30%; */
/*     position: absolute; */
/*     top: 1%; */
/*     left: 0; */
/* } */
/*  */
/* .interview05 .box02 h2 { top: 19%; } */
/* .interview01 .box02 h2 img { width: 100%; max-width: 484px; } */
/* .interview02 .box02 h2 img { width: 100%; max-width: 472px; } */
/* .interview03 .box02 h2 img { width: 100%; max-width: 522px; } */
/* .interview04 .box02 h2 { width: 35%; } */
/* .interview04 .box02 h2 img { width: 100%; max-width: 522px; } */
/* .interview05 .box02 h2 img { width: 100%; max-width: 557px; } */
/* .interview06 .box02 h2 { width: 35%; } */
/* .interview06 .box02 h2 img { width: 100%; max-width: 607px; } */
/* .box02 .img { */
/*     width: 61.7%; */
/*     float: left; */
/* } */
/* .box02 .img img { width: 100%; } */
/* .box02 .txt { */
/*     width: 32.6%; */
/*     margin-left: 5.7%; */
/*     float: left; */
/*     position: relative; */
/* } */
/* .box02 .txt p { */
/*     color: #fff; */
/*     text-align: justify; */
/*     display: table-cell; */
/*     vertical-align: middle; */
/* } */
/*  */
/* .box02 .num {  */
/*     position: absolute; */
/*     max-width: 220px; */
/*     top: 10%; */
/*     right: 0; */
/* } */
/* .box02 .num img { width: 100%; } */
/*  */
/* /* -------  box03  ------- * / */
/* .box03 .wrap { max-width: 1400px; margin: auto; padding: 60px 0; } */
/* .box03 .txt { */
/*     width: 25.9%; */
/*     float: left; */
/*     margin-left: 7%; */
/*     margin-right: 1.4%; */
/*     position: relative; */
/* } */
/* .interview01 .box03 .txt { */
/*     width: 36.6%; */
/*     float: left; */
/*     margin-left: 0; */
/*     margin-right: 1.4%; */
/* } */
/* .interview01 .box03 .img{ */
/*     float: right; */
/*     width: 55%; */
/*     padding-left: 4%; */
/*     position: relative; */
/*     margin-left: 0; */
/* } */
/* .interview03 .box03 .txt { */
/*     width: 36.6%; */
/*     float: left; */
/*     margin-left: 0; */
/*     margin-right: 1.4%; */
/* } */
/* .interview03 .box03 .img{ */
/*     float: right; */
/*     width: 55%; */
/*     padding-left: 4%; */
/*     position: relative; */
/*     margin-left: 0; */
/* } */
/* .box03 .txt p {  */
/*     margin-top: 40px; */
/*     text-align: justify; */
/*     display: table-cell; */
/*     vertical-align: bottom; */
/* } */
/* .box03 .img { */
/*     float: right; */
/*     width: 55%; */
/*     padding-left: 4%; */
/*     margin-left: 5.7%; */
/*     position: relative; */
/* } */
/* .box03 .img img { width: 100%; } */
/* .box03 h2 {  */
/*     position: absolute; */
/*     top: 10%; */
/*     left: 0; */
/*     width: 100%; */
/* } */
/* .interview01 .box03 h2 { */
/*     width: 100%; */
/*     margin-bottom: 60px; */
/*     position: inherit; */
/*     top: auto; */
/*     left: auto; */
/* } */
/* .interview01 .box03 h2 img{ width: 100%; max-width: 452px; } */
/* .interview03 .box03 h2 { */
/*     width: 100%; */
/*     margin-bottom: 60px; */
/*     position: inherit; */
/*     top: auto; */
/*     left: auto; */
/* } */
/* .interview03 .box03 h2 img{ width: 100%; max-width: 565px; } */
/* .box03 .num {  */
/*     position: absolute; */
/*     max-width: 220px; */
/*     bottom: -15%; */
/*     left: 0; */
/* } */
/* .box03 .num img { width: 100%; } */
/*  */
/* .interview02 .box03 .wrap { max-width: 1400px; margin: auto; padding: 60px 0; } */
/* .interview02 .box03 .txt{ */
/*     width: 36.6%; */
/*     float: left; */
/*     margin-left: 0; */
/*     margin-right: 1.4%; */
/*     position: relative; */
/* } */
/* .interview02 .box03 .txt p{  */
/*     margin-top: 40px; */
/*     text-align: justify; */
/*     display: table-cell; */
/*     vertical-align: bottom; */
/* } */
/* .interview02 .box03 .img{ */
/*     float: right; */
/*     width: 55%; */
/*     padding-left: 4%; */
/*     position: relative; */
/*     margin-left: 0; */
/* } */
/* .interview02 .box03 .img img{ width: 100%; } */
/* .interview02 .box03 h2{  */
/*     width: 100%; */
/*     margin-top: 40px; */
/*     margin-bottom: 70px; */
/*     position: inherit; */
/*     top: auto; */
/*     left: auto; */
/* } */
/* .interview02 .box03 h2 img{ width: 100%; max-width: 428px; } */
/* .interview04 .box03 h2 img{ width: 100%; max-width: 567px; } */
/* .interview04 .box03 h2 { */
/*     position: inherit; */
/*     width: 100%; */
/*     margin-top: 40px; */
/* } */
/* .interview04 .box03 .txt{ width: 30.9%; } */
/* .interview04 .box03 .txt p { */
/*     margin-top: 30px; */
/*     text-align: justify; */
/*     display: block; */
/* } */
/* .interview04 .box03 .img { padding-left: 0; } */
/*  */
/*  */
/* .interview05 .box03 .wrap { max-width: 1400px; margin: auto; padding: 80px 0 60px 0; } */
/* .interview05 .box03 .num {  */
/*     position: absolute; */
/*     max-width: 220px; */
/*     top: 40%; */
/*     right: 0; */
/*     bottom: auto; */
/*     left: auto; */
/* } */
/* .interview05 .box03 .num img { width: 100%; } */
/* .interview05 .box03 .txt{ */
/*     width: 35.9%; */
/*     float: left; */
/*     margin-left: 2%; */
/*     margin-right: 1.4%; */
/*     position: relative; */
/* } */
/* .interview05 .box03 .img { */
/*     padding-left: 0; */
/* } */
/* .interview05 .box03 h2{  */
/*     width: 100%; */
/*     margin-bottom: 60px; */
/*     position: inherit; */
/*     top: auto; */
/*     left: auto; */
/* } */
/* .interview05 .box03 h2 img{ width: 100%; max-width: 608px; } */
/* .interview06 .box03 .txt{ */
/*     width: 35.9%; */
/*     float: left; */
/*     margin-left: 2%; */
/*     margin-right: 1.4%; */
/*     position: relative; */
/* } */
/* .interview06 .box03 .img { padding-left: 0; } */
/* .interview06 .box03 h2{  */
/*     width: 100%; */
/*     margin-bottom: 60px; */
/*     position: inherit; */
/*     top: auto; */
/*     left: auto; */
/* } */
/* .interview06 .box03 h2 img{ width: 100%; max-width: 441px; } */
/* ===== UNUSED END ===== */
/* ===== UNUSED START: 旧 .schedule（01-06.html用） ===== */
/* /* ■02-02.schedule */
/* -------------------------------------- * / */
/* .schedule { */
/*     margin: 20px auto 110px 0; */
/*     background-image: url("../img/interview/bg_grey.gif"); */
/*     padding: 90px 0 10px 0;; */
/*     position: relative; */
/*     z-index: -999; */
/* } */
/* .schedule h1 {  */
/*     width: 100%; */
/*     text-align: center;  */
/*     font-size: 314%;  */
/*     font-weight: 600;  */
/*     color: #121f45;  */
/*     border-bottom: solid 3px #121f45; */
/*     max-width: 1400px; */
/*     margin: auto; */
/*     padding-bottom: 25px; */
/* } */
/* .schedule h1 span { font-size: 41%; background-color: #c5e8ec; background-blend-mode: multiply; } */
/* .schedule .wrap { max-width: 1230px; margin: 110px auto;} */
/* .schedule ul { */
/*     background-image: url("../img/interview/border_sche.gif"); */
/*     background-repeat: no-repeat; */
/*     background-position: center; */
/*     position: relative; */
/*     z-index: -3; */
/* } */
/* .interview01 .schedule ul { background-size: 4px 86%; } */
/* .interview02 .schedule ul { background-size: 4px 84%; background-position: center top 60%; } */
/* .interview03 .schedule ul { background-size: 4px 85%; } */
/* .interview04 .schedule ul { background-size: 4px 89%; background-position: center top 59%; } */
/* .interview05 .schedule ul { background-size: 4px 85%; background-position: center top 63%; } */
/* .interview06 .schedule ul { background-size: 4px 84%; background-position: center top 63%; } */
/*  */
/* .schedule ul li { width: 100%; } */
/* .schedule ul li .box_wrap { */
/*     position: relative; */
/*     width: 50.8%; */
/* } */
/* .interview01 .schedule ul li:nth-child(2n-1) div.box_wrap, .interview01 .schedule ul li:nth-child(2n-1) div.box{ float: left; } */
/* .interview01 .schedule ul li:nth-child(2n) div.box_wrap,  .interview01 .schedule ul li:nth-child(2n) div.box{ float: right; } */
/* .interview01 .schedule ul li:nth-child(2n-1) div.box_wrap { */
/*     background-image: url("../img/interview/bg_sche_l.png"); */
/*     background-repeat: no-repeat; */
/*     background-position: right center; */
/*     z-index: -1; */
/* } */
/* .interview01 .schedule ul li:nth-child(2n) div.box_wrap { */
/*     background-image: url("../img/interview/bg_sche_r.png"); */
/*     background-repeat: no-repeat; */
/*     background-position: left center; */
/*     z-index: -1; */
/* } */
/*  */
/* .schedule ul li:nth-child(2n) div.box_wrap, */
/* .schedule ul li:nth-child(2n) div.box{ float: left; } */
/*  */
/* .schedule ul li:nth-child(2n-1) div.box_wrap, */
/* .schedule ul li:nth-child(2n-1) div.box{ float: right; } */
/*  */
/* .schedule ul li:nth-child(2n) div.box_wrap{ */
/*     background-image: url("../img/interview/bg_sche_l.png"); */
/*     background-repeat: no-repeat; */
/*     background-position: right center; */
/*     z-index: -1; */
/* } */
/* .schedule ul li:nth-child(2n-1) div.box_wrap{ */
/*     background-image: url("../img/interview/bg_sche_r.png"); */
/*     background-repeat: no-repeat; */
/*     background-position:left center; */
/*     z-index: -1; */
/* } */
/*  */
/* .schedule ul li div.box { */
/*     background-color: #fff; */
/*     width: 79.6%; */
/*     box-shadow: 6px 7px 0px 0px rgba(41,41,41,0.1); */
/*     padding: 27px 2%; */
/*     position: relative; */
/* } */
/* .schedule ul li div.box div{ width: 100%; } */
/* .schedule ul li.detail div.box { */
/*     background-image: url("../img/interview/bg_sche_ja.png"); */
/*     background-position: right bottom; */
/*     background-repeat: no-repeat; */
/* } */
/*  */
/* .schedule ul li p.time { */
/*     font-size: 126%; */
/*     font-weight: 600; */
/*     color: #153173; */
/*     border: solid 2px #153173; */
/*     width: 18%; */
/*     border-radius: 50px; */
/*     text-align: center; */
/*     line-height: 1.4; */
/*     float: left; */
/*     box-sizing: border-box; */
/*     letter-spacing: 0; */
/* } */
/* .schedule ul li h3 { */
/*     width: 79%; */
/*     padding: 0 0 0 3%; */
/*     font-size: 142%; */
/*     font-weight: 600; */
/*     color: #149e99; */
/*     float: left; */
/*     line-height: 1.4; */
/* } */
/* .schedule .box .txt{ */
/*     font-size: 92%; */
/*     margin-top: 20px; */
/* } */
/* ===== UNUSED END ===== */
/* ===== UNUSED START: 旧 .message（01-06.html用） ===== */
/* /* ■02-02.message */
/* -------------------------------------- * / */
/* .message { */
/*     max-width: 1400px; */
/*     margin: 110px auto 140px auto; */
/* } */
/* .message div { float: left; } */
/* .message .img { */
/*     width: 48.5%; */
/*     margin-right: 3.5%; */
/* } */
/* .message .img img { width: 100%; } */
/* .message .txt { width: 47.7%; } */
/* .message h2 { */
/*     font-size: 242%; */
/*     font-weight: 600; */
/*     color: #121f45; */
/*     margin-bottom: 40px; */
/* } */
/* ===== UNUSED END ===== */
/* ■02-02.int_list
-------------------------------------- */
.int_list ul {
    max-width: 1400px;
    margin: 0 auto 80px auto;
}
.int_list li {
    width: 32%;
    float: left;
    position: relative;
    margin-left: 0.5%;
    margin-bottom: 30px;
    transition: ease-in-out 0.3s;
}
.int_list li img{ width: 100%; }
.int_list li:hover{
    opacity: 0.7;
}
.int_list li a{
    color: #000;
    text-decoration: none;
    display: block;
}
.int_list li div.box_txt {
    position: relative;
    background-color: #f0f0f0;
    z-index: 100;
}
.int_list li div.box_txt div {
    background-color: #fff;
    position: relative;
    top: -20px;
    margin: auto;
    width: 100%;
    max-width: 410px;
}
.int_list p.bumon{
    width: 40%;
    float: left;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    white-space: nowrap;
    letter-spacing: normal;
}
.int_list p.eigyo{ background-color: #42b035; }
.int_list p.shoken{ background-color: #30b8b5; }
.int_list p.consal{ background-color: #e5bd16; }
.int_list p.bank{ background-color: #a72b8c; }
.int_list p.soumu{ background-color: #cd592d; }
.int_list p.market{ background-color: #3D63AB; }

.int_list p.name{
    padding: 10px 0 10px 3%;
    float: left;
    background-color: #fff;
    width: 57%;
}
.int_list li div.box_desc {
    background-color: #f0f0f0;
    padding: 10px 5% 20px 5%;
    
}
.int_list li div.box_desc p {
    font-size: 128%;
    font-weight: 600;
    line-height: 1.6;
}


/*------------------------------------------------------------ 
■02.system
------------------------------------------------------------ */
/* ■02.index
-------------------------------------- */
.system .page_catch { margin: 115px auto; }
.system .page_catch h1 img {
    width: 100%;
    max-width: 451px;
}

.system .headbox{ 
    background: url(../img/system/img_main.png) no-repeat center;
    background-size: cover;
}
.system .headbox .wrap {
    width: 39.2%;
    max-width: 550px;
}
.system .headbox .wrap h1 { max-width: 292px; }
.system .cont { width: 90%; max-width: 1200px; margin: auto; }
.system .txt { 
    margin: 50px auto; 
    width: 100%; 
    text-align: center;
    font-weight: 600;
    font-size: 157%;
    color: #153173;
}
.system .conthead { position: relative; width: 100%; overflow: hidden; }
.system .conthead .img img { width: 100%; }
.system .white { 
    width: 35%;
    position: absolute; 
    background-color: rgba(255,255,255,0.9);
    display: table;
}
.system .white h1 { 
    display: table-cell; 
    vertical-align: middle; 
    margin: auto; 
    text-align: center; 
    font-size: 250%;
    font-weight: 600;
    color: #153173;
}
.system .white h1 span { font-size: 43%; }
.system .listbox .wrap {
    width: 100%;
    border: solid 1px #ccc;
    box-sizing: border-box;
    padding: 40px 5%;
}
.system .listbox ul {
    width: 50%;
    float: left;
}
.system .listbox ul li {
    font-size: 107%;
    color: #121f45;
    font-weight: 500;
    margin-bottom: 25px;
    padding-left: 1em;
    text-indent: -1em;
}
.system .listbox ul li:last-child { margin-bottom: 0; }
.system .listbox ul li:before {
    content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    background-image: url("../img/system/img_list.png");
    background-repeat: no-repeat;
    position: relative;
    top: 2px;
    left: -2%;
    background-size: contain;
}
.system .txt_s {
    font-weight: 400;
    line-height: 2;
}
.system .listbox .txt_s { margin: 35px auto auto auto ; }

.system .kenshubox {
    margin-top: 110px;
    font-weight: 400;
}
.system .training { margin-top: 75px; }
.system .training ul { margin-top: 60px; margin-bottom: 150px; }
.system .training ul li {
    width: 30%;
    float: left;
    margin-right: 5%;
}
.system .training ul li:last-child { margin-right: 0; }
.system .training ul li div {
    width: 48%;
    background-color: #82cbcb;
    border-radius: 100px;
    text-align: center;
    padding: 45px 0;
    margin: auto;
    max-width: 171px;
    min-width: 171px;
}
.system .training ul li div img { max-width: 75px; }
.system .training ul li h3 {
    color: #153173;
    font-size: 124%;
    font-weight: 600;
    text-align: center;
    margin: 25px auto 25px auto;
}
.system .training ul li p { font-weight: 400; }


/* キャリアステップ */
.system .career-step {
    container-type: inline-size;
    all: unset;
    display: block; 
    font-family: var(--noto);
    width: 90%;
    max-width: 1200px;
    margin-block: 0 120px;
    margin-inline: auto;
    * {
        all: unset;
        display: revert;
        box-sizing: border-box;
    }
    img {
        width: 100%;
        vertical-align: middle;
    }
    a {
        cursor: pointer;
    }
    ul {
        list-style: none;
    }
    p {
        font-family: var(--default-font);
    }
    > h1 {
        font-family: var(--ryumin);
        font-size: 40px;
        margin-block: 0 60px;
        text-align: center;
        letter-spacing: var(--letter-spacing01);
        line-height: 1.5;
        @media (max-width: 767px) {
            font-size: 28px;
            margin-block: 0 20px;
        }
        br {
            display: none;
            @media (max-width: 767px) {
                display: block;
            }
        }
    }
    .career-flow {
        container-type: inline-size;
        .career-flow__wrap {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0 10px;
            align-items: end;
            margin-block-end: 28px;
            @container (max-width: 1350px) {
                width: 100%;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                grid-template-columns: repeat(5, minmax(232px, 1fr));
                scroll-snap-type: x mandatory;
                scroll-padding-inline: 10px;
            }
        }
        .career-flow-item {
            position: relative;
            @media (max-width: 1350px) {
                scroll-snap-align: start;
                scroll-snap-stop: always;
            }
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    top: -10px;
                    right: -20px;
                    width: 39px;
                    height: 83px;
                    background: url("../img/system/img_career-step3.webp") no-repeat;
                    background-size: 100%;
                }
            }
            &:nth-child(3) {
                &::after {
                    top: 20px;
                }
            }
        }
        .career-flow-item-title {
            font-size: 22px;
            font-weight: bold;
            margin-block: 0 10px;
            text-align: center;
            color: var(--navy);
            line-height: 1.2;
        }
        .career-flow-item-circle {
            font-size: 16px;
            font-weight: bold;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 80px;
            height: 80px;
            margin-block: 0 4px;
            margin-inline: auto;
            border: 1px solid #8AA8E5;
            border-radius: 100%;
            color: var(--navy);
            text-align: center;
            line-height: 1.2;
            .number {
                font-family: var(--helvetica);
                font-size: 20px;
            }
            span {
                position: relative;
                z-index: 1;
            }
            &::after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 50%;
                width: 8px;
                height: 84px;
                background: var(--white);
                rotate: 45deg;
                z-index: 0;
            }
        }
        .career-step {
            padding: 10px;
            background: var(--blue01);
        }
        .col1 {
            background: var(--blue01);
        }
        .col2 {
            background: var(--blue02);
        }
        .col3 {
            background: var(--blue03);
        }
        .col4 {
            background: var(--blue04);
            h3,
            p {
                color: var(--white);
            }
        }
        .col5 {
            background: var(--blue05);
            h3,
            p {
                color: var(--white);
            }
        }
        .career-step-header {
            position: relative;
            padding: 20px;
            h3,
            p {
                position: relative;
                z-index: 1;
            }
            &:first-child {
                &::after {
                    opacity: .8;
                }
            }
            &[data-number="01"] {
                min-height: 126px;
            }
            &[data-number="02"] {
                min-height: 166px;
            }
            &[data-number="03"] {
                min-height: 210px;
            }
            &[data-number="04"] {
                min-height: 250px;
            }
            &[data-number="05"] {
                min-height: 290px;
            }
        }
        .career-step-header::after {
            content: attr(data-number);
            position: absolute;
            top: -10px;
            right: 0;
            font-family: var(--helvetica);
            font-size: 60px;
            font-weight: bold;
            color: var(--white);
            line-height: 1;
            opacity: .5;
            z-index: 0;
        }
        .career-step-title {
            font-size: 20px;
            font-weight: bold;
            margin-block-end: 10px;
            line-height: 1.2;
            span {
                font-size: 14px;
            }
        }
        .career-plan {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0 8px;
            width: fit-content;
            padding-block: 8px 0;
            padding-inline: 10px;
            background: var(--white);
            z-index: 2;
        }
        .plan-a .career-plan {
            border-top: 3px solid var(--soft-blue01);
        }
        .plan-b .career-plan {
            border-top: 3px solid var(--soft-pink01);
        }
        .plan-a .career-wide__links li:not(:last-child)::after,
        .plan-b .career-wide__links li:not(:last-child)::after {
            content: "";
            display: inline-block;
            position: absolute;
            top: 50%;
            right: -15px;
            width: 20px;
            height: 42px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            translate: 0 -50%;
        }
        .plan-a .career-wide__links li:not(:last-child)::after {
            background-image: url("../img/system/arrow01.svg");
        }
    
        .plan-b .career-wide__links li:not(:last-child)::after {
            background-image: url("../img/system/arrow02.svg");
        }
    
        .career-plan img {
            max-width: 48px;
        }
        .career-plan-title {
            font-size: 17px;
            font-weight: bold;
        }
        /* 5列にわたって表示 */
        .career-wide {
            position: relative;
            grid-column: 1 / -1;
            padding-inline: 10px;
            &::before {
                content: "";
                display: inline-block;
                position: absolute;
                top: 0;
                right: 10px;
                width: 960px;
                height: 56px;
                background: url("../img/system/bg-arrow.svg") no-repeat;
                opacity: .5;
                z-index: 1;
            }
        }
        .career-wide-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0 10px;
            z-index: 0;
        }
        .plan-a::before {
            top: -10px;
        }
        .plan-b::before {
            top: 10px;
        }
        .career-wide + .career-wide {
            padding-block: 20px 10px;
        }
        .career-wide img { max-width: 48px; }
        .career-wide__title { font-size: 17px; font-weight: 700; }
        .career-wide__links {
            position: relative;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0 10px;
            padding-block: 20px;
            background: var(--white);
            z-index: 2;
            li {
                position: relative;
                padding-inline: 15px;
            }
            .career-wide__link-title {
                color: var(--navy);
            }
            a .career-wide__link-title {
                color: var(--navy);
                text-decoration: underline;
            }
            a:hover .career-wide__link-title  {
                text-decoration: none;
            }
            p {
                font-size: 14px;
                line-height: 1.7;
            }
        }
        .career-wide__link-title {
            font-size: 19px;
            font-weight: bold;
            margin-block-end: 10px;
            line-height: 1.2;
            span {
                font-size: 14px;
            }
        }
    }
    .list-disc {
        font-family: var(--default-font);
        font-size: 14px;
        padding: 10px;
        background: var(--white);
        li {
            position: relative;
            padding-inline-start: .9em;
            &::before {
                content: "";
                display: inline-block;
                position: absolute;
                top: .6em;
                left: 0;
                width: 8px;
                height: 8px;
                background: var(--navy);
                border-radius: 100%;
            }
        }
    }
    .list-asterisk {
        font-family: var(--default-font);
        font-size: 14px;
        li {
            position: relative;
            padding-inline-start: 1.25em;
            &::before {
                content: "※";
                display: inline-block;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
    .interview-lead {
        container-type: inline-size;
        .interview-lead__wrap {
            display: flex;
            align-items: end;
            margin-block: 60px;
            @container (max-width: 767px) {
                display: flex;
                align-items: initial;
                flex-direction: column;
                width: 100vw;
                margin-inline-start: calc(50% - 50vw);
            }
        }
        .interview-lead__image {
            min-width: 240px;
            @container (max-width: 767px) {
                max-width: 50%;
                min-width: initial;
                margin-inline: auto;
            }
        }
        .interview-lead__text {
            font-size: 16px;
            padding: 20px 40px;
            background: var(--blue01);
            line-height: 1.5;
            @container (max-width: 767px) {
                /* margin-inline-start: 15%; */
                margin-inline-start: 6%;
                padding: 20px;
            }
            p + p {
                margin-block-start: 20px;
            }
            a {
                font-weight: bold;
                text-decoration: underline;
                &:hover {
                    text-decoration: none;
                }
            }
        }
    }
    .interview-bnr {
        a {
            container-type: inline-size;
            position: relative;
            display: grid;
            &:hover {
                .interview-bnr__image img {
                    scale: 1.05;
                }
                .btn {
                    background: var(--white);
                    color: var(--black);
                }
            }
            > * {
                grid-area: 1 / 1;
            }
        }
        .interview-bnr__image {
            position: relative;
            overflow: hidden;
            z-index: 0;
            img {
                transition: scale 0.3s ease-in-out;
            }
        }
        .interview-bnr__text {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px 0;
            z-index: 1;
            @container (max-width: 767px) {
                justify-content: end;
                padding-block-end: 40px;
            }
            h1 {
                font-family: var(--ryumin);
                font-size: 40px;
                color: var(--white);
                text-align: center;
                letter-spacing: var(--letter-spacing01);
                line-height: 1;
                @container (max-width: 980px) {
                    font-size: 28px;
                }
            }
            .btn {
                font-size: 14px;
                min-width: 240px;
                margin-inline: auto;
                padding: 10px;
                border: 1px solid var(--white);
                color: var(--white);
                text-align: center;
                transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
            }
        }
    }
}


/*------------------------------------------------------------ 
■02.outline
------------------------------------------------------------ */
.outline .headbox{ 
    background: url(../img/about/img_main.png) no-repeat center;
    background-size: cover;
}
.outline .headbox .wrap {
    width: 39.2%;
    max-width: 550px;
}
.outline .headbox h1 { max-width: 162px; }
.outline .headbox h1 img { width: 100%; }

.outline .cont {
    width: 90%;
    max-width: 1200px; 
    margin: 80px auto 130px auto;
}
.outline .cont section {
    width: 46%;
    margin: 0 8% 0 0;
    float: left
}
.outline .cont section h1 {
    font-size: 214%;
    color: #121f45;
    font-weight: 600;
    margin-bottom: 30px;
}
.outline .cont section.boxview table { width: 100%; }
.outline .cont section.boxview tr {
    background-color: #f2f2f2;
}
.outline .cont section.boxview tr:nth-child(2n){ background-color: #fff; }
.outline .cont section.boxview th {
    width: 35%;
    text-align: left;
    padding: 20px 5%;
    vertical-align: top;
}
.outline .cont section.boxview td {
    padding: 20px 2%;
    font-weight: 400;
}
.outline .cont section.boxview td p {
    background-color: #153173;
    width: 50%;
    margin-top: 10px;
    padding: 7px 7%;
    border-radius: 30px;
    text-align: center;
}
.outline .cont section.boxview td p a {
    color: #fff;
    text-decoration: underline;
}
.outline .cont section.boxview td p a:hover { text-decoration: none; }
.outline .cont section.boxhist {
    margin: 0;
}
.outline .cont section.boxhist table { width: 100%; }
.outline .cont section.boxhist tr { border-top: solid 1px #ccc; }
.outline .cont section.boxhist th {
    width: 24%;
    text-align: center;
}
.outline .cont section.boxhist td { padding: 19px 0; }
.outline .gallery h1 {
    text-align: center;
    font-size: 214%;
    color: #121f45;
    font-weight: 600;
    margin-top: 120px;
    margin-bottom: 50px;
}
.outline .gallery p{
    text-align: center;
    margin-bottom: 20px;
}
.outline .gallery .main {
    width: 46.6%;
    float: left;
}
.outline .gallery .main li { display: none; }
.outline .gallery .main li:first-child { display: block; }
.outline .gallery .thumb {
    width: 49.6%;
    float: right;
}
.outline .gallery .thumb li {
    width: 31.8%;
    float: left;
    margin-right: 2.3%;
    margin-bottom: 12px;
    position: relative;
}
.outline .gallery .thumb li:nth-child(3n) { margin-right: 0; }
.outline .gallery .main li img,.outline .gallery .thumb li img { width: 100%; }

.outline .gallery .thumb li:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url(../img/outline/icon_zoom.png);
    background-size: contain;
    right: 2%;
    bottom: 4%;
}


/*------------------------------------------------------------ 
■02.application
------------------------------------------------------------ */
.application .headbox{ 
    background: url(../img/reference/img_main.png) no-repeat center;
    background-size: cover;
}
.application .headbox .wrap {
    width: 39.2%;
    max-width: 550px;
}
.application .headbox h1 { max-width: 157px; }
.application .headbox h1 img { width: 100%; }
.application .cont {
    width: 90%;
    margin: auto;
    max-width: 1200px;
}
.application .wrap p.img { margin: 80px auto; }
.application .wrap p.img img { width: 100%; }
.application .table { width: 100%; }
.application .table tr {
    background-color: #f2f2f2;
}
.application .table tr:nth-child(2n){ background-color: #fff; }
.application .table th {
    padding: 30px 2%;
    width: 15%;
    vertical-align: top;
}
.application .table td {
    padding: 30px 2%;
    line-height: 2;
    text-align: justify;
}
.application .table td dl {
    border-bottom: solid 1px #ccc;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.application .table td dl:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.application .table td dl dt {
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1;
}
.application .table td dl dd { line-height: 1.5; }
.application .table-inner { width: 45%; }
.application .table-inner tr {
    background-color: transparent;
    border-bottom: solid 1px #ccc;
}
.application .table-inner tr:last-child { border-bottom: none; }
.application .table-inner tr th{
    padding: 10px 0;
    text-align: left;
    width: 16%;
    font-weight: 400;
}
.application .table-inner tr td{
    padding: 10px 0;
    width: 21%;
    text-align: center;
}
.application .cont p.bnr {
    text-align: center;
    margin: 80px auto 120px auto;
}
.application .cont p.bnr img {
    width: 100%;
    max-width: 600px;
}
.application .cont p.bnr a:hover {
    opacity: 0.6;
}


/* ■02.横幅1400px以上（PC用）スクロールバー対策で+20pxを指定する
--------------------------------------------------- */
@media screen and (min-width:1120px) {
	/* ▼PC用================================================================== */
    
    /*------------------------------------------------------------ 
    ■01.about
    ------------------------------------------------------------ */
    
    /* ■02.interview index
    -------------------------------------- */
    .int_index{ 
        padding: 100px 0;
    }
    .int_index .wrap {
        padding: 40px 0;
    }
/* ===== UNUSED START: 旧 int_main / box02 / schedule（1419px以下） ===== */
/*     /* ■02-02.main */
/*     -------------------------------------- * / */
/*     .int_main .txt h1 {  */
/*         padding-bottom: 55px; */
/*     } */
/*     .int_main .box_name{ padding: 40px 15%; margin-top: 80px; } */
/*     .interview02 .int_main .box_name { */
/*         padding: 40px 14%; */
/*     } */
/*     .interview03 .int_main .box_name {padding: 30px 10%; margin-top: 80px; } */
/*     .interview { margin-top: 50px; padding-bottom: 100px; } */
/*     .box01 { margin-top: 100px; margin-bottom: 120px; } */
/*     .box02 { padding: 80px 0 40px 0; } */
/*     .interview05 .box02 { padding: 0 0 40px 0; } */
/*         .schedule ul li:nth-child(2n-1) div.box_wrap { */
/*         background-position: left center; */
/*         z-index: -1; */
/*     } */
/*     .schedule ul li:nth-child(2n) div.box_wrap { */
/*         background-position: right center; */
/*         z-index: -1; */
/*     } */
/* ===== UNUSED END ===== */
    
    .int_list li:nth-child(3n) {
        margin-right: 0;
    }
}

@media screen and (min-width:1120px) and (max-width:1419px) {
    .breadcrumb { width: 94%; }
    .interview {
        width: 94%;
        margin: 50px auto 0 auto;
    }
/* ===== UNUSED START: 旧 .schedule（1120-1419px） ===== */
/*     .schedule h1 { font-size: 285%; width: 94%; } */
/*     .schedule .wrap {  */
/*         width: 94%; */
/*         margin: 50px auto 80px auto; */
/*     } */
/* ===== UNUSED END ===== */
    .message { width: 94%; margin: 40px auto 60px auto; }
    .int_list { margin-bottom: 60px; }
    .int_list ul { width: 94%; margin: auto; }
    .int_list li div.box_desc {
        padding: 10px 5% 0 5%;
        min-height: 130px;
    }
    
    /* ■02.about03
    ----------------------------------------- */
    .about03 .wrap .pc_none { display: block; }
}
/* ■03.横幅768px以上、1419px以下（Tab用）スクロールバー対策で+20pxを指定する
--------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1119px) {
/* ▼Tab用================================================================= */
    body {font-size: 13px;}
    .breadcrumb { width: 92%; }
    /*------------------------------------------------------------ 
    ■01.about
    ------------------------------------------------------------ */
    .about .headbox{ 
        padding: 10% 0;
        background: url(../img/about/img_main.png) no-repeat 60% top;
        background-size: cover;
    }
    .about .headbox .wrap {
        width: 45%;
        padding: 3% 0;
    }
    .about .headbox .wrap h1 img {
        width: 95%;
        margin: auto;
        display: block;
    }
    .about .page_catch { margin: 90px auto; }
    .about_list { margin-bottom: 70px; }
    .about_list ul li:nth-child(3) .box_name .name {
        padding: 24px 0;
    }
    .about_list .box_name .num { top: -6%; }
    
    .cont_head h1 { font-size: 207%; }
    /*--------------------------------------- 
    about - 01-04.html
    ----------------------------------------- */
    /* ■02.about01
    ----------------------------------------- */
    .about01 .cont01 {
        background-position: right -170px top 0;
    }
    .about01 .cont02 .box_txt {
        width: 50%;
        float: left;
        font-weight: 400;
    }
    .about01 .cont02 .box_img {
        float: right;
        width: 45%;
    }
    
    /* ■02.about02
    ----------------------------------------- */
    .about02 .catch_img div {
        top: 20%;
        left: 2%;
    }
    .about02 .catch_img div img { width: 90%; max-width: 654px; }
    .about02 .cont .head { margin: 60px auto 40px auto; }
    .about02 .cont .head h1 { width: 42%; }
    .about02 .cont_head .num{
        max-width: 146px;
        width: 15%;
    }
    .about02 .box_txt { width: 44.25%; }
    .about02 .box_img { width: 50%; }
    .about02 .box_wrap {
        margin: 60px auto 70px auto;
    }
    .about02 .box_wrap div h2 { font-size: 185%; }
    .about02 .box_wrap div.box { width: 38.5%; }
    .about02 .box_wrap .arrow { margin: 0 3%; }
    
    /* ■02.about03
    ----------------------------------------- */
    .about03 .cont_head .num {
        width: 17%;
    }
    .about03 .cont01 .wrap { padding: 60px 0 0 0; }
    .about03 .cont01 .box_txt { width: 38%; }
    .about03 .cont h1 { font-size: 185%; margin-bottom: 20px; }
    .about03  .cont { margin-bottom: 60px; }
    .about03 .cont02 .wrap { width: 80%; padding: 40px 5%; }
    
    /* ■02.about04
    ----------------------------------------- */
    .about04 .cont_head .num {
        width: 17%;
    }
    .about04 .catch_img div { width: 85%; }
    .about04 .cont01 .wrap { margin: 50px auto; }
    .about04 .cont01 .box_txt { width: 50%; }
    .about04 .cont01 .box_img { width: 45%; }
    .about04 .cont h1 { font-size: 185%; margin-bottom: 20px; }
    .about04  .cont { margin-bottom: 40px; }
    .about04 .cont02 .wrap { width: 80%; padding: 40px 5%; }
    .about04 .cont .head { margin: 60px auto 40px auto }
    /*------------------------------------------------------------ 
    ■01.interview
    ------------------------------------------------------------ */
    /* ■02.interview index
    -------------------------------------- */
    .int_index{ 
        padding: 10% 0;
        background: url("../img/interview/img_main.png") no-repeat 72% top;
        background-size: cover;
    }
    .int_index .wrap {
        width: 40%;
        padding: 3% 0;
    }
    .int_index h1 img {
        width: 95%;
        margin: auto;
        display: block;
    }
    .page_catch { margin: 90px auto 100px auto; }
    .int_sogo .box_name div span.name, .int_ippan .box_name div span.name{ font-size: 170%; }
    .int_sogo .box_name .wrap div, .int_ippan .box_name .wrap div { margin-bottom: 5px; }
    
    
    /* ■02.interview
    -------------------------------------- */
/* ===== UNUSED START: 旧 int_main / box02-03（Tabメディアクエリ） ===== */
/*     .int_main .txt { width: 45%; } */
/*     .int_main .txt h1 {  */
/*         padding-bottom: 35px; */
/*     } */
/*     .interview06 .int_main{ background-position: right 70% top 0; } */
/*     .int_main .box_name{ padding: 20px 10%; margin-top: 35px; } */
/*     .box01 { margin-top: 50px; margin-bottom: 120px; } */
/*     .box02:before { height: 85%; } */
/*     .box02:after { height: 85%; } */
/*     .interview04 .box02 h2 { width: 50%; top: 5%; } */
/*     .box01 .num { top: 0; } */
/*     .box02 .num { top: -10%; } */
/*     /*.box03 .num { bottom: 0; }* / */
/*     .box03 .txt { */
/*         width: 32.9%; */
/*         margin-left: 0; */
/*     } */
/*     .interview02 .box03 h2 { margin-bottom: 30px; } */
/* ===== UNUSED END ===== */
    
    .interview {
        width: 92%;
        margin: 50px auto 0 auto;
    }
    .interview h1 { font-size: 285%; }
    
/* ===== UNUSED START: 旧 .schedule（Tabメディアクエリ） ===== */
/*     .schedule { padding: 60px 0; margin: 20px auto 60px 0; } */
/*     .schedule h1 { font-size: 285%; width: 92%; } */
/*     .schedule .wrap {  */
/*         width: 92%; */
/*         margin: 50px auto 0 auto; */
/*     } */
/*     .schedule ul li div.box { width: 78%; padding: 28px 5%; } */
/*     .schedule ul li p.time { font-size: 107%; } */
/*     .schedule ul li h3 { font-size: 130%; } */
/*     .interview01 .schedule ul li:nth-child(2n-1) div.box_wrap { */
/*         background-position: right center; */
/*         z-index: -1; */
/*     } */
/*     .interview01 .schedule ul li:nth-child(2n) div.box_wrap { */
/*         background-position: left center; */
/*         z-index: -1; */
/*     } */
/*     .schedule ul li:nth-child(2n) div.box_wrap{ */
/*         background-position: right center; */
/*     } */
/*     .schedule ul li:nth-child(2n-1) div.box_wrap { */
/*         background-position: left center; */
/*     } */
/* ===== UNUSED END ===== */

    .message { width: 92%; margin: 60px auto 60px auto; }
    .message .img { width: 100%; }
    .message .txt { width: 100%; }
    .message h2 { text-align: center; margin: 40px auto 40px auto; }
    .message div { float: none; }
    
    /* ■01.int_list
    --------------------------------------------------- */
    .int_list p.bumon, .int_list p.name {
        font-size: 80%;
    }
    .int_list ul { width: 96%; margin: 0 auto 60px auto ; }
    .int_list li div.box_desc {
        padding: 10px 5% 0 5%;
        min-height: 130px;
    }
    /*.int_list li:nth-child(3n) {
        margin-right: 0;
    }*/
    
    
    /*------------------------------------------------------------ 
    ■02.system
    ------------------------------------------------------------ */
    .system .page_catch { margin: 90px auto; }
    .system .headbox .wrap {
        width: 45%;
        padding: 3% 0;
    }
    .system .headbox .wrap h1 img {
        width: 95%;
        margin: auto;
        display: block;
    }
    .system .white h1 {
        font-size: 200%;
    }
    .system .white h1 span { font-size: 40%; }
    .system .listbox ul li　{
        font-size: 100%;
    }
    .system .txt { margin: 35px auto; }
    .system .listbox .wrap { padding: 25px 0 25px 4%; }
    .system .listbox ul { padding: 0 0 0 0;  }
    .system .training ul { margin-top: 40px; margin-bottom: 150px; }
    .system .training ul li div { width: 82%; }
    .system .training ul li h3 { line-height: 1.5; }
    .system .kenshubox { margin-top: 90px; }
    .system .training { margin-top: 50px; }
    .system .training ul { margin-bottom: 90px; }
    
    
    /*------------------------------------------------------------ 
    ■02.application
    ------------------------------------------------------------ */
    
    .outline .page_catch { margin: 90px auto; }
    .outline .headbox .wrap {
        width: 45%;
        padding: 3% 0;
    }
    .outline .headbox .wrap h1 img {
        width: 95%;
        margin: auto;
        display: block;
    }
    .outline .cont section.boxview th { width: 32%; padding: 20px 4%; }
    .outline .cont section.boxview td p {
        width: 85%;
    }
    .outline .cont section {
        width: 48%;
        margin: 0 4% 0 0;
    }
    /*------------------------------------------------------------ 
    ■02.application
    ------------------------------------------------------------ */
    
    .application .page_catch { margin: 90px auto; }
    .application .headbox .wrap {
        width: 45%;
        padding: 3% 0;
    }
    .application .headbox .wrap h1 img {
        width: 95%;
        margin: auto;
        display: block;
    }
    .application .table th {
        width: 20%;
        padding: 20px 2%;
    }
    .application .table td {
        padding: 20px 2%;
    }
    .application .table-inner {
        width: 70%;
    }
}
/* ■04.横幅767px以下（SP用）
--------------------------------------------------- */
@media screen and (min-width:0px) and (max-width:767px) {
/* ▼SP縦用================================================================ */
    body{font-size: 12px; font-weight: 400;}
    .breadcrumb { width: 92%; }
    
    /*------------------------------------------------------------ 
    ■01.about
    ------------------------------------------------------------ */

    .cont_head {
        margin: 50px auto 30px auto;
        position: relative;
    }
    .cont_head .num { width: 36%; top: -25%; }
    .cont_head h1 { font-size: 185%; line-height: 1.2; }
    .cont_head h1 span { font-size: 12px; }
    .about .headbox{ 
        padding: 10% 0;
        background: url(../img/about/img_main.png) no-repeat 70% top;
        background-size: cover;
    }
    .about .headbox .wrap {
        width: 62%;
        padding: 5% 0;
    }
    .about .headbox h1 img {
        width: 75%;
        margin: auto;
        display: block;
    }
    
    .about .page_catch { margin: 50px auto 50px auto; }
    .about .page_catch .txt{ text-align: left; }
    .about_list { margin-bottom: 70px; }
    .about_list ul li { float: none; width: 100%; margin-bottom: 30px; }
    .about_list ul li .box_name .name { padding: 34px 0; }
    .about_list ul li:nth-child(2) .box_name .name { padding: 20px 0; }
    .about_list ul li:nth-child(3) .box_name .name { padding: 20px 0; }

    .about_list .box_name .num { top: -10%; }
    
    
    /*--------------------------------------- 
    about - 01-04.html
    ----------------------------------------- */
    
    .about01 .catch_img div {
        top: 15%;
    }
    .about01 .catch_img div img {
        width: 85%;
        max-width: 400px;
    }
    .about01 .catch_img {
        padding: 100px 0 180px 0;
        background-image: url(../img/about/01/bg_catch.png);
        background-size: cover;
        background-position: center;
    }
    
    .about01 .cont01 {
        background-position: right -190px top -100px;
    }
    
    .about01 .cont01 { margin: 60px auto 60px auto; }
    .about01 .cont01 .wrap{
        width: 100%;
        background-color: rgba(255,255,255,0.8);
        padding: 50px 0 30px;
    }    
    .about01 .cont01 .txt {
        width: 90%;
        margin-left: 5%;
    }
    
    .about01 .cont02 .box_txt {
        width: 100%;
        float: none;
        font-weight: 400;
    }
    .about01 .cont02 .box_img {
        margin-top: 40px;
        float: none;
        width: 100%;
    }
    .about01 .cont02 {
        margin: 0 auto 70px auto;
    }
    
    /* ■02.about 02
    -------------------------------------- */
    .about02 .cont_head .num { width: 36%; bottom: 4%; top: auto; max-width: 127px; }
    .about02 .catch_img div {
        top: 50%;
        left: 50%;
        right: 0;
        width: 92%;
        -webkit-transform: translate(-50%, -50%); /* Safari用 */
        transform: translate(-50%, -50%);
    }
    .about02 .catch_img div img {
        width: 100%;
        max-width: 488px;
    }
    .about02 .catch_img {
        padding: 20% 0 30% 0;
        background-image: url(../img/about/02/bg_catch.png);
        background-size: cover;
        background-position: 82% top;
    }
    .about02 .cont .head { margin: 60px auto 20px auto; }
    .about02 .cont .head h1 {
        width: 70%;
        font-size: 185%;
        max-width: 240px;
    }
    
    .about02 .box_txt { width: 100%;}
    .about02 .box_img { width: 100%; margin: 10px 0 40px 0; }
    .about02 .box_wrap { margin: 0 auto 70px auto; }
    .about02 .box_wrap div h2 { font-size: 185%; }
    .about02 .box_wrap div.box { width: 94%; float: none; }
    .about02 .box_wrap .arrow { 
        float: none;
        margin: 20px auto;
        width: 9%;
    }
    .about02 .box_wrap .arrow img { 
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .about02 .box_wrap div.box { width: 88%; padding: 30px 6%; }
    
        
    /* ■02.about 03
    -------------------------------------- */
    .about03 .cont_head .num { width: 36%; bottom: 4%; top: auto; max-width: 127px; }
    .about03 .catch_img {
        padding: 20% 0 30% 0;
        background-image: url(../img/about/03/bg_catch.png);
        background-size: cover;
        background-position: 82% top;
    }
    .about03 .cont { margin-bottom: 60px; }
    .about03 .cont h1 { font-size: 178%; margin-bottom: 20px; }
    .about03 .cont01 .wrap { padding: 60px 0 0 0; }
    .about03 .catch_img div img { width: 80%; }
    .about03 .cont01 .box_txt {
        width: 100%;
        float: none;
    }
    .about03 .cont01 .box_img {
        width: 100%;
        float: none;
        margin-top: 30px;
    }
    .about03 .cont02 { padding: 0px; margin-bottom: 60px; }
    .about03 .cont02 .wrap { width: 90%; padding: 30px 5%; background-color: rgba(255,255,255,0.7); }
    
    
    /* ■02.about 04
    -------------------------------------- */
    .about04 .cont_head .num { width: 36%; bottom: 4%; top: auto; max-width: 127px; }
    .about04 .catch_img {
        padding: 55% 0 0;
        background-image: url(../img/about/04/bg_catch.png);
        background-size: cover;
        background-position: 82% top;
    }
    .about04 .cont .head { 
        margin: 60px auto 30px auto;
        background: url(../img/about/02/bg_border.gif) repeat-x left 26%; 
    }
    .about04 .cont .head h1 { width: 63%; max-width: 140px; line-height: 1; }
    .about04 .cont { margin-bottom: 30px; }
    .about04 .cont h1 { font-size: 178%; margin-bottom: 20px; line-height: 1.6; }
    .about04 .cont01 .wrap { margin: 40px auto; }
    .about04 .catch_img div img { width: 80%; }
    .about04 .cont01 .box_txt {
        width: 100%;
        float: none;
    }
    .about04 .cont01 .box_img {
        width: 100%;
        float: none;
        margin-top: 30px;
    }
    .about04 .cont02 { padding: 0px; margin-bottom: 40px; }
    .about04 .cont02 .wrap { padding: 40px 0; }
    .about04 .cont02 .box_txt {
        width: 100%;
        float: none;
    }
    .about04 .cont02 .box_img {
        width: 100%;
        float: none;
        margin-top: 30px;
    }
    .about04 .cont03 .wrap { margin: 40px auto 60px auto; }
    
    .about04 .cont .catch_txt {
        letter-spacing: 0.03em;
    }
    .about04 .cont .catch_txt span {
        font-size: 100%;
    }
    
    /*------------------------------------------------------------ 
    ■01.reference
    ------------------------------------------------------------ */
    .reference .headbox{ 
        padding: 10% 0;
        background: url(../img/reference/img_main.png) no-repeat 70% top;
        background-size: cover;
    }
    .reference .headbox .wrap {
        width: 62%;
        padding: 5% 0;
    }
    .reference .headbox h1 img {
        width: 75%;
        margin: auto;
        display: block;
    }
    /* ■02.index
    -------------------------------------- */
    
    .reference .cont h1 {
        width: 100%;
        font-size: 195%;
        margin: 70px auto 30px auto;
        padding-bottom: 20px;
    }
    .reference .txt { margin: 30px auto; font-size: 109%; line-height: 1.6; }
    .reference ul { margin-top: 20px; }
    .reference .list .box { margin-top: 40px; }
    .reference .list .left {
        float: none;
        width: 100%;
        padding: 25px 0;
    }
    .reference .list .left img {
        max-width: 45px;
    }
    .reference .list .left p { margin-top: 5px; }
    .reference .list .right { width: 100%; float: none;}
    .reference .list .right li { margin-bottom: 20px; padding: 15px 5%; }
    .reference .list .right li dd { margin-top: 15px; line-height: 1.6; }
    .reference .list .right li dt { font-size: 145%; }
    
    
    /*------------------------------------------------------------ 
    ■01.interview
    ------------------------------------------------------------ */
    /* ■02. index
    -------------------------------------- */
    .int_index{ 
        padding: 10% 0;
        background: url("../img/interview/img_main.png") no-repeat 82% top;
        background-size: cover;
    }
    .int_index .wrap {
        width: 62%;
        padding: 5% 0;
    }
    .int_index h1 img {
        width: 70%;
        margin: auto;
        display: block;
    }
    .page_catch {
        margin: 40px auto 60px auto;
    }
    .int_sogo h1, .int_ippan h1 {
        top: -15px;
        font-size: 230%;
    }
    .int_sogo .txt, .int_ippan .txt {
        margin: 10px auto 40px auto;
    }
    .int_sogo ul li, .int_ippan ul li {
        float: none;
        width: 100%;
        margin-bottom: 20px;
    }
    .int_sogo .box_name .wrap div, .int_ippan .box_name .wrap div {
        margin-bottom: 5px;
    }
    .int_sogo .box_name div span.name, .int_ippan .box_name div span.name{
        font-size: 170%;
        line-height: 1;
    }
    .int_sogo .box_name div span.name_rm, .int_ippan .box_name div span.name_rm {
        margin-left: 0;
    }
    .int_sogo .box_name .busho,.int_ippan .box_name .busho {
        font-size: 87.5%;
        line-height: 1.5;
    }
    .int_movie h1{
        font-size: 230%;
        line-height: 1.3;
    }
    .int_movie video {
        margin: 30px auto 60px auto;
    }
    .int_movie #video_btn {
        display: none !important;
    }
    .int_movie #video_btn::after{
        border-width: 18px 0 18px 30px;
        top: 22%;
        left: 33%;
    }
    
    /* ■01.interview
    --------------------------------------------------- */
    .btn_back { margin-bottom: 60px; }
    .btn_back a { width: 84%; max-width: 400px; }

/* ===== UNUSED START: 旧 int_main / box01-03（SPメディアクエリ） ===== */
/*     .int_main { background-position: left 40% bottom 0; } */
/*     .interview02 .int_main{ background-position: left 60% bottom 0; } */
/*     .interview03 .int_main{ background-position: left 30% bottom 0; } */
/*     .interview05 .int_main{ background-position: left 47% bottom 0; } */
/*     .interview06 .int_main{ background-position: right 55% top 0; } */
/*     .int_main .txt { */
/*         float: right; */
/*         width: 53%; */
/*         margin: auto 5% auto auto; */
/*         padding: 50px 0 50px 0; */
/*     } */
/*     .interview01 .int_main .txt, */
/*     .interview02 .int_main .txt, */
/*     .interview06 .int_main .txt { */
/*         margin: auto auto auto 5%; */
/*     } */
/*     .int_main h1 { */
/*         padding-bottom: 30px; */
/*     } */
/*     .int_main .box_name { */
/*         margin-top: 30px; */
/*         padding: 20px 10%; */
/*     } */
/*     .int_main p { font-size: 11px; line-height: 1.5; } */
/*     .int_main p.name { */
/*         margin-top: 0; */
/*     } */
/*     .int_main p.name span { */
/*         font-size: 225%; */
/*     } */
/*     /* ■02-02.box1 */
/*     -------------------------------------- * / */
/*     .box01 { margin-top: 50px; margin-bottom: 70px; } */
/*     .box01 h2 { width: 80%; } */
/*     .interview02 .box01 h2 { width: 80%; } */
/*     .interview04 .box01 h2, */
/*     .interview05 .box01 h2, */
/*     .interview03 .box01 h2 { width: 100%; } */
/*     .interview06 .box01 h2 { width: 80%; } */
/*     .box01 .txt { */
/*         width: 100%; */
/*         float: none; */
/*         position: relative; */
/*         margin-top: 30px; */
/*         margin-left: 0; */
/*     } */
/*     .box01 .num { max-width: 150px; top: 0; width: 30%; } */
/*     .box01 .img { float: none; width: 100%; margin-bottom: 30px; } */
/*     .box01 .txt p { width: 96%; margin: 30px auto 0 auto; } */
/*     /* ■02-02.box2 */
/*     -------------------------------------- * / */
/*     .box02 .num { max-width: 150px; top: auto; bottom: 0; width: 30%; } */
/*     .box03 .num { max-width: 150px; top: -10%; width: 30%; } */
/*     .box02 .wrap { padding: 100px 0; } */
/*     .box02 .img { width: 100%; float: none; } */
/*     .box02 h2 { */
/*         width: 60%; */
/*         top: 5%; */
/*     } */
/*      */
/*     .interview04 .box02 h2 { width: 80%; } */
/*     .interview05 .box02 h2 { */
/*         width: 70%; */
/*         top: 2%;  */
/*     } */
/*     .interview06 .box02 h2 { */
/*         width: 90%; */
/*     } */
/*     .box02 .txt { */
/*         width: 96%; */
/*         float: none; */
/*         position: relative; */
/*         margin: 30px auto 0 auto; */
/*     } */
/*     .box02:before { margin: 3% -15% 0; height: 87%; } */
/*     .box02:after { margin: 3% -15% 0; height: 87%; } */
/*     /* ■02-02.box3 */
/*     -------------------------------------- * / */
/*     .box03 .wrap { padding: 0 0 40px 0; } */
/*     .interview02 .box03 .wrap,.interview05 .box03 .wrap,.interview06 .box03 .wrap { padding: 0; } */
/*     .box03 .img { */
/*         float: none; */
/*         width: 90%; */
/*         padding: 0 10%; */
/*         margin: auto; */
/*         position: relative; */
/*     } */
/*     .box03 .txt { float: none; width: 96%; margin: 30px auto 0 auto; } */
/*     .box03 h2 { */
/*         width: 43.2%; */
/*     } */
/*     .interview02 .box03 .img{ */
/*         float: none; */
/*         width: 100%; */
/*         padding: 0; */
/*         margin: auto; */
/*         position: relative; */
/*     } */
/*     .interview02 .box03 .num, */
/*     .interview04 .box03 .num, */
/*     .interview06 .box03 .num{ */
/*         top: auto; */
/*         right: 0; */
/*         bottom: -23%; */
/*         left: auto; */
/*     } */
/*     .interview05 .box03 .num {  */
/*         top: 23%; */
/*     } */
/*     .interview01 .box03 .img, */
/*     .interview04 .box03 .img, */
/*     .interview03 .box03 .img, */
/*     .interview05 .box03 .img,  */
/*     .interview06 .box03 .img{ */
/*         float: none; */
/*         width: 100%; */
/*         padding: 0; */
/*         margin: auto; */
/*         position: relative; */
/*     } */
/*     .interview01 .box03 .txt, */
/*     .interview02 .box03 .txt, */
/*     .interview03 .box03 .txt, */
/*     .interview04 .box03 .txt, */
/*     .interview05 .box03 .txt, */
/*     .interview06 .box03 .txt{ float: none; width: 96%; margin: 0 auto 60px auto;  } */
/*      */
/*     .interview03 .box03 h2, */
/*     .interview04 .box03 h2, */
/*     .interview05 .box03 h2 { */
/*         width: 80%; */
/*         margin-top: 30px; */
/*         margin-bottom: 30px; */
/*     } */
/*     .interview01 .box03 h2, */
/*     .interview02 .box03 h2, */
/*     .interview06 .box03 h2 {  */
/*         width: 65%; */
/*         margin-top: 30px; */
/*         margin-bottom: 30px; */
/*     } */
/* ===== UNUSED END ===== */
    
    .interview {
        width: 90%;
        margin: 50px auto 0 auto;
    }
    .interview h1 { 
        font-size: 240%;
        padding-bottom: 15px;
    }
    
/* ===== UNUSED START: 旧 .schedule（SPメディアクエリ） ===== */
/*     .schedule { padding: 50px 0 30px 0; margin: 20px auto 60px 0; } */
/*     .schedule h1 {  */
/*         font-size: 240%;  */
/*         width: 90%;  */
/*         padding-bottom: 15px; */
/*     } */
/*     .schedule .wrap {  */
/*         width: 90%; */
/*         margin: 30px auto 0 auto; */
/*     } */
/*     .schedule ul li .box_wrap { width: 100%;} */
/*     .schedule ul li div.box {  */
/*         width: 90%;  */
/*         margin-bottom: 30px; */
/*         padding: 22px 5%; */
/*     } */
/*     .schedule .box .txt{ font-size: 100%; } */
/*     .schedule ul li:nth-child(2n-1) div.box_wrap, .schedule ul li:nth-child(2n-1) div.box{ float: none;} */
/*     .schedule ul li:nth-child(2n) div.box_wrap, .schedule ul li:nth-child(2n) div.box{ float: none;} */
/* ===== UNUSED END ===== */
    
    .message { width: 90%; margin: 60px auto 60px auto; }
    .message .img { width: 100%; }
    .message .txt { width: 100%; }
    .message h2 { font-size: 240%; text-align: center; margin: 40px auto 30px auto; }
    .message div { float: none; }
    
    
    
    
    
    /* ■01.int_list
    --------------------------------------------------- */
    .int_list ul { width: 90%; margin: 0 auto 40px auto;}
    .int_list li{
        width: 90%;/*
        float: none;*/
        margin: 0 auto 20px auto;
    }
    .int_list li div.box_txt div {
      width: 94%;
      max-width: none; 
    }
    .news div ul {
        /*margin-left: 5%;*/
        width: 95%;
    }
    
    /*------------------------------------------------------------ 
    ■02.system
    ------------------------------------------------------------ */
    .system  .headbox{ 
        padding: 10% 0;
        background: url(../img/system/img_main.png) no-repeat 70% top;
        background-size: cover;
    }
    .system  .headbox .wrap {
        width: 62%;
        padding: 5% 0;
    }
    .system  .headbox h1 img {
        width: 75%;
        margin: auto;
        display: block;
    }
    .system .page_catch { margin: 60px auto; }
    .system .page_catch h1 img { width: 80%; }
    .system .white {
        width: 100%;
        position: absolute;
        background-color: rgba(255,255,255,0.8);
        display: table;
    }
    .system .white h1 {
        font-size: 200%;
        line-height: 0.8;
    }
    .system .personal .txt { margin: 30px auto 30px auto; }
    .system .white h1 span { font-size: 40%; }
    .system .listbox ul li　{ font-size: 100%; }
    .system .txt { margin: 25px auto 20px auto; font-size: 135%; line-height: 1.5; }
    .system .listbox .wrap { padding: 20px 0 8px 4%; }
    .system .listbox ul { padding: 0 0 0 0;  }
    .system .listbox ul { float: none; width: 95%; padding-left: 3% }
    .system .listbox ul li { margin-bottom: 12px; font-size: 109%; }
    .system .listbox ul li:last-child { margin-bottom: 12px; }
    .system .txt_s { margin: 25px auto auto auto; }
    .system .training { margin-top: 40px; }
    .system .training ul { margin-top: 35px; margin-bottom: 90px; }
    .system .training ul li {
        float: none;
        width: 100%;
        margin-bottom: 35px;
    }
    .system .training ul li div { 
        width: 54%;
        max-width: 104px;
        min-width: 104px;
        padding: 25px 0;
    }
    .system .training ul li div img { max-width: 50px; }
    .system .training ul li h3 { 
        line-height: 1.5; 
        font-size: 135%;
        margin: 20px auto 10px auto;
    }
    .system .kenshubox { margin-top: 60px; }
    .system .txt_s { line-height: 1.6; }
    
    
    
    /*------------------------------------------------------------ 
    ■02.outline
    ------------------------------------------------------------ */
    .outline  .headbox{ 
        padding: 10% 0;
        background: url(../img/about/img_main.png) no-repeat 70% top;
        background-size: cover;
    }
    .outline .page_catch { margin: 90px auto; }
    .outline .headbox .wrap {
        width: 62%;
        padding: 3% 0;
    }
    .outline .headbox .wrap h1 img {
        width: 75%;
        margin: auto;
        display: block;
    }
    .outline .cont section {
        float: none;
        width: 100%;
        margin: 0 auto 60px auto;
    }
    .outline .cont section h1 { text-align: center; }
    .outline .cont {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto 60px auto;
    }
    .outline .cont section.boxview {
        margin-top: 50px;
    }
    .outline .cont section.boxview td {
        padding: 12px 2%;
    }
    .outline .cont section.boxview td p {
        width: 86%;
    }
    .outline .cont section.boxhist th {
        width: 28%;
    }
    .outline .cont section.boxview th {
        width: 33%;
        padding: 12px 4%;
    }
    .outline .cont section.boxhist td {
        padding: 15px 0;
    }
    .outline .gallery h1 {
        margin-top: 0;
        margin-bottom: 30px;
    }
    .outline .gallery .main {
        width: 100%;
        float: none;
    }
    .outline .gallery .thumb {
        margin-top: 15px;
        width: 100%;
        float: none;
    }
    .outline .gallery .thumb li:after {
        width: 20px;
        height: 20px;
    }
    /*------------------------------------------------------------ 
    ■02.application
    ------------------------------------------------------------ */
    .application  .headbox{ 
        padding: 10% 0;
        background: url(../img/reference/img_main.png) no-repeat 70% top;
        background-size: cover;
    }
    .application .page_catch { margin: 90px auto; }
    .application .headbox .wrap {
        width: 62%;
        padding: 3% 0;
    }
    .application .headbox .wrap h1 img {
        width: 75%;
        margin: auto;
        display: block;
    }
    
    .application .wrap p.img { margin: 40px auto; }
    .application .table th {
        width: 25%;
        padding: 15px 0 15px 2%;
        text-align: left;
    }
    .application .table td {
        padding: 15px 3% 15px 2%;
        line-height: 1.6;
    }
    .application .table td dl dt {
        font-weight: 600;
        margin-bottom: 3px;
        line-height: 1.8;
    }
    .application .table td dl { margin-bottom: 15px; }
	.application .scroll{ overflow: auto; white-space: nowrap; }
	.application .scroll::-webkit-scrollbar{ height: 5px; }
	.application .scroll::-webkit-scrollbar-track{ background: #F1F1F1; }
	.application .scroll::-webkit-scrollbar-thumb { background: #BCBCBC; }
	.application .scroll .table-inner tr th{ padding: 10px 5px; }
	.application .scroll .table-inner tr td{ padding: 10px 5px; }
    .application .table-inner tr:first-child td { padding-top: 0; }
    .application .scroll .table-inner { width: 100%; }
    .application .cont p.bnr {
        text-align: center;
        margin: 40px auto 60px auto;
    }
}