@charset "utf-8";

/*共通カラーテスト用*/
:root {
    --rec-bg-1-color: #3b77e2;
    --rec-txt-2-color: black;
    --rec-bg-3-color: #f8f6f5;
}

/*=====================================
    高輪精機株式会社 2020.
	コンテンツページ用CSS
=====================================*/
/**改行制御*/
.pc_br {
    display: inline;
}

.tab_br,
.sp_br {
    display: none;
}

/**タブレット用*/
@media screen and (max-width: 845px) {
    .tab_br {
        display: inline;
    }
}

/**スマホ用*/
@media screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .pc_br {
        display: none;
    }

    .sp_br {
        display: inline;
    }
}

/**ページ内リンク 高さ調節*/
.link-t-a {
    position: relative;
    display: block;
}

/*ボタン(共有)*/
.btn_area {
    margin-top: 30px;
    margin-bottom: 100px;
}

.link_btn {
    display: inline-block;
    cursor: pointer;
    width: 160px;
    padding: 16px;
    margin: 20px;
    color: #006ab7;
    line-height: 1.4rem;
    user-select: none;
    border-width: 0;
    border-style: solid;
    border-radius: 12% / 50%;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s, transform 0.2s;
    outline: none;
}

.link_btn:hover {
    color: #006ab7;
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.2);
}

.link_btn:active {
    transition-duration: 0.05s;
    -webkit-transform: scale(0.99);
    transform: scale(0.99);
    box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.15) inset;
}

.link_btn:focus,
.link_btn:focus:hover {
    color: #006ab7;
}

/*ボタンカラー逆*/
.link_btn_rec {
    color: #fff;
    /*006ab7*/
    background-color: #006ab7;
}

.link_btn_rec:hover {
    color: #fff;
    background-color: #006ab7a3;
}

/**開閉ギミック*/
.cp_qa *,
.cp_qa *:after,
.cp_qa *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cp_qa {
    border-top: 1px solid #006ab7;
}

.cp_qa .cp_actab {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 1px;
    color: #1b2538;
}

.cp_qa .cp_actab input {
    position: absolute;
    opacity: 0;
}

/*見出し*/
.cp_qa .cp_actab label {
    position: relative;
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 16px 32px 16px 16px;
    font-weight: bold;
    line-height: 1.6;
    border-bottom: 1px solid #006ab7;
}

.cp_qa .cp_actab label:hover {
    color: #006ab7;
}

/*内容*/
.cp_qa .cp_actab .cp_actab-content {
    overflow: hidden;
    max-height: 0;
    color: #fff;
    background: rgba(0, 24, 59, 0.8);
    -webkit-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
}

.cp_qa .cp_actab .cp_actab-content p {
    margin: 16px;
    text-align: left;
}

/*開いた時の仕様 --アイコン */
.cp_qa .cp_actab input:checked~label {
    color: #006ab7;
}

/*開いた時の仕様 --高さ */
.cp_qa .cp_actab input:checked~.cp_actab-content {
    max-height: 1000px;
}

/*クリックした時のアイコンの動き */
.cp_qa .cp_actab label::after {
    position: absolute;
    display: block;
    top: 50%;
    right: 0;
    width: 48px;
    margin-top: -12.5px;
    line-height: 1.6;
    text-align: center;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.cp_qa .cp_actab input[type="checkbox"]+label::after {
    content: "\f0d7";
    font-weight: 900;
    font-size: 1.2rem;
    font-family: "Font Awesome 5 Free";
}

.cp_qa .cp_actab input[type="checkbox"]:checked+label::after {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

/*修飾枠(かぎかっこ)*/
.box_brackets {
    position: relative;
    padding: 0.25em 1em;
}

.box_brackets:before,
.box_brackets:after {
    position: absolute;
    display: inline-block;
    content: "";
    width: 20px;
    height: 30px;
}

.box_brackets:before {
    top: 0;
    left: 0;
    border-top: solid 1.5px #006ab7;
    border-left: solid 1.5px #006ab7;
}

.box_brackets:after {
    right: 0;
    bottom: 0;
    border-right: solid 1.5px #006ab7;
    border-bottom: solid 1.5px #006ab7;
}

.box_brackets p {
    margin: 0;
    padding: 0;
}

/**フォーム周り(共有)*/
button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

input {
    line-height: normal;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.btn {
    display: inline-block;
    cursor: pointer;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    border: 1px solid transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.btn-group-lg>.btn,
.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

/*-------------------------------------
	HEADER　ページ用
-------------------------------------*/
#h_con {
    width: 100%;
    min-width: 1000px;
    overflow: hidden;
    height: 80px;
    opacity: 1;
    background-color: #1960b0;
}

#h_con h1 {
    width: 200px;
    float: left;
    margin: 18px 0 0 30px;
    /*30px 0 20px 30px*/
}

header#h_con nav {
    float: right;
    width: 950px;
    margin: 40px 30px 0 0;
}

#h_con nav ul {
    width: 950px;
    float: right;
    position: relative;
    top: 0;
    transition: 0.3s;
    display: flex;
    justify-content: end;
}

#h_con nav ul li a {
    color: #fff;
    font-size: 14px;
    display: inline-block;
    text-decoration: none;
    float: left;
    margin-right: 35px;
    letter-spacing: 0.3em;
    position: relative;
}

#h_con.h_con_a nav ul li a {
    font-weight: bold;
}

#h_con nav ul li a:before,
#h_con nav ul li a:after {
    position: absolute;
    top: 1.5em;
    content: "";
    display: inline-block;
    width: 0;
    height: 1px;
    background: #a0aab7;
    transition: 0.2s;
}

#h_con nav ul li a:before {
    left: 50%;
}

#h_con nav ul li a:after {
    right: 50%;
}

#h_con nav ul li a:hover:before,
#h_con nav ul li a:hover:after {
    width: 50%;
}

#h_con nav ul li:last-of-type a {
    margin-right: 0;
}

#h_con nav ul.active {
    top: 50px !important;
    position: relative;
    transition: all 0.3s;
}

/**1000px以下*/
@media only screen and (max-width: 999px) {
    #h_con {
        min-width: 100%;
    }
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    #h_con {
        position: fixed;
        height: 64px;
        /* background-color: #fff; */
        z-index: 9999993;
    }

    #h_con h1 {
        width: 194px;
        margin: 25px 0 5px 20px;
    }

    #h_con nav {
        display: none;
    }
}

/*--------------------------------
	ページ＿コンテンツヘッダー
--------------------------------*/
/*コンテンツタイトル*/
.con_title {
    position: relative;
    width: 100%;
    height: 500px;
    margin-bottom: 180px;
    background-size: cover;
    animation-fill-mode: both;
    animation: fadeIn 3s 0.01s;
}

.con_wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 150px;
}

/*--------------------------------
	会社概要
--------------------------------*/
#company h2 {
    font-size: 22px;
    font-weight: bold;
    margin: 20px auto 80px;
    letter-spacing: 0.3em;
    font-feature-settings: "palt";
    text-align: center;
}

.company-table {
    max-width: 800px;
    /* width: 100%; */
    margin: 0 auto;
    border-collapse: collapse;
}

.company-table table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #557EAE;
    border-bottom: 1px solid #557EAE;
}

.company-table th,
.company-table td {
    padding: 24px 36px;
    border-bottom: 1px solid #557EAE;
    text-align: left;
    vertical-align: top;
    line-height: 2;
}

.company-table th {
    width: 160px;
    /* background-color: #f9f9f9; */
    font-weight: 500;
    /* color: #333; */
}

.company-table td {
    color: #333;
    min-width: 65px;
}

.company-table a {
    color: #0044cc;
    text-decoration: none;
}

.company-table a:hover {
    text-decoration: underline;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    #company h2 {
        font-size: 18px;
        margin: 20px auto 50px;
    }

    .company-table {
        width: 90%;
    }

    .company-table th,
    .company-table td {
        padding: 16px 12px;
        font-size: 14px;
    }

    .company-table th {
        width: 120px;
    }
}






.con_list {
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    /* color: #333; */
    line-height: 2em;
}

.con_wrapper .map {
    margin: auto;
    display: block;
}

.con_wrapper .support {
    margin: 40px auto 0;
    display: block;
    max-width: 600px;
    width: 90%;
    max-width: 800px;
}

/*サポート体制*/
.text-area-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 32px 20px
}


/* 見出し行 */
.columns {
    /* display: flex;
    gap: var(--gap);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px; */
}

.col-title {
    /* flex: 1 1 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--muted);
    font-size: 14px; */
}


/* テキストカラム */
.cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    align-items: start;
}

.col {
    background: #fff;
    padding: 18px;
    border-radius: 12px;
    /* box-shadow: 0 6px 18px rgba(9, 30, 66, 0.08); */
    min-height: 150px;
}

.col h3 {
    margin: 0 0 28px 0;
    font-size: 16px;
    color: var(--accent);
    font-weight: bold;
    line-height: 1.5;
}

.col p {
    margin: 0;
    color: #334155;
    line-height: 1.7;
    font-size: 14px;
}



/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .con_list {
        font-size: 14px;
        text-align: left;
    }
}

/* レスポンシブ */
@media (max-width: 900px) {
    .cols {
        grid-template-columns: repeat(2, 1fr)
    }

    .columns {
        gap: 16px
    }
}

@media (max-width: 560px) {
    .columns {
        display: block;
        text-align: left
    }

    .col-title {
        padding: 6px 0
    }

    .cols {
        grid-template-columns: 1fr
    }

    .text-area-wrap {
        padding: 20px 16px
    }
}












/* 旧ヘッダー */
.con_title h1 {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 35px;
    height: 150px;
    margin: 0 auto;
    padding: 5px 0;
    color: #20334d;
    font-size: 25px;
    line-height: 1.4em;
    letter-spacing: 0.3em;
    background-color: #fff;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

/* 新ヘッダー　新バナー対応 */
.con_title_01 {
    width: 100vw;
    height: calc(100vw * (650 / 1920));
    margin-bottom: 100px;
    display: flex;
    align-items: flex-start;

    background-size: cover;
    background-color: #1960b0;
}

#company .con_title_01 {
    background: url("../images/contents/header_con.jpg") no-repeat center bottom;
    background-size: cover;
    background-color: #1960b0;
}

#product .con_title_01 {
    background: url("../images/contents/header_product.jpg") no-repeat center bottom;
    background-size: cover;
    background-color: #1960b0;
}

#contact .con_title_01 {
    background: url("../images/contents/header_contact.jpg") no-repeat center bottom;
    background-size: cover;
    background-color: #1960b0;
}

.con_title_01 .con_title_h2 {
    margin-left: 0;
    padding: 10px 0 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s ease-out forwards;
    animation-delay: 0.3s;
}

#company .con_title_01 .con_title_h2 h2 {
    margin: 0;
    padding: 0;
}

.con_title_01 .con_title_h2 h2 img {
    height: 4vw;
    width: auto;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.con_title_01 .con_title_h2 h2 img.con_title_12 {
    height: 3vw;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {

    #company .con_title_01,
    #product .con_title_01,
    #contact .con_title_01 {
        width: 100vw;
        aspect-ratio: 1920 / 731;
        margin-bottom: 50px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center bottom;
        align-items: flex-start;
        padding-top: 106px;
    }

    #company .con_title_01 .con_title_h2,
    #product .con_title_01 .con_title_h2,
    #contact .con_title_01 .con_title_h2 {
        padding: 0 0 0 20px;
        margin-top: -30px;
    }

    #company .con_title_01 .con_title_h2 h2 img,
    #product .con_title_01 .con_title_h2 h2 img,
    #contact .con_title_01 .con_title_h2 h2 img {
        height: 6.5vw;
    }

    #company .con_title_01 .con_title_h2 h2 img.con_title_12,
    #product .con_title_01 .con_title_h2 h2 img.con_title_12,
    #contact .con_title_01 .con_title_h2 h2 img.con_title_12 {
        height: 6vw;
    }
}

/*SDGs*/
#sdgs .con_title h1 {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

/*リクルートページフォント*/
#rec_body section,
#rec_body .con_text p,
#rec_body .con_text2 p,
#sp-fixed-menu {
    /* font-family: var(--font-main); */
}

#rec_body .con_text h2,
#rec_body .con_text p.rec_name {
    /* font-family: "kozuka-mincho-pr6n", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
        "Hiragino Mincho Pro", "メイリオ", "MS P明朝", "MS PMincho", serif; */
}

#rec_body .con_text p.rec_name {
    font-size: 18px;
}

#rec_body .con_text h2 {
    position: relative;
    padding: 1rem 4rem;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

#rec_body .con_text h2::before,
#rec_body .con_text h2::after {
    /* position: absolute;
    width: 15px;
    height: 40px;
    content: ''; */
}

