@charset "utf-8";

/*
 * style.css
 *
 *  version --- 1.0
 *  updated --- 2017/11/30
 */

/* !root
---------------------------------------------------------- */
:root {
    --blue: #1794E2;
    --darkblue: #2781D5;
    --orange: #FF863B;
    --white: #fff;
    --black: #1B2631;
    --gray: #F5F5F5;
    --orange-linear: linear-gradient(78deg, #FF7800, #FF2600);
    --blue-linear: linear-gradient(-90deg, #C4F6FF, #009DFF);

    --shadow: 0 .4rem 2.4rem 0 rgba(227, 227, 227, .25);

    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
}

/* !HTML5 elements
---------------------------------------------------------- */
header, 
footer, 
nav, 
section, 
aside, 
article {
    display: block;
}

/* !Reseting
---------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

fieldset {
  border: none;
}

ul,
ol,
li {
	list-style: none;
}

img {
	max-width: 100%;
    height: auto;
	vertical-align: top;
}

table {
	border-collapse: collapse;
}

button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

select::-ms-expand {
	display: none;
}

input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check{
	display: none;
}

select,
input[type=radio],
input[type=checkbox],
input[type=text],
input[type=password],
input[type=email],
input[type=tel],
input[type=number],
input[type=reset],
input[type=button],
input[type=submit],
textarea {
	appearance: none;
	border-radius: 0;
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear{
	display: none;
}

input[type=reset],
input[type=button],
input[type=submit]  {
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	cursor: pointer;
}

*,
*:before,
*::after {
	box-sizing: border-box;
}
/* !Clearfix
---------------------------------------------------------- */
.clearfix {
    display: block;
    min-height: 1%;
}

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

* html .clearfix {
    height: 1%;
}

/* !Layout
---------------------------------------------------------- */
html {
    overflow-y: scroll;
    font-size: 62.5%;
}

/*** タブレット 768x ~ 1200px***/
@media screen and (min-width: 768px) {
    html {
        font-size: calc(100vw / 192);
    }
}

body {
    font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    -webkit-text-size-adjust: none;
    line-height: 2;
    letter-spacing: .2rem;
    font-weight: normal;
    color: var(--black);
    background: var(--gray);
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.font_en {
    font-family: "Oswald", sans-serif;
    font-weight: 500;
}

/* !Base Fonts -------------------------------------------------------------- */
a {
    color: var(--black);
    text-decoration: none;
}

/*** hover ***/
@media screen and (min-width: 960px) {
    a {
        transition: all 0.5s;
    }

    a:hover {
        text-decoration: none;
    }

    .hover-opacity {
        transition: opacity 0.5s ease-out;
    }

    .hover-opacity:hover {
        opacity: .7;
        text-decoration: none;
    }

    a[href^="tel:"] {
        cursor: default;
        pointer-events:none;
    }
}

.is-hide {
    display: none;
}


/*** 非スマホ 768px ~ ***/
@media screen and (min-width: 768px) {
    .is-sp {
        display: none;
    }
}

/* !wrapper
---------------------------------------------------------- */
#wrapper {
    width: 100%;
}



/* !header
---------------------------------------------------------- */
#header,
.site-header__body {
    position: fixed;
    top: 1.3rem;
    left: 4rem;
    z-index: 9999;
    width: calc(100% - 8rem);
    background: #fff;
}

.header-inner,
.site-header__inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding-left: 2.6rem;
}

.header-logo a {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.3;
    font-weight: bold;
}

.header-logo a img {
    width: 11.8rem;
}

.btn-menu {
    display: none;
}

/*** hover ***/
@media screen and (min-width: 960px) {
    .header-logo a:hover {
        opacity: .7;
    }
}



/* !global navigation
---------------------------------------------------------- */
#g-navi {
    display: flex;
    align-items: center;
    gap: 3.5rem;
}

#g-navi .g-navi__menu {
    display: flex;
    align-items: center;
    gap: 2rem;
}

#g-navi .g-navi__menu > li > a {
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.4;
    font-weight: bold;
}

#g-navi .g-navi__menu .submenu {
    display: none;
}

#g-navi .g-navi__links {
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

#g-navi .g-navi__links .g-navi__links--tel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .4rem;
}

#g-navi .g-navi__links .g-navi__links--tel a {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.357;
    letter-spacing: .3rem;
}

#g-navi .g-navi__links .g-navi__links--tel a:before {
    width: 3rem;
    height: 3rem;
    content: '';
    background: url(../img/common/icon_phone_blue.svg) center center no-repeat;
    background-size: 100% auto;
}

#g-navi .g-navi__links .g-navi__links--tel span {
    border: 1px solid var(--black);
    background: var(--gray);
    border-radius: 5rem;
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 500;
    width: 100%;
    text-align: center;
}

#g-navi .g-navi__links .g-navi__links--contact a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 19.6rem;
    height: 7.8rem;
    background: var(--orange-linear);
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.5;
    font-weight: bold;
    color: var(--white);
    position: relative;
}

#g-navi .g-navi__links .g-navi__links--contact a:before {
    width: 2.8rem;
    height: 2.8rem;
    content: '';
    background: url(../img/common/icon_mail_white.svg) center center no-repeat;
    background-size: 100% auto;
    transition: background-image .5s ease;
}

#g-navi .g-navi__links .g-navi__links--contact a:after {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid var(--orange);
    opacity: 0;
    transition: opacity .5s ease;
}

/*** hover ***/
@media screen and (min-width: 960px) {
    #g-navi .g-navi__menu > li > a:hover {
        opacity: .7;
    }

    #g-navi .g-navi__links .g-navi__links--contact a:hover {
        background: var(--white);
        color: var(--orange);
        text-decoration: none;
    }

    #g-navi .g-navi__links .g-navi__links--contact a:hover:before {
        background-image: url(../img/common/icon_mail_orange.svg);
    }

    #g-navi .g-navi__links .g-navi__links--contact a:hover:after {
        opacity: 1;
    }
}



/* !heading
---------------------------------------------------------- */
.heading-large {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: 5rem;
    position: relative;
    z-index: 2;
}

.heading-large .heading-large__en {
    color: var(--blue);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    word-break: keep-all;
    white-space: nowrap;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.5;
    letter-spacing: .2rem;
}

.heading-large .heading-large__en:after {
    width: 100%;
    height: 1px;
    background: #58B1E9;
    content: '';
}

.heading-large .heading-large__jp {
    font-size: 6rem;
    line-height: 1.5;
    font-weight: bold;
    letter-spacing: .2rem;
    color: var(--darkblue);
    padding-left: 5.2rem;
}

.heading-large.type2 {
    flex-direction: row-reverse;
    align-items: center;
    gap: 4.5rem;
}

.heading-large.type2:before {
    width: 29rem;
    height: 15rem;
    content: '';
    background: url(../img/common/icon_heading.svg) center center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: -13.3rem;
    top: -6.4rem;
    z-index: -1;
}

.heading-large.type2:after {
    width: 42.7rem;
    height: 42.7rem;
    border-radius: 100%;
    position: absolute;
    left: -23.6rem;
    top: -11rem;
    z-index: -2;
    background: #58B1E9;
    opacity: .2;
    content: '';
    filter: blur(4.4rem);
}

.heading-large.type2 .heading-large__en {
    flex-direction: row-reverse;
}

.heading-large.type2 .heading-large__jp {
    padding: 0;
    word-break: keep-all;
    white-space: nowrap;
}

.heading-large.type3 {
    justify-content: center;
    align-items: center;
    gap: 3.6rem;
    margin-bottom: 7.8rem;
}

.heading-large.type3 .heading-large__en {
    gap: 2.6rem;
}

.heading-large.type3 .heading-large__en:before {
    width: 100%;
    height: 1px;
    background: #58B1E9;
    content: '';
}

.heading-large.type3 .heading-large__jp {
    padding: 0;
}

/* !button
---------------------------------------------------------- */
.btn-links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    border: 1px solid var(--blue);
    background: var(--white);
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.5;
    font-weight: bold;
    letter-spacing: .2rem;
    color: var(--darkblue);
    padding: 1.05rem 4rem;
}

.btn-links:before {
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    content: '';
    background: var(--orange);
    margin-right: 1rem;
}

.btn-links:after {
    width: 3.9rem;
    height: 3.9rem;
    content: '';
    background: url(../img/common/icon_arrow_blue.svg) center center no-repeat;
    background-size: 100% auto;
    margin-left: 2rem;
    transition: background-image .5s ease;
}

.btn-links.is-blue {
    border: 1px solid var(--darkblue);
    background: var(--darkblue);
    color: var(--white);
    padding: 2.25rem 3.85rem;
}

.btn-links.is-blue:after {
    background-image: url(../img/common/icon_arrow_white.svg);
}

/*** hover ***/
@media screen and (min-width: 960px) {
    .btn-links:hover {
        background: var(--blue);
        color: var(--white);
        text-decoration: none;
    }

    .btn-links:hover:after {
        background-image: url(../img/common/icon_arrow_white.svg);
    }

    .btn-links.is-blue:hover {
        border-color: var(--blue);
        background: var(--white);
        color: var(--darkblue);
    }

    .btn-links.is-blue:hover:after {
        background-image: url(../img/common/icon_arrow_blue.svg);
    }
}



/* !main Visual
---------------------------------------------------------- */
#main-visual {}



/* !teaser
---------------------------------------------------------- */
#teaser {
    width: 100%;
    position: relative;
    z-index: 2;
}

#teaser:before {
    width: 100%;
    height: 100%;
    background: url(../img/common/bg_teaser_left.png) left top no-repeat;
    background-size: auto 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    content: '';
}

#teaser:after {
    width: 100%;
    height: 100%;
    background: url(../img/common/bg_teaser_right.png) right top no-repeat;
    background-size: auto 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    content: '';
}

#teaser .teaser-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 56rem;
    padding: 7.1rem 0 0 7.6rem;
}

#teaser .teaser-inner figure {
    width: 64rem;
    display: block;
    padding: 0;
    margin: 0;
}

#teaser .teaser-inner figure img {
    width: 100%;
}

.page-title .page-title__en {
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: .2rem;
    color: var(--orange);
    display: block;
    text-transform: uppercase;
}

.page-title .page-title__jp {
    display: block;
    font-size: 5.6rem;
    line-height: 1.8;
    letter-spacing: .3rem;
    color: #3B4E61;
}

/* !breadcrumb
---------------------------------------------------------- */
#breadcrumb {
  position: absolute;
  right: 8rem;
  bottom: 1rem;
  z-index: 3;
}

#breadcrumb ul {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: clamp(16px, 15.6px + 0.125vw, 18px);
  line-height: 1.8;
  letter-spacing: 3%;
  font-weight: 500;
}

#breadcrumb ul li {
  word-break: keep-all;
  white-space: nowrap;
  font-size: clamp(16px, 15.6px + 0.125vw, 18px);
  line-height: 1.8;
  letter-spacing: 3%;
  position: relative;
  color: var(--darkblue);
}

#breadcrumb ul li + li {
  padding-left: 1.5em;
}

#breadcrumb ul li + li:before {
  content: '＞';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5em;
  text-align: center;
  font-size: clamp(16px, 15.6px + 0.125vw, 18px);
  line-height: 1.8;
  color: var(--darkblue);
  z-index: 2;
}

#breadcrumb ul li:last-child {
  word-break: break-all;
  white-space: unset;
}

#breadcrumb ul li a {
  color: var(--darkblue);
}

/*** hover ***/
@media screen and (min-width: 960px) {
    #breadcrumb ul li a:hover {
        text-decoration: underline;
    }
}

/* !contents
---------------------------------------------------------- */
#contents {}

#main {}

#side {}

.inner {
    width: 100%;
    max-width: 166.4rem;
    padding: 0 3.2rem;
    margin: 0 auto;
}

.anchor-area {
    position: relative;
}

.anchor-area .anchor {
    position: absolute;
    top: -10.4rem;
    z-index: -1;
}

/* !page Top
---------------------------------------------------------- */
.page-top {
    position: absolute;
    z-index: 999;
    right: 1.6rem;
    bottom: 2.5rem;
}

.page-top a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1;
    color:  var(--white);
}

.page-top a img {
    width: 3.6rem;
}

/*** hover ***/
@media screen and (min-width: 960px) {
    .page-top a:hover {
        text-decoration: none;
        opacity: .7;
    }
}



/* !footer
---------------------------------------------------------- */
#footer,
.site-footer__body {
    display: grid;
    grid-template-columns: 35.4% auto;
    position: relative;
}

