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

/*==================================================
 common
==================================================*/
:root {
  --height_header: 0;
  --height_fix_footer: 0px;
  --section: 100px;

  --base_width: 1100px;
  --base_minwidth: 780px;
  --base_midwidth: 980px;
  --base_color: var(--black);
  --base_bg: var(--white);

  --font_jp: "Kosugi Maru", sans-serif;
  --font_en: "Jost", sans-serif;
  --icons: "Material Symbols Outlined";
  --iconsfill: "FILL" 1; /*塗りつぶしアイコン font-variation-settings: var(--iconsfill);*/

  --transition: 0.3s;
  --bold: 800;

  --black: #323232;
  --white: #ffffff;
  --gray: #878787;
  --Lgray: #f3f3f3;

  --blue: #4c74b9;
  --orange: #ee902a;
  --pink: #ec7468;
  --gold: #b68a3b;
  --green: #33a293;
  --yellow: #ffd700;
  --red: #e5142e;
  --searchgreen: #3eb04b;

  --mix__c: color-mix(in srgb, var(--c) 20%, var(--white) 100%);

  --radius: 10px;
  --shadow: 1px 1px 4px 4px rgba(0, 0, 0, 0.1);
  --shadow2: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  --shadow3: 1px -1px 4px 0 rgba(0, 0, 0, 0.1), -2px 0 4px 0 rgba(0, 0, 0, 0.1);

  --c: var(--blue);
}
@media (max-width: 520px) {
  :root {
    --section: 50px;
    --base_width: 100%;
    --base_minwidth: 100%;
    --base_midwidth: 100%;
    --shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
  }
}

html {
  scroll-padding-top: 70px;
}
body {
  position: relative;
  padding-top: var(--height_header);
  line-height: 1.8;
}

a {
  transition: all 0.2s;
}

@media screen and (max-width: 520px) {
  html {
    scroll-padding-top: 46px;
  }
}

/*----------------------------------------
  base control
----------------------------------------*/

/* objedt-fit */
.of_cover img,
img.of_cover {
  object-fit: cover;
}

.of_cont img,
img.of_cont {
  object-fit: contain;
}

body .calc_pr_min {
  padding-right: max(5%, calc((100vw - var(--base_minwidth)) / 2));
}
body .calc_pl_min {
  padding-left: max(5%, calc((100vw - var(--base_minwidth)) / 2));
}

@media screen and (max-width: 520px) {
  body .calc_pr_min {
    padding-right: 5%;
  }
  body .calc_pl_min {
    padding-left: 5%;
  }
}

/*----------------------------------------
  box control
----------------------------------------*/

/* [class*="grid_"] 等分 */
[class*="grid_"] {
  display: grid;
  grid-template-columns: repeat(var(--grid), 1fr);
  gap: var(--gap);
  --grid: 3;
  --gap: 50px;
}
@media (max-width: 520px) {
  [class*="grid_"] {
    --gap: 30px;
    --grid: 1;
  }
}

/* [class*="grid_"] 等分 auto-fit*/
[class*="gridfit_"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--width));
  justify-content: center;
  gap: var(--gap);
  --grid: 3;
  --gap: 50px;
  --width: calc((100% - var(--gap) * (var(--grid) - 1)) / var(--grid));
}

/* [class*="flexnum_"] 等分 */
[class*="flexnum_"] {
  display: flex;
  flex-flow: wrap;
  gap: var(--gap);
  --num: 3;
  --gap: 60px;
  --width: calc((100% - var(--gap) * (var(--num) - 1)) / var(--num));
}

[class*="flexnum_"] > * {
  width: var(--width);
}

@media screen and (max-width: 520px) {
  [class*="flexnum_"] {
    --num: 1;
    --gap: 20px;
  }
}

/* [class*="flexfit_"] 可変 / 1個：1列 / 偶数：2列 奇数：3列 */
[class*="flexfit_"] {
  display: flex;
  flex-flow: wrap;
  gap: var(--gap);
  --gap: 60px;
}
/*1以外奇数 */
[class*="flexfit_"] > * {
  --num: 3;
  --width: calc((100% - var(--gap) * (var(--num) - 1)) / var(--num));
  width: var(--width);
}
/* 1個 */
[class*="flexfit_"]:has(> *:only-child) > * {
  --num: 1;
  /*width: fit-content;*/
}
/* 偶数 */
[class*="flexfit_"]:has(> *:nth-child(even):last-child) > * {
  --num: 2;
}

@media screen and (max-width: 520px) {
  [class*="flexfit_"] > *,
  [class*="flexfit_"]:has(> *:only-child) > *,
  [class*="flexfit_"]:has(> *:nth-child(even):last-child) > * {
    --num: 1;
  }
}

/* [class*="alternating_"] 交互の */
[class*="altern_"] {
  display: flex;
  flex-flow: column;
  gap: var(--gaps);
  --gaps: 100px; /*親縦gap*/
  --gap: 60px; /*子横gap*/
  --firstchild: 55%; /*子メディア幅*/
}
[class*="altern_"] > * {
  display: flex;
  gap: var(--gap);
}
[class*="altern_"] > * > *:first-child {
  flex: none;
  width: var(--firstchild);
}
[class*="altern_"] > * > *:last-child {
  flex: 1;
}

[class*="altern_"] > *:nth-child(even) {
  flex-flow: row-reverse;
}

@media screen and (max-width: 520px) {
  [class*="altern_"] {
    --gaps: 50px; /*親縦gap*/
    --gap: 20px; /*子横gap*/
    --firstchild: 100%; /*子メディア幅*/

    --alternff: column; /*スマホのみ並び*/
  }
  [class*="altern_"] > * {
    flex-flow: var(--alternff);
  }
  [class*="altern_"] > *:nth-child(even) {
    flex-flow: var(--alternff);
  }
}

/* [class*="Horizontal_"] 水平（つまり左右）*/
[class*="horizon_"] {
  display: flex;
  gap: var(--gap);
  flex-flow: var(--horizonff);
  --gap: 60px; /*横gap*/
  --horizonff: row; /*並び*/
  --firstchild: 55%; /*メディア幅*/
}
[class*="horizon_"] > *:first-child {
  flex: none;
  width: var(--firstchild);
}
[class*="horizon_"] > *:last-child {
  flex: 1;
}

@media screen and (max-width: 520px) {
  [class*="horizon_"] {
    --gap: 20px; /*横gap*/
    --horizonff: column; /*並び*/
    --firstchild: 100%; /*メディア幅*/
  }
}

/*==================================================
 this site specific
==================================================*/
/*----------------------------------------
  slide
----------------------------------------*/
*[data-js="splide-slide1"] .splide__pagination {
  bottom: -5%;
}
*[data-js="splide-slide1"] .splide__pagination__page.is-active {
  background: var(--c);
}

*[data-js="splide-slide1"] .splide__arrows {
  position: absolute;
  top: 105%;
  left: 50%;
  transform: translateX(-50%);
  width: var(--base_width);
  margin: 0 auto;
}

*[data-js="splide-slide1"] .splide__arrow {
  top: 0;
  background: var(--c);
}
*[data-js="splide-slide1"] .splide__arrow svg {
  fill: var(--white);
}

/*----------------------------------------
  sec-page
----------------------------------------*/
.sec-page {
  padding-bottom: 100px;
}

@media screen and (max-width: 520px) {
  .sec-page {
    padding-bottom: 50px;
  }
}

/*----------------------------------------
  title
----------------------------------------*/

.tit_page {
  padding-block: 50px;
  color: var(--white);
  font-size: 4rem;
  font-weight: var(--bold);
  line-height: 1.3;
  text-align: center;
  background: var(--blue);
}

.tit_A,
.tit_A_ico {
  grid-area: titA;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  margin: 0 auto 30px;
  color: var(--blue);
  font-size: 4.8rem;
  font-weight: var(--bold);
  line-height: 1.3;
  text-align: left;
}

.tit_A i {
  display: block;
  color: var(--gray);
  font-size: 0.3em;
  font-weight: normal;
  line-height: 1.3;
}
.tit_A.t_L {
  align-items: flex-start;
  margin: 0;
}