#rec_body .con_text h2::before {
    /* border-left: solid 1px;
    border-top: solid 1px;
    top: 0;
    left: 0; */
}

#rec_body .con_text h2::after {
    /* border-right: solid 1px;
    border-bottom: solid 1px;
    bottom: 0;
    right: 0; */
}

/*リクルートページ　キャッチ*/
h2.catch {
    position: absolute;
    /* font-family: "Noto Sans JP", "ヒラギノ角ゴシック ProN", メイリオ, sans-serif; */
    transform: rotate(0.05deg);
    font-size: 24vh;

    background: none;
    color: #f26221;
    filter: drop-shadow(0px 0px 5px #fff);
    top: auto;
    left: 0;
    right: auto;
    bottom: 5vh;
    line-height: 1;
    /* text-align: end; */
    font-feature-settings: "palt";
}

h2.catch .span_1 {
    -webkit-writing-mode: vertical-rl;
    /* Safari用 */
    -ms-writing-mode: tb-rl;
    /* IE用 */
    writing-mode: vertical-rl;
    letter-spacing: -2vh;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .con_title {
        margin-bottom: 50px;
    }

    h2.catch {
        top: 70px;
        right: 20px;
        left: auto;
        bottom: auto;
        font-size: 26vw;
        text-align: right;
    }

    h2.catch .span_1 {
        writing-mode: horizontal-tb;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: horizontal-tb;
        letter-spacing: -1vw;
    }

    h2.catch .span_2 {
        -webkit-writing-mode: vertical-rl;
        /* Safari用 */
        -ms-writing-mode: tb-rl;
        /* IE用 */
        writing-mode: vertical-rl;
        vertical-align: top;
        /* ← 追記 */
    }
}

/*製品ページの背景動画*/
.con_title.con_product h1 {
    height: 200px;
}

.con_product video.p_video {
    object-fit: cover;
    width: 100%;
    height: 600px;
    margin: 0 auto;
    z-index: -100;
}

/*福井営業所ページの背景動画*/
.con_title.con_fukui h1 {
    color: #fff;
    background-color: transparent;
}

.con_fukui video.p_video {
    object-fit: cover;
    width: 100%;
    height: 600px;
    margin: 0 auto;
    z-index: -100;
}

.con_fukui video.p_video_sp {
    display: none;
}

.con_rec {
    width: 100%;
    max-width: 800px;
    margin: auto;
    text-align: center;
}

.con_rec video.p_video {
    width: 100%;
}

/**スマホ用*/
@media screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .con_fukui video.p_video {
        display: none;
    }

    .con_fukui video.p_video_sp {
        display: block;
        height: 100vh;
    }
}

/*各ページの背景画像*/

.con_company {
    background: url("../images/contents/con_head_02_2.webp") no-repeat center bottom;

}

.con_product {
    background: url("../images/contents/con_head_03.webp") no-repeat center bottom;
}

.con_fukui {
    background: url("../images/contents/con_head_04.webp") no-repeat center bottom;
    height: 100vh;
}

.con_sdgs {
    background: url("../images/contents/con_head_sdgs.webp") no-repeat center bottom;
}

.con_contact {
    background: url("../images/contents/con_head_06.webp") no-repeat center bottom;
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: overlay;
}

/* リクルートページヘッダー変更 */
.con_recruit {
    height: calc(100vh - 70px);

    animation: none;
    margin-bottom: 0;
    transition: opacity 2s ease;
    z-index: 0;
}

@media only screen and (max-width: 1259px) {
    .con_recruit {
        background-size: contain;
    }

    .con_recruit #image {
        max-width: 600px;
        bottom: 160px;
        /* opacity: 1; */
    }
}

@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .con_recruit {
        background: url("../images/contents/con_head_05_sp.webp") no-repeat center bottom;
        height: calc(100vh - 64px);
        background-size: cover;
        top: 68px;
        display: grid;
        place-content: center;
        place-items: center;
    }

    #video {
        height: calc(100vh - 64px);
    }

    .con_recruit #image {
        top: 5vh;
        bottom: initial;
        left: initial;
        right: initial;
        max-height: calc(100vh - 64px);
        height: 100%;
        width: auto;
        /* padding-top: 50px; */
        background: none;
    }

    .con_sdgs {
        padding-top: 64px;
    }
}

/*.con_description { background: url("../images/contents/con_head_06.webp") no-repeat center bottom; }*/

/* リクルート固定問い合わせ */
/*メニューをページ下部に固定*/
#sp-fixed-menu,
#sp-fixed-menu li {
    display: none;
    opacity: 1;
}

@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    #sp-fixed-menu {
        position: fixed;
        width: 100%;
        bottom: 0px;
        font-size: 0;
        opacity: 0;
        z-index: 9999;
        overflow: hidden;
        display: block;
        filter: drop-shadow(2px 4px 6px black);
    }

    #recruit_interview #sp-fixed-menu,
    #recruit_message #sp-fixed-menu {
        opacity: 1;
    }



    /*メニューを横並びにする*/
    #sp-fixed-menu ul {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    #sp-fixed-menu li {
        justify-content: center;
        align-items: center;
        width: 50%;
        padding: 0;
        margin: 0;
        /* font-size: 14px;
         */
        font-size: 0.8rem;
        border-right: 1px solid #fff;
        display: block;
    }

    /*左側メニュー*/
    #sp-fixed-menu li:first-child {
        /* background: #f48fb1; */
        /* background: #f06292; */
        background: #26499d;
    }

    /*中央メニュー*/
    #sp-fixed-menu li:nth-child(2) {
        /* background: #81d4fa; */
        /* background: #4caf50; */
        /* background: #64b5f6; */
        background: #3c76e4;
        /* border-right: none; */
    }

    /*左側メニュー*/
    #sp-fixed-menu li:last-child {
        /* background: #ff8a65; */
        /* background: #ffb74d; */
        background: #27a0a2;
        border-right: none;
    }

    /*ボタンを調整*/
    #sp-fixed-menu li a {
        color: #fff;
        text-align: center;
        display: block;
        width: 100%;
        padding: 20px 0;
    }

    #sp-fixed-menu li:first-child a {}
}

/*IEの游明朝ズレの対応CSS*/
@media all and (-ms-high-contrast: none) {
    .con_title h1 {
        line-height: 1.7em;
    }
}

/*スクロールボタン*/
.con_title a {
    padding-top: 60px;
    width: 100%;
}

.con_title a {
    position: absolute;
    display: inline-block;
    /*left: 47.5%;*/
    bottom: 20px;
    margin: 0 auto;
    text-align: center;
    transition: opacity 0.3s;
    z-index: 2;
}

.con_title a p {
    color: #fff;
    font-size: 0.8em;
    padding-top: 8px;
    letter-spacing: 0.1rem;
    text-decoration: none;
    font-family: "Josefin Sans", sans-serif;
    font-weight: normal;
}

.con_title a span {
    position: absolute;
    top: 10px;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border-radius: 50px;
    border: 2px solid #fff;
    box-sizing: border-box;
}

.con_title a span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 6px;
    height: 6px;
    content: "";
    margin-left: -3px;
    border-radius: 100%;
    box-sizing: border-box;
    background-color: #fff;
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
}

@-webkit-keyframes sdb {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, 0);
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 0;
        -webkit-transform: translate(0, 20px);
    }

    100% {
        opacity: 0;
    }
}

@keyframes sdb {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 0;
        transform: translate(0, 20px);
    }

    100% {
        opacity: 0;
    }
}

/**IE11*/
_:-ms-lang(x)::-ms-backdrop,
.con_title a span {
    left: 50%;
}

/*コンテンツテキスト*/
.rec01_bg,
.con_text2 {
    width: 1000px;
    color: #222;
    text-align: center;
    margin: 0 auto 130px;
    letter-spacing: 0.1em;
}

.rec01_bg {
    color: #fff;
    /* background-color: #1b2538; */
    margin-bottom: 0;
}

.rec01_bg .rec_box {
    padding: 20px;
    width: 100%;
    max-width: 1200px;
    /* font-family: "kozuka-mincho-pr6n", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
        "Hiragino Mincho Pro", "メイリオ", "MS P明朝", "MS PMincho", serif; */
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .rec01_bg .rec_box {
        flex-wrap: wrap-reverse;
    }
}

#rec01 {
    margin: 0;
    padding-bottom: 200px;
    padding-top: 200px;
    background-color: var(--rec-bg-1-color);
    /*1b2538*/
    /* background-color: #6f6e6e; */
}

.con_text h2,
.con_text2 h2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 55px;
    letter-spacing: 0.3em;
    font-feature-settings: "palt";
}

.con_text h2 br {
    display: none;
}

.con_text p,
.con_text2 p {
    font-size: 14px;
    line-height: 2.5em;
    /* font-feature-settings: "palt"; */
}

.con_text2 .memo {
    width: 90%;
    font-size: 14px;
    line-height: 1.5em;
    color: #555;
    margin: -10px auto 50px;
}

/**1000px以下*/
@media only screen and (max-width: 999px) {

    .con_text,
    .con_text2 {
        width: 100%;
    }
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {

    .con_title h1,
    .con_text2 h1 {
        top: 150px;
        width: 25px;
        font-size: 18px;
    }

    .con_text,
    .con_text2 {
        width: 100%;
        margin-bottom: 70px;
    }

    .con_text2 .memo {
        text-align: left;
    }

    #rec01 {
        width: 100%;
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .rec01_bg {
        width: 90%;
    }

    .con_text h2,
    .con_text2 h2 {
        font-size: 18px;
        line-height: 2em;
        letter-spacing: 0.05em;
        margin-bottom: 35px;
    }

    .con_text h2 br {
        display: block;
    }

    .con_text p {
        font-size: 0.9rem;
        text-align: left;
        line-height: 1.8rem;
    }

    .con_text2 p {
        font-size: 0.9rem;
        padding-bottom: 30px;
    }
}

/*IE対応*/
.ie .con_title.con_product h1,
.gecko .con_title.con_product h1 {
    height: 210px;
    padding-top: 10px;
}

/**タイトルアニメーション*/
@keyframes borderAnim {
    0% {
        bottom: 20px;
    }

    100% {
        bottom: -85px;
    }
}

/*--------------------------------
	ページ＿コンテンツメイン
--------------------------------*/
.con_main {
    width: 1000px;
    margin: 0 auto 130px;
}

.con_main .con_inner {
    width: 1000px;
    margin: 0 auto;
    /* padding-top: 50px; */
    text-align: center;
}

.con_main .con_inner h1 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 100px;
    margin-top: 20px;
    letter-spacing: 0.3em;
    font-feature-settings: "palt";
}

.con_main .con_inner h2 {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.2em;
    color: #20334d;
    line-height: 1.4em;
    text-align: center;
    padding: 20px 0;
    position: relative;
    margin: 0 auto;
}

.con_main .con_inner p {
    line-height: 1.5;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .con_main .con_inner p {
        text-align: left;
        font-size: 0.95rem;
    }
}

/*ボタン*/
.pro_links {
    display: flex;
    flex-wrap: wrap;
}

.pro_links a {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    /* background-color: #006ab7; */
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
    width: 45%;
    box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
    color: #006ab7;
    padding: 0 0 5px;
    font-size: 1rem;
    font-weight: bold;
    padding: 16px;
    background-color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pro_links a:hover {
    background-color: #006ab7;
    color: #fff;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .pro_links {
        justify-content: space-between;
        margin-bottom: 50px;
        margin: 0 auto 100px;
        padding: 0 50px;
    }

    .pro_links a {
        width: 35%;
        min-width: fit-content;
    }
}

