/*
2014 siterewal ver.4.1
*/

footer p.copy{
    padding-bottom: 100px !important;

}
/* --------------------------------------------------
#main setting
-------------------------------------------------- */
* { font-size: inherit;}
.pc-hidden{ display:block;}
.sp-hidden{ display: none;}
#main{ box-sizing: border-box;}
#main img{ width: 100%; margin: 0 auto;}
#main .txt-color-black { color: #000;}
#main .txt-color-red { color: #CC0000;}
#main .bg-color-white { background-color: #f0f0f0;}
#main .big-txt1 {
    font-weight: bold;
    font-size: calc(20*((100vw - 320px) / 650) + 50px);
    text-align: center;
    padding: 10% 0;
}
#main .big-txt2 {
    font-size: calc(20*((100vw - 320px) / 650) + 30px);
    font-weight: bold;
    background-color: #FFF;
    padding: 8px 14px 0px;
    line-height: 1.1;
    text-align: center;
    display: block;
    width: fit-content;
    margin: 24px auto 50px;
}
#main h2 {
    font-size: calc(20*((100vw - 320px) / 650) + 24px);
    font-weight: bold;
    line-height: 1.4;
    margin: 10% auto;
    text-align: center;
}
#main h3 {
    font-size: calc(20*((100vw - 320px) / 650) + 20px);
    color: #FFF;
    font-weight: bold;
    letter-spacing: 2px;
    margin-left: auto;
    line-height: 1.7;
}
#main h4, #main h5 {
    font-size: calc(20*((100vw - 320px) / 650) + 17px);
    color: #000;
    font-weight: bold;
    letter-spacing: 1px;
}
#main h5 { padding: 0 5px; text-align: left;}
#main h5::before{
    content: "";
    width: 3.6vw;
    height: 3.6vw;
    display: inline-flex;
    background-color: #E76F00;
    align-items: stretch;
    margin-right: 3%;
}
#main p {
    font-size: calc(3*((100vw - 320px) / 950) + 14px);
    text-align: left;
    margin: 0 auto;
    line-height: 1.7;
}
#main .Wrap-Fullwidth{ width: 100%;}

#main .detail-900w{
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
#main .detail-1200w{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
#main .flex-box{ display: flex; flex-direction: column;}
#main .flex-box_normal
{ display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#main .img-box { position: relative; text-align: center;}
#main .img-box::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-image: url(/corp/common/images/recruit/black50.png);
    background-repeat: repeat;
    opacity: 0.5;
}

/* --------------------------------------------------
#First-View
-------------------------------------------------- */
#First-View  { position: relative; height: 97vw;}


/*pattern1,2 共通*/
#First-View.pattern1 h1,
#First-View.pattern2 h1{
    position: absolute;
    z-index: 1;
    top: 19vw;
    left: 7.5vw;
    font-size: calc(116*((100vw - 320px) / 650) + 31px);
    color: #DA0000;
    font-weight: bold;
    margin: 0 auto;
    letter-spacing: 1.5px;
    text-align: center;
    text-shadow: 0px 0px 2px #fff,1px 1px 2px #fff,-1px -1px 2px #fff,1px -1px 2px #fff,-1px 1px 2px #fff,0px 0px 3px #fff,1px 1px 3px #fff,-1px -1px 3px #fff,1px -1px 3px #fff,-1px 1px 3px #fff;
}

#First-View h1 small{
    font-size: 35.5%;
    color: #000;
    font-weight: bold;
    display: block;
    margin-bottom: 3%;
}
#First-View h1 strong {
    font-size: 36%;
    letter-spacing: 1px;
    display: block;
    background: #00a1b9;
    border-radius: 2vw;
    color: #FFF;
    line-height: 1.4;
    padding: 6px 0 5px;
    margin: 4px 0 10px;
    text-shadow: none;
}
#First-View h1 span {
    font-size: 30%;
    letter-spacing: 1px;
    display: block;
    color: #00a1b9;
}
#First-View .read {
    color: #000;
    position: absolute;
    z-index: 1;
    bottom:20px;
    width: 100%;
}
#First-View .read p {
    font-size: calc(20*((100vw - 320px) / 650) + 12px);
    font-weight: bold;
    background-color: #fff;
    color: #636363;
    line-height: 1.4;
    padding: 8px 18px 5px;
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: 1.0px;
    width: fit-content;
}


/*#Video-Area**************************/
#Video-Area { padding-top: 10px; padding-bottom: 100px;}

#Video-Area ul.merit{
    width: 94%;
    max-width: 1024px;
    margin: calc(0vh - 15vh) auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    position: relative;
    z-index: 1;
}
#Video-Area ul.merit li{
    border: 1px solid #fff;
    width: 45%;
    max-width: 330px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    font-size:clamp(35px,9vw,50px);
    margin-bottom: 10px;
    padding: 15px 5px;
    background-image: url(/corp/common/images/bg_red90.png);
    line-height: 1.1em;
}
#Video-Area ul.merit li span{
    font-size:clamp(16px, 5vw, 20px);
    font-weight: normal;   
    display: block;
    line-height: 1.0em;
    margin: 0 auto 5px;
}



#Video-Area h2{ 
    text-align: center;
    background-color: #f1f1f1;
    padding: 100px 0 20px 0;
    margin: calc(0vh - 11vh) auto 20px;
}