.tit_A_ico {
  flex-flow: row;
  gap: 10px;
  color: var(--c);
  font-size: 3.6rem;
}
.tit_A_ico:before {
  content: "";
  display: inline-block;
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
[data-job="job01"] .tit_A_ico:before {
  background-image: url(../images/ico-job01.webp);
}
[data-job="job02"] .tit_A_ico:before {
  background-image: url(../images/ico-job02.webp);
}
[data-job="job03"] .tit_A_ico:before {
  background-image: url(../images/ico-job03.webp);
}
[data-job="job04"] .tit_A_ico:before {
  background-image: url(../images/ico-job04.webp);
}

.tit_B {
  margin: 40px auto 30px;
  color: var(--blue);
  font-size: 2.8rem;
  text-align: center;
  font-weight: var(--bold);
  line-height: 1.3;
}
.tit_B rt {
  font-size: 9px;
  opacity: 0.5;
}

.tit_C {
  position: relative;
  width: fit-content;
  min-width: 350px;
  display: inline-block;
  margin: 0 auto 20px;
  padding: 16px;
  border-radius: 4px;
  background: var(--blue);
  text-align: center;
  font-size: 2.8rem;
  font-weight: var(--bold);
  line-height: 1.3;
  color: var(--white);
}
.tit_C::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: var(--blue) transparent transparent;
  translate: -50% 100%;
}

.tit_D {
  margin: 25px auto 10px;
  color: var(--blue);
  font-size: 2rem;
  font-weight: var(--bold);
  line-height: 1.3;
}

.tit_E {
  margin: 40px auto;
  padding: 10px;
  background: var(--blue);
  color: var(--white);
  font-size: 2.4rem;
  font-weight: var(--bold);
  text-align: center;
  line-height: 1.3;
}

@media screen and (max-width: 520px) {
  .tit_page {
    padding-block: 20px 30px;
    font-size: 2.6rem;
  }

  .tit_A {
    font-size: 2.8rem;
  }
  .tit_A i {
    font-size: 0.4em;
  }

  .tit_A_ico {
    flex-flow: column;
    gap: 10px;
    font-size: 2.4rem;
  }

  .tit_A_ico:before {
    width: 50px;
    height: 50px;
  }

  .tit_B {
    font-size: 1.8rem;
  }

  .tit_C {
    min-width: 250px;
    margin: 0 auto 20px;
    font-size: 1.8rem;
  }
  .tit_C::after {
    border-width: 12px 8px 0 8px;
  }

  .tit_D {
    margin: 25px auto 10px;
    font-size: 1.8rem;
  }

  .tit_E {
    margin: 10px auto;
    font-size: 1.8rem;
    text-align: left;
  }
}

/*----------------------------------------
  button
----------------------------------------*/

:is(.btn_A, .btn_B, .btn_C) {
  grid-area: btnA;
  --btn_color: var(--blue);
  position: relative;
  display: block;
  width: min(80vw, 400px);
  margin: 40px auto;
  padding: 14px 2em 14px 1em;
  border-radius: 50px;
  font-weight: var(--bold);
  text-align: center;
  line-height: 1.3;
}
:is(.btn_A, .btn_B, .btn_C):after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  content: "arrow_forward";
  font-family: var(--icons);
}

.btn_A {
  background: var(--btn_color);
  border: 1px solid var(--btn_color);
  color: var(--white);
}
.btn_A:hover {
  opacity: 0.8;
}
[data-job="job01"] .btn_A {
  --btn_color: var(--orange);
}
[data-job="job02"] .btn_A {
  --btn_color: var(--pink);
}
[data-job="job03"] .btn_A {
  --btn_color: var(--gold);
}
[data-job="job04"] .btn_A {
  --btn_color: var(--green);
}

.btn_B {
  background: var(--white);
  border: 1px solid var(--white);
  color: var(--btn_color);
}
.btn_B:hover {
  background: var(--btn_color);
  border: 1px solid var(--white);
  color: var(--white);
}

.btn_C {
  width: fit-content;
  padding: 14px 4em 14px 2em;
  background: var(--white);
  border: 1px solid var(--blue);
  color: var(--blue);
}

.btn_D {
  width: 100%;
  display: block;
  color: var(--blue);
  font-size: 1.6rem;
  text-align: right;
}
.btn_D:after {
  content: "arrow_forward";
  font-family: var(--icons);
}

@media screen and (max-width: 520px) {
  :is(.btn_A, .btn_B, .btn_C) {
    width: min(70vw, 90%);
    margin: 30px auto 15px;
    padding: 18px 2em 18px 1em;
    font-size: 1.5rem;
  }
}

.btn_favorite {
  --btn_color: var(--blue);
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 8px 1.3em;
  background: var(--white);
  border-radius: 50px;
  border: 1px solid var(--gray);
  color: var(--gray);
  font-weight: var(--bold);
  text-align: center;
  line-height: 1.3;
}

.btn_favorite:before {
  content: "star";
  font-family: var(--icons);
  color: var(--yellow);
}

.btn_apply {
  --mixc: color-mix(in srgb, var(--c) 100%, #f5eac8 30%);
  position: relative;
  cursor: pointer;
  display: block;
  width: fit-content;
  padding: 10px 4em 10px 3em;
  outline: none;
  border: none;
  border: 1px solid var(--c);
  border-radius: 50px;
  background: var(--c);
  background: linear-gradient(0deg, var(--c) 50%, var(--mixc) 100%);
  -webkit-box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 5px 10px rgba(0, 0, 0, 0.1);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 5px 10px rgba(0, 0, 0, 0.1);
  color: var(--white);
  font-size: 1.1em;
  font-weight: var(--bold);
  text-align: center;
}
.btn_apply:after {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  content: "arrow_forward";
  font-family: var(--icons);
}
.btn_apply[data-js="more-btn"]:after {
  content: "add";
}

@media screen and (max-width: 520px) {
  .btn_apply {
    width: 100%;
    padding: 10px 2em 10px 1em;
  }
}

/*----------------------------------------
  トグル
----------------------------------------*/
.toggle {
  display: none;
}
.toggle + .click::after {
  transform: rotate(90deg);
}
.toggle + .click + .open {
  height: 0;
  padding: 0 20px;
  text-align: center;
  overflow: hidden;
  transition: var(--transition);
}
.toggle:checked + .click + .open {
  /*開閉時*/
  height: auto;
  padding: 20px;
  transition: var(--transition);
}

/*----------------------------------------
  background
----------------------------------------*/
.bg {
  background: url(../images/bg01.webp) repeat-y top center / 100% auto;
}

/*==================================================
header
==================================================*/
header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-width: var(--base_width);
  padding: 10px 2%;
  background: var(--blue);
}
header .logo {
  width: 250px;
}

header nav {
  flex: 1;
  padding: 0;
}

header nav .gnav {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
header nav .gnav a {
  color: var(--white);
}
header nav .gnav a:hover {
  opacity: 1;
  text-decoration: underline;
}

.hamburger,
#hamburger-check {
  display: none;
}

