/*************************************************
  OM Job Detail - 1 Column (No Flex/Grid)
  scope: .job-detail-container
**************************************************/
.job-detail-container{
  --om-font: "Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,ui-sans-serif,system-ui,Arial,sans-serif;
  --om-text: #1a1a1a;
  --om-text-sub: #6b7280;     /* slate-500 */
  --om-line: #e5e7eb;         /* slate-200 */
  --om-chip: #f3f4f6;         /* slate-100 */
  --om-bg: #fff;
  --om-page: #fafafa;
  --om-accent: #111827;       /* slate-900 */
  --om-accent-weak: #4b5563;  /* slate-600 */
  --om-accent-soft: #e0e7ff;  /* indigo-100 */
  --om-radius: 14px;
  --om-gap: 18px;
  --om-shadow: 0 6px 24px rgba(0,0,0,.06);

  width: 100%;

  font-family: var(--om-font);
  color: var(--om-text);
}
.job-detail-container *{ box-sizing: border-box; font-size:14px;}
.job-detail-container img{ max-width:100%; height:auto; display:block; }
.job-detail-container :where(a,button,input,select,textarea):focus-visible{
  outline:2px solid rgba(17,24,39,.35); outline-offset:2px; border-radius:8px;
}

/* ===== ページ幅・縦リズム（完全1カラム） ===== */
.job-detail-container .g-p-wrapper{ padding:12px; background: transparent; }
.job-detail-container .container-style{ max-width: 960px; margin: 0 auto; }
/*.job-detail-container .inner-wrapper > * + *{ margin-top: var(--om-gap); }*/