/*カード*/
.con_card {
    position: relative;
    display: block;
    width: 70%;
    min-width: 320px;
    margin-left: 15%;
    margin-bottom: 100px;
    border-radius: 3px;
    background: #fff;
    -webkit-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    -webkit-box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.con_card:hover .con_photo img {
    opacity: 0.6;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


/*写真*/
.con_card .con_photo {
    overflow: hidden;
    height: 360px;
    background: #333;
    border-radius: 3px 3px 0 0;
}

.con_card .con_photo img {
    display: block;
    width: 100%;
    -webkit-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}

.con_card .con_photo .con_details {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 75px;
    height: 75px;
    text-align: center;
    border-radius: 100%;
    background: #006ab7;
    box-sizing: content-box;
    z-index: 1;
}

/*番号*/
.con_card .con_photo .con_details .con_no {
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    margin-top: 10px;
    /*22px*/
}

.con_card .con_description {
    position: absolute;
    width: 95.5%;
    bottom: 0;
    padding: 16px;
    -webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
    transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
    background: #fff;
}

/*カテゴリー*/
.con_card .con_description .con_category {
    position: absolute;
    top: -34px;
    left: 10px;
    padding: 5px 15px;
    height: 30px;
    color: #fff;
    background: #006ab7;
    text-transform: uppercase;
    border-radius: 3px 3px 0 0;
}

.con_card .con_description .con_category p {
    padding-top: 0px;
    font-size: 1.5rem;
    font-weight: bold;
}

/*キャッチコピー*/
.con_card .con_description h2 {
    margin: 0;
    color: #006ab7;
    padding: 0 0 5px;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
}

/*説明*/
.con_card .con_description .con_text {
    width: 98%;
    height: 0;
    margin: 0;
    opacity: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.8em;
    text-align: left;
}

.con_card:hover .con_description .con_text {
    height: auto;
    opacity: 1;
}

/**IE11*/
_:-ms-lang(x)::-ms-backdrop,
.con_card .con_description {
    width: 100%;
}

/**1000px以下*/
@media only screen and (max-width: 999px) {
    .con_main {
        width: 100%;
    }

    .con_main .con_inner,
    .con_card .con_description {
        width: 98%;
    }
}




/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .con_main {
        margin: 0 auto;
    }

    .smp_com_main {
        margin-bottom: 70px;
    }

    .con_card {
        margin-left: 5%;
    }

    .con_main .con_inner {
        width: 93%;
    }

    .con_card .con_description {
        width: 90.5%;
    }

    .con_card .con_description h2 {
        font-size: 1rem;
    }

    .con_card .con_description .con_text {
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: height .25s ease, opacity .25s ease;
    }

    .con_card .con_photo {
        height: 400px;
    }

    .con_card .con_photo .con_details .con_no {
        text-align: center;
    }
}

@media only screen and (max-width: 380px) {
    .con_card {
        margin-left: 1%;
    }
}

@media only screen and (max-width: 360px) {
    .con_main .con_inner {
        width: 95%;
    }

    .con_card {
        margin-left: 0;
    }
}


/*--------------------------------
	ページ＿会社情報
--------------------------------*/
/**代表挨拶*/
.greeting {
    width: 100%;
    max-width: 1000px;
}

.greeting_l,
.greeting_r {
    display: table-cell;
    vertical-align: top;
}

.greeting_l {
    width: 680px;
}

.greeting_l p {
    padding: 10px;
    font-size: 1rem;
    line-height: 2;
    text-align: left;
}

.greeting_r {
    width: 300px;
}

.greeting_r .img01 {
    width: 100%;
}

.greeting_r p {
    font-weight: bold;
}

.vision p {
    font-size: 1.2rem;
    line-height: 2.5;
}

.vision .box_brackets {
    width: 500px;
    margin: 0 auto;
}

.vision .box_b_img {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    margin-top: 100px;
}

.vision .box_b_img img {
    width: 100%;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {

    .greeting_l,
    .greeting_r {
        display: block;
        width: 90%;
        margin: auto;
    }

    .greeting_r .img01 {
        width: 75%;
        margin-top: 30px;
    }

    .greeting_r p {
        font-size: 0.9rem;
    }

    .vision .box_brackets {
        width: 90%;
    }

    .con_text2.vision p {
        padding-bottom: 5px;
    }
}

/**３つのスタンダード*/
.pc_qsc {
    display: block;
}

.smp_qsc {
    display: none;
}

.pc_qsc .con_card .con_description h2 {
    text-align: center;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .maker_list {
        justify-content: center;
    }

    .pc_qsc {
        display: none;
    }

    .smp_qsc {
        display: block;
    }
}

@media only screen and (max-width: 380px) {
    .con_main .con_inner p.std_no {
        text-align: center;
        font-size: 1.5rem;
    }

    .greeting_l p {
        font-size: 0.85rem;
    }

    .con_text2.vision p {
        font-size: 1.1rem;
    }
}

@media only screen and (max-width: 360px) {
    .con_text2.vision p {
        font-size: 0.95rem;
    }
}

/**事業内容*/
.des_link {
    width: 90%;
    max-width: 1000px;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
}

.des_link_box01,
.des_link_box02,
.des_link_waku {
    display: table-cell;
}

.des_link_card {
    position: relative;
    flex: 1 1 100%;
    width: 150px;
    height: 300px;
    margin: 30px 10px;
    padding: 10px;
}

.des_link_card::before,
.des_link_card::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.38s ease-in-out, transform 0.35s ease-in-out;
}

.des_link_card::before {
    transform: scale3d(0, 1, 1);
    transform-origin: left top;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
}

.des_link_card::after {
    transform: scale3d(1, 0, 1);
    transform-origin: right top;
    border-left: 1px solid #acacac;
    border-right: 1px solid #acacac;
}

.des_link_card:hover::before,
.des_link_card:hover::after,
.des_link_card:focus::before,
.des_link_card:focus::after {
    transform: scale3d(1, 1, 1);
    opacity: 1;
}

.des_link_card a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding-right: 28%;
    text-decoration: none;
    letter-spacing: 0.3em;
    box-sizing: border-box;
    font-feature-settings: "palt";
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.des_link_card a:before {
    position: absolute;
    display: block;
    content: "";
    right: -1px;
    bottom: -1px;
    width: 0px;
    height: 0px;
    transition: 0.15s;
    transition-delay: 0.3s;
    background-color: #999;
}

.des_link_card a:after {
    position: absolute;
    display: block;
    left: -1px;
    bottom: -1px;
    width: 0px;
    height: 0px;
    content: "";
    transition: 0.15s;
    transition-delay: 0.45s;
    background-color: #999;
}

.des_link_card .card_img {
    width: 100%;
    height: 100%;
    border: 0;
    vertical-align: middle;
    box-sizing: border-box;
}

.des_link_card .card_img a {
    color: #333;
}

.des_link_card .card_img span {
    /*    background-color: #fff;*/
    color: #fff;
}

.des_link_card .card_img#des01 {
    background-size: cover;
    background: url("../images/top/b-des_01.webp") no-repeat bottom center;
}

.des_link_card .card_img#des02 {
    background-size: cover;
    background: url("../images/top/b-des_02.webp") no-repeat bottom center;
}

.des_link_card .card_img#des03 {
    background-size: cover;
    background: url("../images/top/b-des_03.webp") no-repeat bottom center;
}

.des_link_card .card_img#des04 {
    background-size: cover;
    background: url("../images/top/b-des_04.webp") no-repeat bottom center;
}

.des_link_card .card_img#des05 {
    background-size: cover;
    background: url("../images/top/b-des_05.webp") no-repeat bottom center;
}

/**Edge*/
_:-ms-lang(x)::backdrop,
.des_link_card a {
    line-height: 1.7em;
    padding-right: 50%;
}

/**IE11*/
_:-ms-lang(x)::-ms-backdrop,
.des_link_card a {
    line-height: 1.7em;
    padding-right: 50%;
}

/**タブレット用*/
@media only screen and (max-width: 840px) {

    .des_link_box01,
    .des_link_box02 {
        display: block;
        overflow: hidden;
    }

    .des_link_box01 {
        padding-right: 0;
        padding-left: 15%;
        padding-bottom: 30px;
    }

    .des_link_box02 {
        padding-left: 28%;
    }
}

@media screen and (min-width: 768px) {
    .des_link_card {
        margin: 0 5px;
        flex-basis: calc(33.33% - (62px + 40px));
    }
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .des_link_waku {
        display: block;
    }

    .des_link_box01,
    .des_link_box02 {
        padding-left: 0;
        padding-bottom: 0;
    }

    .des_link_card {
        float: none;
        width: 90%;
        height: 115px;
        margin: 0 auto;
    }

    .des_link_card:last-of-type {
        margin: 0 auto;
    }

    .des_link_card a {
        /*        padding-right: 0;*/
        padding-top: 50px;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
        position: static;
        padding-left: 10px;
        padding-right: 10px;
    }

    .des_link_card:hover:before {
        width: 100%;
    }

    .des_link_card:hover:after,
    .des_link_card a:hover:before,
    .des_link_card a:hover:after {
        display: none;
    }

    .des_link_card .card_img#des01 {
        margin-bottom: 15px;
        background-size: cover;
        background: url("../images/top/b-des_smp01.webp") no-repeat bottom center;
    }

    .des_link_card .card_img#des02 {
        margin-bottom: 15px;
        background-size: cover;
        background: url("../images/top/b-des_smp02.webp") no-repeat bottom center;
    }

    .des_link_card .card_img#des03 {
        margin-bottom: 15px;
        background-size: cover;
        background: url("../images/top/b-des_smp03.webp") no-repeat bottom center;
    }

    .des_link_card .card_img#des04 {
        margin-bottom: 15px;
        background-size: cover;
        background: url("../images/top/b-des_smp04.webp") no-repeat bottom center;
    }

    .des_link_card .card_img#des05 {
        margin-bottom: 15px;
        background-size: cover;
        background: url("../images/top/b-des_smp05.webp") no-repeat bottom center;
    }
}

/* safariのみ */
.safari .des_link {
    /*    display: block;*/
}

.safari .des_link_card a {
    position: static;
    padding-left: 40%;
    padding-right: 40%;
    margin: auto;
    display: block;
}

.safari .des_link_card {
    position: static;
}

.safari .des_link_card::before,
.safari .des_link_card::after,
.safari .des_link_card a:before,
.safari .des_link_card a:after,
.safari .des_link_card a::before,
.safari .des_link_card a::after {
    content: none;
    position: static;
}

.safari .des_link_card a span {
    /*    color: aqua;*/
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .safari .des_link_card a {
        padding-left: 0;
        padding-right: 0;
    }
}

/**会社案内ダウンロード*/
.p_dl {
    margin-bottom: 20px;
}

.p_dl a,
.p_dl a:active,
.p_dl a:hover {
    font-weight: bold;
    color: #006ab7;
}

/**会社概要用table*/
table.center {
    margin-left: auto;
    margin-right: auto;
}

.company_table {
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 100px;
    border-collapse: collapse;
}

.company_table tr {
    border-bottom: solid 2px white;
}

.company_table tr:last-child {
    border-bottom: none;
}

.company_table th {
    position: relative;
    width: 30%;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
    background-color: #006ab7;
    vertical-align: middle;
}

.company_table th:after {
    position: absolute;
    display: block;
    top: calc(50% - 10px);
    right: -10px;
    width: 0px;
    height: 0px;
    content: "";
    border-left: 10px solid #006ab7;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.company_table td {
    width: 70%;
    padding: 10px 0;
    text-align: center;
    background-color: #eee;
}

.company_table .t_box {
    width: 80%;
    text-align: left;
    margin-left: 10%;
    margin-top: 10px;
}



/*et ie */
/*IE10以降に適用されるCSSハック（一応）*/
@media all and (-ms-high-contrast: none) {
    .company_table th {
        vertical-align: top;
        padding: 20px;
        border-bottom: solid 2px white;
        /*et ie*/
        position: static;
    }

    .company_table th:last-child {
        border-bottom: none;
        /*et ie*/
    }

    .company_table th:after {
        display: none;
    }
}

/*IE11だけに適用されるCSSハック*/
@media all and (-ms-high-contrast: none) {
    .company_table th {
        vertical-align: middle;
        padding: 20px;
        border-bottom: solid 2px white;
        /*et ie*/
        position: static;
    }

    .company_table th:last-child {
        border-bottom: none;
        /*et ie*/
    }

    .company_table th:after {
        display: none;
    }
}

.company_table .t_box p {
    line-height: 1.5;
}

.company_table .t_box .title {
    font-weight: bold;
    position: relative;
}

.company_table .t_box .title a {
    margin-left: 10px;
    background-color: #006ab7d4;
    border-radius: 50px;
    color: #fff;
    padding: 3px 16px;
    font-size: 10px;
    /* vertical-align: middle; */
    /* display: inline-block; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/**会社経歴用table*/
.career_table {
    width: 90%;
    border-spacing: 0;
}

.career_table th {
    padding: 10px 20px;
    vertical-align: middle;
    border-bottom: solid 2px #006ab7;
    line-height: 1;
    width: 20%;
}

.career_table td {
    line-height: 1.5;
    text-align: left;
    padding: 10px 0 0 30px;
    border-bottom: solid 2px #ddd;
    vertical-align: middle;
}

.career_table td.career_noline {
    border-bottom: none;
    width: 10px;
}

.career_wareki {
    font-size: 80%;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .career_table th {
        width: 100px;
        padding: 10px 0;
    }

    .career_table td {
        padding-left: 20px;
        font-size: 0.9rem;
    }

    .career_table td.career_noline {
        display: none;
    }

    .career_wareki {
        font-size: 100%;
    }
}

/**プライバシーポリシー用*/
#pp01 {
    margin-top: 200px;
}

.pp_list *,
.pp_list *:after,
.pp_list *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.pp_list {
    overflow-x: hidden;
    margin: 0 auto;
    color: #222;
    text-align: left;
}