#Video-Area img:nth-of-type(1) { width: 20%; margin: 8% auto; display: block;}
#Video-Area figure.video-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 50px auto;
}
#Video-Area figure figcaption{
    position: relative;
    top: 36px;
    font-weight: bold;
    text-align: center;
    font-size: 17px;
    color: #5D5D5D;
}
#Video-Area  #Video {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
#Efforts-Bear-Fruit {
    width: 100%;
    margin: 0;
    padding: 1% 0;
    position: relative;
}
#Efforts-Bear-Fruit::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: #f1f1f1;
    transform: skewY(0deg);
}
#Efforts-Bear-Fruit .flex-box .img-box{ position: relative; order: 1;}
#Efforts-Bear-Fruit .flex-box .red-box{
    background-color: #CC0000;
    padding: 1vw 1vw 15vw;
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    margin-top: -58px;
    position: relative;
    order: 2;
}
#Efforts-Bear-Fruit .flex-box .text-box { order: 3; padding: 5%;}
#Efforts-Bear-Fruit .flex-box .text-box h4 small{
    color: #CC0000;
    display: block;
    font-size: 60%;
    padding-bottom: 2%;
}

#Efforts-Bear-Fruit .flex-box .text-box p { margin: 2.5% auto 6%;}

#Recruitment-type { margin: 30% auto;}
#Recruitment-type > div:nth-child(1) {
    position: relative;
    padding-top: 2%;
    padding-bottom: 4%;
}
#Recruitment-type > p {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
#Recruitment-type .img-box{
    position: absolute;
    width: 100%;
    top: -15%;
    z-index: -1;
}
#recruit_yoko > h3,
#Recruitment-type > div > h2,
#Recruitment-type > div > p {
    color: #FFF;
    text-align: center;
    line-height: 1.7;
    margin-top: 2%;
    margin-bottom: 3%;
}
#Recruitment-type .shokushu-list{ display: flex; flex-direction: column;}
#Recruitment-type dl.shokushu-list div a{
    color: #000;
}
#Recruitment-type dl.shokushu-list div{
    width: 90%;
    margin: 0 auto 3%;
    padding: 3% 3% 5%;
    max-width: 650px;
}
#Recruitment-type dl.shokushu-list dt{ position: relative; text-align: right;}
#Recruitment-type dl.shokushu-list dt img {
    width: 2.5%;
    top: 0px;
    right: 0px;
    position: absolute;
}
#Recruitment-type dl.shokushu-list hr {
    order: 0;
    border-top: 1px solid #797979;
    text-align: center;
    margin: 15px auto;
    display: block;
}
#Recruitment-type dl.shokushu-list dd{ padding: 0 5px;}
#Recruitment-type dd.badge-group {
    display: inline-flex;
    width: 100%;
    margin-top: 15px;
}
#Recruitment-type dd.badge-group .badge-item {
    background: #d20014;
    color: #FFF;
    padding: 7px 11px;
    margin-right: 11px;
    font-size: 12px;
}
#main .bg-color-yellow{ background-color: #F9FAE2;}
#main .bg-color-blue { background-color: #E5FAF9;}
#Recruitment-type .Wrap-Fullwidth div  dl div.bg-color-blue dt  h5::before {
    background: #00A1B9;
}
#Grow-With-Us { position: relative; background: #F0F0F0;}
#Grow-With-Us > div > div:nth-child(2) > p {
    color: #CC0000;
    font-weight: bold;
    width: 90%;
    margin-bottom: 5%;
}
#Grow-With-Us > div > div:nth-child(2){ position: relative;}
#Grow-With-Us > div > div:nth-child(2) > div.img-box::before { position: relative;}
#Select-Job-Type{ margin-top: 10%;}
#Select-Job-Type p{ line-height: 1.1;}
#Select-Job-Type .flex-box_normal{
    width: 100%;
    font-weight: bold;
    margin: 0 auto;
    padding: 10px;
    background: #FFF;
    position: fixed;
    z-index: 15;
    bottom: 0;
    box-shadow: 0px -3px 9px 3px rgb(0 0 0 / 22%);
    gap: 1vw;
}
/* Add 20250217 */
/* #main .flex-box{ display: flex; flex-direction: column;} */
#main .flex-box_three
{align-content: center;
 justify-content: space-between;
 text-align: center;
}

#main
.three_innner {
	display: flex;
	justify-content: center;
}
#main .flex-box_three li{
    width: 100%;
	height: auto;
    display: inline-block;/*ココ */
    vertical-align: middle; /* 縦位置中央揃え */
    align-items: center;
    margin: 3px;
}
#main .flex-box_three a{
    display: block;
}

.font_size_sub {
    font-size: 10px;
}

ul.three_innner{
    margin-bottom: 0;
}

#Grow-With-Us > div > div:nth-child(2){ position: relative;}
#Grow-With-Us > div > div:nth-child(2) > div.img-box::before { position: relative;}
#Select-Job-Type{ margin-top: 10%;}
#Select-Job-Type p{ line-height: 1.1;}
#Select-Job-Type .flex-box_three{

    width: 100%;
    font-weight: bold;
    padding: 10px 0 10px;
    margin: 10px auto -5px auto;
    background: #FFF;
    position: fixed;
    z-index: 15;
    bottom: 0;
    box-shadow: 0px -3px 9px 3px rgb(0 0 0 / 22%);
    gap: 1vw;
}