@media screen and (max-width: 520px) {
  header {
    --h-height: 60px;
    height: var(--h-height);
    padding: 0 0 0 10px;
  }

  header .logo {
    width: 260px;
  }

  .hamburger {
    position: fixed;
    top: 7px;
    right: 10px;
    z-index: 90;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    width: 44px;
  }

  #hamburger-check {
    display: none;
  }

  /**タップされる前 open**/
  .hamburger span,
  .hamburger span:before,
  .hamburger span:after {
    content: "";
    position: absolute;
    display: block;
    height: 3px;
    width: 30px;
    border-radius: 3px;
    background: var(--white);
  }

  .hamburger span:before {
    bottom: 10px;
  }

  .hamburger span:after {
    top: 10px;
  }

  /**タップされたとき close**/
  #hamburger-check:checked ~ .hamburger span {
    background: rgba(255, 255, 255, 0);
  }

  #hamburger-check:checked ~ .hamburger span::before {
    bottom: 0;
    transform: rotate(45deg);
  }

  #hamburger-check:checked ~ .hamburger span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  header nav .gnav {
    position: fixed;
    top: var(--h-height);
    left: 100%;
    /*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    flex-flow: column;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: calc(100% - var(--h-height));
    margin: 0;
    padding: 40px 50px 120px;
    background-color: var(--white);
    font-size: 1.2em;
    overflow-y: auto;
    overflow-x: hidden;
    transition: var(--transition);
  }
  header nav .gnav li::after {
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    border-bottom: 1px dotted var(--gray);
  }
  header nav .gnav a {
    display: block;
    padding: 10px;
    color: var(--base_color);
    font-weight: var(--bold);
    text-align: center;
  }

  #hamburger-check:checked ~ .gnav {
    left: 0;
  }
}

a.floating_search {
  position: fixed;
  right: 0;
  bottom: 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 30px 12px;
  font-size: 2rem;
  font-weight: var(--bold);
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: var(--white);
  background: var(--searchgreen);
  border-radius: var(--radius) 0 0 var(--radius);
  z-index: 100;
}
a.floating_search:hover {
  opacity: 0.9;
}
a.floating_search::before {
  --width: 26px;
  content: "";
  width: var(--width);
  aspect-ratio: 26/31;
  -webkit-mask: url(../images/ico-search.svg) center / 100% auto no-repeat;
  mask: url(../images/ico-search.svg) center / 100% auto no-repeat;
  background: var(--white);
}

@media screen and (max-width: 520px) {
  a.floating_search {
    right: 10px;
    bottom: 0;
    gap: 10px;
    padding: 10px 30px;
    font-size: 1.6rem;
    writing-mode: horizontal-tb;
    text-orientation: sideways;
    border-radius: var(--radius) var(--radius) 0 0;
    z-index: 100;
  }
  a.floating_search::before {
    --width: 26px;
  }
}

/*==================================================
 footer
==================================================*/
footer {
  display: grid;
  grid-template-columns: 50% 1fr;
  grid-template-areas:
    "logo sitemap"
    "p sitemap";
  gap: 0 30px;
  padding: 70px max(5%, calc((100vw - var(--base_width)) / 2));
  color: var(--white);
  background: var(--blue);
}
footer .logo {
  grid-area: logo;
}
footer .logo img {
  width: 350px;
  height: auto;
}
footer p {
  grid-area: p;
  line-height: 1.3;
}
footer p strong {
  font-size: 1.8rem;
  font-weight: var(--bold);
}
footer p a {
  display: block;
  margin-block: 5px 10px;
  font-size: 2.8rem;
  font-weight: var(--bold);
  line-height: 1;
}
footer .sitemap {
  grid-area: sitemap;
  height: 260px;
  column-count: 2;
  column-gap: 10px;
  column-fill: auto;
}
footer .sitemap a {
  width: 100%;
  padding: 5px 15px;
  font-size: 1.8rem;
  font-weight: var(--bold);
}
footer .sitemap a:hover {
  opacity: 1;
  text-decoration: underline;
}

.copyright {
  background: var(--blue);
  color: var(--white);
  font-size: 1.2rem;
  text-align: center;
  padding: 20px 0;
}

@media screen and (max-width: 520px) {
  footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 50px 5% 40px;
  }
  footer .logo img {
    width: 320px;
  }
  footer .sitemap {
    height: auto;
    display: flex;
    flex-flow: wrap;
    gap: 10px 0;
    margin: 20px auto 0;
  }
  footer .sitemap a {
    width: fit-content;
    padding: 0;
    font-size: 1.4rem;
    font-weight: normal;
  }
  footer .sitemap a:not(:last-child)::after {
    content: "/";
    margin: 0 14px;
  }

  .copyright {
    padding: 20px 6% 20px;
    text-align: left;
  }
}

/*==================================================
TOPページ
==================================================*/
/*----------------------------------------
  mv
----------------------------------------*/
.sec-top-mv {
  padding-bottom: 80px;
}
.sec-top-mv .h1-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  justify-items: center;
  padding: 50px 0 30px;
  background: var(--blue);
}
.sec-top-mv .h1-wrap .flexnum_sub {
  --num: 4;
  --gap: 20px;
  width: 70%;
  margin-inline: auto;
}

.sec-top-mv .mv-img img {
  width: 100%;
}

@media screen and (max-width: 520px) {
  .sec-top-mv {
    padding-bottom: 45px;
  }
  .sec-top-mv .h1-wrap {
    padding: 20px 10%;
  }
  .sec-top-mv .h1-wrap .flexnum_sub {
    --num: 2;
    --gap: 12px;
    gap: 5px var(--gap);
    width: 85%;
  }
}

/*----------------------------------------
  concept
----------------------------------------*/
.sec-concept {
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-areas:
    "titA p"
    "ul ul"
    "dl dl";
  gap: 40px 30px;
}

.sec-concept p.text {
  grid-area: p;
}
.sec-concept p.text strong {
  display: block;
  font-size: 2.6rem;
  font-weight: var(--bold);
  line-height: 1.3;
}

.sec-concept ul.gridfit_top-job {
  grid-area: ul;
  --grid: 4;
  --gap: 20px;
}
ul.gridfit_top-job li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 30px 20px 20px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  background: var(--white);
}
ul.gridfit_top-job li i {
  width: 40%;
  margin: 0 auto 10px;
}
ul.gridfit_top-job li p {
  font-size: 2.2rem;
  font-weight: var(--bold);
  text-align: center;
  line-height: 1.3;
}
ul.gridfit_top-job li p strong {
  font-size: 1.3em;
}
ul.gridfit_top-job li .btn_A {
  width: 100%;
  margin: 0 auto;
}

.sec-concept dl {
  grid-area: dl;
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: center;
  padding: 20px;
  color: var(--white);
  background: var(--blue);
  border-radius: var(--radius);
}
.sec-concept dl dt {
  font-size: 2.6rem;
  font-weight: var(--bold);
  text-align: center;
  line-height: 1.3;
}

@media screen and (max-width: 520px) {
  .sec-concept {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .sec-concept p.text {
    margin-bottom: 10px;
  }
  .sec-concept p.text strong {
    font-size: 2rem;
  }

  .sec-concept ul.gridfit_top-job {
    --grid: 2;
    --gap: 15px;
    padding: 0 5px;
  }
  ul.gridfit_top-job li {
    padding: 30px 16px 20px;
  }
  ul.gridfit_top-job li i {
    width: 50%;
    margin-bottom: 0;
  }
  ul.gridfit_top-job li p {
    font-size: 1.6rem;
  }
  ul.gridfit_top-job li .btn_A {
    padding: 10px 2em 10px 1em;
  }

  .sec-concept dl {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0 5px;
    padding: 20px;
  }
  .sec-concept dl dt {
    font-size: 2rem;
  }
}

/*----------------------------------------
  h-osaka
----------------------------------------*/
.sec-h-osaka .tit_A {
  width: var(--base_width);
  font-size: 4.4rem;
  padding-block: 30px;
  background:
    url(../images/chara01.webp) no-repeat left 90px bottom / auto 100%,
    url(../images/chara02.webp) no-repeat right 90px bottom / auto 100%;
}
.sec-h-osaka .content {
  display: grid;
  grid-template-columns: 550px 1fr;
  gap: 30px;
  padding-left: max(5%, calc((100vw - var(--base_width)) / 2));
}
.sec-h-osaka .content h3 {
  font-size: 3rem;
  font-weight: var(--bold);
}
.sec-h-osaka .content picture {
  position: relative;
  display: block;
}
.sec-h-osaka .content picture::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%; /* グラデーションの幅 */
  height: 100%;
  background: linear-gradient(to right, white, transparent);
  z-index: 2;
  pointer-events: none;
}
.sec-h-osaka .content picture img {
  position: relative;
  z-index: 0;
}

@media (max-width: 520px) {
  section.sec-h-osaka {
    padding-block: 20px 0;
    background: var(--white);
  }
  .sec-h-osaka .tit_A {
    width: 90%;
    font-size: 2.5rem;
    padding-block: 0 125px;
    background: url(../images/chara01_sp.webp) no-repeat center bottom / auto 95px;
  }
  .sec-h-osaka .content {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-left: 0;
  }
  .sec-h-osaka .content .text {
    padding: 0 5%;
  }
  .sec-h-osaka .content h3 {
    font-size: 2rem;
  }

  .sec-h-osaka .content picture::before {
    top: -1px;
    width: 100%;
    height: 40%; /* グラデーションの高さ */
    background: linear-gradient(to bottom, white, transparent);
  }
}