.pp_list .pp_actab {
    padding: 20px 0;
    border-bottom: 1px dotted #ccc;
}

.pp_list label {
    font-size: 1.2em;
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 10px 0 48px;
    cursor: pointer;
}

.pp_list .pp_actab-content {
    position: relative;
    overflow: hidden;
    text-align: left;
    font-size: 1rem;
    height: 0;
    margin: 0 40px;
    padding: 0 14px;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    opacity: 0;
}

.pp_list .pp_actab-content h1 {
    position: relative;
    color: #222;
    margin: 30px auto;
    font-weight: bold;
    text-shadow: 0 0 2px white;
}

.pp_list .pp_actab-content h1:before {
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    width: 50px;
    height: 50px;
    background: #9de5ff;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -1;
}

.pp_list .pp_actab-content p.pp_text {
    margin-left: 3%;
    padding-bottom: 20px;
}

.pp_text a {
    font-weight: bold;
}

.pp_list .pp_actab-content .pp_ul {
    margin-top: 25px;
    margin-left: 3%;
    padding-bottom: 20px;
}

.pp_list .pp_actab-content .pp_ul ol {
    font-weight: bold;
}

.pp_list .pp_actab-content .pp_ul li {
    margin-top: 10px;
    margin-left: 3%;
}

.pp_list .pp_actab input[type="checkbox"]:checked~.pp_actab-content {
    height: auto;
    padding: 14px;
    opacity: 1;
}

.pp_list .pp_plus {
    font-size: 2.4em;
    line-height: 100%;
    position: absolute;
    z-index: 5;
    margin: 3px 0 0 10px;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
}

.pp_list .pp_actab input[type="checkbox"]:checked~.pp_plus {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.pp_list .pp_actab input[type="checkbox"] {
    display: none;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .pp_list .pp_actab-content {
        margin: 0 25px;
    }

    .pp_list .pp_actab-content h1 {
        font-size: 1rem;
        letter-spacing: 1px;
    }
}

/*沿革*/
.hokusho {
    /*    background-color: rgb(0,106,183,0.2);*/
    color: #006ab7;
}

.career_table .hokusho td {
    color: #006ab7;
}

.tujimo {
    /*    background-color: rgb(5,160,55,0.2);*/
    /* color: #05a037; */
}

.career_table .tujimo td {
    /* color: #05a037; */
}

.hokusho-s {
    color: #05a037;
}

.career_table .hokusho-s td {
    color: #05a037;
}

.hokusho-tujimo,
.career_table .hokusho-tujimo td {
    color: #eb5e00;
}

.enkaku-tyusyaku {
    margin: 0 auto;
    padding: 30px 0;
    text-align: left;
    width: 90%;
    line-height: 1.5;
}

.enkaku-tyusyaku p {
    padding-left: 20px;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .enkaku-tyusyaku p {
        padding-left: 0;
    }
}

/*--------------------------------
	ページ＿事業内容
--------------------------------*/
/* フェードイン用スタイル */
.fade-in {
    opacity: 0;
    /* 初期状態は透明 */
    transition: opacity 0.5s ease;
    /* フェードインの効果 */
}

.fade-up {
    opacity: 0;
    /* 初期状態で透明 */
    transform: translateY(1.389vw);
    /* 初期位置を下に設定 */
    transition: opacity 0.6s ease, transform 0.6s ease;
    /* アニメーション設定 */
}

@media (min-width: 1440px) {
    .fade-up {
        opacity: 0;
        /* 初期状態で透明 */
        transform: translateY(20px);
        /* 初期位置を下に設定 */
        transition: opacity 0.6s ease, transform 0.6s ease;
        /* アニメーション設定 */
    }
}

.fade-up.active {
    opacity: 1;
    /* フェードイン時に不透明にする */
    transform: translateY(0);
    /* 位置を元に戻す */
}

.container-medium {
    width: 100%;
}

.description {
    width: 100%;
}




.title-en {
    font-family: "Montserrat", sans-serif;
    color: #26499d;
    font-size: 14px;
    margin-bottom: 1.111vw !important;
}

.title-jp {
    font-weight: 600;
    line-height: 1.8;
    font-size: 40px;
    margin-bottom: 64px;

    /* font-family: var(--font-main); */
}

.what-we-do .description p {
    font-size: 20px;
    line-height: 2.3;
    margin-bottom: 4.444vw;
    /* max-width: 879px; */
}

.what-we-do .image {
    /* margin-top: 150px; */
}

.swipe-container {}

.swipe-container .pc_pic {
    /* display: block; */
    width: 100%;
    height: auto;

}

.swipe-icon {
    display: none;
}

.our-role {
    background-color: #f8f6f5;
    /* margin: 0 auto 130px; */
    /* padding: 50px auto; */
    padding-top: 50px;
    padding-bottom: 150px;
}

.our-role .image {
    max-width: 1000px;
    margin: 50px auto;
    /* padding: 50px auto; */
}

.our-role h3 {
    color: #3A3B3C;
    text-align: center;
    /* font-family: "kozuka-gothic-pr6n", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
    font-size: 28px;
    margin-bottom: 40px;
    font-weight: 900;
}

.our-role-description {
    display: flex;
    justify-content: center;
    margin: 80px auto 50px;
    padding: 40px 30px;
    font-size: 20px;
    line-height: 2;
    background-color: #ffffff;
}

.introduction_slider {}

/* スライダー全体 */
.css-carousel-slider {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    /* margin-bottom: 100px; */
}

/* スライドラップ */
.css-carousel-slider .slide-wrap {
    display: flex;
    width: calc(3180px * 5);
    /* スライド数+1 */
    animation: slide-loop 240s linear infinite;
}

/* 各スライド */
.css-carousel-slider .slide {
    width: 3180px;
    flex-shrink: 0;
}

/* 画像のサイズ調整 */
.css-carousel-slider .slide img {
    width: 3180px;
    height: 300px;
    /* スライダーの高さに合わせる */
    object-fit: cover;
}

/* アニメーション */
@keyframes slide-loop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-3180px * 4));
    }
}

.Whats-Our-Strengths {
    background: #2e6da4;
    background-color: var(--rec-bg-3-color);
    box-shadow: 0px 10px 40px rgba(91, 75, 31, 0.1);
    border-radius: 16px;
    padding: 64px 80px;
    margin-top: -40px;
    margin-bottom: 120px;
    position: relative;
}

.message-description {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

.message-description .title {
    width: 400px;
}

.message-description .title img {
    width: 400px;
}

.message-description .text {
    width: 500px;
}

.message-description .text h3 {
    font-size: 32px;
    margin-bottom: calc(32px * 1.2);
}

.message-description .text p {
    font-size: 20px;
    line-height: 1.8;
}

.message-description .num {
    /* font-family: "kozuka-gothic-pr6n", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
    width: fit-content;
    padding: 8px 24px;
    background-color: #26499d;
    color: #fff;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 32px;
}

.introduction-end h2 {
    font-size: 28px;
    text-align: center;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .container-medium {
        width: 100vw;
        /* padding: 0 6.154vw; */
        /* margin: 0 20px; */
    }

    .description {
        width: 90%;
        margin: auto;
    }

    .title-jp {
        font-size: 6.154vw;
        margin-bottom: 16.41vw;
    }

    .what-we-do .description p {
        font-size: 4.103vw;
        max-width: 100%;
    }

    .what-we-do .image {
        /* width: 90%;
        margin: 100px auto; */
    }

    .our-role {
        padding-top: 30px;
        padding-bottom: 30px;
        margin-top: 50px;
    }

    .our-role .image {
        margin: 30px auto;
    }

    .our-role h3 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .swipe-container {
        overflow-x: auto;
        white-space: nowrap;
        position: relative;
        padding: 0 10px 20px;
    }

    .swipe-container .pc_pic {
        /* width: 800px; */
        max-width: none;
        display: block;
    }

    .our-role-description {
        margin: 30px 20px 50px;
        padding: 40px 20px;
        font-size: 4.103vw;
    }

    .what-we-do .image h3 {
        font-size: 22px;
    }

    .Whats-Our-Strengths {
        width: 100vw;
        border-radius: 4.103vw;
        padding: 16.41vw 0;
        margin-top: -10.256vw;
        margin-bottom: 30.769vw;
        position: relative;
        /* width: 100%; */
        margin-left: 0;
        margin-right: 0;
        box-shadow: none;
    }

    .message-description {
        flex-wrap: wrap-reverse;
    }

    .message-description.wrap-reverse {
        flex-wrap: wrap;
    }

    .message-description {
        /* padding: 2.051vw 6.154vw; */
        margin-bottom: 15vw;
    }

    .message-description .text h3 {
        font-size: 6.154vw;
    }

    .message-description .text p {
        font-size: 4.103vw;
    }

    .message-description .title {
        width: 100%;
    }

    .message-description .title img {
        width: 100%;
    }

    .message-description .text {
        width: 100%;
        margin-bottom: 20px;
    }

    .introduction-end h2 {
        font-size: 5vw;
    }
}

/*--------------------------------
	ページ＿リクルート
--------------------------------*/
/* フェードイン */
/* 初期状態（非表示） */
.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}

/* on クラスが付いたときに表示（フェードイン） */
.scroll_up.on {
    transform: translateY(0);
    opacity: 1;
}

.scroll_up_2 {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}

/* on クラスが付いたときに表示（フェードイン） */
.scroll_up_2.on {
    transform: translateY(0);
    opacity: 1;
}

.timing02 {
    transition-delay: 0.2s;
}

.timing03 {
    transition-delay: 0.4s;
}

.timing04 {
    transition-delay: 0.6s;
}

.timing05 {
    transition-delay: 0.8s;
}

/* ファーストビューアニメーション */

/* 全画面動画スタイル */
#video {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    background-color: white;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 999999;
}

#video-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    background-color: white;
    transform: translate(-50%, -50%);
    z-index: 999999;
}

.iphone #video-container {
    display: none;
}

#image-container {
    display: flex;
    /* コンテンツを中央に配置 */
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: calc(100vh - 64px);
    /* 画像の高さを指定 */
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999998;
    /* 動画の下に表示 */
}

#image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 3s ease-in-out;
}

.con_recruit #image {
    opacity: 0;
}

/* h_conのフェードイン */
#h_con {
    transition: opacity 2s ease-in-out;
}

#recruit #image-container {
    height: 100vh;
}

#recruit #h_con {
    z-index: 1000;
    position: absolute;
}

/* スマホ用スタイル */
@media only screen and (max-width: 767px) {
    #h_con {
        opacity: 1;
    }

    #video {}

    #video-container {
        transform: translate(-50%, -50%);

    }
}

/* スマホ用スタイル */
@media only screen and (max-width: 767px) {
    #video {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 100vh;
        background-color: white;
        object-fit: cover;
        transform: translate(-50%, -50%);
        z-index: 999999;
        /* 動画を最前面に表示 */
    }

    #video-container {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 100vh;
        background-color: white;
        transform: translate(-50%, -50%);
        z-index: 999999;
        /* 動画を最前面に表示 */
    }

    #recruit #image-container {}

    #h_con {
        display: block;
    }

    #recruit #h_con {
        transition: opacity 1s ease;
    }
}

/* スマホサイズ以下でのビデオ終了後の表示 */
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    #video-container.fade-out~#image-container {
        display: flex;
        /* ビデオが終了したら画像を表示 */
    }

    #video-container.fade-out~#h_con {
        display: block;
        /* ビデオが終了したらヘッダーを表示 */
    }
}

@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    #image-container {
        /* height: calc(100vh - 64px); */
    }
}

/* ファーストビューアニメーションここまで */

.rec_box {
    display: flex;
    justify-content: center;
    column-gap: 30px;
}

.rec_item {
    width: 50%;
    text-align: center;
}

.rec_item:nth-child(1) {
    width: 250px;
}

.rec_item:nth-child(2) {
    width: auto;
    display: grid;
    place-content: center;
    place-items: center;
}

.rec_item div:nth-child(2) {
    padding: 0 30px;
}

#rec_body .con_text .rec_item div:nth-child(2) p {
    /* font-family: "kozuka-mincho-pr6n", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
        "Hiragino Mincho Pro", "メイリオ", "MS P明朝", "MS PMincho", serif; */
    font-size: 22px;
}

#rec01 .rec_item:nth-child(2) {
    writing-mode: vertical-rl;
}

.rec_item img {
    max-width: 300px;
    width: 80%;
    padding-bottom: 30px;
}

.rec_img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    /* background-image: url("../images/contents/rec/rec_01.webp"); */
    background-color: #ffffff;
    background-position: 50% 50%;
    background-size: cover;
    margin: auto;
}

#rec01 .rec_item:nth-child(2) img {
    padding-bottom: 64px;
    padding-left: 30px;
}