/* ===== メインビジュアル ===== */
.om-image-area-root{
  /*background: var(--om-bg);*/
  /*border: 1px solid var(--om-line);*/
  /*border-radius: var(--om-radius);*/
  /*box-shadow: var(--om-shadow);*/
  /*padding: 8px;*/
}
.om-image-area{ position: relative; width: 100%; padding-top: 56.25%; background: linear-gradient(180deg,#f3f4f6,#e5e7eb); border-radius: 10px; overflow: hidden; }
.om-image-area img{ position:absolute; inset:0; width:100%; height:100%; 
  object-fit:contain; 
}

/* ===== タイトル・要点（全てブロックで縦積み） ===== */
.om-title-area-root,
.om-header-area-root,
.om-job_type-area-root,
.om-about-job-area-root,
.om-salary-area-root,
.om-job-description-area-root,
.om-about-application-area-root,
.om-company-information-area-root,
.om-other-area-root{
  /*background: var(--om-bg);*/
  /*border: 1px solid var(--om-line);*/
  /*border-radius: var(--om-radius);*/
  /*box-shadow: var(--om-shadow);*/
  /*padding: 16px 18px;*/
  font-size:14px;
  line-height:1.75em;
  letter-spacing: .1em;
}

/* タイトル */
.om-title-area [data-job-container-sub_title]{
  font-size: 15px; color: var(--om-accent-weak); line-height: 1.7; margin-bottom: 6px;
}
.om-title-area [data-job-container-item_name]{
  font-size: clamp(20px, 3.8vw, 28px); font-weight: 800; line-height: 1.35; letter-spacing: .01em; margin-bottom:12px;
}

/* 要点ピル（住所／給与／雇用形態）→インラインブロックで折り返し */
.om-header-area{
  display: flex;
  flex-direction: column;
  gap:15px;
  background: var(--om-chip);
  padding: 15px 15px;
  border-radius: 9px;
}

.om-header-area > div{
  display: inline-block;
  vertical-align: top;
  /*margin: 4px 6px 0 0;*/
  /*padding: 8px 12px;*/
  /*border: 1px solid var(--om-line);*/
  /*border-radius: 999px;*/
  /*background: var(--om-chip);*/
  /*color: var(--om-accent-weak);*/
  font-size: 16px;
  line-height: 1.25em;
  /*padding: 6px 12px;*/
}
/*.om-header-area > div[data-job-container-hiring_system]{
  background: #eef2ff; color:#3730a3; border-color:#c7d2fe; font-weight:700;
}*/
.om-header-area > div[data-job-container-address]::before{
  content:'';
  display: inline-block;
  width:18px;
  height:18px;
  margin-right:6px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url('../images/jobdetail/map-marker-alt-solid.svg');
  top: 2px;
  position: relative;
}
.om-header-area > div[data-job-container-salary]::before{
  content:'';
  display: inline-block;
  width:18px;
  height:18px;
  margin-right:6px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url('../images/jobdetail/yen-sign-solid.svg');
  top: 2px;
  position: relative;
}
.om-header-area > div[data-job-container-hiring_system]::before{
  content:'';
  display: inline-block;
  width:18px;
  height:18px;
  margin-right:6px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url('../images/jobdetail/user-circle-solid.svg');
  top: 2px;
  position: relative;
}

/* 職種ピル */
.om-job_type2-area > div{
  display:inline-block; vertical-align:top;
  margin:4px 6px 0 0; padding:6px 10px;
  border:1px solid var(--om-line); border-radius:999px;
  background: var(--om-chip); color: var(--om-accent-weak); font-size:12px;
}

/* ===== 定義リスト（dl）= 完全ブロック1カラム ===== */
.om-job-container,
.om-job-container-list{ margin: 0 0 30px; }
/*.om-job-container:last-child,
.om-job-container-list:last-child{ margin-bottom: 0; }*/

/* 見出し dt を“帯＋ボーダー”で強調 */
.om-job-container dt,
.om-job-container-list dt{
  display:block;
  margin:0 0 8px;
  padding:6px 12px;
  background: #f8fafc;              /* 淡い帯 */
  /*border: 1px solid var(--om-line);*/  /* 外枠 */
  border-left: 3px solid #e60012;    /* アクセント帯（indigo-600） */
  /*border-radius: 10px;*/
  font-weight: 700;
  color: #111827;
  font-size:1.25em;
}

/* 本文 dd は通常テキスト */
.om-job-container dd{ margin:0; color:var(--om-text); line-height:1.9; word-break:break-word; font-size:1.125em; }
.om-job-container dd + dd{ margin-top:6px; }       /* 同じ項目で複数ddが来たときの間隔 */
.om-job-container .sc-bdVaJa{ white-space: pre-wrap; } /* 改行保持 */

/* 箇条書き版（特徴など） */
.om-job-container-list dd{ margin:0; }
.om-job-container-list ul{ list-style:none; padding:0; margin:0; }
.om-job-container-list li{
  display:inline-block; vertical-align:top;
  margin:6px 6px 0 0; padding:6px 10px;
  background: var(--om-chip);
  border:1px solid var(--om-line);
  border-radius:999px;
  color: var(--om-accent-weak);
  font-size:12px;
  line-height:1.25em;
}

/* ===== 会社情報・その他も同じdlスタイルを継承 ===== */

/* ===== 応募ボタン ===== */
.om-apply_button-root{ margin-top: 48px;     max-width: 960px;
    margin-left:auto; margin-right:auto;}
.om-apply_button{
  display:block; width:100%;
  text-align:center; text-decoration:none; cursor:pointer;
  background: var(--om-accent); color:#fff;
  border:1px solid var(--om-accent);
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 700; font-size: 16px;
  box-shadow: 0 6px 18px rgba(17,24,39,.16);
  transition: transform .12s ease, opacity .12s ease;
}
.om-apply_button:hover{ opacity:.92; }
.om-apply_button:active{ transform: translateY(1px); }

/* ===== 細かな整形 ===== */
.om-salary-area .om-job-container dd{ font-variant-numeric: tabular-nums; }
.om-other-area-root dd{ color: var(--om-text-sub); }

/* ===== 衝突回避（外部フレームワーク .row など） ===== */
.job-detail-container :where(.row,.container,.section){ all: revert; }



.om-image-area-root{
  margin-bottom:24px;
}
.om-headers{
  margin-bottom:32px;
}


.swiper-slide > div {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%;
    background-color: #efefef;
}
.swiper-slide > div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}


.job-detail-section{
  position: relative;
  margin-bottom:50px;
}
.job-detail-section__head{
  position: relative;
  border-bottom: solid 5px rgba(230, 0, 18,0.5);
  position: relative;
  margin-bottom: 30px;
}
.job-detail-section__head:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 5px rgba(230, 0, 18,1);
  bottom: -5px;
  width: 20%;
}

.job-detail-section__title{
  font-size: 1.75em;
  position: relative;
}
.job-detail-section__title::before{
  content:'[';
  display: inline-block;
  margin-right: 4px;
}
.job-detail-section__title::after{
  content:']';
  display: inline-block;
  margin-left: 4px;
}