.footer-box,
.site-footer__box {
    width: 100%;
    padding: 4.6rem 2rem 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-box .footer-box__inner,
.site-footer__box .footer-box__inner {
    width: 100%;
    max-width: 36.2rem;
}

.footer-logo {
    text-align: center;
    margin-bottom: 1.2rem;
    font-size: 1px;
    line-height: 1;
}

.footer-logo a {
    display: inline-flex;
    width: 24rem;
}

.footer-logo a img {
    width: 100%;
}

.footer-address {
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: .2rem;
    font-weight: 500;
}

.footer-address span {
    font-size: 1.6rem;
    display: block;
    margin-bottom: .4rem;
}

.footer-tel {
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-sns {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    font-size: 1px;
    line-height: 1;
}

.footer-sns a {
    display: block;
    width: 2.9rem;
}

.footer-sns a img {
    width: 100%;
}

.footer-button {
    margin-top: 3rem;
    width: 100%;
}

.footer-button a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 4.3rem;
    border: 1px solid #004081;
    border-radius: .5rem;
    background: #004081;
    color: var(--white);
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .2rem;
}

#copyright {
    margin-top: 5.1rem;
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: .2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: keep-all;
    white-space: nowrap;
    color: #3B4E61;
}

.footer-links,
.site-footer__links {
    width: 100%;
    background: url(../img/common/bg_footer_pc.png) center center no-repeat var(--darkblue);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6rem;
}

.footer-links__menu {
    width: 100%;
    max-width: 84.2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4.5rem;
}

.footer-links__menu ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-links__menu li {
    width: 100%;
}

.footer-links__menu li a {
    display: block;
    padding-left: 2.6rem;
    border-bottom: 1px solid var(--white);
    color: var(--white);
    position: relative;
}

.footer-links__menu > ul > li > a {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: .2rem;
    padding-bottom: 1.3rem;
}

.footer-links__menu > ul > li > a:before {
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    background: var(--orange);
    position: absolute;
    left: .5rem;
    top: .8rem;
    z-index: 2;
    content: '';
}

.footer-links__menu .submenu li {
    margin-top: 1.5rem;
}

.footer-links__menu .submenu li a {
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: .2rem;
    padding-bottom: 1.2rem;
}

.footer-links__menu .submenu li a:before {
    width: .8rem;
    height: .2rem;
    background: var(--orange);
    position: absolute;
    left: .5rem;
    top: 1.35rem;
    z-index: 2;
    content: '';
}

.footer-links__tel {
    width: 100%;
    max-width: 84rem;
    background: var(--white);
    border-radius: 2rem;
    border: 1px solid var(--orange);
    display: grid;
    grid-template-columns: 35.47619% auto;
}

.footer-links__tel .footer-links__tel--title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: .159rem;
    color: var(--darkblue);
    border-right: 1px solid var(--orange);
}

.footer-links__tel .footer-links__tel--contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-links__tel .footer-links__tel--contents a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 5.2rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .3rem;
    padding: .5rem .5rem .6rem;
    color: var(--darkblue);
    width: 100%;
}

.footer-links__tel .footer-links__tel--contents a:before {
    width: 5.339rem;
    height: 5.161rem;
    content: '';
    background: url(../img/common/icon_phone_orange.svg) center center no-repeat;
    background-size: 100% auto;
}

.footer-links__tel .footer-links__tel--contents span {
    display: block;
    width: 100%;
    border-top: 1px solid var(--orange);
    display: block;
    padding: .3rem .5rem .5rem;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .163rem;
    text-align: center;
}

/*** hover ***/
@media screen and (min-width: 960px) {
    .footer-links__menu li a:hover {
        opacity: .7;
    }
    .footer-button a:hover {
        color: #004081;
        background: var(--white);
        text-decoration: none;
    }
}


/* !上下にふわふわアニメーション
---------------------------------------------------------- */

.is-fluffy {
     /*animation: fluffy 3s infinite;*/
}

@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* !スクロールでふわっと出るアニメーション
---------------------------------------------------------- */
.advanced {
    position: relative;
    z-index: 2;
    flex: 1;
    opacity: 0;
    translate: 0 13%;
}

.advanced.isActive {
    opacity: 1;
    translate: 0;
    transition-timing-function: opacity var(--ease-out-cubic), translate var(--ease-out-quint);
    transition-duration: 1.8s;
}

/* !採用TOP
---------------------------------------------------------- */
.recruit-top {
    width: 100%;
    overflow: hidden;
    padding-bottom: 9.2rem;
    margin-bottom: -9.2rem;
}
.recruit-mv {
    width: 100%;
    height: 87.1rem;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.recruit-mv:before {
    width: 62rem;
    height: 32rem;
    background: url(../img/recruit/top/bg_mv01.svg) center center no-repeat;
    background-size: 100% 100%;
    content: '';
    position: absolute;
    top: 22.7rem;
    left: 50%;
    transform: translateX(13.8rem);
    z-index: -1;
}

.recruit-mv:after {
    width: 84.7rem;
    height: 45.3rem;
    background: url(../img/recruit/top/bg_mv02.svg) center center no-repeat;
    background-size: 100% 100%;
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(1.5rem);
    z-index: -1;
}

.recruit-mv .recruit-mv__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.recruit-mv .recruit-mv__image .image {
    position: relative;
    overflow: hidden;
}

.recruit-mv .recruit-mv__image .image:before {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    content: '';
    background: var(--blue-linear);
    transition: transform .5s ease;
}

.is-loaded .recruit-mv .recruit-mv__image .image:before {
    transform: translateX(100%);
}

.recruit-mv .recruit-mv__image .image01 {
    width: 63rem;
    height: 78rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-35.4rem);
    z-index: 2;
    box-shadow: var(--shadow);
}

.recruit-mv .recruit-mv__image .image02 {
    width: 45rem;
    height: 56rem;
    position: absolute;
    top: 16.5rem;
    left: 50%;
    transform: translateX(-90.4rem);
    z-index: 2;
    box-shadow: var(--shadow);
}

.recruit-mv .recruit-mv__image .image03 {
    width: 34rem;
    height: 19rem;
    position: absolute;
    top: 16.1rem;
    right: 50%;
    transform: translateX(71.5rem);
    z-index: 2;
    box-shadow: var(--shadow);
}

.recruit-mv .recruit-mv__image .image04 {
    width: 48rem;
    height: 29rem;
    position: absolute;
    top: 44rem;
    right: 50%;
    transform: translateX(96rem);
    z-index: 2;
    box-shadow: var(--shadow);
}


.recruit-mv .recruit-mv__image .mark01 {
    width: 29rem;
    height: 19rem;
    position: absolute;
    top: 11rem;
    left: 50%;
    margin-left: -86.7rem;
    z-index: 2;
}

.recruit-mv .recruit-mv__image .mark02 {
    width: 30rem;
    height: 10rem;
    position: absolute;
    top: 11.1rem;
    left: 50%;
    margin-left: 14.8rem;
    z-index: 2;
    animation-delay: 1.5s;
}

.recruit-mv .recruit-mv__image .mark03 {
    width: 22rem;
    height: 13rem;
    position: absolute;
    top: 28.8rem;
    left: 50%;
    margin-left: 80rem;
    z-index: 2;
}

.recruit-mv .recruit-mv__image .mark04 {
    width: 48rem;
    height: 24rem;
    position: absolute;
    bottom: 6.8rem;
    left: 50%;
    margin-left: 38.3rem;
    z-index: 2;
    animation-delay: 1.5s;
}

.recruit-mv .recruit-mv__catch {
    position: absolute;
    left: 0;
    bottom: 12.7rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.recruit-mv .recruit-mv__catch p {
    background: var(--gray);
    padding: 1rem 2.6rem 1rem 5.5rem;
    font-size: 6.6rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--darkblue);
    letter-spacing: .5rem;
    position: relative;
    overflow: hidden;
}

.recruit-mv .recruit-mv__catch h1 {
    background: var(--gray);
    padding: 1.4rem 2.6rem 1.4rem 5.9rem;
    font-size: 5rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--darkblue);
    letter-spacing: .3rem;
    position: relative;
    overflow: hidden;
}

.recruit-mv .recruit-mv__catch p:before,
.recruit-mv .recruit-mv__catch h1:before {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: var(--blue);
    content: '';
    transition: transform .5s ease;
}

.is-loaded .recruit-mv .recruit-mv__catch p:before,
.is-loaded .recruit-mv .recruit-mv__catch h1:before {
    transform: translateX(100%);
}

.recruit-message {
    width: 100%;
    position: relative;
    padding-top: 1rem;
    padding-bottom: 9.2rem;
}