/* --------------------------------------------------
-----------------------------------------------------
Accordion menu　-QA Area-
-----------------------------------------------------
-------------------------------------------------- */

/* [Q]のBOX */
.question span, .anser span {
    line-height: 0;
}
/* [Q]のBOX */
.rounded-box {

    width: 30px;  /* 横幅を50pxに設定 */
    height: 30px; /* 高さを50pxに設定 */
      line-height: 30px;  /* 垂直方向に中央配置 */
    display: inline-block;
   padding: 0;  /* パディングなし */
  margin: 0 auto;
    background-color: #CC0000;
    text-align: center;  /* 水平方向に中央 */
    border-radius: 0px;
    font-family: Meiryo, メイリオ,'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Osaka,arial, helvetica, sans-serif;
    cursor: pointer;
    font-size: clamp(1.5rem, 1.33rem + 0.85vw, 1.875rem);
    font-weight:900;
    color: #ffffff;
}




.QA_sub {
    width: 95%;
        flex-grow: 1;  /* この部分が右に広がっていく */
        text-align: left; /* 左寄せ */
    color: #333;
font-family: "Kozuka Gothic Pro", "小塚ゴシック", Meiryo, メイリオ, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Arial, Helvetica, sans-serif;
       font-size: calc(3*((100vw - 320px) / 950) + 14px);
    font-weight: 100;
    padding: 0 0 0 5px;
}



/* 項目奇数 ---------------------------*/

.QA_recruit .title {
    width: 90%;
   margin: 0 auto;
    max-width: 960px;
    background-color: #F9FAE2;
     padding: 15px 20px 0px 10px;
    display: block;
    color: #333;
    position: relative;
    font-weight: bold;
}



.QA_recruit {
    margin: 0% auto 1% auto;
}
/* 左右分け */
.QA_in {
    display: flex;              /* フレックスボックスを使用 */
    justify-content: flex-start; /* すべて左寄せにする */
    align-items: center;         /* 垂直方向で中央揃え */
}


/* 項目奇数_01 修正---------------------------*/
.QA_recruit_01 .title_01 {
    width: 90%;
    margin: 0% auto 0% auto;
    max-width: 960px;
    /* border-left: 1px solid #999; */
    /* border-right: 1px solid #999; */
    /* border-top: 1px solid #999; */
    /* border-bottom: 1px solid #999; */
    background-color: #F9FAE2;
        padding: 15px 20px 15px 10px;
    display: block;
    color: #333;
    font-weight: bold;

}

.QA_recruit_01 {
    margin: 0% auto 1% auto;
    cursor: pointer;
}

.content_QA_01 {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0px; /* パディングを適切に指定 */
   max-height: 0; /* 初期状態で高さを0に設定 */
   overflow: hidden;/* 内容がはみ出ないように隠す */
    border-left: 15px solid #F9FAE2;
     border-right: 15px solid #F9FAE2; /*  ; */
    border-bottom: 10px solid #F9FAE2;

    overflow: hidden; /* 丸みを正しく適用するために必要 */
}




.anser_innner_01 {
     font-size: clamp(1rem, 0.9rem + 0.76vw, 1.5rem);
     font-family: Meiryo, メイリオ,'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Osaka,arial, helvetica, sans-serif;
    padding: 1.5rem;
    color: #333;
    font-weight: 100;
    background-image: url(../images/recruit/FAQ_A_back.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    border-radius: 10px;
    background-color: transparent;  /* 背景を非表示に */
        /* 下に白いいボーダーを追加 */
        background-color: #ffffff;
          transition: none;  /* アコーディオン開閉時にスムーズに動くように */
            border-radius: 10px; /* 角を丸くする（値は自由に調整可能） */

}




.QA_recruit_01 input:checked + .title_01 + .content_QA_01 {
    max-height: 500px;  /* 必要に応じて調整 */
    overflow: visible;  /* 内容が見えるようにする */

}


/* アコーディオンが開いている時 */
.QA_recruit_01 input:checked + .title_01 + .content_QA_01 {
    max-height: 700px;  /* 必要に応じて調整 */
    overflow: visible;
    border-bottom: 10px solid #F9FAE2; /* 開いた時のみボーダーを表示 */
}

/* アコーディオンが閉じている時にボーダーを消す*/
.QA_recruit_01 .content_QA_01 {
    border-bottom: none; /* 閉じている時はボーダーを消す */
}


/* QAスペースアコーディオン　偶数 */
.QA_recruit_01 .title_01 {
    width: 90%;
    margin: 0 auto;
    max-width: 960px;
    padding: 15px 20px 15px 10px;
    display: block;
    color: #333;
    font-weight: bold;
     cursor: pointer;
    position: relative; /* 親要素に position: relative を追加 */
}

.QA_recruit_01 .title_01::before {
    content: "";
    position: absolute;
    right: 15px;
    top: 39.5%;
    transform: translateY(-0%);
    width: 2px;
    height: 1.00em;
    background-color: #999;
    transition: all 0.3s;
}

.QA_recruit_01 .title_01::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 42%; /* 50%で縦の中央 */
    transform: translateY(0%) rotate(90deg); /* 縦位置中央調整 + 回転 */
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;
    transform: rotate(90deg); /* 常時横倒しにするために90度回転 */
}