/*----------------------------------------
  top-work
----------------------------------------*/
.sec-top-work {
  display: grid;
  grid-template-columns: 430px 1fr;
  grid-template-areas:
    "titA p"
    "ul ul"
    "h3 h3"
    "ul2 ul2";
  gap: 40px 30px;
}
.sec-top-work .text {
  grid-area: p;
}
.sec-top-work .text strong {
  display: block;
  font-size: 2.6rem;
  font-weight: var(--bold);
}
.sec-top-work ul.gridfit_top-welfare {
  grid-area: ul;
  --gap: 25px;
}
ul.gridfit_top-welfare li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  font-size: 2rem;
  font-weight: var(--bold);
  text-align: center;
  line-height: 1.3;
}
.sec-top-work h3 {
  grid-area: h3;
}
.sec-top-work ul.voice-list {
  grid-area: ul2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
ul.voice-list li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  padding: 15px 30px;
  background: var(--white);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
ul.voice-list li p span {
  display: block;
  font-size: 2.6rem;
  font-weight: var(--bold);
  color: var(--blue);
}
ul.voice-list li p span em {
  font-size: 0.7em;
}

@media (max-width: 520px) {
  .sec-top-work {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 50px;
  }
  .sec-top-work .text strong {
    font-size: 2rem;
  }
  .sec-top-work ul.gridfit_top-welfare {
    --grid: 1;
    --gap: 15px;
    margin-bottom: 40px;
  }
  ul.gridfit_top-welfare li {
    grid-template-columns: 30% 1fr;
    align-items: center;
    gap: 15px;
    font-size: 1.6rem;
    text-align: left;
    line-height: 1.6;
  }
  .sec-top-work ul.voice-list {
    gap: 15px;
    padding: 0 10px;
  }
  ul.voice-list li {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 25px 20px 15px;
  }
  ul.voice-list li i {
    width: 70px;
    margin: 0 auto;
  }
  ul.voice-list li p {
    font-size: 1.4rem;
    line-height: 1.6;
  }
  ul.voice-list li p span {
    margin-bottom: 5px;
    font-size: 1.8rem;
    text-align: center;
  }
  ul.voice-list li p span em {
    font-size: 0.8em;
  }
}

/*----------------------------------------
  top-news
----------------------------------------*/
.gridfit_news {
  --gap: 25px;
}
.gridfit_news li a {
  display: grid;
  grid-template-rows: 230px auto auto 25px;
  grid-template-areas:
    "fig fig"
    "cat time"
    "p p"
    "em em";
  align-items: start;
  gap: 10px;
  height: stretch;
}
.gridfit_news li a figure {
  grid-area: fig;
}
.gridfit_news li a figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.gridfit_news li a .cat {
  grid-area: cat;
}
.gridfit_news li a time {
  grid-area: time;
  text-align: right;
  font-size: 1.4rem;
  color: var(--gray);
}
.gridfit_news li a p {
  grid-area: p;
  font-size: 2rem;
  font-weight: var(--bold);
  line-height: 1.3;
}
.gridfit_news li a em {
  grid-area: em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3em;
  width: 100%;
  margin-top: auto;
  color: var(--c);
  font-size: 1.4rem;
  text-align: right;
}
.gridfit_news li a em:before {
  content: "villa";
  font-family: var(--icons);
}

.cat {
  display: inline-block;
  width: fit-content;
  min-width: 140px;
  color: var(--white);
  text-align: center;
  line-height: 2;
  background: var(--c);
}
[data-cat="cat01"] {
  --c: var(--orange);
}
[data-cat="cat02"] {
  --c: var(--pink);
}
[data-cat="cat03"] {
  --c: var(--gold);
}
[data-cat="cat04"] {
  --c: var(--green);
}

@media (max-width: 520px) {
  .gridfit_news {
    --grid: 1;
    --gap: 30px;
    padding: 0;
  }
  .gridfit_news li a {
    grid-template-rows: repeat(4, auto);
  }
  /* .gridfit_news li a {
    gap: 10px;
  } */
  .gridfit_news li a time {
    font-size: 1.4rem;
  }
  .gridfit_news li a p {
    font-size: 1.5rem;
  }

  .cat {
    min-width: 120px;
    font-size: 1.4rem;
  }
}

/*----------------------------------------
  consultation
----------------------------------------*/
/*
  sec-consultation
----------------------------------------*/
.sec-consultation .consultation-head {
  margin: 50px auto 0;
}
.sec-consultation > *:is(h2, .box-info, .text) {
  width: var(--base_minwidth);
  margin-inline: auto;
}
.box-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 0 auto 30px;
  padding: 30px 50px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.box-info dl {
  display: flex;
  gap: 5px;
  font-size: 1.8rem;
  font-weight: var(--bold);
}
.box-info dl dt {
  width: fit-content;
  color: var(--blue);
}
.box-info dl dt::after {
  content: "：";
  margin-left: 5px;
}
.box-info dl dd {
  flex: 1;
}
.box-info dl dd span {
  font-weight: normal;
  font-size: 1.4rem;
}

.sec-consultation .text strong {
  font-size: 1.8rem;
  font-weight: var(--bold);
}

.flyer {
  width: var(--base_midwidth);
  margin: 50px auto 0;
  box-shadow: var(--shadow);
}
.sec-consultation .btn_A {
  max-width: 300px;
}

@media screen and (max-width: 520px) {
  .sec-consultation .consultation-head {
    margin: 0 -5%;
  }
  .sec-consultation > *:is(h2, .box-info, .text) {
    width: 95%;
  }

  .box-info {
    margin: 0 auto 30px;
    padding: 20px 20px;
  }
  .box-info dl {
    font-size: 1.6rem;
  }

  .sec-consultation .text strong {
    font-size: 1.6rem;
  }

  .flyer {
    width: 90%;
    margin: 50px auto 0;
  }
}

/*----------------------------------------
  privacy
----------------------------------------*/
/*
  sec-privacy
----------------------------------------*/
.sec-privacy p a {
  color: var(--blue);
  text-decoration: underline;
}

/*==================================================
 下層
==================================================*/
/*
  パンくず
----------------------------------------*/
*[class*="breadcrumb"] {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  margin: 0 0 50px;
  border-top: 1px solid var(--Lgray);
  border-bottom: 1px solid var(--Lgray);
  color: var(--gray);
  font-size: 0.8em;
  line-height: 1;
}

*[class*="breadcrumb"] > * {
  display: flex;
  align-items: center;
}

*[class*="breadcrumb"] a:first-of-type {
  font-family: var(--icons);
  color: var(--blue);
}

*[class*="breadcrumb"] a:after {
  content: "keyboard_arrow_right";
  font-family: var(--icons);
  line-height: 1;
}

/*
  ページネーション
----------------------------------------*/
.pager {
  margin: 100px auto;
}

.nav-links {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 60px auto;
  z-index: 5;
}

.nav-links li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border: 1px solid var(--gray);
  color: var(--gray);
}

.nav-links li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.nav-links li a:hover,
.nav-links .current {
  background: var(--c);
  color: var(--white);
  opacity: 1;
}

.nav-links :is(.btn-prev, .btn-next) {
  border: none;
}
.nav-links :is(.btn-prev, .btn-next) a:before {
  font-family: var(--icons);
  font-weight: bold;
  font-size: 1.1em;
}

.nav-links .btn-prev a:before {
  content: "arrow_back";
}
.nav-links .btn-next a:before {
  content: "arrow_forward";
}

.nav-links li.pager-sp {
  display: none;
}

@media screen and (max-width: 520px) {
  .pager {
    margin: 50px auto;
  }

  .nav-links li:not(.btn-prev, .pager-sp, .btn-next) {
    display: none;
  }
  .nav-links li.pager-sp {
    display: flex;
    width: fit-content;
    gap: 5px;
    border: none;
    font-size: 1.6rem;
    font-weight: bold;
  }
  .nav-links li.pager-sp b {
    font-size: 2.4rem;
    color: var(--c);
  }
  .nav-links li.pager-sp small {
    font-weight: normal;
  }
}

/*==================================================
 求人検索
==================================================*/

.help {
  font-family: var(--icons);
}
#my-popover {
  padding: 20px;
  box-shadow: 0 0 10px 5px var(--gray);
}

/*----------------------------------------
  検索枠
----------------------------------------*/

.article__joblist {
  width: var(--base_width);
  margin: 0 auto 100px;
  --c: var(--searchgreen);
}
.article__facilitylist {
  width: var(--base_width);
  margin: 0 auto 100px;
  --c: var(--blue);
}
.article__grouplist {
  margin: 0 auto 100px;
  --c: var(--blue);
}

.sec__search {
  margin: 0 auto 100px;
  padding: 40px 40px;
  background: var(--white);
  box-shadow: var(--shadow2);
}

.sec__search .tit_A {
  color: var(--c);
  font-size: 3.6rem;
}
.sec__search .flex_btn {
  display: flex;
  justify-content: center;
}

.search {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "free group stat"
    "area area area"
    "con con con";
  gap: 10px;
  margin: 30px 0;
}
.article__facilitylist .search {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "free group"
    "area area";
}
.article__grouplist .search {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "free stat"
    "area area"
    "con con";
}

.search dl {
  display: flex;
  flex-flow: column;
  gap: 10px;
  padding: 15px;
  background: color-mix(in srgb, var(--c) 10%, var(--white) 100%);
}