.image-area .button-slide {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;
    border-radius: 7px;
    z-index: 10;
    background: rgba(255,255,255,.9);
    box-shadow: 0 2px 8px #00000026
}

.image-area .button-slide-sp {
    display: none
}

@media screen and (min-width: 1476px) {
    .image-area .button-slide {
        display:flex!important
    }

    .image-area .button-slide.next {
        right: -110px
    }

    .image-area .button-slide.prev {
        left: -110px
    }

    .job-offer-detail-warp .slide-area .pagination-nav-container {
        display: none!important
    }
}

.image-area .button-slide.next svg,.image-area .button-slide.prev svg {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    padding: 17px;
    font-size: 12px
}

.job-detail-slide .swiper-slide {
    padding: 0 10px
}

.job-detail-slide .img {
    display: block;
    overflow: hidden;
    border-radius: 10px
}

.job-detail-main-slide {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden
}

.job-detail-main-slide .swiper-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex
}

.job-detail-main-slide {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box
}

.job-detail-main-slide .swiper-wrapper {
    box-sizing: border-box
}

.job-detail-main-slide .swiper-slide {
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
    height: auto
}

.job-detail-main-slide .swiper-slide .img {
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    display: block
}

.job-detail-main-slide .swiper-slide .img img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-sizing: border-box
}

@media screen and (max-width: 1475px) {
    .image-area .button-slide {
        display:none!important
    }

    .job-offer-detail-warp .slide-area .pagination-nav-container {
        display: flex!important;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 40px;
        width: 100%
    }

    @media screen and (max-width: 1200px) {
        .job-offer-detail-warp .slide-area .pagination-nav-container {
            margin-top:25px
        }
    }

    .job-offer-detail-warp .slide-area .button-slide-tablet {
        display: flex!important
    }

    .job-offer-detail-warp .slide-area .swiper-pagination {
        position: static!important;
        width: auto;
        bottom: auto!important
    }

    .job-offer-detail-warp .slide-area {
        padding-bottom: 20px
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .job-offer-detail-warp {
        font-size:15px
    }

    .job-detail-main-slide {
        width: 100%;
        max-width: 100%
    }

    .job-detail-main-slide .swiper-wrapper,.job-detail-main-slide .swiper-slide {
        box-sizing: border-box
    }

    .job-detail-main-slide .swiper-slide .img {
        width: 100%!important;
        max-width: 100%!important;
        height: auto!important;
        aspect-ratio: 580 / 390;
        max-height: 300px
    }

    .job-detail-main-slide .swiper-slide .img img {
        width: 100%!important;
        height: 100%!important;
        object-fit: cover
    }

    .job-offer-detail-warp .title-area .heading-h1 {
        font-size: 1.75rem
    }

    .job-offer-detail-warp .heading-h2 {
        font-size: 1.375rem
    }

    .job-offer-detail-warp .heading-h3 {
        font-size: 1.125rem
    }
}

@media screen and (min-width: 1024px) and (max-width: 1475px) {
    .job-offer-detail-warp {
        font-size:15px
    }

    .job-detail-main-slide .swiper-slide {
        box-sizing: border-box
    }

    .job-detail-main-slide .swiper-slide .img {
        width: 100%!important;
        max-width: 100%!important;
        height: auto!important;
        aspect-ratio: 580 / 390;
        max-height: 350px
    }

    .job-detail-main-slide .swiper-slide .img img {
        width: 100%!important;
        height: 100%!important;
        object-fit: cover
    }

    .job-offer-detail-warp .image-area .img {
        max-width: 100%;
        width: auto;
        height: auto;
        max-height: 350px
    }

    .job-offer-detail-warp .title-area .heading-h1 {
        font-size: 1.875rem
    }

    .job-offer-detail-warp .heading-h2 {
        font-size: 1.4375rem
    }

    .job-offer-detail-warp .heading-h3 {
        font-size: 1.1875rem
    }
}

@media screen and (min-width: 1476px) {
    .job-detail-main-slide .swiper-slide {
        box-sizing:border-box
    }

    .job-detail-main-slide .swiper-slide .img {
        max-width: 580px
    }
}

.job-detail-slide .txt {
    text-align: left;
    font-size: .9375rem;
    color: #888;
    margin-top: 30px;
    line-height: 1.7;
    padding: 0 10px;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.job-detail-slide .txt h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
    line-height: 1.4
}


.om-swiper-root{
  margin-bottom:30px;
}


.om-title-area{
  margin-bottom:30px;
}