/* アコーディオン開いた時に横記号が変わるように設定 */
.QA_recruit_01 input:checked + .title_01::before {
    transform: rotate(90deg); /* 開いた時に縦に変わる */
}



/* 項目偶数 ---------------------------*/
.QA_recruit2 .title2 {
    width: 90%;
    margin: 0% auto 0% auto;
    max-width: 960px;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-top: 1px solid #999;
    /* border-bottom: 1px solid #999; */
    background-color: #ffffff;
        padding: 15px 20px 15px 10px;
    display: block;
    color: #333;
     cursor: pointer;
    font-weight: bold;

}






.QA_recruit2 {
    margin: 0% auto 1% auto;

}


.content_QA2 {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
   max-height: 0; /* 初期状態で高さを0に設定 */
         overflow: hidden;/* 内容がはみ出ないように隠す */
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    /* border-top: 1px solid #999; */
    border-bottom: 1px solid #ccc; /* 下のベージュの枠線 */ /* 右のベージュの枠線 */ /* 左のベージュの枠線 */ /* ベージュの枠線を追加 #F9FAE2 */
       transition: none;  /* アコーディオン開閉時にスムーズに動くように */
}

/* アコーディオンが閉じている時 */
.content_QA2 {
    padding: 0 16px 0px 16px; /* 閉じているときは padding-bottom: 0px */
}



.anser_innner2 {
    font-size: clamp(1rem, 1.848rem + 0.76vw, 1.5rem); /* 最小14pt 最大20px */
       font-family: Meiryo, メイリオ,'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Osaka,arial, helvetica, sans-serif;
    padding: 1.5rem;
    color: #333;
    font-weight: 100;
    background-image: url(../images/recruit/FAQ_A_back.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    border-radius: 10px;
    background-color: transparent;  /* 背景を非表示に */
        /* 下に白いいボーダーを追加 */

           transition: none; /* アコーディオン開閉時にスムーズに動くように */
            border-radius: 10px; /* 角を丸くする（値は自由に調整可能） */
                background-color: #F9FAE2; /* 開いたときに背景を表示 */
}




.QA_recruit2 input:checked + .title2 + .content_QA2 {
    max-height: 500px;  /* 必要に応じて調整 */
    overflow: visible;  /* 内容が見えるようにする */

}

/* アコーディオンが開いているときに背景を表示 */
.QA_recruit2 input:checked + .title2 + .content_QA2 .anser_innner2 {
    background-color: #F9FAE2; /* 開いたときに背景を表示 */

}

/* アコーディオンが開いている時 */
.QA_recruit2 input:checked + .title2 + .content_QA2 {
    padding: 0 16px 10px 16px; /* 開いたときだけ padding-bottom: 10px */
}



/* QAスペースアコーディオン　奇数 */
.QA_recruit .title {
    width: 90%;
    margin: 0 auto;
    max-width: 960px;
       padding: 10px 20px 0px 10px;
    display: block;
    color: #333;
    font-weight: bold;
    position: relative; /* 親要素に position: relative を追加 */
}



.QA_recruit .title::before {
    content: "";
    position: absolute;
    right: 15px;
    top: 48%;
    transform: translateY(-0%);
    width: 2px;
    height: 1.00em;
    background-color: #999;
    transition: all 0.3s;
}

.QA_recruit .title::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%; /* 50%で縦の中央 */
    transform: translateY(0%) rotate(90deg); /* 縦位置中央調整 + 回転 */
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;

}


/* QAスペースアコーディオン　偶数 */
.QA_recruit2 .title2 {
    width: 90%;
    margin: 0 auto;
    max-width: 960px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 15px 20px 15px 10px;
    display: block;
    color: #333;
    font-weight: bold;
    position: relative; /* 親要素に position: relative を追加 */
}

.QA_recruit2 .title2::before {
    content: "";
    position: absolute;
    right: 15px;
    top: 39.5%;
    transform: translateY(-0%);
    width: 2px;
    height: 1.00em;
    background-color: #999;
    transition: all 0.3s;
}

.QA_recruit2 .title2::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 43.0%; /* 50%で縦の中央 */
    transform: translateY(0%) rotate(90deg); /* 縦位置中央調整 + 回転 */
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;
    transform: rotate(90deg); /* 常時横倒しにするために90度回転 */
}








/* アコーディオン開いた時に横記号が変わるように設定 */
.QA_recruit2 input:checked + .title2::before {
    transform: rotate(90deg); /* 開いた時に縦に変わる */
}


/* --------------------------------------------------
-----------------------------------------------------
Accordion menu　-Recruit-
-----------------------------------------------------
-------------------------------------------------- */
#recruit_yoko h3 {
    color: #CC0000;
    font-size: calc(20*((100vw - 320px) / 650) + 24px);
    font-weight: bold;
    line-height: 1.4;
    margin: 3% auto;
    text-align: center;
}

#recruit_yoko .accordion {
    padding: 0 5% 0 5%;
    /* max-width: 60vw; */
}

.toggle {
    display: none;
}

.option {
    position: relative;
    margin: 0 auto 0 auto;
    margin-bottom: 1em;
}



.title {
    cursor: pointer;
}

/* 白枠内タイトル */
.accordion .option .title h4 {
    font-size: 1.5em !important; /* 偶数番目に背景色を付ける */
    /* padding: 0px 0 0px 0px !important; */
}