/**スマホ用*/
@media screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    #rec01 .rec_item:nth-child(2) {
        width: 100%;
    }

    #rec_body .con_text .rec_item div:nth-child(2) p {
        font-size: 20px;
        max-width: none;
        width: 100%;
    }
}

.rec_mm {
    width: 250px;
    height: 250px;
}

@media screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .rec_mm {
        margin-top: 50px;
    }
}

.rec_item p {
    text-align: left;
    line-height: 1.5;
    font-size: 100%;
    padding: 0;
}

p.rec_name {
    padding-top: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
}

#rec02 {
    text-align: center;
    width: 100%;
    min-height: 700px;
    background-color: var(--rec-bg-3-color);
    margin: 0 auto;
    padding-bottom: 50px;
}


/* -------------------------------- */
.to_interview {
    position: relative;
    margin: auto;
    width: 40%;
    height: 106.5px;
    max-width: 480px;
}

.to_interview:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 106.5px;
    max-width: 480px;
    top: 0;
    left: 0;
    background: url("../images/contents/rec/to_interview.webp") no-repeat center center;
    background-size: contain;
    pointer-events: none;
    /* クリックを無視 */
    border-radius: 9999px;
    transition: 0.5s;
}

.to_interview:hover:after {
    box-shadow: 0 16px 20px -8px rgba(0, 0, 0, 0.4);
    background: url("../images/contents/rec/to_interview_h.webp") no-repeat center center;
    background-size: contain;
    transition: 0.5s;
}

.to_interview a {
    display: block;
    width: 100%;
    height: 100%;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .to_interview {
        width: 80%;
    }
}

#rec02_1 {
    text-align: center;
    width: 100%;
    background-color: #fff;
    margin: 0 auto;
    padding-bottom: 50px;
}

.day1_box {
    width: 100%;
    max-width: 1080px;
    margin: auto;
    padding-bottom: 100px;
}


.day1 {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
}

.day1 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 607.5px;
    aspect-ratio: 16 / 9 !important;
    /* min-height: calc(100vw * 9 / 16); */
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .day1_box {}

    .day1 {
        width: 90%;
        margin: auto;
    }

    .day1 iframe {
        min-height: calc(90vw * 9 / 16);
    }
}

#rec03 {
    /* margin-top: 100px; */
    padding-top: 100px;
    padding-bottom: 100px;
    width: 100%;
    background-color: var(--rec-bg-3-color);
}

h2.rech2,
#rec03 h2.rech2 {
    font-size: 26px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.3em;
    position: relative;
    display: inline-block;
    padding: 0 55px;
    color: black;
    margin-bottom: 50px;
}

h2.rech2:before,
h2.rech2:after,
#rec03 h2.rech2:before,
#rec03 h2.rech2:after {
    content: "";
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: black;
}

h2.rech2:before,
#rec03 h2.rech2:before {
    left: 0;
}

h2.rech2:after,
#rec03 h2.rech2:after {
    right: 0;
}

.rec_ttl {
    display: grid;
    place-content: center;
    background-color: var(--rec-bg-2-color);
    /* max-width: 1200px;
    margin: auto; */
}

.rec_ttl h2 {
    color: var(--rec-txt-2-color);
    margin-top: 150px;
    margin-bottom: 150px;
    line-height: 1.5;
    /* font-size: 6vw; */
}

.rec_ttl h2.rech2:before,
.rec_ttl h2.rech2:after {
    /* background-color: var(--rec-txt-2-color); */
}

#rec02_box {
    /* position: absolute; */
    top: 250px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 100px;
    column-gap: 10px;
    justify-content: space-between;
    margin: auto;
    padding-bottom: 80px;
}

#rec02_box .rec_box {
    width: 21%;
    min-width: 250px;
    align-items: center;
    display: block;
    height: 100%;
    background-color: #fff;
    padding: 50px 20px 20px;
    border-radius: 16px;
}

#rec02_box .rec_box a {
    color: #333;
}

#rec02_box .rec_box .rec_item {
    width: 100%;
    display: grid;
    place-items: baseline;
    background-color: #fff;
    border-radius: 16px 16px 0 0;
}

#rec02_box .rec_img {
    width: 252px;
    height: 252px;
    /* width: 100%; */
    /* height: revert-layer; */
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

#rec02_box .rec_img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    transition: transform 0.3s ease;
}

#rec02_box .rec_img:hover::before {
    transform: scale(1.1);
}

#rec02_box .rec_name {
    /* text-align: left; */
    font-weight: bold;
    border-bottom: 3px solid 006ab7;
    padding: 0 0 10px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#rec02_box .rec_box .rec_text {
    width: 100%;
    line-height: 1.8;
    font-size: 16px;
    background: #ffffff;
    border-radius: 0;
    min-height: 140px;
    padding: 30px 0;
    /*1015*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

#rec04 .btn_area {
    text-align: center;
}

/* 社員画像 */

#rec02_box .rec_img.rec_eigyo::before {
    background-image: url("../images/contents/rec/emp_eigyo.webp");
}

#rec02_box .rec_img.rec_soumu::before {
    background-image: url("../images/contents/rec/emp_soumu.webp");
}

#rec02_box .rec_img.rec_gyoumu::before {
    background-image: url("../images/contents/rec/emp_gyoumu.webp");
}

#rec02_box .rec_img.rec_souko::before {
    background-image: url("../images/contents/rec/emp_souko.webp");
}

.recruit_main smp_br {
    display: none;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {

    .rec_ttl h2 {
        font-size: 6vw;
        margin-bottom: 100px;

    }

    .recruit_main smp_br {
        display: inline-block;
    }

    #rec01 .rec_item:nth-child(2) {
        writing-mode: horizontal-tb;
    }

    .rec_box {
        flex-wrap: wrap;
    }

    .rec_item:nth-child(1),
    .rec_item:nth-child(2) {
        width: 90%;
    }

    .rec_item div:nth-child(2) {
        padding: 0;
    }

    .rec_item div:nth-child(2) p {
        max-width: 300px;
    }

    #rec02 {
        min-height: 2150px;
    }

    #rec02_box {
        justify-content: center;
        row-gap: 50px;
    }

    #rec02_box .rec_box {
        flex-wrap: wrap;
        width: 75%;
    }

    .rec01_bg .rec_box {
        padding: 0;
    }

    #rec02_box .rec_name {
        text-align: left;
        /* margin-top: 20px; */
        /* margin-bottom: 20px; */
        padding: 0 10px 10px;
    }

    #rec02_box .rec_box .rec_item {
        width: 100%;
        /* place-items: center; */
    }

    .rec_item p {
        /* max-width: 250px; */
        display: block;
        margin: auto;
        padding: 0 10px 20px;
    }

    p.rec_name {
        margin-bottom: 50px;
        padding-top: 20px;
    }

    #rec02_box .rec_img {
        height: 252px;
    }
}

/*社員インタビュー*/

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {}

@media only screen and (max-width: 380px) {}

@media only screen and (max-width: 360px) {}

/*採用情報*/
.rech2_box {}

.btn_box {
    display: flex;
    justify-content: space-between;
}

.btn_box a {
    display: inline-block;
}

a.btn_12 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    text-decoration: none;
    max-width: 120px;
    width: 100%;
    /* margin: auto; */
    padding: 1rem 4rem 1rem 3rem;
    font-weight: bold;
    background: #006ab7;
    color: #fff;
    border-radius: 10px;
    position: relative;
    transition: 0.5s;
    min-height: 18px;
}

a.btn_12:hover {
    box-shadow: 0 16px 20px -8px rgba(0, 0, 0, 0.4);
    background: #006ab7a3;
}

a.btn_12::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

.rec_detail {
    padding: 100px 0;
    /* セクションのコンテンツにパディングを追加 */
    margin: 0 auto;
    /* ヘッダーの高さ分のマージンを追加 */
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

.rec_detail h3,
.rec_detail iframe {
    max-width: 1000px;
    width: 100%;
    margin: auto;
}

.rec_detail div {}

.rec_detail h3 {
    margin: 0;
}

@media screen and (max-width: 768px) {
    .rec_detail {
        width: 95%;
    }

    /* スマホ版の追加スタイル */
    .rec_detail::before {
        content: "";
        display: block;
        height: 100px;
        /* ヘッダーの高さ */
        margin-top: -100px;
        /* 上方向にマージンを引く */
        visibility: hidden;
    }
}

.rec_detail h3 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    text-decoration: none;
    width: 120px;
    /* margin: auto; */
    padding: 1rem 4rem 1rem 3rem;
    font-weight: bold;
    background: #fff;
    border: solid 1px #006ab7;
    color: #006ab7;
    border-radius: 10px;
    position: relative;
    transition: 0.5s;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .btn_box {
        /* flex-wrap: wrap; */
    }

    a.btn_12 {
        /* font-size: 80%; */
        line-height: 1.2;
        padding: 1rem 1.5rem 1rem 1rem;
        width: auto;
    }

    a.btn_12::before {
        margin-right: 5px;
    }

    .rec_detail h3 {
        width: fit-content;
    }
}

/*採用情報_テーブル*/
.p_rec_box {
    width: 100%;
    margin-top: 50px;
    /* margin-bottom: 100px; */
}

.p_rec_box .table01 {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    /*	box-shadow: 2px 2px 4px gray;*/
    margin: auto;
}

.p_rec_box .table01 tr {
    cursor: pointer;
    border-bottom: solid 1px #eee;
}

.p_rec_box .table01 tr:hover {
    background-color: #d4f0fd;
}

.p_rec_box .table01 th,
.p_rec_box .table01 td {
    height: auto;
    min-height: 120px;
    /*  	padding: 20px auto;*/
    text-align: center;
    vertical-align: middle;
}

.p_rec_box .table01 th {
    width: 40%;
    max-width: 200px;
    padding: 10px 15px;
    text-align: center;
}

.p_rec_box .table01 td {
    width: auto;
}

.p_rec_box .table01 td:has(> p:empty) {
    display: none;
}

.p_rec_box .table01 td p {
    text-align: left;
    padding-left: 10%;
    margin: 20px auto;
    line-height: 1.5;
}

.p_rec_box .table01 td p.remarks {
    font-size: 0.8rem;
}

.p_rec_box .table01 th .icon {
    width: 70px;
    height: 70px;
    color: #fff;
    padding-top: 18px;
    margin: 15px auto;
    text-align: center;
    font-size: 2rem;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #006ab7;
}

.entry_btn {
    margin: auto;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .p_rec_box {
        margin-top: 0;
    }

    .p_rec_box .table01 {
        width: 95%;
    }

    .p_rec_box .table01 th p {
        text-align: center;
        font-size: 0.9rem;
    }

    .p_rec_box .table01 td p {
        font-size: 0.9rem;
        padding-left: 1%;
    }

    .sugu-container {
        /*20230925*/
        padding: 0;
    }

    .p_rec_box .table02 th {
        width: auto;
    }
}

@media screen and (max-width: 35.499em) {
    .sugu-container {
        padding: 0;
    }
}

/*cms フレーム対応*/
#sub1,
#sub2 {
    border: none;
}

/*リクルート外部リンク*/
.external_links {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.external_links h4 {
    font-size: 22px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.3em;
    position: relative;
    display: inline-block;
    padding: 0 55px;
    color: black;
    margin-bottom: 50px;
    line-height: 1.5;
}

.external_links .btn_area {
    display: flex;
    gap: 30px;
    padding-top: 50px;
}

.external_links a {
    width: 18%;
    /* display: inline; */
}

.external_links a:hover {
    filter: opacity(0.5);
}

.external_links .link_btn {
    display: inline-block;
    cursor: pointer;

    line-height: 1.4rem;
    user-select: none;
    border-width: 0;
    border-style: solid;
    background: #fff;
    color: #006ab7;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s, transform 0.2s;
    outline: none;
    border: 1px solid #006ab7;
    border-radius: 0;
    width: 100%;
    height: 100%;
    max-height: 2.2rem;
    padding: 1rem 0;
    margin: 0;
    font-size: 1rem;
}

.external_links .link_btn:hover {
    transform: none;
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .external_links .btn_area {
        flex-wrap: wrap;
        justify-content: center;
    }

    .external_links a {
        width: 90%;
    }

    .external_links .link_btn {
        width: 100%;
        height: 70px;
        font-size: x-large;
    }
}

/* 社内イベント */
#rec05 {
    text-align: center;
    width: 100%;
    /* position: relative; */
    min-height: 700px;
    /* background-color: var(--rec-bg-3-color); */
    background-color: #fff;
    margin: 0 auto;
    padding-bottom: 130px;
}