.search dl dt {
  font-weight: var(--bold);
  line-height: 1.3;
}

.search dl dd {
  flex: 1;
}

.search dl dd label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c);
  cursor: pointer;
}

.article__joblist .search dl dd input[type="checkbox"] {
  accent-color: #379e43;
}
.article__facilitylist .search dl dd input[type="checkbox"] {
  accent-color: var(--blue);
}

.search_freeword {
  grid-area: free;
}
.search_group {
  grid-area: group;
}
.search_status {
  grid-area: stat;
}
.search_area {
  grid-area: area;
}
.search_area dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.search_area dt span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  background: var(--c);
  border-radius: 3px;
  color: var(--white);
  font-family: var(--font_en);
  font-weight: normal;
  line-height: 1;
  text-align: center;
  font-size: 1.4rem;

  --mixc: color-mix(in srgb, var(--c) 100%, #f5eac8 30%);
  outline: none;
  border: none;
  border: 1px solid var(--c);
  background: var(--c);
  background: linear-gradient(0deg, var(--c) 50%, var(--mixc) 100%);
  -webkit-box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 5px 10px rgba(0, 0, 0, 0.1);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 5px 10px rgba(0, 0, 0, 0.1);
}
.search_area dt span:after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
  transform: rotate(45deg);
}
.search_area dt.is-active span:after {
  transform: rotate(225deg);
}
.search_area dd {
  flex-flow: wrap;
  gap: 10px 20px;
  padding: 0 20px;
}

.search_area dd.is-open {
  display: flex;
}

.search_area dd strong {
  display: flex;
  align-items: center;
  width: 100%;
  font-weight: bold;
  margin: 15px 0 5px;
}
.search_area dd label {
  width: calc((100% - 100px) / 6);
}

.search_area dd strong i {
  font-size: 1.2rem;
  color: var(--c);
  white-space: nowrap;
  text-decoration: underline;
  cursor: pointer;
}

.search_area dd {
  display: flex;
}

.search_area dd .map {
  width: 45%;
  margin-bottom: 20px;
}
.search_area dd .map img {
  width: 100%;
  height: auto;
}

.search_area dd .area_wrap {
  width: 50%;
}
.search_area dd .area_field {
  position: relative;
  display: none;
  margin-top: 10px;
}
.search_area dd .area_field:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  background: transparent;
}
.search_area dd .area_field.is-open {
  display: block;
}

.search_area dd fieldset {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: wrap;
  gap: 10px 20px;
  padding: 5px 0 5px 4em;
  border-bottom: 1px dotted var(--gray);
}
.search_area dd fieldset:last-child {
  border-bottom: none;
}
.search_area dd fieldset legend {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: var(--bold);
}
.search_area dd fieldset label {
  width: calc((100% - 80px) / 4);
}

.search_area dd fieldset legend {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: var(--bold);
}

.search_area dd fieldset label {
  width: calc((100% - 80px) / 4);
}

.search_area dd fieldset label input {
  display: none;
}

.search_condition {
  grid-area: con;
}

.search_condition dd {
  display: flex;
  flex-flow: wrap;
  gap: 10px 40px;
  padding: 0 20px;
}