/* 仕事内容タイトル */
.accordion .option .content h4 {
    font-size: 1.25em !important; /* 偶数番目に背景色を付ける */
    font-weight: bold;
    padding: 15px 10px; /* パディングをつけて背景色を見やすく */
    margin: 0; /* h4の上下の余白をリセット */
    /* padding: 0px 0 0px 0px !important; */
}

.content {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    max-height: 0;
    overflow: hidden; /* コンテンツが完全に隠れるように変更 */
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.content ul {
    font-size: 1.5rem;
    margin: 0;
    padding: 10px 10px 20px 20px;
    line-height: 1.5;
}


/* 募集要項アコーディオン　横マークプラス記号 */
.option .title {
    width: 100%;
    margin: 0 auto;
    max-width: 1024px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 1em;
    display: block;
    color: #333;
    font-weight: bold;
}

.option .title::after {
    content: "";
    position: absolute;
    right: 1.25em;
    top: 1.5em; /* プラスの位置上下調整 */
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;
        transform: rotate(90deg); /* 横倒しにするために90度回転 */
}

.option .title::before {
    content: "";
    position: absolute;
    right: 1.25em;
    top: 1.5em; /* プラスの位置上下調整 */
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;
}





/* アコーディオン　閉じる時の細工 */
.title, .content, .content_QA, .content_QA2 {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    transform: translateZ(0);
   transition: none;
}


/* アコーディオンが開いたときは "+" に変化 */
.toggle:checked + .title::after {
    content: ""; /* 開いた状態で+に変更 */
}
/* 開いているときの max-height を変更 */
.toggle:checked + .title + .content {
    max-height: 100%; /* 開いたときの最大高さを100％で全体に変更 */
  transition: none;
}
/* QA_recruit奇数 */
.toggle:checked + .title + .content_QA {
    max-height: 100%; /* 開いたときの最大高さを100％で全体に変更 */
  transition: none;
}

.toggle:checked + .title + .content_QA_01 {
    max-height: 100%; /* 開いたときの最大高さを100％で全体に変更 */
 transition: none;
}

/* QA_recruit偶数 */
.toggle:checked + .title2 + .content_QA2 {
    max-height: 100%; /* 開いたときの最大高さを100％で全体に変更 */
   transition: none;
}

.toggle:checked + .title::before {
    transform: rotate(90deg) !important; /* 矢印の回転角度を990度に変更 */
}

/* H4の帯 交互に背景色を付ける 奇数 */
.accordion .option .content h4:nth-child(2n-1) {
    color: #ffF !important;
    background-color: #00A1B9 !important; /* 奇数番目に背景色を付ける */
}

/* H4の帯 交互に背景色を付ける 偶数 */
.accordion .option .content h4:nth-of-type(even) {
    color: #793B00 !important;
    background-color: #F9FAE2 !important; /* 偶数番目に背景色を付ける */
}

/* 職務内容詳細の背景色を付ける */
.accordion .option .content ul {
    background-color: #ffffff !important; /* リスト項目に水色の背景色を追加 */
}

/* h4タグの背景色を交互に設定 */
.accordion .option .content h4:nth-of-type(odd) {
    color: #ffF !important;
    background-color: #00A1B9; /* 奇数番目のh4に薄いグレー */
}
/*-------------------- 募集要綱 文章内容協調の箇所 --------------------*/
.content_title{
    font-size: 1.8rem ;
    font-weight: 900;
}

.content_title_red{
    font-size: 1.8rem ;
    font-weight: 900;
    color: #CC0000;
}

.content_nodisc{
  line-height: 2.0; /* 行間を1.6倍に設定 */
    padding-right: 5%;
}

.content_nodisc{
margin-left: 0px; /* インデントを左に追加（ディスクが右にずれる） */
  padding-left: 0px; /* さらに左に余白を追加してディスクの位置を調整 */
}

.content_comment{
    font-size: 1.5rem ;
    font-weight: 100;
}

.content_comment02{
    font-size: 1.5rem ;
}



/*------- 募集要綱 文章内容のリスト表現の箇所--------*/
.content ul {
  list-style-type: none; /* すべてのリストにディスクを無効化 */
}

ul li.content_title_red,
ul li.content_title,
ul li.content_nodisc,
ul li.content_comment,
ul li.content_cube,
ul li.content_comment02 {
  list-style-type: none; /* content_title_red と content_title のアイテムにディスクなし */
}

.content ul li:not(.content_title_red):not(.content_title):not(.content_nodisc):not(.content_comment):not(.content_comment02)
{
  list-style-type: disc; /* content_title_red と content_title 以外のリストアイテムにディスクを追加 */
margin-left: 20px; /* インデントを左に追加（ディスクが右にずれる） */
  padding-left: 0px; /* さらに左に余白を追加してディスクの位置を調整 */
    line-height: 2.0; /* 行間を広げる（調整可能） */
}

/* --------- 追加部分（content_cube用のスタイル）--------- */
.content_cube {
    position: relative;
}

.content_cube::before {
    content: "■";  /* ■をリスト項目の前に追加 */
    position: absolute;
    left: -20px;  /* 少し左に移動して ■ の位置調整 */
     font-size: 1.5rem ;  /* サイズ調整 */
    color: black;  /* 色調整（必要に応じて変更） */
}
/* --------- ここまで追加部分 --------- */

.content_comment {
    position: relative;
}

.content_comment::before {
    content: "※";  /* ■をリスト項目の前に追加 */
    position: absolute;
    left: -20px;  /* 少し左に移動して ■ の位置調整 */
     font-size: 1.5rem ;  /* サイズ調整 */
    color: black;  /* 色調整（必要に応じて変更） */
}

ul li.content_comment
 {
margin-left: 40px; /* インデントを左に追加（ディスクが右にずれる） */
  padding-left: 0px; /* さらに左に余白を追加してディスクの位置を調整 */
    line-height: 2.0; /* 行間を広げる（調整可能） */
}

ul li.content_comment02
 {
margin-left: 20px; /* インデントを左に追加（ディスクが右にずれる） */
  padding-left: 0px; /* さらに左に余白を追加してディスクの位置を調整 */
    line-height: 2.0; /* 行間を広げる（調整可能） */
}


#Select-Job-Type .flex-box_normal div:nth-child(1){ width: 61%; margin-right: auto;}
#Select-Job-Type .flex-box_normal div:nth-child(2){ width: 39%; margin-left: auto;}
#Select-Job-Type button {
    font-size: clamp(12px,calc(14*((100vw - 400px) / 1550) + 14px),18px);
    position: relative;
    font-weight: normal;
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 0vw 4.0vw;
    background-color: #DB0014;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    box-shadow: 1px 3px 3px rgb(102 102 102 / 32%);
}

