@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: "M PLUS Rounded 1c", 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;

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

  --radius: 10px;
  --shadow: 1px 1px 4px 4px rgba(0, 0, 0, 0.1);
}
@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;
}

@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;
}
/* 偶数 */
[class*="flexfit_"]:has(> *:nth-child(even):last-child) > * {
  --num: 2;
}

/* [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
==================================================*/
/*----------------------------------------
  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 {
  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_B {
  margin: 40px auto 30px;
  color: var(--blue);
  font-size: 2.8rem;
  text-align: center;
  font-weight: var(--bold);
  line-height: 1.3;
}

.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;
}

@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_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;
  }
}

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

:is(.btn_A, .btn_B) {
  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):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);
}

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

/*----------------------------------------
  トグル
----------------------------------------*/
.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-areas:
    "fig fig"
    "cat time"
    "p p";
  gap: 10px;
}
.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;
}
.gridfit_news li a p {
  grid-area: p;
  font-size: 2rem;
  font-weight: var(--bold);
  line-height: 1.3;
}

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

@media (max-width: 520px) {
  .gridfit_news {
    --grid: 1;
    --gap: 20px;
    padding: 0 8%;
  }
  /* .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;
}