.recruit-message .recruit-message__image {
    width: 100%;
    height: calc(100% + 9.2rem);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.recruit-message .recruit-message__image01 {
    width: 51.2rem;
    position: absolute;
    top: 11.7rem;
    left: -8.5rem;
    z-index: 1;
}

.recruit-message .recruit-message__image01:before {
    width: 42.7rem;
    height: 42.7rem;
    border-radius: 100%;
    position: absolute;
    right: 11.1rem;
    top: -3.7rem;
    z-index: -1;
    background: #58B1E9;
    opacity: .2;
    content: '';
    filter: blur(4.4rem);
}

.recruit-message .recruit-message__image02 {
    width: 40.2rem;
    position: absolute;
    right: -1.1rem;
    bottom: 7.8rem;
    z-index: 1;
}

.recruit-message .recruit-message__image02:before {
    width: 42.7rem;
    height: 42.7rem;
    border-radius: 100%;
    position: absolute;
    left: 8.4rem;
    top: -2.6rem;
    z-index: -1;
    background: #58B1E9;
    opacity: .2;
    content: '';
    filter: blur(4.4rem);
}

.recruit-message .recruit-message__inner {
    width: 100%;
    max-width: 96rem;
    margin: 0 auto;
    border-radius: 2rem;
    padding: 4.6rem 10rem 9.4rem;
    background: rgba(255, 255, 255, .4);
    backdrop-filter: blur(3rem);
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.recruit-message .recruit-message__inner:before {
    width: 84.3rem;
    height: 84.3rem;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    background: #58B1E9;
    opacity: .15;
    content: '';
    filter: blur(12.2rem);
}

.recruit-message .recruit-message__inner h2 {
    padding-top: 7.8rem;
    background: url(../img/recruit/top/icon_message.svg) center top no-repeat;
    background-size: 5rem auto;
    font-size: 4.6rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .6rem;
    margin-bottom: 4rem;
}

.recruit-message .recruit-message__inner p {
    line-height: 1.8;
}

.recruit-message .recruit-message__inner p + p {
    margin-top: 1.8em;
}

.recruit-outline {
    width: 100%;
    position: relative;
    padding-bottom: 11rem;
}

.recruit-outline .recruit-outline__item {
    padding: 9.2rem 4.5rem 0;
    line-height: 1.6;
    letter-spacing: .2rem;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
}

.recruit-outline .recruit-outline__item p + p {
    margin-top: 1.6em;
}

.recruit-outline .heading-large {
    margin-bottom: 3rem;
}

.recruit-outline .heading-large:before {
    width: 28rem;
    height: 13rem;
    background: url(../img/common/icon_heading.svg) center center no-repeat;
    background-size: 100% auto;
    content: '';
    position: absolute;
    left: -10.1rem;
    top: -3.7rem;
    z-index: -1;
}

.recruit-outline .heading-large .heading-large__en {
    color: var(--white);
}

.recruit-outline .heading-large .heading-large__en:after {
    background: var(--white);
}

.recruit-outline .heading-large .heading-large__jp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
    padding: 0;
    width: 100%;
    font-size: 4.8rem;
}

.recruit-outline .recruit-outline__inner {
    width: 100%;
    border-radius: 2rem;
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.recruit-outline .recruit-outline__image {
    width: 74rem;
    border-radius: 2rem;
    overflow: hidden;
}

.recruit-outline .recruit-outline__image img {
    width: 100%;
}

.recruit-outline .recruit-outline__box {
    width: 68.4rem;
}

.recruit-company {
    position: sticky;
    top: 9.1rem;
    z-index: 1;
}

.recruit-company .recruit-outline__inner {
    background: var(--blue);
    padding: 6.3rem 16.2rem 7.1rem 5.6rem;
}

.recruit-job {
    position: relative;
    z-index: 2;
}

.recruit-job .recruit-outline__inner {
    background: var(--darkblue);
    padding: 6.7rem 6.5rem 6.7rem 18.9rem;
    flex-direction: row-reverse;
}

.recruit-work {
    background: var(--white);
    width: 100%;
    padding: 10rem 10.4rem;
}

.recruit-work .recruit-work__list {
    padding: 0 7rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6rem;
    position: relative;
    z-index: 2;
}

.recruit-work .recruit-work__list:before,
.recruit-work .recruit-work__list:after {
    width: 42.7rem;
    height: 42.7rem;
    border-radius: 100%;
    position: absolute;
    z-index: -1;
    background: #58B1E9;
    opacity: .2;
    content: '';
    filter: blur(4.4rem);
}

.recruit-work .recruit-work__list:before {
    left: -3.3rem;
    top: -12.5rem;
}

.recruit-work .recruit-work__list:after {
    right: -2.4rem;
    top: -1.1rem;
}

.recruit-work .recruit-work__list li {
    position: relative;
    z-index: 2;
    flex: 1;
}

.recruit-work .recruit-work__list li:nth-child(1) .recruit-work__img01 {
    width: 19rem;
    height: 9rem;
    position: absolute;
    left: -4.7rem;
    top: 3.7rem;
    z-index: 3;
}

.recruit-work .recruit-work__list li:nth-child(1) .recruit-work__img02 {
    width: 27rem;
    height: 14rem;
    position: absolute;
    left: -14.6rem;
    top: 11.7rem;
    z-index: 1;
}

.recruit-work .recruit-work__list li:nth-child(2) {
    transform: translateY(-7.7rem);
}

.recruit-work .recruit-work__list li:nth-child(2) .recruit-work__img01 {
    width: 19rem;
    height: 12rem;
    position: absolute;
    right: -11.1rem;
    top: 2.1rem;
    z-index: 3;
}

.recruit-work .recruit-work__list li:nth-child(2) .recruit-work__img02 {
    width: 39rem;
    height: 21rem;
    position: absolute;
    right: -16rem;
    top: 8.6rem;
    z-index: 1;
}

.recruit-work .recruit-work__block {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
}

.recruit-work .recruit-work__image {
    display: block;
    width: 100%;
    aspect-ratio: 177 / 110;
}

.recruit-work .recruit-work__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recruit-work .recruit-work__title {
    position: absolute;
    z-index: 2;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 0 0 2.5rem;
    font-size: 3rem;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: .2rem;
    color: var(--white);
    text-align: center;
}

.recruit-work .recruit-work__title:before {
    width: 100%;
    height: 26.3rem;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 0%, var(--darkblue) 70%,  var(--darkblue) 100%);
}

.recruit-work .recruit-work__title:after {
    width: 8.8rem;
    height: 8.8rem;
    content: '';
    position: absolute;
    right: 4.9rem;
    bottom: 2.5rem;
    z-index: 1;
    background: url(../img/common/icon_arrow_blue.svg) center center no-repeat var(--white);
    background-size: 5.7rem auto;
    border-radius: 100%;
}

.recruit-work .recruit-work__title span {
    font-size: 4.5rem;
    font-weight: 800;
}

.recruit-faq {
    padding: 9.2rem 0 8rem;
    position: relative;
    z-index: 2;
}

.recruit-faq .recruit-faq__image01 {
    width: 43rem;
    height: 19rem;
    position: absolute;
    left: 0;
    top: 6.1rem;
    content: '';
    z-index: -1;
}

.recruit-faq .recruit-faq__image02 {
    width: 42rem;
    height: 20rem;
    position: absolute;
    right: 0;
    top: 4.5rem;
    content: '';
    z-index: -1;
}


.recruit-faq .heading-large {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
}

.recruit-faq .heading-large .heading-large__jp {
    padding: 0;
}

.recruit-faq .recruit-faq__list {
    max-width: 128rem;
    width: 100%;
    margin: 0 auto 12rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.recruit-faq .recruit-faq__list--item {
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--white);
}

.recruit-faq .recruit-faq__list--item dt {
    position: relative;
    background: var(--darkblue);
    padding: 1.1rem 1.4rem 1.1rem 7.1rem;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: .2rem;
    font-weight: bold;
    color: var(--white);
}

.recruit-faq .recruit-faq__list--item dt:before {
    width: 3.7rem;
    height: 3.7rem;
    border-radius: .5rem;
    padding-bottom: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white);
    font-size: 2.2rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--darkblue);
    content: 'Q';
    position: absolute;
    left: 1.4rem;
    top: 1.1rem;
    z-index: 2;
}

.recruit-faq .recruit-faq__list--item dd {
    position: relative;
    padding: 1.1rem 4.2rem 2rem 7.1rem;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.8;
    letter-spacing: .3rem;
    font-weight: 500;
}

.recruit-faq .recruit-faq__list--item dd:before {
    width: 3.7rem;
    height: 3.7rem;
    border-radius: .5rem;
    padding-bottom: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--darkblue);
    font-size: 2.2rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--white);
    content: 'A';
    position: absolute;
    left: 1.4rem;
    top: 1.6rem;
    z-index: 2;
}

.recruit-faq .recruit-faq__links {
    text-align: center;
    margin-top: 5rem;
}

.recruit-guideline {
    width: 100%;
    min-height: 72rem;
    padding: 13.4rem 0;
    background: url(../img/common/bg_guideline_pc.jpg) right center no-repeat;
    background-size: cover;
}

.recruit-guideline .recruit-guideline__inner {
    width: 100%;
    padding: 0 5rem;
    max-width: 117rem;
}

.recruit-guideline .heading-large {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

.recruit-guideline .heading-large:before {
    width: 34rem;
    height: 19rem;
    content: '';
    background: url(../img/common/icon_guideline.svg) center center no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: -8.9rem;
    top: -8rem;
    z-index: -1;
}

.recruit-guideline .heading-large .heading-large__jp {
    padding: 0;
    font-size: 7.848rem;
    letter-spacing: .49rem;
    line-height: 1.3;
    word-break: keep-all;
    white-space: nowrap;
}

.recruit-guideline p {
    font-size: 2.2rem;
    line-height: 1.8;
    font-weight: 600;
    letter-spacing: 3%;
}

.recruit-guideline p + p {
    margin-top: 1.8em;
}

.recruit-guideline .recruit-guideline__links {
    margin-top: 5rem;
}

/* !faq
---------------------------------------------------------- */
.faq-wrap {
    border-top: 1.7rem solid #58B1E9;
    padding: 11rem 0 17rem;
    width: 100%;
    position: relative;
}

.faq-wrap .recruit-faq__image01 {
    top: unset;
    bottom: 26.2rem;
}

.faq-wrap .recruit-faq__image02 {
    top: 9.8rem;
}

.faq-wrap .faq-inner {
    width: 100%;
    max-width: 128rem;
    margin: 0 auto;
}



/* !募集要項
---------------------------------------------------------- */
.benefits-wrap {
    padding: 16.5rem 0 14.2rem;
    background: var(--white);
}

.benefits-wrap .inner {
    max-width: 134.4rem;
}

.benefits-list {
    display: grid;
    position: relative;
    z-index: 3;
}

.benefits-list + .benefits-list {
    margin-top: 5rem;
}

.benefits-list li {
    background: var(--gray);
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 3rem;
}

.benefits-list figure {
    display: block;
    padding: 0;
    margin: 0;
}

.benefits-list figure img {
    width: 100%;
}

.benefits-list .benefits-title {
    color: var(--darkblue);
    text-align: center;
}

.benefits-list p {
    margin-top: 1rem;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.6;
    letter-spacing: 3%;
}

.benefits-list.column2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 4rem;
}

.benefits-list.column2 li {
    min-height: 43.3rem;
}

.benefits-list.column2 figure {
    width: 32rem;
}

.benefits-list.column2 .benefits-title {
    margin-top: .8rem;
    font-size: 3rem;
    line-height: 1.8;
    letter-spacing: 3%;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 6.4rem;
}

.benefits-list.column2 .benefits-title span {
    font-size: 2.2rem;
    display: block;
}

.benefits-list.column3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.6rem 4rem;
}

.benefits-list.column3 li {
    min-height: 25.5rem;
}

.benefits-list.column3 figure {
    width: 12rem;
}

.benefits-list.column3 .benefits-title {
    margin-top: 2rem;
    font-size: 2.6rem;
    line-height: 1.5;
    letter-spacing: .3rem;
    font-weight: bold;
}

.benefits-list.column3 .benefits-title span {
    font-size: 2rem;
    display: block;
}

.training-wrap {
    padding: 16rem 0 10rem;
}

.column-area {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}


.column-area.rev{
    flex-direction: row-reverse;
    margin-bottom: 120px;
}

.column-area .column-area__image {
    width: 40%;
}

.column-area .column-area__image img {
    width: 100%;
    border-radius: 2rem;
}

.column-area .column-area__box {
    width: 54.375%;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.8;
    letter-spacing: .3rem;
    font-weight: 500;
}

.column-area .column-area__box p + p {
    margin-top: 1.8em;
}

.column-area .heading-large {
    margin-bottom: 3rem;
}

.column-area .heading-large .heading-large__jp {
    padding: 0;
}

.guideline-wrap {
    padding: 19.2rem 0 14.7rem;
    background: var(--white);
}

.guideline-wrap .inner {
    max-width: 134.4rem;
}

.guideline-list {
    width: 100%;
    max-width: 110rem;
    margin: 0 auto;
}

.guideline-list .guideline-list__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid #58B1E9;
    padding: 3.5rem 0;
}

.guideline-list .guideline-list__item dt {
    width: 30rem;
    font-size: 2.2rem;
    line-height: 1.4;
    letter-spacing: .2rem;
    font-weight: bold;
}

.guideline-list .guideline-list__item dd {
    width: calc(100% - 31rem);
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.4;
    letter-spacing: .2rem;
    font-weight: 500;
    padding: .42rem 0;
}

.guideline-links {
    margin-top: 6rem;
    text-align: center;
}


/* !世代別の働き方
---------------------------------------------------------- */
.workstyle-wrap .workstyle-item {
    padding: 14rem 0;
  
}

.workstyle-item-title{
    text-align: center;
    margin-bottom: 2rem;
}

.workstyle-wrap .workstyle-item:nth-child(odd) {
    background: var(--white);
}

.workstyle-wrap .column-area,
.workstyle-wrap .column-area__image {
    position: relative;
    z-index: 2;
    margin-bottom: 8rem;
}

.workstyle-wrap .column-area:after {
    width: 42.7rem;
    height: 42.7rem;
    border-radius: 100%;
    position: absolute;
    left: -12.161rem;
    top: -7.1rem;
    z-index: -2;
    background: #58B1E9;
    opacity: .2;
    content: '';
    filter: blur(4.4rem);
}

.workstyle-wrap .column-area__image .column-area__image01 {
    width: 19rem;
    height: 9rem;
    position: absolute;
    left: -4.4rem;
    top: 9.2rem;
    z-index: 3;
}

.workstyle-wrap .column-area__image .column-area__image02 {
    width: 27rem;
    height: 14rem;
    position: absolute;
    left: -14.3rem;
    top: 18.7rem;
    z-index: -1;
}


.workstyle-schedule {
    margin-top: 11rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6.6rem;
}

.workstyle-schedule .workstyle-schedule__item {
    border-radius: 2rem;
    padding: 3.55rem 3.8rem 5.6rem;
    color: var(--white);
}

.workstyle-schedule .workstyle-schedule__item:nth-child(odd) {
    background: var(--blue);
}

.workstyle-schedule .workstyle-schedule__item:nth-child(even) {
    background: #58B1E9;
}

.workstyle-schedule-title {
    margin-bottom: 3.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    font-size: 3rem;
    line-height: 1.8;
    letter-spacing: 3%;
    font-weight: bold;
}

.workstyle-schedule-title img {
    width: 5rem;
}

.workstyle-schedule .workstyle-schedule__item figure {
    width: 100%;
    padding: 0;
    margin: 0;
}

.workstyle-schedule .workstyle-schedule__item figure img {
    width: 100%;
}

.workstyle-voice {
    margin-top: 13rem;
    margin-bottom: 13rem;
}

.workstyle-voice__item {
    display: flex;
    align-items: center;
}

.workstyle-voice .workstyle-voice__item + .workstyle-voice__item {
    margin-top: 12rem;
}

.workstyle-voice .workstyle-voice__item:nth-child(odd) {
    flex-direction: row-reverse;
}

.workstyle-voice .workstyle-voice-image {
    width: 50%;
    text-align: center;
    position: relative;
    z-index: 2;
}

.workstyle-voice .workstyle-voice-image img {
    width: 64rem;
    border-radius: 17.45rem;
}