#Select-Job-Type .flex-box_normal div:nth-child(1){ width: 61%; margin-right: auto;}
#Select-Job-Type .flex-box_normal div:nth-child(2){ width: 39%; margin-left: auto;}
#Select-Job-Type button.bg_bl {
    font-size: clamp(12px,calc(14*((100vw - 400px) / 1550) + 14px),18px);
    position: relative;
    font-weight: normal;
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 0vw 4.0vw 0vw 4.0vw;
    background-color: #00A1B9;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    box-shadow: 1px 3px 3px rgb(102 102 102 / 32%);
}
/* --------- タイトル下　吹き出し帯 --------- */
/* 吹き出しの四角部分 */
.QA_acor_area{
  position: relative;
  width: 90%;
  max-width: 800px;
  margin: 0 auto 8% auto;
  padding: 5px 0;
  background: #ffffff;
  text-align: center;
  border: 3px solid #CC0000;
}

/* 吹き出しの三角部分 */
.QA_acor_area::before{
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF;
    z-index: 2;
}
.QA_acor_area::after{
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #CC0000;
    z-index: 1;
}


#Video-Area .QA_acor_area {
    font-size: calc(14*((100vw - 400px) / 1000) + 16px);
    padding: auto;
}

/* --------- 吹き出し内改行トラップ--------- */
.break-point {
  display: inline-block; /* 改行をしない */
}

#main h3.QA_acor_area {
    font-size: clamp(16px, 2vw, 20px);
    color: #d20014;
    font-weight: bold;
    letter-spacing: 2px;
    margin-left: auto;
    line-height: 1.2;
    padding: 15px 0;
}

@media screen and (max-width: 650px) {
.break-point {
    display: block; /* 650px以下でブロック要素に変更 */
}
}
/* --------------------------------------------------
-----------------------------------------------------
window size 650-
-----------------------------------------------------
-------------------------------------------------- */
@media screen and (min-width:650px){
    /*pattern1*/
    /*pattern2*/
    #First-View.pattern1 h1,
    #First-View.pattern2 h1{
        font-size: calc(76*((100vw - 320px) / 650) + 31px);
        top: 22vw;
        left: 7vw;
        }
    #First-View h1 strong { font-size: 34%; padding: 10px 0 5px;}

    #First-View .read p { padding: 10px 25px 5px;}

    /*#Video-Area********************/
    #Video-Area ul.merit{
        flex-wrap: nowrap;
        margin: calc(0vh - 15vh) auto 0;
    }
    #Video-Area ul.merit li{
        width: 32%;
    }


    #Recruitment-type .img-box{ top: -25%;}
    #main h5::before{ width: 2.5vw; height: 2.5vw;}
    #Recruitment-type dl.shokushu-list dt img { width: 2%;}
    #Recruitment-type dl.shokushu-list div { padding: 3% 3% 3%;}
    #Select-Job-Type p { font-size: 25px;}
    #Select-Job-Type button.on::after { top: 48%;}



    /* --------------------------------------------------
-----------------------------------------------------
Accordion menu　-QA Area-
-----------------------------------------------------
-------------------------------------------------- */

/* [Q]のBOX */
.question span, .anser span {
    line-height: 0;
}

.QA_sub {
    line-height: 1.5em;
    font-family: "Kozuka Gothic Pro", "小塚ゴシック", Meiryo, メイリオ, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Arial, Helvetica, sans-serif;

        font-size: calc(3*((100vw - 320px) / 950) + 14px);
    font-weight: 100;
     margin: 0 0 0 5px;
}

/* --------- タイトル下　吹き出し帯 --------- */
/* 吹き出しの四角部分 */
.QA_acor_area{
  margin: 0 auto 4% auto;
}




}