@media screen and (max-width: 520px) {
  .article__facilitylist,
  .article__joblist {
    width: 90%;
    margin: 0 auto 50px;
  }

  .sec__search {
    margin: 0 auto 50px;
    padding: 30px 20px;
  }

  .sec__search .tit_A {
    color: var(--c);
    font-size: 2.8rem;
  }

  .article__grouplist .sec__search {
    width: 90%;
  }

  .search {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "free"
      "group"
      "stat"
      "area"
      "con";
    gap: 10px;
    margin: 30px 0;
  }

  .article__facilitylist .search {
    grid-template-columns: 1fr;
    grid-template-areas:
      "free"
      "group"
      "area";
  }
  .article__grouplist .search {
    grid-template-columns: 1fr;
    grid-template-areas:
      "free"
      "stat"
      "area"
      "con";
  }

  .search dl {
    font-size: 1.4rem;
    padding: 15px 10px;
  }
  .search dl dt {
    white-space: nowrap;
  }

  dl.search_group {
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  dl.search_status {
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .search_area dd {
    flex-flow: column;
    gap: 10px;
    padding: 0;
  }
  .search_area dd.is-open {
    display: flex;
  }
  .search_area dd .map {
    width: 100%;
  }
  .search_area dd .area_wrap {
    width: 100%;
  }

  .search_area dd strong {
    flex-wrap: wrap;
  }

  .search_area dd strong i {
    width: 100%;
    text-align: right;
  }

  .search_area dd label {
    width: calc((100% - 10px) / 2);
  }
  .search_area dd fieldset {
    gap: 5px;
  }
  .search_area dd fieldset label {
    width: calc((100% - 5px - 4em) / 2);
  }

  .search_condition dd {
    gap: 10px;
    padding: 0;
  }
  .search_condition dd label {
    width: calc((100% - 10px) / 2);
  }
}

/*==================================================
 検索結果一覧

 .article__facilitylist
 .article__joblist
 .article__grouplist
==================================================*/

/*----------------------------------------
  求人リスト(共通）
----------------------------------------*/
.gridfit_jobs {
  --gap: 25px;
}
.gridfit_jobs > li {
  background: var(--white);
  box-shadow: var(--shadow);
}
.gridfit_jobs li a {
  display: flex;
  flex-flow: column;
  gap: 10px;
  height: stretch;
  padding: 15px;
}
.gridfit_jobs li a figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.gridfit_jobs h3 {
  font-size: 2.2rem;
  font-weight: var(--bold);
  color: var(--c);
  line-height: 1.5;
}
.gridfit_jobs li a p {
  font-size: 1.4rem;
  line-height: 1.3;
}
.gridfit_jobs .flex_features {
  gap: 5px;
  font-size: 1.2rem;
}
.gridfit_jobs .flex_features li {
  padding: 5px 10px;
}
.gridfit_jobs .btn_D {
  color: var(--c);
  margin-top: auto;
}

.jobs-list > li {
  border-top: 4px solid var(--c);
}

@media (max-width: 520px) {
  .gridfit_jobs {
    --grid: 1;
    --gap: 20px;
    padding: 0;
    margin: 30px auto;
  }
  .gridfit_jobs h3 {
    font-size: 2rem;
  }
}

/*
  求人一覧 ・・・もっと見るで遷移
----------------------------------------*/
[data-js="load-more-list"] > li {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  visibility: hidden;
  will-change: opacity, transform;
}

[data-js="load-more-list"] > li.is-visible {
  display: block;
  visibility: visible;
}

[data-js="load-more-list"] > li.is-animated {
  opacity: 1;
  transform: translateY(0);
}

[data-js="load-more-list"] + .btn_apply {
  display: block;
  margin: 50px auto;
  cursor: pointer;
}

[data-js="load-more-list"] + .btn_apply.is-hidden {
  display: none;
}

@media screen and (max-width: 520px) {
  [data-js="load-more-list"] + .btn_apply {
    width: 70%;
  }
}

/*
  施設一覧
----------------------------------------*/
.sec__facility_list .tit_E {
  background: var(--c);
}

/*==================================================
検索結果詳細 
1.保育部門  [data-job="job01"]
2.児童・救護部門 [data-job="job02"]
3.高齢者支援部門 [data-job="job03"]
4.障がい児・者支援部門 [data-job="job04"]
.article__job
==================================================*/
.article__job,
.article__facility {
  width: var(--base_width);
  margin: 0 auto 100px;
}
[data-job="job01"] {
  --c: var(--orange);
}
[data-job="job02"] {
  --c: var(--pink);
}
[data-job="job03"] {
  --c: var(--gold);
}
[data-job="job04"] {
  --c: var(--green);
}

.article__job section {
  margin: 0 0 50px;
  padding: 30px 40px;
  background: var(--white);
  box-shadow: var(--shadow2);
}

.article__job :is(.tit_A, .tit_B, .tit_D),
.article__facility :is(.tit_A, .tit_B, .tit_D) {
  color: var(--c);
}

.article__job :is(.tit_E),
.article__facility :is(.tit_E) {
  background: var(--c);
}

.article__job .btn_C,
.article__facility .btn_C {
  border-color: var(--c);
  color: var(--c);
}

@media screen and (max-width: 520px) {
  .article__job,
  .article__facility {
    width: 90%;
    margin: 0 auto 50px;
  }

  .article__job section {
    margin: 0 0 50px;
    padding: 15px 20px;
  }
}

/*
  ancker
----------------------------------------*/
.list_nav {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 30px auto 0;
}
.list_nav a {
  padding: 10px 20px;
  background: var(--white);
  border: 1px solid var(--Lgray);
  border-bottom: none;
  font-weight: var(--bold);
  font-size: 1.8rem;
  text-align: center;
  box-shadow: var(--shadow3);
}
.list_nav a:hover,
.list_nav .nav-current {
  position: relative;
  z-index: 10;
  border-top: 4px solid var(--c);
  color: var(--c);
  opacity: 1;
  box-shadow:
    0 5px 4px 0 white,
    var(--shadow3);
}

@media screen and (max-width: 520px) {
  .list_nav {
    align-items: stretch;
    gap: 8px;
  }
  .list_nav a {
    display: flex;
    align-items: center;
    padding: 10px 7px;
    font-size: 1.2rem;
    line-height: 1.3;
  }
}

/*
  header
----------------------------------------*/
.sec__job_header {
  background: var(--white);
  border-top: 10px solid var(--c);
}
/*日時データ*/
.flex_date {
  grid-area: date;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  color: var(--gray);
  font-size: 1.2rem;
  line-height: 1;
}

.flex_date li {
  display: flex;
  align-items: center;
  gap: 2em;
}

.flex_date :is(.area, .group, .house) {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 3px;
}

.flex_date .area:before {
  content: "location_on";
  font-family: var(--icons);
}

.flex_date .group:before {
  content: "view_cozy";
  font-family: var(--icons);
}

.flex_date .house:before {
  content: "villa";
  font-family: var(--icons);
}

/*タイトル*/
.sec__job_header h1 {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 20px 0;
  color: var(--c);
  font-weight: var(--bold);
}

.sec__job_header h1 em {
  font-size: 1.2em;
}

.sec__job_header h1 span {
  font-size: 1.6em;
}

/*特徴リスト*/
.flex_features {
  display: flex;
  flex-flow: wrap;
  gap: 8px;
  font-size: 1.4rem;
}
.flex_features li {
  padding: 8px 15px;
  border: 1px solid var(--c);
  border-radius: 50px;
  background: var(--white);
  color: var(--c);
  line-height: 1;
}

.flex_features .status {
  background: color-mix(in srgb, var(--c) 20%, var(--white) 100%);
  color: var(--c);
}

/*ボタン*/
.sec__job_header .flex_btn {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1em;
  margin: 20px 0 0;
}

@media screen and (max-width: 520px) {
  .flex_date {
    flex-flow: column-reverse;
    align-items: stretch;
  }
  .flex_date li:nth-child(2) {
    justify-content: flex-end;
  }
  .flex_date li:first-child {
    justify-content: flex-start;
  }

  /*タイトル*/
  .sec__job_header h1 {
    flex-flow: column;
    align-items: stretch;
    gap: 0;
  }

  /*特徴リスト*/
  .flex_features {
    gap: 5px;
    font-size: 0.8em;
  }
  .flex_features li {
    padding: 8px 10px;
  }

  /*ボタン*/
  .sec__job_header .flex_btn {
    justify-content: flex-end;
    flex-flow: column-reverse;
    gap: 2em;
    margin: 40px 0 10px;
  }
}

/*
  アピールポイント
----------------------------------------*/
.sec__job_appeal .tit_B,
.sec__fac_appeal .tit_B {
  margin-bottom: 40px;
}

.sec__job_appeal .flexfit_pic,
.sec__fac_appeal .flexfit_pic {
  gap: 40px;
  margin: 30px 0;
}
.sec__job_appeal .flexfit_pic picture,
.sec__fac_appeal .flexfit_pic picture {
  background: var(--Lgray);
}

/* 1個の時は2個の大きさで中央寄せ */
.sec__job_appeal .flexfit_pic:has(> *:only-child) > *,
.sec__fac_appeal .flexfit_pic:has(> *:only-child) > * {
  --num: 2;
}
.sec__job_appeal .flexfit_pic img,
.sec__fac_appeal .flexfit_pic img {
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 520px) {
  .sec__job_appeal .tit_B,
  .sec__fac_appeal .tit_B {
    margin-bottom: 20px;
  }
  .sec__job_appeal .flexfit_pic,
  .sec__fac_appeal .flexfit_pic {
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
  }
  .sec__job_appeal .flexfit_pic:has(> *:only-child) > *,
  .sec__fac_appeal .flexfit_pic:has(> *:only-child) > * {
    --num: 1;
  }
}

/*
  お知らせコラム
----------------------------------------*/
.article__job section.sec__job_info {
  padding-bottom: 60px;
}

/*
募集要項
----------------------------------------*/
.table_details table {
  width: 100%;
  margin-bottom: 40px;
}

.table_details :is(th, td) {
  border: 1px solid color-mix(in srgb, var(--gray) 15%, var(--white) 0%);
  padding: 20px;
}

.table_details th {
  background: var(--Lgray);
}

.sec__job_details .dl-list dl dt {
  background: var(--Lgray);
}

.sec__job_details .dl-list dl {
  margin: 0;
}
.sec__job_details .dl-list dl + dl {
  margin-top: -1px;
}

.sec__job_details .dl-list dl :is(dt, dd) {
  border: 1px solid color-mix(in srgb, var(--gray) 15%, var(--white) 0%);
  padding: 20px;
}

@media screen and (max-width: 520px) {
  .table_details :is(table, tbody, tr, th, td) {
    display: block;
    width: 100%;
  }

  .table_details :is(th, td) {
    padding: 10px;
  }

  .sec__job_details .dl-list dl :is(dt, dd) {
    border: none;
    padding: 10px;
  }
}

/*
  エントリーフォーム
----------------------------------------*/

.dl-list {
  margin: 40px auto;
}
.dl-list dl {
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: 10px 0;
  margin: 0 0 1px;
}

.dl-list dl :is(dt, dd) {
  padding: 15px 20px;
}

.dl-list dl dt {
  position: relative;
  display: flex;
  align-items: center;
  width: var(--dtw);
  font-weight: var(--bold);
  background: color-mix(in srgb, var(--c) 10%, var(--white) 100%);
}

.dl-list dl dt.required:after {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  content: "必須";
  display: block;
  width: fit-content;
  padding: 5px;
  background: var(--red);
  border-radius: 3px;
  color: var(--white);
  font-size: 1.3rem;
  line-height: 1;
  font-weight: normal;
}

/* input (text, password, email, number, tel, url, search) および textarea, select に適用 */
form
  :is(
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"]
  ),
.search
  :is(
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"]
  ),
form textarea,
.search textarea,
form select,
.search select {
  display: block;
  width: 100%;
  padding: 0.8em;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid var(--gray);
  border-radius: 0.375rem;
  color: var(--black);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.5;

  appearance: none; /* OSネイティブのスタイルをリセット */
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

form select,
.search select {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center; /* 右から12pxの位置に配置 */
  background-size: 16px; /* 矢印の大きさ */
  padding-right: 40px;
}

form input[type="checkbox"],
form input[type="radio"],
.search input[type="checkbox"],
.search input[type="radio"] {
  transform: scale(1.5);
  accent-color: var(--blue);
}

form label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  margin-right: 1em;
}

form input::placeholder,
form textarea::placeholder {
  color: var(--gray);
  opacity: 1;
}

form input:disabled,
form input[readonly],
form textarea:disabled,
form textarea[readonly],
form select:disabled {
  background-color: var(--Lgray);
  opacity: 1;
}

form textarea {
  min-height: calc(1.5em + 0.75rem + 2px);
}

form select {
  display: inline-block;
  width: 30%;
}

/* イレギュラー */
form input[name*="zip"],
form input[name*="postal_code"] {
  display: inline-block;
  width: 10em;
}

form p {
  margin: 1em 0;
  font-size: 1.4rem;
}
form .red {
  color: var(--red);
}

form .d_block {
  display: block;
  margin-top: 10px;
}

form strong {
  font-weight: var(--bold);
}

/*プライバシーポリシー */
form .privacypolicy {
  width: 100%;
  height: 300px;
  overflow-y: scroll;
  margin: 40px auto;
  padding: 30px;
  border: 1px solid var(--gray);
}

form .agree {
  margin: 40px auto;
  padding: 20px;
  background: color-mix(in srgb, var(--c) 10%, var(--white) 100%);
  text-align: center;
}

/*送信ボタン*/
.sec__job_entry .flex_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3em;
}

@media screen and (max-width: 520px) {
  .dl-list {
    margin: 40px auto;
  }
  .dl-list dl {
    display: block;
  }

  .dl-list dl :is(dt, dd) {
    padding: 10px;
  }
  .dl-list dl dd {
    padding: 20px 0;
  }

  form select {
    width: 10em;
  }

  form input[type="checkbox"],
  form input[type="radio"],
  .search input[type="checkbox"],
  .search input[type="radio"] {
    transform: scale(1.3);
  }

  /*イレギュラー */
  form select[name*="birthday"] {
    width: 26%;
  }

  form .privacypolicy {
    margin: 30px auto;
    padding: 20px;
  }
}

/*==================================================
 施設検索詳細
 .article__facility
 ※article__facility↑にもあります。
==================================================*/
.article__facility section {
  margin-bottom: 30px;
}

.inner__facility {
  margin: 0 0 100px;
  padding: 30px 40px;
  background: var(--white);
  box-shadow: var(--shadow2);
}

.inner__facility .flex_btn {
  display: flex;
  justify-content: center;
  margin: 0 0 50px;
}

@media screen and (max-width: 520px) {
  .inner__facility {
    margin: 0 0 50px;
    padding: 15px 20px;
  }
}

/*
  header
----------------------------------------*/

.sec__fac_header {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas:
    "pic date"
    "pic h1"
    "pic p"
    "pic facinfo"
    "pic .";
  align-items: start;
  gap: 15px 40px;
}
.sec__fac_header h1 {
  grid-area: h1;
  color: var(--c);
  font-weight: var(--bold);
}

.sec__fac_header p {
  grid-area: p;
}

.sec__fac_header h1 span {
  font-size: 1.6em;
}

.sec__fac_header picture {
  grid-area: pic;
  display: block;
}

.sec__fac_header picture img {
  width: 100%;
  height: auto;
}

.list_facinfo {
  grid-area: facinfo;
}
.list_facinfo li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.6rem;
}