#rec05 h3 {
    font-size: 26px;
    /* font-size: 6vw; */
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.3em;
    position: relative;
    display: inline-block;
    padding: 0 40px;
    color: black;
    margin-top: 100px;
    margin-bottom: 50px;
    line-height: 1.5;
}

#rec05 .rec_ttl p {
    line-height: 2;
    padding: 0 30px;
}

/* 共通スタイル */
.event-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px auto;
    width: 100%;
    max-width: 1200px;
}

.event {
    margin: 10px;
    text-align: center;
}

.event img {
    width: 100%;
    height: auto;
    max-width: 200px;
}

.event-container p {
    padding: 5px 0;
}

/* PC版スタイル */
@media (min-width: 768px) {
    .event-container {
        flex-direction: row;
    }

    .event {
        flex-basis: 15%;
    }
}

/* スマホ版スタイル */
@media (max-width: 767px) {
    .event-container {
        /* flex-direction: column; */
        /* margin: 0 10px; */
    }

    .event {
        flex-basis: 45%;
        margin: 5px auto;
    }

    #rec05 p {
        text-align: left;
    }

    #rec05 h3 {
        letter-spacing: normal;
        padding: 0 10px;
    }
}

/*--------------------------------
    リクルートメニュー
--------------------------------*/

/* PC専用の要素Aを最初は非表示にする */
.rec_toggleWrap,
#rec_btn {
    display: none;
}

/* スマホ表示時に要素Aを非表示にする */
@media (max-width: 768px) {

    .rec_toggleWrap,
    #rec_btn {
        display: none;
        /* スマホでは表示しない */
    }
}

/* PC表示時に要素Aを表示 */
@media (min-width: 769px) {

    .rec_toggleWrap,
    #rec_btn {
        display: block;
        /* PCでは表示 */
    }
}

.rec_toggleWrap {
    position: fixed;
    width: 150px;
    height: 85px;
    right: 30px;
    bottom: 140px;
    background: #3c76e4;
    /*3c76e4 27a0a2*/
    z-index: 9999;
    /* border-radius: 5px; */
    padding: 0;
    filter: drop-shadow(0px 0px 3px #333);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.rec_toggleWrap:hover {
    background: #759fea;
}

.rec_toggleWrap button {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}

.rec_toggleWrap button {
    width: 100%;
    height: 100%;
    /* font-family: "メイリオ", "Meiryo", sans-serif; */
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    font-size: 120%;
    line-height: 1.5;
}

.rec_menu_inner {
    position: fixed;
    top: 0;
    right: -30%;
    width: 30%;
    height: 100%;
    background-color: rgba(0, 89, 255, 0.5);
    /* 背景色と不透明度の設定 */
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
    z-index: 99999;
    overflow-y: auto;
    padding-top: 150px;
    text-align: center;
    display: none;
    opacity: 0;
    /* 初期状態で非表示 */
    transition: opacity 0.3s ease;
    /* フェードイン用 */
    color: #fff;
}


.rec_menu_inner.active {
    display: block;
    opacity: 1;
}

.rec_menu_inner .recmenu_ttl {
    /* font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro",
        "Hiragino Kaku Gothic Pro", sans-serif; */
    text-decoration: underline;
    color: #3b77e2;
    color: #fff;
    font-size: 40px;
    margin: auto;
    display: inline-block;
}

.rec_menu_inner ul {
    padding: 50px 0px;
    list-style: none;
    margin: auto;
    width: 100%;
}

.rec_menu_inner ul li {
    position: relative;
    padding: 20px 10px 20px 50px;
    text-align: left;
    color: #3b77e2;
    /* color: #fff; */
    /* margin-bottom: 10px; */
}

.rec_menu_inner ul li::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    width: 0.4em;
    height: 0.4em;
    border-bottom: 3px solid #3b77e2;
    border-right: 3px solid #3b77e2;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    text-shadow: 1px 1px 2px #26499d;
}

.rec_menu_inner ul li:hover {
    /* background-color: #3b77e2; */
    background-color: rgba(59, 119, 226, 0.8);
    /* background-color: #759fea; */
    color: #fff;
}

.rec_menu_inner ul li:hover::before {
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
}

.rec_menu_inner ul li:hover a {
    color: #fff;
}

.rec_menu_inner ul li a {
    /* font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro",
        "Hiragino Kaku Gothic Pro", sans-serif; */
    text-decoration: none;
    color: #3b77e2;
    color: #fff;
    font-size: 20px;
    /* font-weight: bold; */
    text-shadow: 1px 1px 2px #26499d;
}

.rec_menu_inner.active {
    left: 0;
}

/* 「とじる」ボタンのスタイル */
.rec_menu_inner .close_btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    border-radius: 5px;
    /* font-family: "メイリオ", "Meiryo", sans-serif; */
    font-size: 20px;
    color: #3b77e2;
    cursor: pointer;
    z-index: 10000;
    background-color: #fff;
    /* font-weight: bold; */
    padding: 10px 10px 5px;
    padding: 10px;
}

/* iphone pro max */
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .rec_toggleWrap {
        display: none;
    }
}

/* entryボタンのスタイル */
.rec_menu_entry {
    /* font-family: "メイリオ", "Meiryo", sans-serif; */
    width: 150px;
    /* background:#3b77e2; */
    background-color: #3c76e4;
    background-color: #27a0a2;
    border-radius: 5px;
    /* filter: drop-shadow(0px 0px 3px #3b77e2); */
    transition: 0.5s;
    color: #fff;
    padding: 10px 20px;
    font-weight: bold;
}

.rec_menu_entry a {
    color: #fff;
    line-height: 1.5;
    font-size: 120%;
}

.rec_menu_entry:hover {
    /* background: #3b77e2; */
    /* background: #64b5f6; */
    /* background-color: #ffb74d; */
    /* background-color: #64b5f6; */
    color: #fff;
    filter: drop-shadow(0px 0px 5px #0644af);
    background-color: #2fc3c5;
}

/* スマホ版スタイル */
@media (max-width: 767px) {

    #rec_menu,
    #rec_btn {
        display: none;
    }

    .rec_menu_inner ul li {
        padding: 10px 10px 10px 50px;
    }
}

/*--------------------------------
	リクルートボタン
--------------------------------*/
#rec_btn {
    position: fixed;
    width: 150px;
    height: 85px;
    right: 30px;
    bottom: 30px;
    background: #27a0a2;
    z-index: 9999;
    /* border-radius: 5px; */
    padding: 0;
    filter: drop-shadow(0px 0px 3px #333);
    transition: 0.5s;
}

#rec_btn a {
    /* font-family: "メイリオ", "Meiryo", sans-serif; */
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    font-size: 120%;
    line-height: 1.5;
}

#rec_btn:hover {
    background-color: #2fc3c5;
    border: none;
    transition: 0.5s;
}

#rec_btn::before {
    content: "";
    transform: rotate(45deg);
}

/**1000px以下の場合*/
@media only screen and (max-width: 999px) {
    #rec_btn {
        right: 5px;
        bottom: 20px;
    }
}

/**スマホの場合*/
@media only screen and (max-width: 428px) {

    #rec_btn,
    .rec_toggleWrap {
        display: none;
        /* bottom: 10px; */
        /* width: 100px; */
        /* height: 100px; */
    }

    #rec_btn a {
        /* font-size: 90%; */
    }

    .rec_menu_inner.active {
        width: 100%;
        height: calc(100vh - 154px);
        right: 0;
        top: 0;
        padding-top: 100px;
        /* background-color: rgba(0, 89, 255, 0.9); */
        background-color: rgba(38, 73, 157, 0.9);
    }
}

/*--------------------------------
	ページ＿お問い合わせ
--------------------------------*/
.con_contact h1 {
    height: 200px;
}

.contact_main {
    width: 1000px;
    margin: 0 auto;
    text-align: left;
}

/*メールフォーム*/
.contact_main form {
    margin: auto;
    width: 630px;
    text-align: left;
}

.contact_main .form-control,
.contact_main .form-add {
    display: block;
    width: 600px;
    height: 34px;
    padding: 6px 12px;
    color: #555;
    font-size: 14px;
    line-height: 1.42857143;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.contact_main .form-control_radio {
    display: block;
    width: 600px;
    height: 34px;
    padding: 10px 12px 6px;
    color: #555;
    font-size: 14px;
    line-height: 1.42857143;
    background-color: #fff;
    background-image: none;
    /* border: 1px solid #ccc; */
    /* border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; */
}

.contact_main select {
    margin-bottom: 12px;
}

.contact_main .form-control_radio input {
    margin-left: 10px;
    padding-top: 2px;
}

.contact_main .form-control_radio input:nth-child(1) {
    margin-left: 0px;
}

.contact_main .form-add {
    display: inline-block;
    width: 100px;
    margin-bottom: 10px;
}

.contact_main p {
    padding-bottom: 5px;
    font-weight: bold;
}

/*必須アイコン*/
.contact_main .need {
    width: 33px;
}

/*ボタン*/
.contact_main .form-group {
    margin-bottom: 15px;
    text-align: center;
    width: 630px;
}

.contact_main .btn {
    border: none;
    border-radius: 30px;
    padding-left: 30px;
    padding-right: 30px;
    text-transform: uppercase;
}

.contact_main .btn.btn-lg {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
}

.contact_main .btn.btn-primary {
    color: #fff;
    background: #006ab7;
    border: 1px solid #006ab7;
}

/**IE11 */
_:-ms-lang(x)::-ms-backdrop,
.con_contact h1 {
    height: 220px;
}

_:-ms-lang(x)::-ms-backdrop,
.ie-link .link_btn {
    width: 200px;
}

/**1000px以下*/
@media only screen and (max-width: 999px) {
    .contact_main form {
        width: 90%;
    }

    .contact_main .form-control {
        width: 93%;
    }

    .contact_main {
        width: 100%;
        margin-bottom: 100px;
    }
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .contact_main form {
        width: 100%;
    }

    .contact_main .form-control {
        width: 93%;
    }

    .contact_main .form-group {
        width: 93%;
    }
}

/*---------------
	ACCESS MAP
-----------------*/
.btn_area_pc {}

.btn_area_sp {
    display: none;
}

@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .btn_area_pc {
        display: none;
    }

    .btn_area_sp {
        display: block;
    }
}

/*営業所別アクセス_PC用*/
.pc_access {
    display: block;
}

/*営業所別アクセス_スマホ用*/
.smp_access {
    display: none;
}

.pc_office {
    margin-bottom: 70px;
}

*/

/*営業所名*/
.contact_main .pc_access .pc_office h3 {
    font-weight: bold;
    font-size: 1.2rem;
    margin: 10px 0;
}

.contact_main .com_img,
.contact_main .acces {
    display: table-cell;
    vertical-align: top;
}

.contact_main.com_img {
    width: 320px;
}

.contact_main .no-pic {
    width: 320px;
    height: 200px;
    background-color: #eee;
    text-align: center;
    line-height: 200px;
    font-size: 9.2rem;
    color: #666;
}

.smp_access .no-pic {
    display: block;
    width: 349px;
    height: 218px;
    background-color: #eee;
    text-align: center;
    line-height: 200px;
    font-size: 9.2rem;
    color: #666;
    margin: -10px -10px 0;
}

.contact_main .acces {
    width: 680px;
}

.contact_main .acces ul {
    margin: 10px;
    padding-left: 20px;
}

.contact_main .acces li {
    display: inline-block;
    /* width: 300px; */
    margin: 10px 0;
    width: 100%;
}

.contact_main .acces li p.com {
    margin-bottom: 5px;
    font-size: 1rem;
    font-weight: 900;
}

.contact_main .acces li p.tel {
    padding-left: 15px;
    margin-bottom: 5px;
}

.contact_main .acces li p.com a {
    /* margin-left: 20px;
    background-color: #3b77e2;
    border-radius: 50px;
    color: #fff;
    padding: 5px 16px;
    font-size: 0.9rem; */
}

/* はじ */
.contact_main .acces li {
    /* margin: 10px 0 0; */
}

.contact_main .acces li.com-map {
    /* display: flex;
    justify-content: space-between; */
}

.contact_main .acces li.com-map p {
    /* display: inline-block; */
}

.contact_main .acces li.com-map p a {
    /* margin-left: 20px;
    background-color: #3b77e2;
    border-radius: 50px;
    color: #fff;
    padding: 5px 16px; */
}

/*  */

.contact_main .map {
    width: 100%;
    max-width: 1000px;
}

.contact_main .map iframe {
    width: 100%;
    height: 300px;
    border: 0;
}

/*営業所別リンクカード(スマホ用)*/
.smp_office {
    margin-bottom: 70px;
}

.contact_main .smp_access a,
.contact_main .smp_access a:hover,
.contact_main .smp_access a:focus {
    color: #222;
}

.contact_main .smp_access .a_card-box {
    width: 80%;
    margin-left: 10%;
}