/* --------------------------------------------------
-----------------------------------------------------
window size 900-
-----------------------------------------------------
-------------------------------------------------- */
@media screen and (min-width:900px){

    
    .pc-hidden{ display:none;}
    .sp-hidden{ display: block;}
    #main p {     font-size: 1.5rem;}
    #main h2 { 
        font-size: 35px; 
        margin: 4% auto;
        padding: 40px 0 30px;
    }
    #main h3 { font-size: 41px;}
    #recruit_yoko h3 { font-size: 50px; margin: 4% auto;}/* 追加 20250219*/
    #main h4 { font-size: 35px;}
    #main h5{
        font-size: 25px;
        text-align: center;
    }
    #main h5::before { display: none;}

    #main .bg-color-white { background-color: #FFF;}
    #main .Wrap-Fullwidth{ margin: 8% auto;}
    #main .big-txt1 { padding: 100px 0;}
    #main .big-txt2 {
        font-size: 85px;
        padding: 11px 43px 0px;
        line-height: 1.3;
        background-color: #d20014;
        color: #FFF;
        position: absolute;
        left: 0;
        top: -74px;
    }

    /*#Video-Area *****************/
    
    #Video-Area figure figcaption {
        top: 67px;
        font-size: 33px;
    }
    #Video-Area img:nth-of-type(1) {
        width: 80px;
        margin: -40px auto 100px;
    }    
    
    
    
    
    #Efforts-Bear-Fruit { padding: 140px 0;}

    #Recruitment-type > div:nth-child(1) { padding-bottom: 13%;}
    #Recruitment-type dl.shokushu-list dt img { width: 15px;}
    #Grow-With-Us > div > div:nth-child(2) > p {
        font-size: 22px;
        color: #000;
        font-weight: normal;
        background: rgb(255 255 255 / 90%);
        padding: 3% 8%;
        position: absolute;
        top: 53%;
        z-index: 1;
        left: 50%;
        width: 80%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
    #Grow-With-Us > div > div:nth-child(2) > div.img-box { position: relative; z-index: 0;}
    #Grow-With-Us > div > div:nth-child(2) > div.img-box::before { position: absolute;}
    #Select-Job-Type .flex-box_normal div:nth-child(1) { width: 60%;}
    #Select-Job-Type .flex-box_normal div:nth-child(2) { width: 40%;}
    #Select-Job-Type button {
        font-size: 24px;
        padding: 2vw 6vw 1.5vw 0;
    }
    #Select-Job-Type p { font-size: 20px;}
    #Select-Job-Type button::after { top: 22%;}
    #Select-Job-Type button.on::after { top: 44%;}



    #Grow-With-Us > div > div:nth-child(2) > p { font-size: 30px;}    
    #First-View { height: 66.3vw;}
   



    #First-View .txtcontainer {
        position: absolute;
        top:0px;
        right: 8vw;
        width: 50%;
        height: 100%;
        max-width: 750px;
    }
    #First-View.pattern1 .txtcontainer{
        left: 2vw;
        right: inherit;
    }
    /*top text pattern2*/
    #First-View.pattern1 h1,
    #First-View.pattern2 h1 {
        top: 11vw;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        margin: 0;
        font-size: calc(204*((100vw - 1200px) / 2550) + 96px);
        width: 100%;
        max-width: 750px;
    }
    #First-View.pattern1 h1{
        /*left: -30%;*/
    }
    #First-View h1 strong{
        border-radius: 100px;
        padding: 10px 40px 3px;
        display: inline-block;
        margin: -40px auto 0;
    }
    #First-View h1 div{
        margin-bottom: -20px;
        
    }


    #First-View .read {
        position: absolute;
        left: inherit;
        top: auto;
        bottom: 10vh;
        display: inline-block;
        max-width: 750px;
        /*display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        padding-left: 7vw;*/
    }
    #First-View .read p{
        font-size: calc(61*((100vw - 1200px) / 2550) + 25px);
        padding: 10px 40px 4px;
    }
    #main .flex-box { flex-direction: row; flex-wrap: wrap;}
    #Efforts-Bear-Fruit::before{ transform: skewY(174deg);}
    #Efforts-Bear-Fruit .flex-box .img-box{
        width: calc(100% / 2);
        order: 2;
    }
    #Efforts-Bear-Fruit .flex-box .img-box::before{ display: none;}
    #Efforts-Bear-Fruit .flex-box .red-box{
        background-color: transparent;
        display: flex;
        margin-top: 0;
        justify-content: space-around;
        align-items: flex-end;
        width: 100%;
        flex-direction: row;
        padding: 8% 0 3%;
        order: 1;
    }
    #Efforts-Bear-Fruit .flex-box .text-box{ width: calc(100% / 2); order: 3;}
    #Efforts-Bear-Fruit .flex-box h3{color: #d20014;}
    #Efforts-Bear-Fruit .flex-box .text-box { padding: 1% 0% 7% 4%;}
    #Efforts-Bear-Fruit .colomun-reverse{ flex-direction: row-reverse;}
    #Efforts-Bear-Fruit .colomun-reverse .red-box .big-txt2 { right: 0; left: unset;}
    #Efforts-Bear-Fruit .colomun-reverse .red-box h3{ margin-left: 0; margin-right: auto;}
    #Efforts-Bear-Fruit .colomun-reverse .text-box { padding: 0% 3% 7% 0%;}
    #Efforts-Bear-Fruit .flex-box .text-box p { margin: 4.5% auto 10%;}
    #Recruitment-type > div.Wrap-Fullwidth { margin-top: 0;}
    #Recruitment-type > div > h2 { color: #CC0000;}
    #Recruitment-type > div > p {
        color: #000;
        margin: -30px auto 71px;
    }
    #Recruitment-type { margin: 100px auto;}
    #Recruitment-type .shokushu-list {
        flex-direction: row; gap: 23px;
        flex-wrap: wrap;
        justify-content: center;
    }
    #Recruitment-type dl.shokushu-list div {
        padding: 20px 25px 20px;
        box-shadow: rgb(0 0 0 / 53%) 0px 0px 13px;
        max-width: 30%;
        font-size: 16px;
        margin: 0;
    }
    #Recruitment-type dl.shokushu-list dt img {
        position: relative;
        width: 11px;
        top: 0;
    }
    #Recruitment-type > div:nth-child(1) { padding-bottom: 0;}
    #Recruitment-type > div.Wrap-Fullwidth > div > dl > div > dd:nth-child(2) {
        height: 100px;
    }

    #Select-Job-Type .flex-box_normal div:nth-child(1) > p,
    #Select-Job-Type button { font-size: 20px;}
    #Select-Job-Type button {
        width: 100%;
        padding: 10px 50px 10px 0;
    }
    #Select-Job-Type .flex-box_normal {
        margin: 0 auto;
        padding: 1vw 1vw;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
    #Select-Job-Type .flex-box_normal div:nth-child(1) {
        width: 66%;
        margin-right: auto;
    }
    #Select-Job-Type .flex-box_normal div:nth-child(2) {
        width: 30%;
        margin-left: auto;
    }
    #Select-Job-Type button::after {
        width: 20px;
        height: 20px;
        top: 9px;
        right: 38px;
    }
    #Select-Job-Type button.on::after{ }