.list_facinfo li a {
  text-decoration: underline;
}
.list_facinfo li a:hover {
  text-decoration: none;
}

.list_facinfo li:before {
  padding: 3px;
  background: color-mix(in srgb, var(--c) 20%, var(--white) 100%);
  border-radius: 100%;
  font-family: var(--icons);
  color: var(--c);
  font-size: 1.2em;
  line-height: 1;
}

.list_facinfo li.pin_drop:before {
  content: "pin_drop";
}

.list_facinfo li.pin_drop a {
  font-size: 0.8em;
  color: var(--gray);
}

.list_facinfo li.chronic:before {
  content: "chronic";
}
.list_facinfo li.tel:before {
  content: "call";
}
.list_facinfo li.fax:before {
  content: "print";
}
.list_facinfo li.add_link:before {
  content: "add_link";
}
.list_facinfo li.add_link a {
  color: var(--c);
}

@media screen and (max-width: 520px) {
  .sec__fac_header {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
      "date"
      "h1"
      "pic"
      "p"
      "facinfo";
    gap: 15px;
  }

  .list_facinfo {
    grid-area: facinfo;
    margin-top: 15px;
  }
  .list_facinfo li {
    position: relative;
    flex-wrap: wrap;
    padding: 0 0 16px 2.5em;
    font-size: 1.4rem;
    line-height: 1.2;
  }

  .list_facinfo li:before {
    position: absolute;
    top: -2px;
    left: 0;
    font-size: 1.5em;
  }

  .list_facinfo li.pin_drop a {
    font-size: 1em;
  }
}

/*==================================================
 部門検索一覧
 .article__grouplist
 .sec__group_list
==================================================*/
.article__grouplist section {
  margin: 0 auto 100px;
  width: var(--base_width);
}

.article__grouplist section.sec__group_about {
  width: 100%;
  padding-top: 1px;
}

@media screen and (max-width: 520px) {
  .article__grouplist section {
    margin: 0 auto 50px;
    width: 90%;
  }
}

/*
  部門の求人検索一覧
----------------------------------------*/
.article__grouplist .tit_C {
  display: block;
  margin: 0 auto 40px;
  background: var(--c);
}
.article__grouplist .tit_C:after {
  border-top-color: var(--c);
}

.article__grouplist .tit_E {
  background: var(--c);
}

.article__grouplist .btn_C {
  border-color: var(--c);
  color: var(--c);
}

/*
  部門について
----------------------------------------*/
.sec__group_about strong {
  color: var(--c);
  font-size: 1.1em;
}

.flex_group_about {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
}

.flex_group_about picture {
  display: flex;
  align-items: center;
  width: 45%;
  background: linear-gradient(to left, color-mix(in srgb, var(--c) 10%, var(--white) 100%) 30%, transparent 30%);
}

.flex_group_about picture img {
  max-width: none;
  width: 100%;
  height: auto;
}

.flex_group_about .text {
  flex: 1;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 100px 80px 5%;
  background: color-mix(in srgb, var(--c) 10%, var(--white) 100%);
}

.flex_group_about .tit_A_ico {
  justify-content: flex-start;
  margin: 0 0 30px;
}

.flex_group_about .tit_B {
  color: var(--black);
  text-align: left;
  line-height: 1.5;
}

.flex_group_about p {
  font-size: 1.2em;
  font-weight: var(--bold);
}

.flex_group_about p + p {
  margin: 1.2em 0 0;
}

@media screen and (max-width: 520px) {
  .flex_group_about {
    flex-flow: column;
    margin-top: 50px;
  }

  .flex_group_about picture {
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(to top, color-mix(in srgb, var(--c) 10%, var(--white) 100%) 30%, transparent 30%);
    text-align: center;
  }

  .flex_group_about picture img {
    width: 90%;
    margin: 0 auto;
  }

  .flex_group_about .text {
    padding: 30px 5% 40px;
  }

  .flex_group_about .tit_A_ico {
    margin: 0 auto 30px;
  }

  .flex_group_about p {
    font-size: 1em;
  }
}

/*
  部門について補足など
----------------------------------------*/
.sec__group_about {
  background: linear-gradient(to bottom, transparent 0%, white 2%, white 98%, transparent 100%);
}

.box_group_about {
  padding-top: 1px;
  padding-bottom: 60px;
  margin: 0 auto 100px;

  background: linear-gradient(to bottom, white 75%, var(--c) 75%);
}

.box_group_about .tit_B {
  color: var(--c);
  margin: 60px auto 40px;
}

.dl_group_about {
  display: flex;
  gap: 40px;
  margin: 40px auto 0;

  font-size: 1.2em;
  font-weight: var(--bold);
}
.dl_group_about dl {
  flex: 1;
  counter-increment: number;
  padding: 15px 0 0;
  border: 5px solid var(--Lgray);
  border-radius: 20px;
  background: var(--white);
  text-align: center;
}

.dl_group_about dl:before {
  content: "point " counter(number, decimal-leading-zero);
  display: block;
  width: fit-content;
  padding: 5px 30px;
  margin: -30px 0 0 -15px;
  background: var(--c);
  border-radius: 50px;
  color: var(--white);
  font-family: var(--font_en);
}

.dl_group_about dt {
  text-align: center;
  padding: 15px;
  color: var(--c);
}
.box_group_about dl dd {
  padding: 20px 15px;
  background: color-mix(in srgb, var(--c) 10%, var(--white) 100%);
  border-radius: 0 0 15px 15px;
}
.box_group_about p {
  font-size: 1.2em;
  font-weight: var(--bold);
  margin: 1.3em 0;
}

.box_group_about .text {
  position: relative;
  margin: 40px auto 0;
  padding: 20px 50px 20px 280px;
  background-color: color-mix(in srgb, var(--c) 50%, var(--white) 100%);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.15) 20px,
    transparent 20px,
    transparent 40px
  );
  border-radius: 20px;
}
.box_group_about .text picture {
  position: absolute;
  bottom: 0;
  left: 20px;
}
.box_group_about .text picture img {
  width: 220px;
  height: auto;
}

@media screen and (max-width: 520px) {
  .box_group_about {
    padding-top: 1px;
    padding-bottom: 60px;
    margin: 0 auto 50px;
    background: linear-gradient(to bottom, white 85%, var(--c) 85%);
  }

  .box_group_about .tit_B {
    margin: 40px auto 30px;
    font-size: 2.4rem;
  }

  .dl_group_about {
    flex-flow: column;
    gap: 30px;

    font-size: 1.2em;
  }

  .dl_group_about dl:before {
    margin: -35px auto 0;
  }

  .box_group_about .text {
    padding: 1px 20px 20px;
    margin: 0 0 70px;
  }
  .box_group_about .text picture {
    position: absolute;
    bottom: -130px;
    left: auto;
    right: -5%;
  }
  .box_group_about .text picture img {
    width: auto;
    height: 180px;
  }

  .box_group_about p {
    font-size: 1em;
  }
}