.workstyle-voice .workstyle-voice-image:after {
    width: 42.7rem;
    height: 42.7rem;
    border-radius: 100%;
    position: absolute;
    left: -16.9rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: -2;
    background: #58B1E9;
    opacity: .2;
    content: '';
    filter: blur(4.4rem);
}

.workstyle-voice .workstyle-voice__item:nth-child(odd) .workstyle-voice-image:after {
    left: unset;
    right: -13.7rem;
}

.workstyle-voice .workstyle-voice-box {
    width: 50%;
    display: flex;
    align-items: center;
    padding: 0 4rem;
}

.workstyle-voice .workstyle-voice__item:nth-child(odd) .workstyle-voice-box {
    justify-content: flex-end;
}

.workstyle-voice .workstyle-voice-contents {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 69rem;
    border-radius: 2rem;
    background: var(--gray);
    padding: 4rem;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.8;
    letter-spacing: 3%;
}

.workstyle-voice .workstyle-voice-contents:before {
    width: 6.96rem;
    height: 12.2rem;
    background: url(../img/recruit/workstyle/icon_union.svg) right center no-repeat;
    background-size: auto 100%;
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%) scale(-1);
    z-index: 2;
    overflow: hidden;
}

.workstyle-voice .workstyle-voice__item:nth-child(odd) .workstyle-voice-contents:before{
    left: 100%;
    transform: translate(0, -50%);
}

.workstyle-voice .workstyle-voice-contents:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 2rem;
    box-shadow: 0 .4rem 3.4rem 0 #A9A9A9;
    content: '';
}


.workstyle-wrap .workstyle-item:nth-child(even) .workstyle-voice .workstyle-voice-contents {
    background: var(--white);
}


.workstyle-wrap .workstyle-item:nth-child(even) .workstyle-voice .workstyle-voice-contents:before {
    background-image: url(../img/recruit/workstyle/icon_union_white.svg)
}

.workstyle-voice .workstyle-voice-contents p {
    padding: 0 1.8rem;
}

.workstyle-voice .workstyle-voice-title {
    padding: 0 1.8rem 1.5rem;
    border-bottom: 1px solid var(--darkblue);
    font-size: 3rem;
    line-height: 1.6;
    letter-spacing: 3%;
    color: var(--darkblue);
    margin-bottom: 1.5rem;
}



/* !会社を知る
---------------------------------------------------------- */
#about .recruit-work {
    background: none;
    padding: 12rem 0 16rem;
}

.about-banner {
	overflow: hidden;
	display: flex;
	flex-direction: row-reverse;
}
.about-banner .pic {
	position: relative;
	z-index: 2;
	width: calc(45% - 1.5rem);
}
.about-banner .pic:after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 35.1rem;
	height: 100%;
	background: linear-gradient(90deg, transparent, #1C74D8 70%);
}
.about-banner .pic .img img {
	max-width: 74rem;
}
.about-banner .icon_fluffy {
    position: absolute;
    z-index: 2;
    background: center no-repeat;
    background-size: 100% auto;
    animation: fluffy 3s infinite;
}
.about-banner .icon_fluffy1 {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
	width: 48rem;
	height: 28rem;
}
.about-banner .icon_fluffy2 {
    position: absolute;
    z-index: 2;
	right: 4.5rem;
	top: 16.6rem;
	width: 27rem;
	height: 13rem;
}
.about-banner .info {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
	padding: 0 9rem;
	width: calc(55% + 1.5rem);
	background: linear-gradient(90deg, #1C74D8, #1794E2);
	color: #fff;
}
.about-banner .info:after {
    width: 64.7rem;
    height: 64.7rem;
    border-radius: 100%;
    position: absolute;
    left: 7rem;
    top: -7.8rem;
    z-index: -2;
    background: #fff;
    opacity: .2;
    content: '';
    filter: blur(4.4rem);
}
.about-banner .bg_head {
	opacity: 0.04;
	position: absolute;
	left: -5rem;
	top: 3.7rem;
	z-index: -1;
	line-height: 1.5;
	font-size: 7.8rem;
	font-weight: 500;
}
.about-banner .txt {
	max-width: 80rem;
	line-height: 2.2;
	font-weight: 700;
	font-size: 2.2rem;
}
.about-banner .txt p + p {
	margin-top: 4.4rem;
}

.about-other-company {
	position: relative;
	z-index: 2;
	padding: 12rem 0 10.9rem;
}
.about-other-company:before {
	content: "";
	width: 42.7rem;
	height: 42.7rem;
	border-radius: 100%;
	position: absolute;
	right: 0.6rem;
	bottom: -4rem;
	z-index: -2;
	background: #58B1E9;
	opacity: .2;
	filter: blur(4.4rem);
}
.about-other-company .heading-large:before {
    width: 29rem;
    height: 15rem;
    content: '';
    background: url(../img/common/icon_heading.svg) center center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: -13.3rem;
    top: -6.4rem;
    z-index: -1;
}
.about-other-company .heading-large:after {
    width: 42.7rem;
    height: 42.7rem;
    border-radius: 100%;
    position: absolute;
    left: -23.6rem;
    top: -11rem;
    z-index: -2;
    background: #58B1E9;
    opacity: .2;
    content: '';
    filter: blur(4.4rem);
}
.about-other-company li {
	display: flex;
	justify-content: space-between;
	padding-left: 7.4rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid #58B1E9;
}
.about-other-company li + li {
	margin-top: 4rem;
}
.about-other-company .info {
	width: calc(50% - 0.7rem);
}
.about-other-company .head {
	margin-bottom: 2rem;
}
.about-other-company .head span {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 1rem;
	background: #1794E2;
	line-height: 1.5;
	color: #fff;
	font-size: 3rem;
	font-weight: 700;
}
.about-other-company .img {
	width: calc(50% - 9.3rem);
}
.about-other-company .img img {
	width: 100%;
	border-radius: 2rem;
}
.about-other-company .txt {
	line-height: 1.8;
	font-weight: 500;
}

.heading-large.type-center {
	justify-content: center;
	align-items: center;
}
.heading-large.type-center:before {
    width: 29rem;
    height: 15rem;
    content: '';
    background: url(../img/common/icon_heading.svg) center center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: calc(50% + 5.3rem);
    top: -1.8rem;
    z-index: -1;
}
.heading-large.type-center:after {
    width: 42.7rem;
    height: 42.7rem;
    border-radius: 100%;
    position: absolute;
    left: -23.6rem;
    top: -11rem;
    z-index: -2;
    background: #58B1E9;
    opacity: .2;
    content: '';
    filter: blur(4.4rem);
}
.heading-large.type-center .heading-large__jp {
	padding-left: 0;
}

.heading-large_bk_jp {
    font-size: 3rem;
    line-height: 1.5;
    font-weight: bold;
    letter-spacing: .2rem;

}

.heading-large.type-center .heading-large__en {
	justify-content: center;
}
.heading-large.type-center .heading-large__en:after {
	content: none;
}

.about-job {
	padding: 11.6rem 0 13.6rem;
	background: #fff;
}
.about-job ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5rem;
}
.about-job li {
	padding: 3.2rem 7.5rem;
	background: #1794E2;
	border-radius: 2rem;
	color: #fff;
}
.about-job li:nth-of-type(4n+1) {
	background: #2781D5;
}
.about-job li:nth-of-type(4n) {
	background: #2781D5;
}
.about-job .head {
	display: flex;
	align-items: center;
	padding-left: 12.2rem;
	margin-bottom: 2.2rem;
	min-height: 7.5rem;
	background: no-repeat left center;
	background-size: 7rem;
	line-height: 1.4;
	font-size: 4rem;
	font-weight: 700;
}
.about-job .icon-jap01 {
	background-image: url(../img/recruit/about/icon_jap01.svg);
}
.about-job .icon-jap02 {
	background-image: url(../img/recruit/about/icon_jap02.svg);
}
.about-job .icon-jap03 {
	background-image: url(../img/recruit/about/icon_jap03.svg);
}
.about-job .icon-jap04 {
	background-image: url(../img/recruit/about/icon_jap04.svg);
}
.about-job li .img {
	overflow: hidden;
	margin-bottom: 2.7rem;
	border-radius: 2rem;
	aspect-ratio: 620 / 240;
}
.about-job li .txt {
	line-height: 1.7;
	font-size: 2rem;
	font-weight: 500;
}

/* 1. 見出しの下マージンとpタグの余白をリセット */
.column-area__box .heading-large {
  margin-bottom: 0; /* 見出し下の隙間を調整 */
}

.flex_box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start; /* 上揃えを固定 */
  max-width: 660px;
}

/* 2. pタグのブラウザ標準マージンを解除 */
.flex_box p {
  margin: 0;
}

/* 3. 画像のブロック化（隙間防止） */
.flex_box img {
  display: block;
  max-width: 100%;
  height: auto;
}



.text_center{
    text-align: center;
    margin: auto;
}

.bg-bl{
    background-color: #C4F6FF!important;
    border-radius: 10px;
}

.block-item{
    padding:5rem;
    margin-bottom:10rem;
}

.workstyle_icon{
    margin: 3rem!important;
}

/* 全体レイアウト（PCで横3列） */
.workstyle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;                 /* 正方形のサイズ感に合わせて最大幅を調整 */
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
}