/* Add 20250217 */
/* #main .flex-box{ display: flex; flex-direction: column;} */
#main .flex-box_three
{
    align-content: center;
    justify-content: space-between;
    text-align: center;
    padding-bottom: 10px;
}
#main .three_innner {
	display: flex;
	justify-content: center;
}
#main .flex-box_three li
{	width: auto;
    	display: inline-block;/*ココ */
 vertical-align: middle; /* 縦位置中央揃え */
align-items: center;
}

#main .flex-box_three a
{
display: block;
}

.font_size_sub {
    font-size: 1.1rem;
}

ul.three_innner{
    margin-bottom: 0;
}

#Grow-With-Us > div > div:nth-child(2){ position: relative;}
#Grow-With-Us > div > div:nth-child(2) > div.img-box::before { position: relative;}
#Select-Job-Type{ margin-top: 10%;}
#Select-Job-Type p{ line-height: 1.1;}
#Select-Job-Type .flex-box_three{
    width: 100%;
    font-weight: bold;
    margin: 0px auto 0px auto;
    padding: 20px; /* 追随背景の高さ調整はココ */
    background: #FFF;
    position: fixed;
    z-index: 15;
    bottom: 0;
    box-shadow: 0px -3px 9px 3px rgb(0 0 0 / 22%);
    gap: 1vw;
}


#Select-Job-Type .flex-box_normal div:nth-child(1){ width: 61%; margin-right: auto;}
#Select-Job-Type .flex-box_normal div:nth-child(2){ width: 39%; margin-left: auto;}
#Select-Job-Type button {

    position: relative;
    font-weight: normal;
    display: block;
    width: 100%;
    height: 40px;
    padding: 5px 4.0vw;
    background-color: #DB0014;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    box-shadow: 1px 3px 3px rgb(102 102 102 / 32%);
}

#Select-Job-Type .flex-box_normal div:nth-child(1){ width: 61%; margin-right: auto;}
#Select-Job-Type .flex-box_normal div:nth-child(2){ width: 39%; margin-left: auto;}
#Select-Job-Type button.bg_bl {
    position: relative;
    font-weight: normal;
    display: block;
    width: 100%;
    height: 40px;
    padding: 5px 4.0vw;
    background-color: #00A1B9;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    box-shadow: 1px 3px 3px rgb(102 102 102 / 32%);
}
#Select-Job-Type button.bg_bl br{
    display: none;
}

/* --------------------------------------------------
-----------------------------------------------------
Accordion menu　-QA Area-
-----------------------------------------------------
-------------------------------------------------- */

/* [Q]のBOX */
.question span, .anser span {
    line-height: 0;
}

.QA_sub {
    line-height: 1.5em;
    font-family: "Kozuka Gothic Pro", "小塚ゴシック", Meiryo, メイリオ, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Arial, Helvetica, sans-serif;
font-weight: 100;
       font-size: calc(3*((100vw - 320px) / 950) + 14px);
     margin: 0 0 0 5px;
}

/* --------- タイトル下　吹き出し帯 --------- */
/* 吹き出しの四角部分 */
.QA_acor_area{
  margin: 0 auto 3% auto;
}



/* --------------------------------------------------
-----------------------------------------------------
Accordion menu　-Recruit-
-----------------------------------------------------
-------------------------------------------------- */
#recruit_yoko .accordion{
    padding: 0 5% 0 5%;
    /* max-width: 60vw; */
}

/* FIX */
}/* FIX */
/* FIX */
@media (min-width: 1600px) {
    #Select-Job-Type .flex-box_normal { padding: 1vw 11vw;}

}