/*
  よくあるご質問
----------------------------------------*/
.faq-list {
  display: flex;
  flex-flow: column;
  gap: 30px;
}
.faq-list dl {
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--c);
  border-radius: var(--radius);
}
.faq-list dt {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 15px;
  color: var(--c);
  font-size: 2.6rem;
  font-weight: var(--bold);
}

.faq-list dt:before,
.faq-list dd:before {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font_en);
  width: 50px;
  height: 50px;
  border-radius: 100%;
  font-weight: normal;
  font-size: 2.6rem;
}

.faq-list dt:before {
  content: "Q";
  background: var(--c);
  color: var(--white);
}

.faq-list dd {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 15px;
}

.faq-list dd:before {
  content: "A";
  background: var(--Lgray);
  color: var(--c);
}

@media screen and (max-width: 520px) {
  .faq-list {
    gap: 20px;
  }

  .faq-list dl {
    padding: 20px 20px 20px 15px;
  }
  .faq-list dt {
    font-size: 2rem;
    line-height: 1.4;
  }

  .faq-list dt:before,
  .faq-list dd:before {
    width: 30px;
    height: 30px;
    font-size: 2rem;
  }

  .faq-list dt:before {
    content: "Q";
    background: var(--c);
    color: var(--white);
  }

  .faq-list dd {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 0;
  }

  .faq-list dd:before {
    content: "A";
    background: var(--Lgray);
    color: var(--c);
  }
}

/*==================================================
 団体概要
==================================================*/
.sec__div_about {
  padding: 150px 0;
  margin: 0 auto 100px;
  background: url(../images/div-img01.webp) no-repeat center / cover;
  background-attachment: fixed;
}
.sec__div_about:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0.3;
  mix-blend-mode: multiply;
}

.sec__div_about .text {
  position: relative;
  z-index: 2;
  width: var(--base_midwidth);
  margin: 0 auto;
  padding: 80px;
  background: color-mix(in srgb, var(--white) 90%, var(--white) 0%);
  box-shadow: var(--shadow);
  line-height: 2;
}

.sec__div_about .text .tit_B {
  margin-top: 0;
  margin-bottom: 40px;
}

@media screen and (max-width: 520px) {
  .sec__div_about {
    padding: 50px 5%;
    margin: 0 auto 50px;
    background-attachment: unset;
  }

  .sec__div_about .text {
    padding: 30px;
  }

  .sec__div_about .text .tit_B {
    margin-bottom: 20px;
  }
}

/*----------------------------------------
  部門紹介
----------------------------------------*/
.sec__divisions .tit_C {
  display: block;
  margin: 0 auto 50px;
}

.inner__division {
  padding: 50px;
  border-radius: 20px;
  margin: 0 0 50px;
  background: color-mix(in srgb, var(--c) 10%, var(--white) 100%);
}
.inner__division .btn_A {
  margin-bottom: 0;
}

.flex_division {
  display: flex;
  gap: 60px;
  margin: 50px auto 0;
}

.flex_division picture {
  flex: none;
  width: 45%;
}

.flex_division picture img {
  border-radius: 10px;
}

.flex_division .text h4 {
  font-weight: bold;
  font-size: 1.3em;
  margin: 0 0 10px;
}

.flex_division .text small {
  display: block;
  margin: 0 0 15px;
  padding: 5px 15px;
  line-height: 1.5;
  color: var(--c);
  border-left: 2px solid var(--c);
}

@media screen and (max-width: 520px) {
  .sec__divisions .tit_C {
    display: block;
    margin: 0 auto 40px;
  }

  .inner__division {
    margin: 0 0 40px;
    padding: 30px 20px;
  }

  .flex_division {
    flex-flow: column;
    gap: 20px;
    margin: 20px auto 0;
  }

  .flex_division picture {
    flex: none;
    width: 100%;
  }
}

/*==================================================
 コラム記事
==================================================*/
.filter_group {
  margin: 0 auto 100px;
  padding: 40px 40px;
  background: var(--white);
  box-shadow: var(--shadow2);
  background: var(--white);
}

.filter_group h2 {
  font-weight: bold;
  font-size: 1.1em;
}

.main-categories .flex_category_list {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
  margin: 15px 0;
}
.sub-categories .flex_category_list {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
  margin: 15px 0 0;
}

.main-categories .flex_category_list a {
  background: var(--c);
  color: var(--white);
  padding: 5px 15px;
  min-width: 8em;
  text-align: center;
}

.main-categories .flex_category_list a.all_cat {
  background: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
}

.sub-categories .flex_category_list a {
  color: var(--c);
  border: 1px solid var(--c);
  padding: 3px 15px;
}

.sub-categories .flex_category_list a.current {
  background: var(--c);
  color: var(--white);
}

@media screen and (max-width: 520px) {
  .filter_group {
    margin: 0 auto 50px;
    padding: 20px;
  }
  .main-categories .flex_category_list {
    gap: 5px;
  }

  .main-categories .flex_category_list a {
    padding: 3px 15px;
    min-width: fit-content;
  }
}

/*==================================================
 記事出力
==================================================*/
.sec__postdetail {
  margin-top: 50px;
}

.flex_cat {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
  gap: 2em;
  margin: 0 0 40px;
}

.flex_cat .category {
  display: flex;
  gap: 5px;
}

.flex_cat time {
  text-align: right;
  font-size: 1.4rem;
  color: var(--gray);
}

.post_free {
  width: var(--base_minwidth);
  margin: 0 auto;
}

.post_free :is(h1, h2, h3, h4, h5, h6) {
  margin: 30px 0;
  font-weight: var(--bold);
  color: var(--blue);
  font-size: clamp(1rem, calc(var(--fzrem) / 800px * 100vw), var(--fzrem));
}

@media screen and (max-width: 520px) {
  .flex_cat .category {
    order: 2;
  }
  .flex_cat time {
    order: 1;
  }
  .post_free :is(h1, h2, h3, h4, h5, h6) {
    font-size: calc(var(--fzrem) - ((var(--fzrem) / 1rem) - 1.5) / 1.5 * 1rem);
  }
}

.post_free h1 {
  --fzrem: 3.6rem;
}
.post_free h2 {
  --fzrem: 3.2rem;
  position: relative;
  margin-top: 50px;
  padding: 5px 15px;
  font-weight: bold;
  background: var(--blue);
  color: var(--white);
}
.post_free h3 {
  --fzrem: 2.8rem;
}
.post_free h4 {
  --fzrem: 2.4rem;
}
.post_free h5 {
  --fzrem: 1.8rem;
}
.post_free h6 {
  --fzrem: 1.4rem;
}
.post_free strong {
  font-weight: bold;
}
.post_free mark {
  background: linear-gradient(transparent 55%, yellow 45%);
}
.post_free em {
  font-style: italic;
}
.post_free a {
  text-decoration: underline;
}
.post_free a:hover {
  text-decoration: none;
}
.post_free img {
  max-width: var(--base_minwidth);
  margin: 30px 0;
}

.post_free hr {
  height: 1px;
  background: var(--gray);
  border: none;
  margin: 20px auto;
}
.post_free p {
  line-height: 1.8;
  margin-top: 8px;
}

.post_free ul {
  list-style-type: disc;
  margin-left: 2em;
  padding: 15px 0;
}
.post_free ol {
  list-style-type: decimal;
  margin-left: 2.5em;
  padding: 15px 0;
}
.post_free blockquote {
  background: var(--Lgray);
  padding: 30px;
}

.post_free table {
  border-top: 1px solid var(--gray);
  border-left: 1px solid var(--gray);
  margin: 15px 0;
  letter-spacing: 0;
}

.post_free table th {
  font-weight: bold;
}

.post_free table :is(th, td) {
  border-bottom: 1px solid var(--gray);
  border-right: 1px solid var(--gray);
  padding: 10px;
}

.post_free .wp-block-embed-youtube iframe {
  aspect-ratio: 16/9;
  margin: 30px 0;
  width: 100%;
  height: auto;
}

.post_free .wp-element-button {
  background: var(--blue);
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  font-size: 1.6rem;
  text-decoration: none;
}

.post_free .wp-block-file {
  margin: 30px 0;
  text-align: center;
}
.post_free .wp-block-file a[id^="wp-block-file--"] {
  display: none;
}