/* カード本体（正方形維持） */
.workstyle-card {
  aspect-ratio: 1 / 1;              /* 縦横比を 1:1（正方形）に固定 */
  width: 100%;                      /* グリッド幅に合わせて自動伸縮 */
  background-color: #ffffff;
  border: 2px solid #d9eeff;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 8px 20px -4px rgba(135, 190, 240, 0.35);
  box-sizing: border-box;
      background-color: #dcf1ff;
    max-width: 200px;
  
  /* 正方形の中でコンテンツを上下左右中央揃えにする */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.workstyle-card img{
      aspect-ratio: 1 / 1;              /* 縦横比を 1:1（正方形）に固定 */
      width: 100%; 
      max-width: 80px;
}

/* テキストエリア */
.workstyle-card__text {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* ハイライト文字（上段） */
.workstyle-card__highlight {
  font-size: 20px;
  font-weight: 700;
  color: #1a73e8;
  line-height: 1.3;
  white-space: nowrap;
}

/* 補足文字（下段） */
.workstyle-card__sub {
  font-size: 16px;
  font-weight: 500;
  color: #333d48;
  line-height: 1.3;
  white-space: nowrap;
}

/* --- レスポンシブ対応 --- */

/* スマホ時も正方形を維持して表示（1列化） */


/* 全体グリッド（2列レイアウト） */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
}

/* カード本体 */
.feature-card {
  background-color: #ffffff;
  border: 2px solid #d9eeff;        /* 薄い水色のボーダー */
  border-radius: 20px;               /* 角丸 */
  padding: 24px 28px;
  /* 画像特有の青みがかったソフトなシャドウを再現 */
  box-shadow: 0 10px 25px -5px rgba(135, 190, 240, 0.4);
  box-sizing: border-box;
}

/* 全体レイアウト（PCで横4列） */
.feature-grid {
  display: grid;
  /* 4つのカードを等幅で横並びにする */
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;                         /* カード間の余白（デザインに合わせて調整） */
  max-width: 1500px;                 /* コンテナの最大幅 */
  margin: 0 auto 6rem auto; /* 上下の余白を追加して中央寄せ */
  padding: 20px;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
}

/* カード本体 */
.feature-card {
  background-color: #ffffff;
  border: 2px solid #d9eeff;
  border-radius: 20px;
  padding: 20px 18px;                /* 4並び用に左右パディングを少し調整 */
  box-shadow: 0 10px 25px -5px rgba(135, 190, 240, 0.4);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ヘッダーエリア（アイコン＋タイトル） */
.feature-card__header {
  display: flex;
  align-items: center;
  gap: 12px;                         /* アイコンとタイトルの間隔 */
}

.feature-card__icon {
  width: 42px;                       /* 4並び用にアイコンを少しコンパクトに調整 */
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-card__title {
  margin: 0;
  font-size: 2.2rem;                   /* 4並び用のフォントサイズ */
  font-weight: 700;
  color: #207be5;
  line-height: 1.3;
  white-space: nowrap;               /* タイトルの意図しない改行を防止 */
}

/* 区切り線 */
.feature-card__divider {
  border: none;
  height: 1px;
  background-color: #3b82d6;
  margin: 14px 0;
}

/* 説明テキスト */
.feature-card__desc {
  margin: 0;
  font-size: clamp(16px, 15.6px + 0.125vw, 18px);                   /* 可読性を考慮したフォントサイズ */
  line-height: 1.6;
  color: #333d48;
  font-weight: 500;
}


/* --- レスポンシブ対応 --- */

/* タブレット（1024px以下）：2列表示 */
@media (max-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}



/* 全体レイアウト（PCで横5列） */
.schedule-grid {
  display: grid;
  /* 5つの要素を等幅で横並びにする */
  grid-template-columns: repeat(5, 1fr);
  gap: 3vw;
  max-width: 1500px; /* 設置場所の幅に合わせて調整してください */
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
}

/* 個別カード */
.schedule-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #ffffff;
  padding: 1vw;
  box-sizing: border-box;
  border-radius: 10px;
}

/* 時間タグ（幅を親要素100%に広げる） */
.schedule-time {
  display: block;
  width: 100%;
  background-color: #e3f2fd;
  color: #2c3e50;
  font-weight: 700;
  font-size: 16px;       /* 5並び用に少し文字サイズを調整 */
  letter-spacing: 1px;
  text-align: center;
  padding: 6px 0;
  border-radius: 10px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

/* ヘッダーエリア */
.schedule-header {
  display: flex;
  align-items: center;
  gap: 10px;             /* アイコンと文字の間隔 */
  margin-bottom: 12px;
  width: 100%;
}

/* アイコンサイズ調整 */
.schedule-icon {
  width: 50px;           /* 5並び用に少しコンパクトに調整 */
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4dd0e1 0%, #007bff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.schedule-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトル */
.schedule-title {
  margin: 0;
  font-size: 2.2rem;       /* 5並び用に文字サイズ調整 */
  font-weight: 700;
  color: #2b7bc6;
  line-height: 1.3;
  white-space: nowrap;   /* タイトルの意図しない改行を防ぐ */
}

/* 説明テキスト */
.schedule-desc {
     margin: 0;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.5;
    color: #333d48;
    font-weight: 500;
    padding: 1rem;
}


/* --- レスポンシブ対応（画面幅に応じた折り返し） --- */

/* タブレット（1024px以下）：3列・2列などで折り返し */
@media (max-width: 1024px) {
  .schedule-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}


.sub_txt{
    margin-bottom:30px;
    font-size:2.2rem;
}

.workstyle-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Noto Sans JP", sans-serif;
  box-sizing: border-box;
}

.text-blue {
  color: #207be5;
}

.text-black {
  color: #000000!important;
  font-size: 5rem!important;
}

/* カード共通 */
.ws-card {
  background-color: #ffffff;
  border-radius: 28px;
  border: 1px solid #e2f0fc;
  box-shadow: 0 10px 30px rgba(135, 190, 240, 0.25);
  padding: 32px;
  margin-bottom: 30px;
  box-sizing: border-box;
}

/* 2列グリッド */
.ws-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 30px;
}

/* タイトル・ヘッドライン */
.ws-card__top {
  text-align: center;
  margin-bottom: 24px;
}

.ws-card__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.ws-card__title {
  font-size: 28px;
  font-weight: 800;
  color: #2c3e50;
  margin: 0 0 12px 0;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.ws-card__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #3b82d6;
  border-radius: 2px;
}

.ws-card__lead {
  font-size: clamp(16px, 15.6px + 0.125vw, 18px);
  font-weight: 700;
  color: #333d48;
  margin: 0;
}

/* ダークブルーバッジ */
.ws-badge {
  background-color: #033261;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  padding: 8px 24px;
  border-radius: 20px;
  display: inline-block;
  text-align: center;
  margin-bottom: 16px;
}

/* ==========================================
   カード 1（夜勤・横長）専用スタイル
========================================== */
.ws-card--wide {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ws-card--wide .ws-card__left {
  flex: 1.2;
}

.ws-card--wide .ws-card__title {
  text-align: left;
}

.ws-card--wide .ws-card__note {
  font-size: 12px;
  color: #666;
  margin-top: 12px;
}

.ws-card--wide .ws-card__center {
  flex: 1;
  border: 2px dashed #8ec5fc;
  border-radius: 16px;
  padding: 24px 20px 20px;
  position: relative;
  background-color: #fcfefe;
}

.ws-card--wide .ws-card__center .ws-badge {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}

/* チェックリスト */
.ws-checklist {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
}

.ws-checklist li {
  font-size: 15px;
  font-weight: 700;
  color: #033261;
  margin-bottom: 12px;
  padding-left: 30px;
  position: relative;
}

.ws-checklist li:last-child {
  margin-bottom: 0;
}

.ws-checklist li::before {
  content: "☑";
  position: absolute;
  left: 0;
  top: -1px;
  color: #207be5;
  font-size: 20px;
}

.ws-card--wide .ws-card__right {
  width: 220px;
  flex-shrink: 0;
}

.ws-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* ==========================================
   カード 2（フルタイム）専用スタイル
========================================== */
.ws-card__body {
  display: flex;
  gap: 5px;
}

.ws-detail {
  flex: 1;
}

.ws-schedule {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.ws-schedule li {
  display: flex;
  padding: 1px 0;
  border-bottom: 1px solid #d0e4f7;
  font-size: 16px;
}

.ws-schedule .time {
  width: 70px;
  font-weight: 700;
  color: #207be5;
}

.ws-schedule .label {
  font-weight: 700;
  color: #333d48;
}

.ws-photo-wrapper {
  flex: 1;
}

/* 月収表記ボックス */
.ws-income-box {
  background-color: #e3f2fd;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}

.ws-income-box__badge {
  background-color: #ffffff;
  color: #2c3e50;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 8px;
}

.ws-income-box__price {
  font-size: 28px;
  font-weight: 800;
  color: #033261;
  line-height: 1;
}

.ws-income-box__price span {
  font-size: 16px;
}

.ws-income-box__sub {
  font-size: 12px;
  color: #333d48;
  margin-top: 6px;
  line-height: 1.4;
  font-weight: 500;
}

/* ==========================================
   カード 3（Wワーク）専用スタイル
========================================== */
.ws-card__body--column {
  flex-direction: column;
  align-items: center;
}

.ws-sublead {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin: -8px 0 16px 0;
}

/* 週間テーブル */
.ws-calendar {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #207be5;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  text-align: center;
}

.ws-calendar th {
  background-color: #207be5;
  color: #ffffff;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 700;
}

.ws-calendar td {
  padding: 12px 2px;
  font-size: 12px;
  border-right: 1px solid #d0e4f7;
  background-color: #f8fbfe;
  color: #555;
  vertical-align: middle;
}

.ws-calendar td:last-child {
  border-right: none;
}

.ws-calendar td.active {
  background-color: #eaf4ff;
  color: #033261;
  font-weight: 700;
}

.ws-calendar td.active span {
  color: #207be5;
  font-size: 11px;
}

/* 収入プラス表示領域 */
.ws-income-flex {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.ws-income-flex .ws-income-box {
  flex: 1.3;
}

.ws-plus-mark {
  font-size: 28px;
  font-weight: 700;
  color: #033261;
}

.ws-plus-box {
  flex: 1;
  border: 2px dashed #207be5;
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  background-color: #ffffff;
}

.ws-plus-box__title {
  font-size: 18px;
  font-weight: 800;
  color: #033261;
  border-bottom: 2px solid #207be5;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.ws-plus-box__text {
  font-size: 13px;
  font-weight: 700;
  color: #207be5;
}

/* ==========================================
   レスポンシブ対応 (タブレット・スマホ)
========================================== */
@media (max-width: 900px) {
  .ws-card-grid {
    grid-template-columns: 1fr;
  }

  .ws-card--wide {
    flex-direction: column;
  }

  .ws-card--wide .ws-card__right {
    width: 100%;
    height: 200px;
  }
}



/* ==========================================
   全体レイアウト（PC：横3列）
========================================== */
.senior-style-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 20px 20px;
  font-family: "Noto Sans JP", sans-serif;
  box-sizing: border-box;
}

.senior-style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* カード基調 */
.senior-card {
  background-color: #ffffff;
  border-radius: 28px;
  border: 1px solid #e2f0fc;
  box-shadow: 0 10px 30px rgba(135, 190, 240, 0.22);
  padding: 0 20px 28px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 上部ヘッダー＆飛び出しバッジ */
.senior-card__header {
  width: 100%;
  margin-bottom: 12px;
  position: relative;
  /* タグを上に半分はみ出させるためのネガティブマージン */
  margin-top: -24px; 
}

.senior-card__badge-top {
  display: inline-block;
  background: #207be5;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  padding: 8px 32px;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(32, 123, 229, 0.3);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

/* タグがないカードがある場合でも高さを揃えるためのフォールバック調整 */
.senior-card__badge-top:empty {
  visibility: hidden;
  height: 40px;
}

/* タイトル & 青ライン */
.senior-card__title {
  font-size: 22px;
  font-weight: 800;
  color: #1a2b3c;
  margin: 0;
  line-height: 1.3;
  position: relative;
  padding-bottom: 12px;
  width: 100%;
  min-height: 58px; /* 1行・2行テキストの高さ揺れ吸収 */
  
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.senior-card__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 3px;
  background-color: #3b82d6;
  border-radius: 2px;
}

/* リード文 */
.senior-card__lead {
  font-size: 13px;
  font-weight: 700;
  color: #333d48;
  line-height: 1.5;
  margin: 16px 0 20px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 勤務例バッジ（ダークブルー） */
.senior-badge {
  background-color: #033261;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 20px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  white-space: nowrap;
}

/* カレンダーテーブル */
.senior-calendar {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #207be5;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  text-align: center;
}

.senior-calendar th {
  background-color: #207be5;
  color: #ffffff;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 700;
  width: 14.28%;
}

.senior-calendar td {
  padding: 10px 0;
  font-size: 12px;
  font-weight: 500;
  color: #555555;
  border-right: 1px solid #d0e4f7;
  background-color: #ffffff;
}

.senior-calendar td:last-child {
  border-right: none;
}

.senior-calendar td.active {
  background-color: #eaf4ff;
  color: #207be5;
  font-weight: 700;
}

/* 月収目安エリア */
.senior-income-box {
  background-color: #e3f2fd;
  border-radius: 16px;
  padding: 14px 8px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.senior-income-box__badge {
  background-color: #ffffff;
  color: #2c3e50;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 8px;
}

.senior-income-box__price {
  font-size: 26px;
  font-weight: 800;
  color: #033261;
  line-height: 1.2;
}

.senior-income-box__price span {
  font-size: 15px;
}

.senior-income-box__calc {
  display: inline-block;
  font-size: 11px !important;
  font-weight: 500;
  color: #333d48;
  margin-left: 2px;
}

/* 破線チェックリスト */
.senior-checklist-box {
  border: 2px dashed #207be5;
  border-radius: 16px;
  padding: 16px 12px;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  margin-top: auto; /* 全カードで下部位置を均一化 */
      min-height: 130px;

}

.senior-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.senior-checklist li {
  font-size: 1.4rem;
  font-weight: 700;
  color: #033261;
  margin-bottom: 8px;
  padding-left: 24px;
  position: relative;
  line-height: 1.4;
}

.senior-checklist li:last-child {
  margin-bottom: 0;
}

.senior-checklist li::before {
  content: "☑";
  position: absolute;
  left: 0;
  top: -1px;
  color: #207be5;
  font-size: 16px;
}

/* ==========================================
   レスポンシブ対応
========================================== */
@media (max-width: 1024px) {
  .senior-style-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}



.section-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 5rem;
  font-weight: 800;
  color: #334155;
  text-align: center;
  position: relative;
  display: inline-block; /* 文字幅に合わせて左右の線の位置を固定 */
  padding: 0 36px;       /* 左右の斜め線が入るスペースを確保 */
  margin: 0 auto;
  line-height: 1.2;
}

/* 包含親要素（中央寄せ用） */
.section-title-wrapper {
  text-align: center;
}

/* 強調文字（青色） */
.section-title .text-blue {
  color: #207be5;
}

/* 左右の斜め線 */
.section-title::before,
.section-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;          /* 線の長さ */
  height: 3px;          /* 線の太さ */
  background-color: #207be5;
  border-radius: 2px;
}

/* 左側の線（＼） */
.section-title::before {
  left: 4px;
  transform: translateY(-50%) rotate(45deg);
}

/* 右側の線（／） */
.section-title::after {
  right: 4px;
  transform: translateY(-50%) rotate(-45deg);
}

/* スマホ対応 */


    /* ==========================================================================
   添付画像 完全一致再現用CSSスタイルシート
   ========================================================================== */

/* --- 0. 共通見出し上部のペイント装飾の再現 --- */
.section-title-container {
    position: relative;
    margin: auto;
    margin-bottom: 6rem;
    padding-top: 3rem;
    max-width: 1280px;
    
}

/* タイトルの左上に浮かぶ斜めペイントあしらい */
.stc::before {
    
    content: "";
    position: absolute;
    /* top: 0; */
    left: -6%;
    transform: translateX(0) rotate(0deg);
    width: 230px;
    height: 100px;
    background-image: url(../img/recruit/about/leaf.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0rem;
    filter: blur(2px);
    z-index: 1;
    top: -20px;

}



.flex-title h2::before {
    
    content: "";
    position: absolute;
    /* top: 0; */
    left: -80%;
    transform: translateX(0) rotate(0deg);
    width: 230px;
    height: 100px;
    background-image: url(../img/recruit/about/leaf.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0rem;
    filter: blur(2px);
    z-index: 1;
    top: -20px;

}



.section-main-title {
    font-size: 3.4rem;
    font-weight: 800;
    color: var(--darkblue);
    position: relative;
    z-index: 2;
    margin-bottom: 0.5rem;
}

.section-sub-title {
    font-size: 1.4rem;
    color: var(--blue);
    letter-spacing: 0.15rem;
    display: block;
}


/* --- 1. 地域を守る仕事（最上部導入） --- */
.intro-hero-section {
    background: linear-gradient(90deg, #1C74D8, #1794E2);
    padding: 8rem 0;
    color: var(--white);
    margin-bottom: 8rem;
}

.intro-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.intro-hero-img {
    width: 42%;
    position: relative;
}

.intro-hero-img img {
    width: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.intro-hero-text {
    width: 53%;
}

.intro-hero-text h2 {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 2.5rem;
}

.intro-sub {
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.intro-desc {
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.8;
    opacity: 0.95;
}


/* --- 2. 「他社との違い」重ね合わせ（オーバーラップ）完全再現 --- */
.overlap-cards-list {
    display: flex;
    flex-direction: column;
    gap: 15rem; /* カード同士の間隔 */
    margin-top: 5rem;
}

.overlap-card {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 45rem; /* 高さを確保して重ね合わせる */
}

/* 下層：左側の写真ブロック */
.overlap-card__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 90%; /* 横幅の58%を占める */
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.overlap-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 上層：右側の白い重ねテキストカード */
.overlap-card__info {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* 縦方向中央配置 */
    width: 45%; /* 横幅52%にして左の写真と約10%分重ねる */
    background: var(--white);
    border-radius: 16px;
    padding: 4.5rem;
    box-shadow: 0 1.2rem 3.5rem rgba(135, 190, 240, 0.35); /* 画像の柔らかい浮き出し青影 */
    border: 1px solid #E6F3FF;
    z-index: 2; /* 写真より上に重ねる */
    box-sizing: border-box;
    margin-top: 5.5rem;
    min-height: 320px; /* 高さを確保して重ね合わせる */
}

.overlap-card__title {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1.5px dashed #D1E7FF; /* タイトル下の薄い点線ライン */
    padding-bottom: 1.5rem;
}

.overlap-card__icon {
    width: 6.5rem;
    height: 3.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.overlap-card__title h3 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--darkblue);
}

.overlap-card__txt {
    font-size:clamp(1.4rem, 0.6329vw + 0.6962rem, 1.8rem);
    line-height: 1.8;
    color: #4A5568;
    font-weight: 500;
}


/* --- 3. 中間ギャラリー（3枚並び） --- */
.mid-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 10rem auto;
}

.mid-gallery__item {
    border-radius:0;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    box-shadow: 0 0.8rem 2rem rgba(135, 190, 240, 0.15);
}

.mid-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --- 4. 「仕事を知る」カード・半透明ひし形あしらい完全再現 --- */
.job-list-container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 5rem;
}

.job-flat-card {
    display: flex;
    background: #EAF5FF; /* カード全体の薄い水色背景 */
    border-radius: 20px;
    border: 1px solid #D4E9FC;
    box-shadow: 0 1rem 3rem rgba(135, 190, 240, 0.25);
    overflow: hidden;
    align-items: stretch;
}

.pb10{
    padding-top:5rem;
}

/* 左側写真ボックス */
.job-flat-card__img-box {
    width: 35%;
    position: relative;
    overflow: hidden;
    min-height: 30rem;
}

.job-flat-card__img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 写真の上の「透き通った青いひし形シェイプ」 */
.deco-rhombus {
    position: absolute;
    background: linear-gradient(135deg, rgba(196, 246, 255, 0.65), rgba(0, 157, 255, 0.5));
    transform: rotate(-30deg) skewX(-15deg);
    z-index: 3;
    pointer-events: none;
    border-radius: 12px;
}

/* ひし形1（大きめ、右下に配置） */
.deco-rhombus.shape1 {
    width: 15rem;
    height: 4.5rem;
    bottom: 3rem;
    right: -2rem;
}

/* ひし形2（小さめ、shape1の上に配置） */
.deco-rhombus.shape2 {
    width: 11rem;
    height: 3.2rem;
    bottom: 8rem;
    right: 4rem;
    opacity: 0.8;
}

/* 右側テキストボックス */
.job-flat-card__content {
    width: 65%;
    padding: 4.5rem 5.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.job-flat-card__title {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.job-flat-card__icon {
    width: 3.2rem;
    height: 3.2rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.job-flat-card__title h3 {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--darkblue);
}

.job-flat-card__lead {
    font-size: 1.85rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.job-flat-card__desc {
    font-size: 1.55rem;
    line-height: 1.75;
    color: #4A5568;
    font-weight: 500;
}



/* ==========================================================================
   交通誘導警備業務カード 完全再現スタイルシート
   ========================================================================== */

/* カードの配置コンテナ */
.job-card-container {
    width: 100%;
    max-width: 1400px; /* 画像のPC表示想定幅 */
    margin: 4rem auto;
    padding: 0 2rem;
    box-sizing: border-box;
}

/* メインの角丸水色カード */
.job-detail-card {
    display: flex;
    background-color: #e5f2ff; /* 非常に淡くクリーンな水色の背景色 */
    border: 2px solid #b3d7ff; /* 少し濃い水色の枠線 */
    border-radius: 20px; /* カード外側の丸み */
    padding: 2.4rem; /* 写真との隙間を作る内側余白 */
    box-shadow: 0 10px 30px rgba(135, 190, 240, 0.2); /* 柔らかい青い影 */
    align-items: stretch;
    box-sizing: border-box;
    gap: 3.5rem; /* 写真とテキストエリアの間隔 */
}

/* 左側：写真ブロック */
.job-detail-card__img {
    width: 48%; /* 横幅の比率を画像に一致 */
    position: relative;
    border-radius: 16px; /* 写真の角を丸める */
    overflow: hidden;
    flex-shrink: 0;
}

.job-detail-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 右側：コンテンツブロック */
.job-detail-card__body {
    width: 52%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 7.5rem;
}

/* ヘッダーエリア（アイコン＋タイトル） */
.job-header {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央寄せ */
    gap: 1.2rem;
    margin-bottom: 2rem;
}

/* 青いペン（バトン）アイコンの再現 */
.job-header__icon {
    width: 3.6rem;
    height: 3.6rem;
    display: inline-block;
}

.job-header__title {
    font-size: 3.2rem;
    font-weight: 800;
    color: #1b2631; /* 深い濃紺 */
    letter-spacing: 0.1rem;
    margin: 0;
}

.job-header__title span {
    color: #1b2631;
}

/* 中央：白い独立した角丸リードカード */
.job-lead-box {
    background-color: #ffffff; /* 完全な白 */
    border-radius: 20px; /* 白い部分の丸み */
    padding: 2.2rem 3rem;
    text-align: center;
    box-shadow: 0 6px 15px rgba(135, 190, 240, 0.15); /* 白カード自体の軽い影 */
    margin-bottom: 2.5rem;
}

.job-lead-box__text {
    font-size: 2.5rem; /* 大きく目立つサイズ */
    font-weight: 800;
    color: #1794e2; /* 鮮やかなブルー */
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin: 0;
}

/* 下部：説明テキスト */
.job-description {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.job-description__p {
    font-size:clamp(1rem, 0.6329vw + 0.6962rem, 1.8rem);
    line-height: 1.65;
    color: #2c3e50; /* 暗めのグレー */
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.02em;
    text-align: justify; /* 両端揃えで美しく整列 */
}


/* ==========================================================================
   スマートフォン用レイアウト調整（750px以下）
   ========================================================================== */
@media only screen and (max-width: 750px) {
    .job-detail-card {
        flex-direction: column; /* 縦並びにする */
        padding: 1.6rem;
        gap: 2rem;
    }

    .job-detail-card__img {
        width: 100%;
        height: 24rem; /* スマホ時の写真の高さ */
    }

    .job-detail-card__body {
        width: 100%;
        padding-right: 0;
    }

    .job-header__title {
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    }

    .job-lead-box {
        padding: 1.8rem 1.5rem;
    }

    .job-lead-box__text {
        font-size: 1.9rem;
    }

    .job-description__p {
        font-size: 1.35rem;
        line-height: 1.6;
    }

    .overlap-card__icon {
    width: 4.5rem;
    height: 3.5rem;

}


}





/* ==========================================================================
   スマートフォン表示用最適化（ブレイクポイント: 750px以下）
   ========================================================================== */
@media only screen and (max-width : 750px) {
    /* 1. 地域を守る仕事 スマホ表示 */
    .intro-hero-inner {
        flex-direction: column;
    }
    .intro-hero-img, .intro-hero-text {
        width: 100%;
    }
    .intro-hero-img {
        margin-bottom: 3rem;
    }
    .intro-hero-text h2 {
        font-size: 2.8rem;
    }

    /* 2. 他社との違い スマホ表示 (重ね合わせを安全なブロック並びに解除) */
    .overlap-cards-list {
        gap: 4rem;
    }
    .overlap-card {
        min-height: auto;
        display: flex;
        flex-direction: column;
    }
    .overlap-card__img {
        position: relative;
        width: 100%;
        height: 22rem;
        border-radius: 16px 16px 0 0;
    }
    .overlap-card__info {
        position: relative;
        transform: none;
        right: auto;
        top: auto;
        width: 100%;
        padding: 3rem 2.4rem;
        box-shadow: 0 0.8rem 2.4rem rgba(135, 190, 240, 0.2);
        margin-top: 0;
        border-radius: 0 0 16px 16px;
    }
    .overlap-card__title h3 {
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    }

    /* 3. 中間ギャラリー スマホ表示 */
    .mid-gallery {
        grid-template-columns: 1fr;
        gap: 0;
        margin: 30px auto 0;
        display: flex;

    }

    /* 4. 仕事を知る スマホ表示 */
    .job-flat-card {
        flex-direction: column;
    }
    .job-flat-card__img-box {
        width: 100%;
        height: 22rem;
        min-height: auto;
    }
    .job-flat-card__content {
        width: 100%;
        padding: 3rem 2.4rem;
    }
    .job-flat-card__title h3 {
        font-size: 2rem;
    }
    .job-flat-card__lead {
        font-size: 1.65rem;
    }

    .job-card-container {
    width: 100%;
    max-width: 1400px;
    margin: 1rem auto; 
    padding: 0 2rem;
    box-sizing: border-box;
}

.job-list-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}


}

/* ==========================================================================
   イントロダクション（ヒーローセクション）完全再現スタイル
   ========================================================================== */

.hero-intro-section {
    width: 100%;
    /* 右側の鮮やかなブルー（#1976D2）から、左の実写画像に溶け込むグラデーション */
    background: linear-gradient(90deg, #1778d2 0%, #1e88e5 100%);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 10rem;

}

/* PC用2カラムレイアウト（横並び） */
.hero-intro-container {
    display: flex;
    width: 100%;
    
    margin: 0 auto;
    align-items: stretch;
    position: relative;
}

/* 左側：メディア領域 */
.hero-intro__media {
    width: 45%; /* 横幅の約45%を写真領域に */
    position: relative;
    flex-shrink: 0;
}

.hero-intro__media .media-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* 写真の右側部分が背景のブルーに自然に溶け込むフェード効果 */
.hero-intro__media .media-wrap::after {
    content: "";
    position: absolute;
    /* top: 0; */
    left: -80%;
    transform: translateX(0) rotate(0deg);
    width: 230px;
    height: 100px;
    background-image: url(../img/recruit/about/leaf.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0rem;
    filter: blur(2px);
    z-index: 1;
    top: -20px;

    pointer-events: none;
}

.hero-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 写真の上に浮かぶ「透き通ったひし形リボン」の再現 */
.media-deco {
    position: absolute;
    /* top: 0; */
    
    transform: translateX(0) rotate(0deg);
    width: 230px;
    height: 100px;
    background-image: url(../img/recruit/about/leaf.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0rem;
    filter: blur(1px);
    z-index: 1;
    

}

/* 左下のひし形あしらい */
.media-deco.shape-bottom-left {
    width: 28rem;
    height: 13.5rem;
    bottom: 8%;
    left: -4rem;
}

/* 右上のひし形あしらい */
.media-deco.shape-top-right {
    width: 29rem;
    height: 13.5rem;
    top: 15%;
    right: 5%;
}


/* 右側：テキストコンテンツ領域 */
.hero-intro__content {
    width: 55%; /* 残りの55%をコンテンツ領域に */
    padding: 8rem 8rem 8rem 4rem; /* ゆったりとした内側余白 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    color: #ffffff; /* 文字はすべて白 */
    z-index: 4;
}

/* メインタイトル */
.hero-title {
    font-size: 4.2rem;
    font-weight: 800; /* 極太 */
    line-height: 1.35;
    margin: 0 0 4rem 0;
    letter-spacing: 0.12em; /* ゆったりとした文字間隔 */
}

/* 本文テキストブロック */
.hero-text-block {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 各段落の間隔 */
    max-width: 72rem; /* 本文の最大幅を制限して読みやすく */
}

.hero-desc {
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.85; /* 行間を広めに確保 */
    letter-spacing: 0.08em;
    font-weight: 500;
    margin: 0;
}

.m-auto{
    margin: 0 auto;
}


.flex-title{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: center;

}

.lg-gallery {
    
    margin: 60px 0 0 0;
}


.flex_guideline-workstyle {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 100%;
    gap: 2rem;
}

.flex_guideline-workstyle .workstyle-card {
    aspect-ratio: 1 / 1;
    width: 100%;
    background-color: #ffffff;
    border: 2px solid #d9eeff;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 8px 20px -4px rgba(135, 190, 240, 0.35);
    box-sizing: border-box;
    background-color: #dcf1ff;
    max-width: 23%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}



/* ==========================================================================
   スマートフォン表示用最適化（ブレイクポイント: 750px以下）
   ========================================================================== */
@media only screen and (max-width: 750px) {
    .hero-intro-container {
        flex-direction: column; /* 縦並びにする */
    }

    .hero-intro__media {
        width: 100%;
        height: 35rem; /* スマホ時の写真の高さ */
    }

    /* スマホ時は上から下に溶け込むフェードに変更 */
    .hero-intro__media .media-wrap::after {
        width: 100%;
        height: 30%;
        top: auto;
        bottom: 0;
        background: linear-gradient(180deg, rgba(23, 120, 210, 0) 0%, #1778d2 100%);
    }

    /* ひし形リボンのスマホ向けサイズ微調整 */
    .media-deco.shape-bottom-left {
        width: 18rem;
        height: 3.5rem;
        bottom: 5%;
        left: -2rem;
    }

    .media-deco.shape-top-right {
        width: 12rem;
        height: 2.5rem;
        top: 10%;
        right: 2%;
    }

    .hero-intro__content {
        width: 100%;
        padding: 4rem 2.4rem 6rem 2.4rem; /* 左右の余白を縮小 */
    }

    .hero-title {
        font-size: 2.8rem;
        margin-bottom: 3rem;
    }

    .hero-text-block {
        gap: 2.4rem;
    }

    .hero-desc {
        font-size: 1.45rem;
        line-height: 1.75;
    }

    .flex_guideline-workstyle .workstyle-card {
   
    max-width: 48%;
    
}
}


/* ==========================================================================
   研修制度セクション 完全再現追加スタイル
   ========================================================================== */

/* 全体配置コンテナ */
.training-section-container {
    width: 100%;
    max-width: 1200px;
    margin: 10rem auto;
    padding: 0 2rem;
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
}

/* --- 1. グリッド配置 (3列×2行) --- */
.training-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10rem 3rem; /* 縦方向にバッジのはみ出し分広めのマージン */
    margin-bottom: 8rem;
}

/* カード共通スタイル */
.training-card {
    background-color: var(--white);
    border-radius: 20px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: visible; /* バッジをはみ出させるため */
}

/* 不安解消カード専用スタイル */
.card-unrest {
    padding: 2.4rem;
    justify-content: flex-start;
}

.unrest-box {
    background-color: #033261; /* 深い紺色 */
    border-radius: 12px;
    padding: 2rem;
    color: var(--white);
}

.unrest-box__title {
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    font-weight: 800;
    text-align: center;
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
}

.unrest-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.unrest-list li {
    font-size: 1.4rem;
    font-weight: 600;
    padding-left: 2.8rem;
    position: relative;
}

/* チェックボックス風アイコンの再現 */
.unrest-list li::before {
    content: "☑";
    position: absolute;
    left: 0;
    top: -2px;
    color: var(--blue);
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
}

/* 大丈夫です！エリア */
.unrest-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    padding: 0 0.5rem;
    flex-wrap: nowrap;
}

.unrest-footer__left {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1b2631;
    width: 100%;
}

.unrest-footer__left .highlight-text {
    font-size: 2.6rem;
    color: var(--darkblue);
    display: inline-block;
    margin-right: 0.2rem;
    border-bottom: 3px solid var(--orange);
}

.unrest-footer__right {
    font-size: 1.25rem;
    line-height: 1.4;
    color: #1b2631;
    font-weight: 600;
    padding-right: 2%;
    width: 98%;
}

.unrest-footer__right strong {
    color: var(--darkblue);
    font-weight: 800;
}

/* --- STEP 01〜05 カード専用スタイル --- */
.card-step {
    padding-top: 3.5rem; /* 上部バッジ回避用 */
}

/* 飛び出すステップ番号バッジ */
.step-badge {
    position: absolute;
    top: -3.8rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #033261;
    font-size: 2.6rem;
    font-weight: 800;
    width: 8.4rem;
    height: 8.4rem;
    border-radius: 25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
}

.step-body {
    padding: 0 2.4rem 2rem 2.4rem;
    text-align: center;
    flex-grow: 1;
}

.step-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

/* アイコン */
.step-icon {
    width: 3.2rem;
    height: 3.2rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.icon-basic { background-image: url(../img/recruit/training/icon_basic.svg); }
.icon-action { background-image: url(../img/recruit/training/icon_action.svg); }
.icon-law { background-image: url(../img/recruit/training/icon_law.svg); }
.icon-field { background-image: url(../img/recruit/training/icon_field.svg); }
.icon-aid { background-image: url(../img/recruit/training/icon_aid.svg); }

.step-title {
    font-size: 3cqb;
    font-weight: 800;
    color: #1b2631;
    margin: 0;
}

.step-desc {
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    line-height: 1.5;
    color: #4a5568;
    font-weight: 600;
    margin: 0;
}

/* 下部角丸写真ブロック */
.step-img {
    width: 100%;
    height: 18rem;
    overflow: hidden;
    border-bottom-left-radius: 18px; /* カード外枠に合わせる */
    border-bottom-right-radius: 18px;
}

.step-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* --- 2. 下段：詳細研修カード (新任・社内研修) --- */
.detail-training-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
}

.detail-card {
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(135, 190, 240, 0.22);
    border: 1px solid #E2F0FC;
    overflow: hidden;
    box-sizing: border-box;
}

/* 各ヘッダーの配色 */
.detail-card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 1.6rem 0;
    color: var(--white);
}

.header-blue-light {
    background-color: #D6EDFF; /* 新任：淡い水色 */
    color: var(--darkblue) !important;
}

.header-blue-dark {
    background-color: #033261; /* 社内：濃い紺色 */
    color: var(--white) !important;
}

.detail-card__header h4 {
    font-size: 2.6rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.05em;
}

/* アイコン */
.detail-icon {
    width: 2.8rem;
    height: 2.8rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.icon-new-training { background-image: url(../img/recruit/training/icon_new.svg); }
.icon-company-training { background-image: url(../img/recruit/training/icon_company.svg); }

/* ボディテキストエリア */
.detail-card__body {
    padding: 4rem;
}

.detail-card__body h5 {
    font-size: 2.4rem;
    line-height: 1.4;
    font-weight: 800;
    color: #1b2631;
    margin: 0 0 2rem 0;
}

.detail-card__body h5 .text-accent-blue {
    color: var(--blue);
    font-size: 2.6rem;
}

.detail-desc {
    font-size: 1.45rem;
    line-height: 1.65;
    color: #4a5568;
    font-weight: 500;
    margin: 0;
}

.flow_pickup{
    margin:20px auto;
    border-radius: 10px;
    background-color: #2781D5;
    text-align: center;
    padding: 10px 20px;
    color: #fff;
    font-size: 2.2rem;

}

.br-sp{
    display: none;
}

/* ==========================================================================
   スマートフォン表示最適化（750px以下）
   ========================================================================== */
@media only screen and (max-width: 750px) {
    /* グリッドを1カラムに変更 */
    .training-grid {
        grid-template-columns: 1fr;
        gap: 5rem 0;
    }

    .detail-training-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .detail-card__body {
        padding: 3rem 2rem;
    }

    .detail-card__body h5 {
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    }

    .detail-card__body h5 .text-accent-blue {
        font-size: 2rem;
    }

    .training-section-container {

    margin: 60px auto;
    }

    .br-sp{
    display: block;
    }

    .unrest-footer {
    flex-wrap: wrap;



}

}

/* ==========================================================================
   完全アスペクト比固定・極限スケーリング対応バナーCSS
   ========================================================================== */

/* 1. 全体コンテナ */
.faq-scalable-container {
    width: 100%;
    box-sizing: border-box;
    /* コンテナクエリを有効化：この幅を基準にして内包要素をすべて比率縮小する */
    container-type: inline-size; 
    
    /* 1900pxまでは最大幅1000pxを維持、1901px以上で横幅75%リキッド */
    max-width: 1000px;
    margin: 5rem auto;
    padding: 0 2rem;
}

/* 1900pxを超えた場合のリキッド化指定 */
@media screen and (min-width: 1901px) {
    .faq-scalable-container {
        max-width: 75vw;
        width: 75vw;
        margin: 4vw auto;
        padding: 0;
    }
}

/* 2. バナー本体（アスペクト比を 1000 : 138 に完全固定） */
.faq-scalable-banner {
    display: block;
    width: 100%;
    aspect-ratio: 1000 / 138; /* 画像と全く同じ横縦比を固定 */
    background: #1794E2;
    border: 0.2cqw solid #58B1E9; /* 線の太さも比率で伸縮 */
    border-radius: 9999px; /* 両端は常に完全な半円 */
    box-shadow: 0 0.8cqw 2.4cqw rgba(23, 148, 226, 0.25);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-sizing: border-box;
    overflow: hidden;
}

/* 3. バナー内部（折り返しを絶対に拒否し、横一列を死守する） */
.faq-scalable-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 2.2cqw 4.5cqw; /* 余白もコンテナ幅に連動 */
    box-sizing: border-box;
    white-space: nowrap; /* どれだけ小さくなっても改行させない */
    justify-content: flex-end;
}

/* 左側・中央テキスト領域 */
.faq-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 4cqw; /* 右側のアクションエリアとの間隔を確保 */

}

/* 上部サブタイトル */
.faq-sub-text {
    font-size: 1.6cqw; /* 横幅基準でフォントサイズを縮小 */
    font-weight: 700;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 1cqw;
    margin:auto;
    letter-spacing: 0.05em;
}

/* 斜め線のサイズも伸縮 */
.faq-sub-text::before { content: "＼"; font-size: 1.4cqw; font-weight: 300; }
.faq-sub-text::after { content: "／"; font-size: 1.4cqw; font-weight: 300; }

/* メインタイトル */
.faq-main-text {
    font-size: 3.2cqw; /* 横幅基準でフォントサイズを縮小 */
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

/* 右側アクションエリア */
.faq-btn-group {
    display: flex;
    align-items: center;
    gap: 2cqw;
    flex-shrink: 0; /* 絶対に潰れないように保護 */
}

/* 「よくある質問はこちら」 */
.faq-btn-txt {
    font-size: 1.4cqw;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    text-align: right;
    letter-spacing: 0.05em;
    display: inline-block;
}

/* 白丸アローアイコン */
.faq-circle-arrow {
    width: 6cqw; /* 丸の直径も完全に連動 */
    height: 6cqw;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.4cqw 1cqw rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease;
    flex-shrink: 0;
}

.faq-circle-arrow::after {
    content: "";
    width: 2.4cqw;
    height: 2.4cqw;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231794E2'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform 0.4s ease;
}

.pc_none{
    display: block;
}

/* ホバーエフェクト（PCのみ） */
@media screen and (min-width: 960px) {
    .faq-scalable-banner:hover {
        background: #1582c7;
        border-color: #ffffff;
        transform: translateY(-0.2cqw);
        box-shadow: 0 1.2cqw 2.8cqw rgba(23, 148, 226, 0.35);
    }
    
    .faq-scalable-banner:hover .faq-circle-arrow::after {
        transform: translateX(0.3cqw);
    }


}

@media only screen and (max-width: 750px) {
    .faq-scalable-inner {
        justify-content: center;
}
    
    .faq-text-group{
        display: none;
    }

    .faq-btn-txt {
    font-size: 4.4cqw;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.05em;
    display: inline-block;
}

.pc_none{
    display: none;
}

.workstyle-voice {
    margin-top: 3rem;
    margin-bottom: 3rem;
}


}

/* ==========================================================================
   通勤エリア配慮カード 完全再現・比率スケーリングCSS
   ========================================================================== */

/* 1. 配置用コンテナ */
.area-banner-container {
    width: 100%;
    box-sizing: border-box;
    container-type: inline-size; /* 横幅を基準にした相対スケーリングを有効化 */
    
    /* 1900pxまでは最大幅1000pxを維持、1901px以上で横幅75%リキッド */
    max-width: 1200px;
    margin: 5rem auto;
    padding: 0 2rem;
}

/* 1900pxを超えた場合のリキッド化指定 */
@media screen and (min-width: 1901px) {
    .area-banner-container {
        max-width: 75vw;
        width: 75vw;
        margin: 4vw auto;
        padding: 0;
    }
}

/* 2. メインカード（アスペクト比 1000 / 448 に完全固定） */
.area-scalable-card {
    display: flex;
    width: 100%;
    aspect-ratio: 1000 / 448; /* 画像と同一の比率 */
    background-color: #ffffff;
    border-radius: 2.8cqw; /* コンテナ幅比例の角丸 */
    border: 1px solid #e2f0fc;
    box-shadow: 0 1cqw 3cqw rgba(135, 190, 240, 0.22);
    overflow: hidden;
    align-items: stretch;
    box-sizing: border-box;
}

/* 左側：写真エリア */
.area-scalable-card__img {
    width: 50%; /* ちょうど半分の比率 */
    height: 100%;
    flex-shrink: 0;
}

.area-scalable-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 右側：コンテンツエリア */
.area-scalable-card__body {
    width: 50%;
    height: 100%;
    padding: 4.8cqw 4cqw 4.8cqw 4.5cqw; /* すべてコンテナ幅依存でパディングを縮小 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* サブテキスト（自宅近くが勤務地に。） */
.area-sub-title {
    font-size: 2.2cqw;
    font-weight: 800;
    color: #1b2631;
    margin: 0 0 0.5cqw 0;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* メインタイトル */
.area-main-title {
    font-size: 3.2cqw;
    font-weight: 800;
    color: #207be5; /* 鮮やかなブルー */
    margin: 0;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* タイトル下の青ライン */
.area-title-line {
    border: none;
    height: 0.3cqw;
    background-color: #58B1E9;
    margin: 1.8cqw 0;
    width: 100%;
}

/* 説明テキスト */
.area-description {
    font-size: 1.6cqw;
    line-height: 1.6;
    color: #2c3e50;
    font-weight: 600;
    margin: 0 0 2.2cqw 0;
    letter-spacing: 0.02em;
    white-space: normal; /* 折り返しは許容しつつフォントサイズを縮小 */
}

/* 下部：薄いブルーの特長カード */
.area-feature-box {
    background-color: #e5f2ff; /* 特長カードの薄いブルー */
    border-radius: 2cqw;
    padding: 2.2cqw 3cqw;
    display: flex;
    align-items: center;
    gap: 3cqw;
    box-sizing: border-box;
    flex-grow: 1;
}

/* マップアイコン（画像内の青い地図ピンアイコンをSVGコードで埋め込み） */
.area-feature-box__icon {
    width: 4cqw;
    height: 4cqw;
    flex-shrink: 0;
}

/* 特長リスト */
.area-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8cqw;
}

.area-feature-list li {
    font-size: 1.6cqw;
    font-weight: 700;
    color: #1b2631;
    position: relative;
    padding-left: 2.2cqw;
    letter-spacing: 0.03em;
    white-space: nowrap; /* どれだけ小さくなっても改行させない */
}

/* 青いドット丸リストマーカーの再現 */
.area-feature-list li::before {
    content: "";
    position: absolute;
    left: 0.2cqw;
    top: 50%;
    transform: translateY(-50%);
    width: 0.9cqw;
    height: 0.9cqw;
    background-color: #207be5;
    border-radius: 50%;
}

.area-feature-list li .text-blue {
    color: #207be5;
    font-weight: 800;
}
/* ==========================================================================
   2カラム・ジョブカード用 レスポンシブCSS（CSSのみ）
   ========================================================================== */

/* --------------------------------------------------------------------------
   [1] PC・タブレット共通基本スタイル（画面幅 751px 〜 1900px）
   -------------------------------------------------------------------------- */
.job-split-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1000px;
  margin: 5rem auto;
  gap: 4%; /* カード間の余白 */
  padding: 0 2rem;
  box-sizing: border-box;
}

.job-split-card {
  position: relative;
  width: 48%; /* 横に2並び */
  aspect-ratio: 480 / 440; /* 縦横比を固定 */
  background: #207be5;
  border-radius: 2cqw;
  box-shadow: 0 1cqw 3cqw rgba(23, 123, 229, 0.25);
  container-type: inline-size; /* cqw（コンテナ幅基準）を有効化 */
  overflow: visible; /* 上部の丸アイコンが飛び出すため visible に */
  display: flex;
  flex-direction: column;
}

.job-split-card__img {
  height: 45%;
  border-radius: 2cqw 2cqw 0 0;
  overflow: hidden;
}

.job-split-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-split-card__body {
  position: relative;
  height: 70%;
  padding: 6.5cqw 4.5cqw 4cqw;
  
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
 
  box-sizing: border-box;
}

/* 中央上部に飛び出す白い円形アイコンバッジ */
.job-split-card__icon-badge {
  position: absolute;
  top: -7.5cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 15cqw;
  height: 15cqw;
  background: #207be5;
 
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2;
  box-sizing: border-box;
}

.badge-icon {
  width: 5.5cqw;
  height: 5.5cqw;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}



.job-split-card__title {
  font-size: 4.8cqw;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}

.job-split-card__line {
  border: none;
  height: 2px;
  background: #58B1E9;
  width: 25%;
  margin: 3.5cqw auto;
}

.job-split-card__desc {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   [2] 超大画面（1901px以上）: 横幅75%で相似縮小（比率完全維持）
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1901px) {
  .job-split-container {
    max-width: 75vw;
    width: 75vw;
    margin: 4vw auto;
    padding: 0;
    gap: 4%;
  }
}

/* --------------------------------------------------------------------------
   [3] スマートフォン対応（750px以下）: 縦並び（1カラム）切り替え
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 750px) {
  .job-split-container {
    flex-direction: column; /* 縦並びに変更 */
    gap: 6rem; /* 縦に並んだカード同士の間隔（バッジの飛び出し分を考慮して広めに確保） */
    padding: 0 4vw; /* スマホ左右余白 */
    margin: 4rem auto;
  }

  .job-split-card {
    width: 100%; /* 横幅いっぱいに広げる */
    aspect-ratio: auto; /* スマホは文字量に応じて高さを可変（または340/320等に固定も可能ですが、autoが最も安全です） */
    min-height: 38rem; /* 潰れ防止の最低高さ */
    border-radius: 4vw;
    box-shadow: 0 2vw 5vw rgba(23, 123, 229, 0.2);
  }

  .job-split-card__img {
    height: 16rem; /* スマホ時は画像部分を固定高にすると美しく収まります */
    border-radius: 4vw 4vw 0 0;
  }

  /* スマホでの各要素のサイズ調整（コンテナ幅基準 cqw がスマホ幅に対して大きくなりすぎるのを防ぐため、スマホのみ固定の rem / px / vw 等で制御します） */
  .job-split-card__body {
    height: auto;
    padding: 6.5rem 2rem 3.5rem; /* 上部アイコンバッジとの重なりを避けるため、上のpaddingを広めに設定 */
  }

  .job-split-card__icon-badge {
    width: 8rem;
    height: 8rem;
    top: -4rem; /* 半分上に飛び出させる */

  }

  .badge-icon {
    width: 4rem;
    height: 4rem;
  }

  .job-split-card__title {
    font-size: 2.2rem; /* スマホ用フォントサイズ最適化 */
    letter-spacing: 0.05em;
  }

  .job-split-card__line {
    height: 2px;
    width: 50px;
    margin: 1.8rem auto;
  }

  .job-split-card__desc {
    font-size: 1.4rem; /* スマホで読みやすいテキストサイズ */
    line-height: 1.65;
    text-align: left; /* スマホで長文になる場合は左寄せが見やすいため調整 */
    max-width: 90%;
  }

  .area-scalable-card {
    display: block;
    width: 100%;
    aspect-ratio: auto; /* スマホでは高さを自動調整 */
    
}

.area-scalable-card__img {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.area-scalable-card__body {
    width: 100%;
    height: 100%;
    padding: 4.8cqw 4cqw 4.8cqw 4.5cqw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* サブテキスト（自宅近くが勤務地に。） */
.area-sub-title {
    font-size: 16px;
    font-weight: 800;
    color: #1b2631;
    margin: 0 0 0.5cqw 0;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* メインタイトル */
.area-main-title {
    font-size: 22px;
    font-weight: 800;
    color: #207be5; /* 鮮やかなブルー */
    margin: 0;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

/* タイトル下の青ライン */
.area-title-line {
    border: none;
    height: 0.3cqw;
    background-color: #58B1E9;
    margin: 1.8cqw 0;
    width: 100%;
}

/* 説明テキスト */
.area-description {
    font-size: 16px;
    line-height: 1.6;
    color: #2c3e50;
    font-weight: 600;
    margin: 0 0 2.2cqw 0;
    letter-spacing: 0.02em;
    white-space: normal; /* 折り返しは許容しつつフォントサイズを縮小 */
}

.area-feature-list li {
    font-size: 14px;
    font-weight: 700;
    color: #1b2631;
    position: relative;
    padding-left: 2.2cqw;
    letter-spacing: 0.03em;
    white-space: nowrap; /* どれだけ小さくなっても改行させない */
}

.area-feature-box__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.area-banner-container {
    
    margin: 1rem auto;
    
}


}


.recruit-faq__list--item dt,.recruit-faq__list--item dd{
    display:flex;
    align-items:center;
    gap:3rem;
}

.recruit-faq__list--item dt img,.recruit-faq__list--item dd img{
    height: 70px;
    width:auto
}

.faq-title {
    width: 50%;
    max-width: 750px;
    min-width: 400px;
    margin: 0px auto 30px;
    border-style: solid;
    border-color: #58B1E9;
    border-width: 2px;
    border-radius: 50px;
    padding: 10px;
    font-size: 2.6rem;
    text-align: center;
}





.sec_bg-bl{
    margin:0;
    background-color:#e5f2ff;
    max-width:100%;
}

.m_center{
    margin:0 auto;
}

.title_st{
    font-size: 26px;
    text-align: center;

}

.s_ev{
        justify-content: space-evenly;

}

.spp_txt{
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    
    margin-top:15px;
}

.sns-sc{
    width: 48%;
    margin: 3% auto;
}


@media only screen and (max-width: 750px) {
    .recruit-faq__list--item dt,.recruit-faq__list--item dd{
    display:flex;
    align-items:center;
    gap:3rem;
}

.recruit-faq__list--item dt img,.recruit-faq__list--item dd img{
    display:none;
}

.faq-title {
    width: 50%;
    max-width: 750px;
    min-width: 400px;
    margin: 0px auto 30px;
    border-style: solid;
    border-color: #58B1E9;
    border-width: 2px;
    border-radius: 50px;
    padding: 10px;
    font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    text-align: center;
}

.title_st{
    font-size: 20px;
    text-align: center;
    margin-top:15px;

}   

.f_w_m{
    font-weight: 4
    00;

}
}