@charset "utf-8";

/* ========================================================
   1. Variables (CSS変数定義)
   サイト全体の共通設定です。ここを変更すれば全体に反映されます。
   ======================================================== */
:root {
  /* --- Typography: Font Family (ft_) --- */
  --ft_base: "Zen Maru Gothic", "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  
  /* 英語フォント */
  --ft_pop: "Poppins", sans-serif;
  --ft_osw: "Oswald", sans-serif;
  --ft_man: "Manrope", sans-serif;

  /* --- Colors (cl_) --- */
  --cl_text:   #333333;       /* 基本文字色 */
  --cl_link:   #000000;       /* リンク色 */
  --cl_main:   #000000;       /* メインカラー */
  --cl_accent: #C00000;       /* アクセントカラー */
  --cl_bg:     #ffeef0;       /* 背景色 */

  /* --- Layout: Sizes (wd_) --- */
  --wd_pc: 1200px;
}

/* ========================================================
   2. Base Style (基本設定)
   ======================================================== */
html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-family: var(--ft_base);
  font-size: 1.6rem; /* 16px */
  line-height: 1.8;
  color: var(--cl_text);
  background-color: var(--cl_bg);
  text-align: justify;
  
  /* 文字詰め・レンダリング最適化 */
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

/* リンク設定 */
a {
  color: var(--cl_link);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

a:hover {
  opacity: 0.7;
}

/* 画像のレスポンシブ対応 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ========================================================
   3. Layout (レイアウト共通)
   ======================================================== */

/* コンテンツ幅制限用ラッパー */
.l-inner {
  width: 90%;
  max-width: var(--wd_pc);
  margin: 0 auto;
}

/* ========================================================
   4. Utility (汎用クラス)
   ======================================================== */
.u-indent {
    display: block;
    padding-left: 1.5rem;
    text-indent: -1.5rem;
}
.u-indent-mini {
  display: block;
  padding-left: 1rem;
  text-indent: -1rem;
}
.u-indent-mini > .u-indent {
    text-indent: 0;
    padding-left: 1.9rem;
}
.u-marker {
  background: linear-gradient(transparent 50%, #fff89e 0%);
  display: inline;
  padding: 0 1px 0px;
}
.u-pick {
  color: #ff8383;
}
.u-bold {
  font-weight: 700!important;
}
/* --- Display Switching (PC/SP切り替え) --- */
@media screen and (min-width: 751px) {
	.u-pc-only { display: block; }
	.u-sp-only { display: none; }
}


/* --- Font Helpers (英語フォント指定) --- */
.u-font-en-poppins { font-family: var(--ft_pop); }
.u-font-en-oswald  { font-family: var(--ft_osw); }
.u-font-en-manrope { font-family: var(--ft_man); }

/* --- Text Alignment --- */
.u-text-center { text-align: center; }
.u-text-left   { text-align: left; }
.u-text-right  { text-align: right; }

/* --- Flex Helpers (横並び)  --- */
.u-flex { display: flex; }
.u-flex-wrap { display: flex; flex-wrap: wrap; }
.u-flex_col1 { width: calc(100%/1); }
.u-flex_col2 { width: calc(100%/2); }
.u-flex_col3 { width: calc(100%/3); }
.u-flex_col4 { width: calc(100%/4); }


/* ========================================================
   5. Component (コンポーネントの基底)
   ======================================================== */

/* ボタンのベーススタイル */
.c-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* ========================================================
   6. Media Queries (SP対応)
   max-width: 750px
   ======================================================== */
@media screen and (max-width: 750px) {
  html {
	font-size: 1.333vw; 
  }
  body {
	font-size: 1.6rem;
    line-height: 1.6;
  }
  /* 表示切り替え */
  .u-pc-only { display: none; }
  .u-sp-only { display: block }

  /* FlexカラムをSPで1列に戻す（リセット） */
  .u-flex_col2,
  .u-flex_col3,
  .u-flex_col4 {
    width: calc(100%/1);
  }
  
}


body.rec-recom {
  position: relative;
}
body.rec-recom:before {
    content: '';
    display: block;
    width: 40%;
    min-height: 26vw;
    aspect-ratio: 470/310;
    background: url(../img/body_bg.webp) no-repeat center/contain;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.rec-recom header {
  position: absolute;
  max-width: 25.8rem;
  width: 21.5%;
  left: 0;
  right: 0;
  margin: 3.7rem auto 0;
  top: 0.4vw;
  z-index: 1;
}
.rec-recom .p-fv {
  aspect-ratio: 1200/800;
  width: 100%;
  background: url(../img/mv_bg.webp) no-repeat center/cover;
  align-items: center;
  justify-content: center;
  max-height: 80rem;
  position: relative;
  mask: url(../img/fv_mask.webp) no-repeat center bottom/100% 100%;
}
.rec-recom .p-fv:after,.rec-recom .p-fv:before {
    content: '';
    display: block;
}
.rec-recom .p-fv:after {
    width: 100%;
    background: url(../img/mv_bottom.webp) no-repeat center top/100% 100%;
    aspect-ratio: 1200 / 164;
    height: 16.4rem;
    position: absolute;
    left: 0;
    bottom: -2px;
}
.rec-recom .p-fv:before {
	width: 53%;
	max-width: 64rem;
	background: url(../img/mv_staff.webp) no-repeat center top/100% 100%;
	aspect-ratio: 640/320;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.rec-recom .p-fv__title {
  width: 57%;
  max-width: 68.4rem;
  margin: 0 auto 3rem;
}

.rec-recom .p-fv__sub-text {
  position: absolute;
  width: 28%;
  max-width: 33.5rem;
  bottom: 6%;
  z-index: 1;
  left: calc(50% - 37rem);
  transform: translateX(-50%);
}
@media (max-width: 1200px) {
  .rec-recom .p-fv__sub-text {
    left: calc(50% - 32%); /* 画面幅に合わせて動く */
  }
}



.rec-recom .p-guidelines {
    padding: 2.7rem 0;
}
.rec-recom .p-guidelines__catch {
    max-width: 50rem;
    width: 42%;
    margin: 0 auto;
}
.rec-recom .p-guidelines__content {
    position: relative;
}
.rec-recom .p-guidelines__content .content_wrap {
    max-width: 80rem;
    width: 66%;
    margin: 0 auto 6rem;
}
.rec-recom .p-guidelines__content dl {
    background: rgba(255,255,255,0.6);
    padding: 4rem 4rem 2rem;
    box-sizing: border-box;
    border-radius: 3rem;
}
.rec-recom .p-guidelines__content.recruit dl {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.rec-recom .p-guidelines__content:before {
    content: '';
    display: block;
    width: 14.4rem;
    height: 100%;
    min-height: 122.1rem;
    position: absolute;
    left: 0;
    top: 0;
    background: no-repeat center top/contain;
    z-index: -1;
}
.rec-recom .p-guidelines__content.recruit:before {
  background-image: url(../img/guidelines_dec01.webp);
}
.rec-recom .p-guidelines__content.work-style:before {
  background-image: url(../img/guidelines_dec02.webp);
}


.rec-recom .p-guidelines__content dl > div + div {
    padding-top: 3.2rem;
    border-top: 1px solid;
}
.rec-recom .p-guidelines__content dl > div {
    padding-bottom: 3.2rem;
}
.rec-recom .p-guidelines__content dt {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00789f;
    width: 35%;
}
.rec-recom .p-guidelines__content.work-style dt{
   color: #ff8383;
}
.rec-recom .p-guidelines__content dd {
    width: 65%;
    padding-right: 5%;
    box-sizing: border-box;
}
.rec-recom .p-guidelines__content .tel {
    font-weight: 600!important;
}
.rec-recom .p-guidelines__content .tel a {
    padding: 0 0.2rem 0.2rem;
    margin: 0 0.3rem;
    border-bottom: 1px solid;
}
.rec-recom .p-guidelines__content dd,.rec-recom .p-guidelines__content p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8;
}
.rec-recom .p-guidelines__content dd.u-flex-wrap {
    align-items: center;
}
.rec-recom .p-guidelines__content p {
  margin-bottom: 1em;
}
.rec-recom .p-guidelines__content dd.u-all {
    width: 100%;
    padding-left: 5%;
    text-align: center;
}
.rec-recom .p-guidelines__content dt .number {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 0.7rem;
    vertical-align: middle;
}
.rec-recom .p-guidelines__content.recruit dt .number {
    width: 3rem;
}
.rec-recom .p-guidelines__content.work-style dt .number {
    width: 4.8rem;
}

.rec-recom .p-guidelines__content .exsample {
    border: 1px solid;
    padding: 2rem 3rem;
    box-sizing: content-box;
    border-radius: 1.5rem;
    margin: 3rem -2rem 0;
}
.rec-recom .p-guidelines__content .exsample h4 {
    font-weight: 600;
    background: #fff9f9;
    width: fit-content;
    padding: 0.25rem 1.25rem;
    margin: -3.5rem -1.25rem 0;
}
.rec-recom .p-guidelines__content .exsample .u-indent {
    text-indent: 0;
    padding-left: 4rem;
    margin-bottom: 1rem;
}
.rec-recom .p-guidelines__content .exsample p {
    margin-bottom: 0;
}
.rec-recom .p-guidelines__content .exsample p.u-boder-top {
    padding-top: 1rem;
    border-top: 1px solid;
}
.rec-recom .p-guidelines__content .benefit-table th {
    font-weight: 500;
    width: 4.5em;
    max-width: 4.5em;
    text-align: justify;
    text-align-last: justify;
    white-space: nowrap;
}
.rec-recom .p-guidelines__content .benefit-table th span {
  display: inline-block;
  transform-origin: left center;
  width: 100%;
  padding-right: 0;
}

.rec-recom .download-wrap {
    background: #fffcd3;
    border: 2px solid;
    color: #ff8383;
    padding: 3rem;
    border-radius: 2rem;
    margin: 4rem auto 2rem;
}

.rec-recom .download-wrap .u-flex-wrap {
    gap: 2rem;
    max-width: 40rem;
    margin: 0 auto;
}

.rec-recom .download-wrap .u-flex-wrap a {
    width: calc((100% - 2rem)/2);
}

.rec-recom .download-wrap h3 {
  font-size: 1.8rem;
  position: relative;
  width: fit-content;
  margin: 0 auto 1.8rem;
  padding: 0 3rem;
}
.rec-recom .download-wrap h3:before,.rec-recom .download-wrap h3:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 1rem solid transparent;
    border-left: 1rem solid transparent;
    border-top: 1rem solid #ff8383;
    border-bottom: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.rec-recom .download-wrap h3:before {
    left: 0;
}
.rec-recom .download-wrap h3:after {
    right: 0;
}

.p-guidelines__content.work-style {
    padding-bottom: 9rem;
}
.holiday_total {
    margin-right: 1rem;
}

footer {
    text-align: center;
    padding: 2rem 0;
}
.float-btn {width: 10rem;right: 3rem;bottom: 3rem;}
.float-btn a,.float-btn a img {
    display: block;
    width: 100%;
}
.float-btn a + a {
    margin-top: 2rem;
}



@media screen and (max-width: 750px) {
.rec-recom header {
    width: 41%;
    max-width: 31rem;
    top: 0;
    margin: 5.7rem auto 0;
}
.rec-recom .p-fv {
    aspect-ratio: 750 / 937;
    min-height: 93.7rem;
    max-height: 100%;
    background-image: url(../img/mv_bg_sp.webp);
    mask-image: url(../img/fv_mask_sp.webp);
}
.rec-recom .p-fv__title {
    width: 88%;
    margin: 0 auto 13rem;
}
.rec-recom .p-fv:before {
    background-image: url(../img/mv_staff_sp.webp);
    aspect-ratio: 520/ 400;
    width: 69%;
    left: auto;
}
.rec-recom .p-fv:after {
    background-image: url(../img/mv_bottom_sp.webp);
    aspect-ratio: 750 / 100;
    height: 10rem;
}

.rec-recom .p-fv__sub-text {
    width: 49%;
    left: 0;
    bottom: 0;
    transform: translateX(0);
}


.rec-recom .p-guidelines__catch {
    max-width: 100%;
    width: 100%;
}
.rec-recom .p-guidelines__content:before {
    width: 100%;
    height: 14.6rem;
    min-height: auto;
}
.rec-recom .p-guidelines__content.recruit:before {
  background-image: url(../img/guidelines_dec01_sp.webp);
}
.rec-recom .p-guidelines__content.work-style:before {
  background-image: url(../img/guidelines_dec02_sp.webp);
}

.rec-recom .p-guidelines__content {
    padding-top: 8rem;
}
.rec-recom .p-guidelines__content .content_wrap {
    width: 90%;
}
.rec-recom .p-guidelines__content.recruit h2 {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}
	.rec-recom .p-guidelines__content dt {
    font-size: 3rem;
    width: 100%;
}
.rec-recom .p-guidelines__content.recruit dt .number {
    width: 4.5rem;
}
	.rec-recom .p-guidelines__content dd, .rec-recom .p-guidelines__content p {
    font-size: 2.6rem;
}
.rec-recom .p-guidelines__content dd {
    width: 86%;
    padding: 0;
    padding-left: 1.7rem;
    margin: 1rem auto 0;
}

.u-indent {
    padding-left: 3rem;
    text-indent: -3rem;
}
.u-indent-mini {
    padding-left: 1.5rem;
    text-indent: -1.5rem;
}
.u-indent-mini > .u-indent {
    text-indent: 0;
    padding-left: 4rem;
}
.rec-recom .p-guidelines__content .exsample {
    margin: 5rem -5rem 0;
    padding: 3rem 5rem;
}
.rec-recom .p-guidelines__content .exsample h4 {
    margin: -5.8rem -1.25rem 0;
}
.rec-recom .download-wrap h3 {
    font-size: 3.4rem;
    padding: 0;
    line-height: 1.4;
    margin: 0 auto 3rem;
}
.rec-recom .download-wrap .u-flex-wrap {
    width: 70%;
}
.rec-recom .p-guidelines__content dd.u-all {
    padding: 0;
}
.rec-recom .download-wrap .u-flex-wrap a {
    width: 100%;
}
.rec-recom .download-wrap + p {
    font-size: 2.4rem;
    line-height: 1.5;
}

.rec-recom .download-wrap h3:before, .rec-recom .download-wrap h3:after {
    display: none;
}
.rec-recom .download-wrap {
    padding: 5rem 0.4rem;
}

	body.rec-recom:before {
    width: 56%;
}
.rec-recom .p-guidelines {
    padding-bottom: 0;
}

.rec-recom .p-guidelines__content.work-style dt .number {width: 8.4rem;margin-left: -4.6rem;margin-right: 1.7rem;}

.rec-recom .p-guidelines__content.work-style dd {
    margin-top: -1.5rem;
}
	
.p-guidelines__content.work-style {
    padding-bottom: 0;
}
footer {
    padding: 7rem 0 10rem;
}
.float-btn {width: 13.3rem;right: 1rem;}

	}