.smp_access .a_card-box .card {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    box-shadow: 10px 10px 0 #ccc;
    transform: translate(-4.5px, -4.5px);
    transition: box-shadow 0.3s, transform 0.3s;
}

.a_card-box .card:hover {
    transform: initial;
    box-shadow: 1px 1px 0 #ccc;
}

.smp_access .a_card-box .card .image {
    margin: -10px -10px 0;
}

.smp_access .a_card-box .card .image img {
    width: 100%;
    vertical-align: top;
}

.smp_access .a_card-box .card .text {
    margin: 10px;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.2;
    color: #222;
}

/**スマホ用営業所個別ページ*/
.smp_contact_main {
    width: 100%;
    margin-bottom: 70px;
}

.smp_contact_main img {
    width: 95%;
}

.smp_contact_main .no-pic {
    display: block;
    height: 200px;
    background-color: #eee;
    text-align: center;
    line-height: 200px;
    font-size: 9.2rem;
    color: #666;
}

.smp_contact_main .smp_caption {
    margin: 30px 0;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.5;
    border-bottom: dashed 2px #222;
}

.smp_contact_main .smp_address {
    margin: 0 auto;
}

.smp_contact_main .smp_address ul {
    /* margin-left: 7%; */
    margin: auto;
    text-align: left;
}

.smp_contact_main .smp_address li {
    margin: 20px 0;
}

.smp_contact_main .smp_address li.com {
    font-weight: bold;
}

.smp_contact_main .smp_address li p {
    margin-bottom: 8px;
}

.smp_contact_main .smp_address li p a {
    margin-left: 20px;
    background-color: #3b77e2;
    border-radius: 50px;
    color: #fff;
    padding: 4px 16px;
    font-size: 0.7rem;
}

.smp_contact_main .smp_map iframe {
    width: 100%;
    height: 300px;
    border: 0;
}

/*電話フローティングバナー(スマホ用)*/
.smp_bottom {
    position: fixed;
    display: none;
    width: 100%;
    max-width: 429px;
    left: 0px;
    bottom: 0px;
    text-align: center;
    z-index: 9999;
}

.smp_bottom .floating_tel01,
.smp_bottom .floating_tel02,
.smp_bottom .floating_tel03 {
    display: table-cell;
    height: 70px;
}

/*幅フル*/
.smp_bottom .floating_tel01 {
    width: 420px;
}

/*幅ハーフ*/
.smp_bottom .floating_tel02 {
    width: 210px;
}

/*幅トリプル*/
.smp_bottom .floating_tel03 {
    width: 140px;
}

/*電話ボタン*/
.smp_bottom .tel_btn {
    padding-top: 20px;
    padding-bottom: 10px;
}

.smp_bottom .tel_btn.red {
    /*背景：赤*/
    background-color: rgba(255, 0, 0, 0.7);
}

.smp_bottom .tel_btn.green {
    /*背景：緑*/
    background-color: rgba(0, 128, 0, 0.7);
}

.smp_bottom .tel_btn.orange {
    /*背景：橙*/
    background-color: rgba(234, 84, 4, 0.7);
}

.smp_bottom .tel_btn p {
    margin-bottom: 10px;
}

.smp_bottom .tel_btn p.small {
    font-size: 0.8rem;
}

.smp_bottom .tel_btn a,
.smp_bottom .tel_btn a:hover,
.smp_bottom .tel_btn a:focus {
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
}

.a_outer,
.a_inner {
    /*
    padding: 0;
    margin: 0 auto;
*/
}

/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .pc_access {
        display: none;
    }

    .smp_access {
        display: block;
    }

    /*    .a_card-box,*/
    /*
    .a_outer{
        padding-top: 100px;
    }
*/
    /*    .a_card-box a,*/
    /*
    .a_inner{
        padding-top: 80px;
        margin-top:-80px;
    }
*/
    .smp_bottom {
        display: block;
    }
}

@media only screen and (max-width: 380px) {
    .smp_bottom .floating_tel01 {
        width: 380px;
    }

    .smp_bottom .floating_tel02 {
        width: 190px;
    }

    .smp_contact_main .smp_address li p {
        font-size: 0.8rem;
    }

    .smp_bottom .tel_btn p {
        font-size: 0.95rem;
    }
}

@media only screen and (max-width: 360px) {
    .smp_bottom .floating_tel01 {
        width: 360px;
    }

    .smp_bottom .floating_tel02 {
        width: 180px;
    }
}

@media only screen and (max-width: 320px) {
    .smp_bottom .floating_tel01 {
        width: 320px;
    }

    .smp_bottom .floating_tel02 {
        width: 160px;
    }
}

/*----------------------
	エントリーページ
----------------------*/
.entry_main {
    width: 100%;
    max-width: 1000px;
}

.entry_main h2 {
    font-size: 2rem;
    font-weight: bold;
}

.entry_main .entry_text01 {
    font-size: 1rem;
}

.entry_main .entry_text02 {
    font-size: 1.1rem;
    font-weight: bold;
}

.entry_main h3 {
    position: relative;
    display: inline-block;
    padding: 20px 55px;
    font-size: 1.3rem;
    font-weight: bold;
}

.entry_main h3:before,
.entry_main h3:after {
    position: absolute;
    display: inline-block;
    content: "";
    top: 50%;
    width: 45px;
    height: 2px;
    border-top: solid 1px #006ab7;
    border-bottom: solid 1px #006ab7;
}

.entry_main h3:before {
    left: 0;
}

.entry_main h3:after {
    right: 0;
}

.entry_link .link_btn {
    width: 200px;
}

.entry_main .entry_tel,
.entry_main .entry_mailing,
.entry_main .entry_dl {
    margin: 70px auto;
}

.entry_main .entry_tel .entry_telfax {
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.entry_main .entry_mailing .entry_add {
    width: 400px;
    /*350px*/
    text-align: left;
    margin: 0 auto;
    margin-top: 15px;
}

.entry_main .entry_dl .entry_dlbtn {
    margin: 10px auto;
}

/* IE11 */
_:-ms-lang(x)::-ms-backdrop,
.entry_link .link_btn {
    width: 250px;
}

/*スマホ用*/
@media only screen and (max-width: 380px) {
    .entry_main h3 {
        font-size: 1.1rem;
    }
}

/*エントリーフォーム*/
.mailform {
    width: 680px;
    margin: 0 auto;
    margin-top: 50px;
}

.mailform .need {
    width: 33px;
}

.mailform dl {
    padding: 12px;
    margin-bottom: 5px;
    border-radius: 4px;
}

.mailform dt {
    display: table-cell;
    vertical-align: middle;
    width: 200px;
    text-align: right;
}

.mailform dd {
    display: table-cell;
    vertical-align: middle;
    width: 368px;
    padding-left: 8px;
}

.mailform dd input[type="text"],
.mailform dd input[type="tel"],
.mailform dd select,
dd textarea {
    width: 315px;
    max-width: 100%;
    font-family: inherit;
    padding: 7px 12px;
    font-size: 14px;
    background: #f4f4ff;
    border-radius: 4px;
    border: 1px solid #ddddea;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mailform dd input[type="radio"],
.mailform dd input[type="checkbox"] {
    box-shadow: none;
    border: 5px solid #ccc;
}

.mailform dd .nest {
    margin: 10px 0;
    padding-left: 45px;
}

.mailform dd textarea {
    resize: vertical;
    width: 350px;
    height: 120px;
    box-sizing: border-box;
}

.mailform dd input[type="file"] {
    margin: 5px auto;
}

.mailform .submit_area {
    margin-top: 30px;
}

.mailform .btn {
    border: none;
    border-radius: 30px;
    padding-left: 30px;
    padding-right: 30px;
    text-transform: uppercase;
}

.mailform .btn.btn-lg {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
}

.mailform .btn.btn-primary {
    color: #fff;
    background: #006ab7;
    border: 1px solid #006ab7;
    outline: none;
}

/*スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .entry_main .entry_tel p {
        width: 100%;
        text-align: center;
    }

    .entry_main .entry_mailing p.entry_text01 {
        width: 100%;
        text-align: center;
    }

    .mailform {
        width: 100%;
        text-align: left;
        margin-bottom: 70px;
    }

    .mailform dt,
    .mailform dd {
        display: block;
    }

    .mailform dt {
        text-align: left;
        padding-bottom: 10px;
    }

    .mailform dt,
    .mailform dd,
    .mailform dd textarea {
        width: 90%;
    }
}

/*----------------------
	メッセージページ
----------------------*/
#message_body {
    /* font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif; */

    overflow-y: auto;
}

#message_body .intro {
    margin: 0;
    padding: 0;
    background-color: #fff;
    width: 100%;
    height: 0;
    padding-top: 50%;
    position: relative;
}

#message_body .intro-img {
    width: 100%;
    height: 100%;
    background-image: url(../images/contents/message/recruit_message_top_03.webp);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}

#message_body .intro h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15%;
    z-index: 1000;
    width: auto;
}

.top_name {
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

#message_body #rec01 {
    height: calc(100vh - 80px);
    padding: 0;
}

.message_sec {
    padding: 50px 0 150px;
    height: fit-content;
    display: grid;
    padding-right: 300px;
    padding-left: 300px;
    width: 100%;
    max-width: 800px;
    overflow: hidden;
}

/* 人生 */
.jinsei {
    filter: opacity(0.2);
    margin-top: 100px;
    /* transform: translateY(-50px); */
    grid-area: 1 / 1;
}

.jinsei img {
    width: 90%;
    max-width: 200px;
}

/* テキスト */
.message_text {
    grid-area: 1 / 1;
    transform: translateY(250px);
    padding-left: 100px;
    /* font-family: "kozuka-mincho-pr6n", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
        "Hiragino Mincho Pro", "メイリオ", "MS P明朝", "MS PMincho", serif; */
    color: #333;
    width: 100%;
}

.message_text p {
    font-size: 26px;
    line-height: 2;
    text-align: left;
    margin-bottom: 50px;
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.message_scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}

.message_scroll_up.on {
    transform: translateY(0);
    opacity: 1;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}

.scroll_left.on {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    transform: translateX(0);
}




/**スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    #message_body {
        height: auto;
    }

    #message_body .intro {
        padding: 64px 0 0;
        height: calc(100vh - 64px);
    }

    #message_body .intro h2 {
        /* top: calc(64px + 10vh); */
        /* top: 120px; */
        top: 25%;
        left: 0;
        right: 0;
    }

    #message_body .intro h2 img {
        width: 90%;
        margin: auto;
    }

    #message_body .intro-img {
        /* height: 100%; */
        background-image: url(../images/contents/message/recruit_message_top_sp_03.webp);
        justify-content: start;
        background-size: contain;
    }


    .top_name {
        font-size: 1rem;
    }

    .message_sec {
        padding: 50px 0;
    }

    .jinsei {
        margin-top: 0;
        margin-right: 20px;
        transform: translateY(-10px);
        display: flex;
        justify-content: flex-end;
        align-items: start;
    }

    .jinsei img {
        max-width: 100px;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    #message_body #rec01 {
        height: fit-content;
        margin: 80px 0;
        /* flex-wrap: wrap; */
        flex-direction: column-reverse;
    }

    .message_photo {
        /* width: 100%; */
    }

    .message_img {
        padding: 0;
        height: calc(100vh - 80px);
    }

    .message_text {
        transform: translateY(0px);
        padding-left: 10%;
        padding-top: 20px;
        width: 100%;
    }

    .message_text p {
        font-size: 20px;
    }

    .message_img_box {
        /* text-align: left; */
        padding-top: 40px;
        padding-right: 20px;
    }

    .message_img img.jinsei_pc {
        height: 80vh;
    }

    .message_photo img.jinsei_pc {
        /* height: calc(100vh - 80px);
        width: auto; */
    }

    p.rec_name {
        margin-bottom: 5px;
        -webkit-text-stroke: 2px white;
        text-stroke: 2px white;
        paint-order: stroke;
    }

    /*----------------------------
scroll_left ｜左から出現
----------------------------*/
    .scroll_left {
        transform: translateX(0);
        opacity: 1;
        filter: alpha(opacity=100);
        -moz-opacity: 0;
    }

    .scroll_left.on {
        opacity: 1;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        transform: translateX(0);
    }
}

/*----------------------
	社員インタビューページ
----------------------*/
#interview_body section {
    /* font-family: "kozuka-gothic-pr6n", "Helvetica Neue", Arial,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
}

.intro {
    text-align: center;
    padding: 100px 0;
    background-color: #26499d;
}

.intro h1 {
    /* font-size: 2em; */
    /* color: #004080; */
    position: static;
    writing-mode: vertical-lr;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 20px 40px;
    background-color: #26499d;
}

.intro-catch {
    padding: 50px;
}

.intro-catch img {
    width: 100%;
    max-width: 1100px;
}

.intro-catch p {
    margin-top: 40px;
    font-size: 1em;
    color: #ffffff;
}

.interviews {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
}

.interview {
    padding-top: 100px;
}

.interview h2 {
    display: flex;
    justify-content: end;
    padding-right: 20px;
    margin-bottom: 20px;
}

.interview:nth-child(2n) h2 {
    justify-content: start;
    padding: 0 0 20px 20px;
}

.interview h2 img {
    width: 100%;
    max-width: 330px;
}

.interview_box {
    display: flex;
    background-color: #ebeff8;
    padding: 50px 0 50px 120px;
    column-gap: 80px;
    align-items: center;
}

.interview:nth-child(2n) .interview_box {
    flex-direction: row-reverse;
    padding: 50px 120px 50px 0;
}

.interview-img {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    width: 50%;
    max-width: 700px;
}

.interview-img .staff {
    display: block;
    width: 100%;
    max-width: 700px;
}

.interview-img .name {
    display: inline-block;
    text-align: right;
    margin: 40px 0 0 auto;
    padding: 30px 40px;
    background-color: #ffffff;
}

.interview:nth-child(2n) .interview-img .name {
    margin: 40px auto 0 0;
}

.name img {
    display: block;
    width: auto;
    height: auto;
    margin: auto;
    max-width: 200px;
}

.name img.name_l {
    max-width: 320px;
}

.name img.name_s {
    max-width: 180px;
}

.interview-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    /* text-align: left; */
    row-gap: 50px;
}

.interview-content div {
    text-align: left;
    width: 100%;
}

.interview-content h3 {
    margin-bottom: 15px;
}

.interview-content img {
    display: block;
    margin-left: 0;
    margin-right: auto;
    max-width: 420px;
}

.interview-content p {
    line-height: 1.7;
}

.entry {
    text-align: center;
    padding: 100px 0 0;
    /* background-color: #004080; */
    color: #fff;
    width: 100%;
}

.entry .entry-img {
    padding-top: 10px;
    padding-bottom: 60px;
}

.entry .entry-img img {
    margin: auto;
    width: 90%;
    max-width: 270px;
}

.btn_back {
    background-image: url("../images/contents/interview/entry_back.webp");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_back div {
    padding-top: 130px;
    padding-bottom: 130px;
}

.btn_area {
    margin-top: 30px;
    margin-bottom: 100px;
}

.entry-button {
    display: inline-block;
    margin-top: 20px;
    padding: 20px 70px;
    background-color: #fff;
    color: #26499d;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    border: 3px solid #26499d;
}

.entry-button i {
    margin-left: 20px;
}

.interview-greeting {
    text-align: center;
    /* padding: 50px auto 150px; */
    background-color: #26499d;
    color: #fff;
    width: 100%;
}

.interview-greeting img {
    width: 90%;
    max-width: 1000px;
    margin: 60px auto 150px;
}

.greeting_back {
    background-image: url("../images/contents/interview/interview-end-image.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* 画像全体が表示されるように */
    width: 100%;
    /* padding-top: 27.6%; */
    position: relative;
}

.greeting_back::before {
    content: "";
    display: block;
    padding-top: 27.6%;
}

/* Responsive Styles for Mobile */
@media (max-width: 768px) {
    .intro {
        padding-bottom: 50px;
    }

    .intro h1 {
        /* font-size: 1.5em; */
        max-width: 100%;
        width: 100%;
        padding: 00px;
    }

    .intro h1 img {
        width: 70%;
        margin-left: 10px;
        margin-bottom: 20px;
        /* margin: auto; */
    }

    .intro-catch {
        padding: 40px 10px;
    }

    .intro-catch img {
        width: 80vw;
        margin-bottom: 25px;
    }

    .intro-catch p {
        font-size: 1em;
        text-align: left;
        line-height: 2;
    }

    .interviews {
        padding: 0px;
    }

    .interview {
        flex-direction: column;
        align-items: center;
        padding-top: 50px;
    }

    .interview h2 {
        padding-right: 10px;
        padding-bottom: 10px;
        margin-bottom: 0;
    }

    .interview:nth-child(2n) h2 {
        padding: 0 10px 10px;
        justify-content: end;
    }

    .interview h2 img {
        width: 50%;
    }

    .interview_box,
    .interview:nth-child(2n) .interview_box {
        /* flex-wrap: wrap; */
        /* flex-direction: row-reverse; */
        column-gap: normal;
        padding: 0 10px 30px;
        flex-direction: column-reverse;
    }

    .interview-img {
        order: 1;
        width: 100%;
        height: auto;
    }

    .interview-img .name,
    .interview:nth-child(2n) .interview-img .name {
        margin: 20px auto 30px 0;
        padding: 20px 30px;
    }

    .name img {
        max-width: 120px;
    }

    .name img.name_l {
        max-width: 200px;
    }

    .name img.name_s {
        max-width: 120px;
    }

    .interview-content {
        width: 100%;
    }

    .interview-content img {
        width: 90%;
    }

    .entry .entry-img img {
        max-width: 180px;
    }

    .btn_back {
        background-image: url(../images/contents/interview/entry_back_sp.webp);
    }

    .btn_back div {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .greeting_back {
        background-image: url("../images/contents/interview/interview-end-image_sp.webp");
        padding-top: 35%;
    }

    .greeting_back::before {
        padding-top: 35%;
    }

    .interview-greeting img {
        margin: 60px auto;
    }
}

/*----------------------------
取扱メーカー
----------------------------*/
.product_title {
    margin-bottom: 20px;
    padding-bottom: 6px;
    border-bottom: 1px solid #006ab7;
    font-weight: bold;
    text-align: left;
    font-size: 1.3rem;
}

/*メーカーカテゴリ*/
.maker_list {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
}

.maker_list .con_card {
    width: 30%;
    margin: 4% 8% 100px;
}

/* メーカー名*/
.vision .product_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

.vision .product_flex a {
    width: 50%;
}

.product_flex_item {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px gray;
    background: #ffffff;
    color: #006ab7;
    text-align: left;
    width: 90%;
}

.product_flex_item p {
    line-height: 1.5;
}

.product_flex_item span {
    font-size: 80%;
    color: #b0b0b0;
    margin-left: 1em;
}

.maker_list a,
.product_grid a {
    color: #333;
}

.product_flex_item:hover {
    background-color: #006ab7;
    color: #fff;
}

.product_flex a:hover {
    color: #fff;
}

/*スマホ用*/
@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .product_title {
        margin-left: 10px;
        margin-right: 10px;
        font-size: 1.2rem;
    }

    .vision .product_flex {
        margin: 0 20px 0 0;
    }

    .vision .product_flex a {
        width: 95%;
    }
}

/*----------------------------
エコステージ
----------------------------*/
.ecostage {
    height: 1300px;
    width: 100%;
    position: relative;
    background: linear-gradient(rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.5)),
        url("../images/contents/company/con03_back.webp");
    background-repeat: no-repeat;
    background-size: cover;
    text-shadow: 0px 0px 10px #fff;
}

.ecostage .con_inner {
    background-color: rgba(255, 255, 255, 0.2);
    width: 800px;
}

.ecostage h3 {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.2em;
    color: #20334d;
    line-height: 1.4em;
    text-align: center;
    padding: 30px 0 20px;
    position: relative;
    margin: 0 auto;
}

.ecostage p {
    color: #333;
    padding: 10px;
    font-size: 1rem;
    line-height: 2;
}

.ecostage ol {
    list-style-type: decimal;
    width: 500px;
    margin: auto;
    text-align: left;
    line-height: 1.5;
    padding: 10px;
}

.ecostage ol li {
    margin-bottom: 10px;
}

.ecostage ol ol {
    list-style: none;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.2;
    list-style-type: lower-roman;
}

.ecostage ol ol::marker {
    font-weight: bold;
}

.ecostage ol ol ul {
    margin: 10px;
    list-style-type: disc;
}

.ecostage_img {
    margin: 30px auto;
    width: 500px;
    height: auto;
    display: flex;
    text-align: center;
    justify-content: space-around;
    align-items: flex-end;
    column-gap: 20px;
}

.ecostage_img>img {
    width: 200px;
    height: auto;
}

.ecostage_img_inn {
    display: inline;
}

.ecostage_img_inn>img {
    width: 100px;
    height: auto;
}

@media only screen and (max-width: 999px) {
    .ecostage .con_inner {
        width: 98%;
    }
}

@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    .ecostage {
        height: 1700px;
    }

    .ecostage .con_inner {
        width: 85%;
        padding: 10px;
    }

    .ecostage ol {
        width: 90%;
    }

    .ecostage .koudou_p {
        margin-left: 10px;
    }

    .ecostage ol li {
        text-align: left;
    }

    .ecostage p {
        font-size: 0.85rem;
        text-align: left;
    }

    .ecostage_img {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 30px;
    }
}

/*----------------------------
ひと目で分かるホクショー辻茂
----------------------------*/
#infographics {
    /* font-family: "kozuka-gothic-pr6n", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
    overflow-y: auto;
}

#infographics section {
    background: #26499d;
    color: #fff;
}

#infographics .intro {
    margin: 0;
    padding: 0;
    background-color: #fff;
    width: 100%;
    height: 0;
    padding-top: 50%;
    position: relative;
}

#infographics .intro-img {
    width: 100%;
    height: 100%;
    background-image: url(../images/contents/infographics/recruit_infographics_top.webp);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}

#infographics .intro-img::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#infographics .intro h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15%;
    z-index: 1000;
    width: auto;
    filter: drop-shadow(0px 0px 110px #534B50);
}

.infographics_text {
    padding: 150px 0 30px;
}

.infographics_text div {
    text-align: center;
    margin: 0 auto;
    font-size: larger;
    color: #fff;
    line-height: 1.5;
}

.data_sec {
    padding: 20px;
    padding: 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;

}

.rec_data_box {
    width: 100%;
    max-width: 1200px;
}

.rec_data {
    position: relative;
    overflow: hidden;
    transform: rotateX(-90deg);
    opacity: 0;
    transform-origin: bottom;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.rec_data.visible {
    transform: rotateX(0);
    opacity: 1;
}

.data_item {
    position: absolute;
    padding: 50px 30px;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    background: #fff;
    color: #26499d;
}

.data_title {
    width: 100%;
}

.data_image {
    padding: 0;
    margin: 0;
}

.data_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.rec_data h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    line-height: 1.2;
    text-align: left;
    font-weight: bold;
}

/* サイズ調整 */
.rec_data_r1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    row-gap: 20px;
    padding-bottom: 20px;
}

.grid_1 {
    grid-row-start: 1;
    grid-row-end: 3;
}

.rec_data_r2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    row-gap: 20px;
    padding-bottom: 20px;
}

.rec_data_r2 .rec_data {}

.grid_6 {
    grid-row: 1/3;
    grid-column: 2/3;
}

.rec_data_r3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    row-gap: 20px;
}

/* 高さを4:3に固定 */
.grid_1,
.grid_6 {
    width: 100%;
    /* padding-top: 75%; */
    box-sizing: border-box;
    aspect-ratio: 4 / 3;
}


/* 高さ固定 */
.grid_2,
.grid_3,
.grid_4,
.grid_5 {
    /* padding-top: 50%; */
    /* aspect-ratio: 4 / 3; */
    aspect-ratio: 1.3802372096287456/ 1;
}

/* 高さ固定 */
.grid_7,
.grid_8 {
    /* padding-top: 60%; */
    aspect-ratio: 1.5315 / 1;
}

@media only screen and (max-width: 429px),
only screen and (-webkit-min-device-pixel-ratio: 3) {
    #infographics .intro {
        margin-top: 64px;
        height: 40vh;
    }

    #infographics .intro-img {
        background-image: url(../images/contents/infographics/recruit_infographics_top_sp.webp);
        /* top: 64px; */
        background-size: cover;
    }

    #infographics .intro h2 {
        left: auto;
        transform: none;
    }

    #infographics .intro h2 img {
        width: 80%;
    }

    .infographics_text {
        padding: 50px 20px 0;
    }

    .infographics_text div {
        margin: 0;
        text-align: left;
        font-size: large;
    }

    .data_sec {
        padding: 50px 10px 100px;

    }

    .rec_data_r1,
    .rec_data_r2,
    .rec_data_r3 {
        grid-template-columns: none;
        display: flex;
        flex-wrap: wrap;
    }

    .data_item {
        padding: 30px;
    }

    .rec_data h2 {
        /* font-size: 2.0rem; */
        font-size: calc(1.25vw + 1.4rem);
    }

    .rec_data {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5 {
        aspect-ratio: 16 / 9;
    }

    .grid_7,
    .grid_8 {
        aspect-ratio: 1.5659 / 1;
    }
}