@charset "utf-8";
/*
Theme Name: grise-holdings
Theme URI: https://grise-holdings.com/
Description: pcbrain
Version: 1.0
Author: pcbrain.co.jp
*/

/* YUI fonts.css - font size設定
----------------------------------------------------------- */
@import url("css/cssfonts-min.css");

/* default style - リセット及びbody基本設定
----------------------------------------------------------- */
@import url("css/default.css");

/* all style
----------------------------------------------------------- */
@import url("css/style.css");
@import url("setting.css");

/* -----------------------------------------------------------
    common
----------------------------------------------------------- */
:root {
    --base-font-size: 18px;
    --font-scale: 1;
}

html {
    scroll-behavior: smooth;
    /* scrollbar-width: none; */
}

body {
    width: 100%;
    min-width: 1100px;
    font-family: var(--base-font-family);
    font-size: 16px;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100% !important;
    color: var(--body-text-color);
}

body.iframe {
    min-width: 0;
}

em {
    font-weight: bold;
    font-style: normal;
}

a {
    text-decoration: none;
    transition: 0.3s;
}

a.text-link {
    color: var(--main-color01);
    text-decoration: underline;
    text-underline-offset: 8px;
}

a.text-link[target='_blank'] {
    position: relative;
}

a.text-link[target='_blank']::after {
    display: inline-block;
    content: "";
    width: 1.111em;
    height: 1.111em;
    margin-left: 1em;
    vertical-align: -0.2em;
    background: var(--body-text-color);
    --mask: url(./img/svg_external_link01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: var(--mask);
    transition: 0.3s ease;
}

a.text-link:hover {
    opacity: 0.8;
    transition: 0.3s ease;
}

img {
    image-rendering: -webkit-optimize-contrast;
}

figure {
    margin-bottom: 0;
}

em {
    font-weight: bold;
    font-style: normal;
}

table {
    width: 100%;
    border-collapse: separate;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-radius: 16px;
}

th {
    font-weight: 500;
    color: var(--white);
    width: 20%;
    background: var(--main-color01);
}

td {
    background: var(--white);
}

th, td {
    word-break: break-word;
    overflow-wrap: break-word;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 30px;
    box-sizing: border-box;
}

table tr:first-child *:first-child {
  border-top-left-radius: 16px;
}
table tr:first-child *:last-child {
  border-top-right-radius: 16px;
}
table tr:last-child *:first-child {
  border-bottom-left-radius: 16px;
}
table tr:last-child *:last-child {
  border-bottom-right-radius: 16px;
}

.wideLg {
    max-width: 1510px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.wide {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    /* overflow: hidden; */
    padding: 0;
    box-sizing: border-box;
    z-index: 10;
}

.flex {
    display: flex;
}

.en {
    font-family: var(--en-font-family);
    font-weight: 700 !important;
    /* text-transform: capitalize; */
}

.notes p {
    padding-left: 1em;
    text-indent: -1em;
}

.textPreparation {
    text-align: center;
    padding: 50px;
}

.spblock,
.spinline,
.sptr {
    display: none;
}

.spcut {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.btn {
    width: fit-content;
    position: relative;
    z-index: 10;
}
.btn::before {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: var(--main-color01);
    bottom: -10px;
}
.btn.type02::before {
    background: var(--white);
}
.btn::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background-image: linear-gradient(90deg, rgba(16, 102, 54, 1), rgba(157, 211, 181, 1));
    bottom: -10px;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.3s;
}
.btn:hover::after {
    transform: scale(1, 1);
}

a.btn,
.btn a {
    display: block;
    font-size: 20px;
    font-weight: 500;
    color: var(--body-text-color);
    line-height: 1.5;
    width: fit-content;
    padding-right: 30px;
    position: relative;
}
a.btn::before,
.btn a::before {
    content: "";
    position: absolute;
    inset: 0 -2em 0 auto;
    margin: auto 0;
    width: 110px;
    height: 110px;
    background: #f3f3f3 url(./img/ico_arrow-g.png) no-repeat center;
    border-radius: 50%;
    transition: 0.3s ease;
    z-index: -1;
}
a.btn:hover::before,
.btn a:hover::before {
    transform: scale(0.8);
    background: var(--main-color03) url(./img/ico_arrow-w.png) no-repeat center;
}

a.btn.type02,
.btn.type02 a {
    color: var(--white);
}
a.btn.type02::before,
.btn.type02 a::before {
    background: var(--main-color03) url(./img/ico_arrow-w.png) no-repeat center;
}
a.btn.type02:hover::before,
.btn.type02 a:hover::before {
    background: #f3f3f3 url(./img/ico_arrow-g.png) no-repeat center;
}

a.btn::after,
.btn a::after {
    content: attr(data-text);
    font-weight: 500;
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(16, 102, 54, 1), rgba(157, 211, 181, 1));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s;
}
a.btn:hover::after,
.btn a:hover::after {
    opacity: 1;
}

.btn a span {
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease;
}
.btn a:hover span {
    opacity: 0;
}

a.btn img, .btn a img {
    vertical-align: text-bottom;
    margin-left: 0.75em;
}

.innerBtn {
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    border-radius: 12px;
    margin-left: auto;
    margin-right: auto;
    padding: 4px 28px 6px;
    line-height: 1;
    background: var(--red);
    display: block;
    width: fit-content;
    min-width: 150px;
    box-sizing: border-box;
}

.tel {
    display: flex;
    flex-direction: column;
}

.tel i[class*='fa-'] {
    font-size: 35px;
    margin-right: 0.25em;
    vertical-align: 1px;
}

.tel span.tel-link {
    font-family: var(--en-font-family);
    font-weight: 600;
    font-size: 47px;
    line-height: 1;
    margin-left: 5px;
    color: var(--body-text-color);
}

.tel span.tel-link a {
    /* color: var(--white); */
    text-decoration: none;
}

.tel span.tel-open {
    font-size: 12px;
    font-family: var(--base-font-family);
    font-weight: 400;
    margin-top: -5px;
}

.cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
}

.cats a,
.cats > span {
    display: inline-block;
    text-decoration: none !important;
    background: var(--main-color02);
    padding: 1px 20px;
    margin: 0;
}

.cats a {
    color: var(--white);
    background: var(--black);
}

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

.contactS .tel {
    display: flex;
    flex-direction: column;
}

.contactS .tel span.tel-link {
    font-size: 47px;
}

.contactS .tel i[class*='fa-'] {
    font-size: 36px;
    margin-right: 10px;
}

.my-sm {
    margin-top: 25px;
    margin-bottom: 25px;
}

.mt-sm {
    margin-top: 25px;
}

.mb-sm {
    margin-bottom: 25px;
}

.py-sm {
    padding-top: 25px;
    padding-bottom: 25px;
}

.pt-sm {
    padding-top: 25px;
}

.pb-sm {
    padding-bottom: 25px;
}

.my-md {
    margin-top: 50px;
    margin-bottom: 50px;
}

.mt-md {
    margin-top: 50px;
}

.mb-md {
    margin-bottom: 50px;
}

.py-md {
    padding-top: 50px;
    padding-bottom: 50px;
}

.pt-md {
    padding-top: 50px;
}

.pb-md {
    padding-bottom: 50px;
}

.my-lg {
    margin-top: 100px;
    margin-bottom: 100px;
}

.mt-lg {
    margin-top: 100px;
}

.mb-lg {
    margin-bottom: 100px;
}

.py-lg {
    padding-top: 100px;
    padding-bottom: 100px;
}

.pt-lg {
    padding-top: 100px;
}

.pb-lg {
    padding-bottom: 100px;
}

span[class*='fdl01'],
span[class*='tel01'],
span[class*='mail01'] {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

span[class*='fdl01']::before,
span[class*='tel01']::before,
span[class*='mail01']::before {
    display: inline-block;
    content: "";
}

span[class*='fdl01']::before {
    margin-right: 1%;
    margin-bottom: 0.5%;
    background-color: currentColor;
    vertical-align: -0.05em;
    width: 1.083em;
    height: auto;
    aspect-ratio: 262 / 150;
    --mask: url(./img/svg_fdl01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left bottom;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: left bottom;
    mask-size: contain;
    mask-image: var(--mask);
}

span[class*='tel01']::before {
    margin-right: 2%;
    margin-bottom: 0;
    /* background-color: currentColor; */
    background-color: var(--sub-color02);
    vertical-align: -0.05em;
    width: 0.75em;
    height: auto;
    aspect-ratio: 1 / 1;
    --mask: url(./img/svg_tel01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left bottom;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: left bottom;
    mask-size: contain;
    mask-image: var(--mask);
}

span[class*='mail01']::before {
    margin-right: 2%;
    margin-bottom: 0;
    /* background-color: currentColor; */
    background-color: var(--black);
    vertical-align: -0.1em;
    width: 0.75em;
    height: auto;
    aspect-ratio: 1 / 1;
    --mask: url(./img/svg_mail01.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left bottom;
    -webkit-mask-size: contain;
    -webkit-mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: left bottom;
    mask-size: contain;
    mask-image: var(--mask);
}

.btn span[class*='fdl01']::before,
.btn span[class*='tel01']::before,
.btn span[class*='mail01']::before {
    font-size: 2em;
    margin-right: 0.25em;
}

.btn a:hover span[class*='fdl01']::before,
.btn a:hover span[class*='tel01']::before,
.btn a:hover span[class*='mail01']::before,
a.btn:hover span[class*='fdl01']::before,
a.btn:hover span[class*='tel01']::before,
a.btn:hover span[class*='mail01']::before {
    background-color: currentColor;
}

.contentTitle01 {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 50px;
}

.contentTitle01 .en {
    font-size: 120px;
    display: block;
    line-height: 0.9;
    margin-bottom: 20px;
}
.contentTitle01 .en::first-letter {
    color: var(--main-color01);
}

.contentTitle02 {
    font-size: 36px;
    text-align: center;
    padding-bottom: 40px;
    margin-bottom: 60px;
    position: relative;
}
.contentTitle02::after {
    content: "";
    width: 18px;
    height: 18px;
    background: var(--main-color01);
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.contentTitle02 .en {
    display: block;
    font-size: 60px;
    font-weight: 800 !important;
    line-height: 1.3;
    margin-bottom: 20px;
}
.contentTitle02 .en::first-letter {
    color: var(--main-color01);
}

.title01 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.title01 .en::first-letter {
    color: var(--main-color01);
}

.title01 .en {
    font-size: 80px;
    display: block;
    margin-bottom: 0.3em;
    vertical-align: middle;
    color: var(--body-text-color);
}

.title02 {
    background: var(--black);
    color: var(--white);
    /* font-size: 26px; */
    font-size: calc(var(--base-font-size) * var(--font-scale) * 1.444);
    font-weight: 700;
    padding: 10px 40px 13px;
    position: relative;
    margin-bottom: 30px;
}

.title02::before {
    position: absolute;
    inset: 5px auto auto 5px;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-width: 11px;
    border-style: solid;
    border-color: transparent;
    border-top-color: var(--main-color01);
    border-left-color: var(--main-color01);
}

.title03 {
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    font-size: calc(var(--base-font-size) * var(--font-scale) * 1.888);
    font-weight: 900;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 58px;
    padding: 14px 20px;
}

.titleLine01 {
    font-size: calc(var(--base-font-size) * var(--font-scale) * 2.444);
    font-weight: 900;
    line-height: 1.6;
    margin-bottom: 25px;
    color: var(--white);
}

.titleLine01 span {
    display: inline;
    background-image: linear-gradient(to bottom, transparent 0.1em, var(--black) 0.1em, var(--black) 1.5em, transparent 1.5em);
    padding: 0 0.5em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.dl01 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* font-size: var(--base-font-size); */
    margin: -20px 0 0;
    padding: 0 40px 100px;
}

.dl01 > div {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: subgrid;
    position: relative;
    gap: 0 60px;
}

.dl01 > div::before {
    inset: auto auto 0 0;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--black) 0, var(--black) 2px, transparent 2px, transparent 4px);
}

.dl01 dt,
.dl01 dd {
    line-height: 1.8;
    padding: 40px 20px;
}

.dl01 dt {
    font-weight: 700;
}

.dl01 dd {
    font-weight: 400;
    text-align: justify;
    letter-spacing: -0.05em;
}

.dl02,
.dl02 dt,
.dl02 dd {
    display: block;
}

.dl02 {
    border-top: 1px solid var(--sub-color02);
    border-left: 1px solid var(--sub-color02);
    border-right: 1px solid var(--sub-color02);
}

.dl02 dt,
.dl02 dd {
    border-bottom: 1px solid var(--sub-color02);
    overflow-wrap: anywhere;
    /* word-break: normal; */
    word-break: break-all;
    line-break: strict;
}

.dl02 dt {
    color: var(--white);
    background: var(--sub-color02);
    text-align: center;
    font-weight: 700;
    padding: 10px 20px;
}

.dl02 dd {
    text-align: left;
    background: var(--white);
    padding: 20px 30px;
    line-height: 2;
}

.dl02 dd ul {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dl02 dd ul li {
    text-align: left;
}

.ul01 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--black);
    border-left: 1px solid var(--black);
    margin: 60px 40px 100px;
}

.ul01 li {
    border-bottom: 1px solid var(--black);
    border-right: 1px solid var(--black);
    line-height: 1.5;
    /* padding: 14px 40px 17px; */
    padding: 0.777em 2.222em 0.944em;
    background: var(--white);
}

.ul01 li:nth-child(4n+3),
.ul01 li:nth-child(4n+4) {
    background: #ececec;
}

.table01 {
    border: 0;
}

.table01 th,
.table01 td {
    font-size: var(--base-font-size);
    background: transparent;
    border: 0;
    padding: 13px 10px;
    border-bottom: 1px solid var(--black);
    vertical-align: top;
}

.table01 th {
    font-weight: 500;
}

.table01 td:has(ul a) {
    text-align: justify;
    letter-spacing: -0.05em;
}

.table01 td a {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 8px;
}

.table01 td a:hover {
    color: var(--main-color01);
}

.table02 {
    border: 0;
}

.table02 tr {
    background-image: linear-gradient(to right, #000 2px, transparent 2px);
    background-size: 4px 2px;
    background-repeat: repeat-x;
    background-position: left bottom;
}

.table02 th,
.table02 td {
    border: 0 !important;
    line-height: 1.3;
    vertical-align: top;
}

.table02 th {
    width: 30%;
    vertical-align: middle;
    background: none;
    position: relative;
    line-height: 1;
    font-size: var(--base-font-size);
    font-weight: 700 !important;
    padding: 38px 20px !important;
    background: none !important;
}

.table02 td {
    position: static;
    padding: 23px 20px !important;
    vertical-align: middle;
}

.table02 td a {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 8px;
}

.table02 td a:hover {
    color: var(--main-color01);
}

/* -----------------------------------------------------------
    #main
----------------------------------------------------------- */
#main {
    position: relative;
    /* overflow: hidden; */
}
#main::after {
    content: "";
    width: 100%;
    height: 200px;
    background: var(--white);
    border-radius: 0 0 0 100px;
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    z-index: 1;
}

#contents {
    position: relative;
    margin: 0 auto 0;
}

/* -----------------------------------------------------------
    header
----------------------------------------------------------- */
body.scrolled header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ----- nav ----- */
#hdrNv {
    width: 100%;
    position: absolute;
    z-index: 100;
}

header nav {
    min-width: 1100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

header nav #gNav {
    display: flex;
    font-size: var(--base-font-size);
    padding: 0 50px;
    gap: 40px;
    background: var(--white);
    justify-content: space-between;
    border-radius: 0 0 0 40px;
}

header nav #gNav > li {
    display: block;
    text-align: center;
    position: relative;
}

header nav #gNav > li > a {
    color: var(--black);
    position: relative;
    display: block;
    text-decoration: none;
    padding: 20px 0;
    font-weight: 500;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: 0.3s ease;
}
header nav #gNav > li > a:hover {
    color: var(--black);
}

header nav #gNav > li > a > span {
    position: relative;
}
header nav #gNav > li > a > span::before {
    content: "";
    display: block;
    width: 0;
    height: calc(100% + 0.3em);
    position: absolute;
    /* inset: 0 -100%; */
    margin: 0 auto;
    border-bottom: 1px solid var(--main-color01);
    pointer-events: none;
    transition: 0.3s ease;
}
header nav #gNav > li > a:hover > span::before {
    opacity: 1;
    width: 100%;
}

header nav .hdrLogo {
    padding: 20px 30px 20px 20px;
    margin-right: auto;
    background: var(--white);
    position: relative;
}
body:not(#top) .hdrLogo {
    border-radius: 0 0 40px 0;
}

header nav .hdrLogo > a {
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
}

header nav .hdrLogo img {
    display: block;
    height: auto;
    flex-shrink: 0;
    flex-grow: 0;
    max-width: 100px;
}

header nav .hdrLogo .corner {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    right: -40px;
    bottom: 0px;
    transform: translateX(100%);
    z-index: 1;
}
header nav .hdrLogo .corner::before {
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background: transparent;
    border-radius: 50%;
    box-shadow: -40px 40px 0 0 var(--white);
    transform: translate(-50%, -50%);
}
body:not(#top) .hdrLogo .corner {
    display: none;
}

body.scrolled header nav .hdrLogo {
    border-radius: 0 0 40px 0;
}

body.scrolled header nav .hdrLogo .corner::before {
    content: none;
}

body:not(#top) header nav #gNav, 
body.scrolled header nav #gNav {
    width: 100%;
    justify-content: flex-end;
    border-radius: 0;
    position: relative;
}

header nav #gNav .corner, 
header nav #gNav .corner {
    display: none;
}

body:not(#top) header nav #gNav .corner, 
body.scrolled header nav #gNav .corner {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: -80px;
    transform: translateX(100%);
    z-index: 1;
}
body:not(#top) header nav #gNav .corner::before, 
body.scrolled header nav #gNav .corner::before {
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background: transparent;
    border-radius: 50%;
    box-shadow: -40px -40px 0 0 var(--white);
    transform: translate(-50%, -50%);
}


/* -----------------------------------------------------------
    #cornerName
----------------------------------------------------------- */
#cornerName {
    position: relative;
    text-align: left;
    z-index: 1;
    background: url(img/bg_cornerName.png) no-repeat center;
    background-size: cover;
    height: 530px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* border-top: solid 10px var(--main-color01); */
}

#cornerName > .wide {
    position: relative;
    display: flex;
    align-items: center;
    padding: 100px 40px 0;
    z-index: 5;
    max-width: 1750px;
    height: 100%;
    box-sizing: border-box;
}
#cornerName > .wide::after {
    position: absolute;
    display: block;
    content: "";
    bottom: -30px;
    right: 40px;
    width: 53%;
    aspect-ratio: 5 / 2;
    /* height: 400px; */
    background: url(img/bg_cornerName_privacy.jpg) no-repeat center / contain;
    z-index: -1;
    border-radius: 40px;
}
#corporate #cornerName > .wide::after {
    background: url(img/bg_cornerName_corporate.jpg) no-repeat center / contain;
}
#business #cornerName > .wide::after {
    background: url(img/bg_cornerName_business.jpg) no-repeat center / contain;
}
#recruit #cornerName > .wide::after, 
#cmp #cornerName > .wide::after {
    background: url(img/bg_cornerName_recruit.jpg) no-repeat center / contain;
}
#news #cornerName > .wide::after {
    background: url(img/bg_cornerName_news.jpg) no-repeat center / contain;
}
#contact #cornerName > .wide::after {
    background: url(img/bg_cornerName_contact.jpg) no-repeat center / contain;
}

#cornerName .title {
    font-weight: 700;
    line-height: 1;
}

#cornerName .title .en {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 90px;
}

#cornerName .title .en::first-letter {
    color: var(--main-color01);
}

#cornerName .title small {
    font-size: 26px;
    padding-bottom: 8px;
    position: relative;
}
#cornerName .title small::after {
    content: "";
    width: 100%;
    height: 4px;
    background: var(--main-color01);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* -----------------------------------------------------------
    .breadcrumbs
----------------------------------------------------------- */
.wide:has(.breadcrumbs) {
    max-width: 1750px;
    padding: 0 40px;
}

.breadcrumbs {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    font-size: var(--base-font-size);
    padding: 50px 0 100px;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 10px 0;
}

.breadcrumbs a {
    color: var(--main-color01);
}

.breadcrumbs > span {
    display: inline-block;
    max-width: 20em;
    margin-right: 0.75rem;
    line-height: 22px;
    position: relative;
}

.breadcrumbs > span:not(:has(a)) {
    white-space: nowrap;
}

.breadcrumbs > i {
    display: none;
}

.breadcrumbs > span::after {
    display: inline-block;
    content: "";
    margin: 0;
    font-size: calc(var(--base-font-size) * var(--font-scale) * 1.222);
}

.breadcrumbs > span:not(:last-of-type)::after {
    display: inline-block;
    content: "\03e";
    margin: 0 0 0 0.75rem;
    font-size: calc(var(--base-font-size) * var(--font-scale) * 1.222);
}

.breadcrumbs > span:first-of-type {
    padding-left: 30px;
}
.breadcrumbs > span:first-of-type::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--main-color01);
    position: absolute;
    top: 40%;
    left: 0;
}

/* -----------------------------------------------------------
    .contactUsContent
----------------------------------------------------------- */
.contactUsContent {
    padding: 500px 0 130px;
}

.contactUsContent .wide {
    background: var(--main-color01);
    border-radius: 40px;
}

.contactUsContent h2 {
    font-family: var(--en-font-family);
    font-size: 100px;
    font-weight: bold;
    color: var(--white);
    text-align: center;
    display: block;
    line-height: 1;
    transform: translateY(-50%);
}

.contactUsContent h2 small {
    font-size: 80px;
}

.contactUsContent p.lead {
    font-size: 22px;
    font-weight: normal;
}

.contactUsContent p {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    line-height: 2;
}

/* ----- .banners01Content ----- */
.banners01Content {
    padding: 60px 0 100px;
}

.banners01Content ul {
    display: grid;
    gap: 80px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 880px;
    margin: 0 auto;
}

.banners01Content ul li {
    display: block;
    position: relative;
    border: 2px solid var(--white);
    border-radius: 20px;
    overflow: hidden;
}

.banners01Content ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 5vw, 26px);
    font-weight: 700;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    color: var(--white);
    border-radius: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.banners01Content ul li:has(a)::before {
    position: absolute;
    content: "";
    display: block;
    background: var(--main-color03) url(img/ico_arrow-w.png) no-repeat top 35px left 35px;
    border-radius: 100vh;
    width: 140px;
    height: 140px;
    margin: 0;
    bottom: 0;
    right: 0;
    transform: translateX(45%) translateY(45%);
    z-index: 100;
    pointer-events: none;
    transition: all 0.3s;
}
.banners01Content ul li:has(a):hover::before {
    background: #f3f3f3 url(img/ico_arrow-g.png) no-repeat top 35px left 35px;
    transform: translateX(45%) translateY(45%) scale(0.8);
}

.banners01Content ul li a h3 {
    font-family: var(--en-font-family);
    font-size: 56px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 15px;
}

.banners01Content ul li a:hover img {
    opacity: 1;
}

/* -----------------------------------------------------------
    footer
----------------------------------------------------------- */
footer {
    background: url(img/bg_footer.jpg) no-repeat bottom;
    background-size: cover;
    color: var(--white);
    position: relative;
}

footer a {
    color: var(--white);
    text-decoration: none;
}

footer a:hover {
    color: var(--white);
    opacity: 0.7;
}

.footerCom h3 {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    margin: 20px 0 10px;
}

.footerCom p {
    line-height: 1.5;
}

.footerCom p a.googleLink {
    display: block;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-left: 40px;
    margin-top: 30px;
}
.footerCom p a.googleLink::before {
    content: "";
    --mask: url(img/svg_map.svg);
    width: 27px;
    height: 33px;
    background: var(--white);
    -webkit-mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: contain;
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: contain;
    position: absolute;
    left: 0;
}

.ftrLogo {
    display: block;
    margin-bottom: 5px;
}

.ftrLogo img {
    max-width: 304px;
}

footer nav {
    float: right;
    height: auto;
    background: none;
    margin-top: 0;
}

footer nav .ftrNav > li {
    float: left;
    margin-left: 100px;
}
footer nav .ftrNav > li:first-child {
    margin-left: 0;
}

footer nav .ftrNav li ul > li {
    margin-bottom: 30px;
}

footer .copyRight {
    width: 100%;
    box-sizing: border-box;
    clear: both;
    text-align: center;
    padding: 200px 10px 60px;
    font-size: 14px;
}

.pageTop {
    position: absolute;
    right: 100px;
    bottom: 280px;
    opacity: 0;
    z-index: 999;
    transition: 0.3s ease;
}
.scrolled .pageTop {
    opacity: 1;
}

.pageTop a {
    display: block;
    width: fit-content;
    height: 30px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.pageTop a span {
    display: block;
    background: var(--white);
    width: 60px;
    height: 1px;
    position: relative;
}
.pageTop a span::before, 
.pageTop a span::after {
    content: "";
    width: 40px;
    height: 1px;
    background: var(--white);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.pageTop a span::before {
    transform: rotate(45deg) translateX(50%);
    transform-origin: top;
}
.pageTop a span::after {
    transform: rotate(-45deg) translateX(-50%);
    transform-origin: top;
}

/* -----------------------------------------------------------
    .mainv
----------------------------------------------------------- */
#top .mainv {
    position: relative;
}

.mainvSlider {
    aspect-ratio: 5 / 3;
    max-width: 1400px;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    z-index: 1;
    position: relative;
}
.mainvSlider::after {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 74px;
    left: 0px;
    background: transparent;
    border-radius: 50%;
    box-shadow: -40px 40px 0 0 var(--white);
}

.mainvSlider .slick-list {
    border-radius: 0 0 40px 40px;
}

.mainvSlider .slick-track,
.mainvSlider .slick-list {
    height: 100%;
}

.mainvSlider .slick-slide {
    width: 100%;
    height: 100%;
}

.mainvSlider .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mainvCover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    max-width: 1725px;
    height: 100%;
    margin: 0 auto;
}

.mainvCover .inBox {
    position: absolute;
    top: 154px;
    left: 0;
    width: 26%;
    min-width: 370px;
    height: calc(100% - 154px);
    padding: 60px 50px 0 50px;
    box-sizing: border-box;
}
.mainvCover .inBox::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--white);
    border-radius: 0 40px 0 0;
    z-index: 1;
}

.mainvCover .inBox h2 {
    margin-bottom: 30px;
    position: relative;
    z-index: 3;
}

.mainvCover .inBox h2 img {
    width: 100%;
}

.mainvCover .inBox p {
    font-size: var(--base-font-size);
    font-weight: bold;
    position: relative;
    z-index: 3;
}

.mainvCover .inBox .corner {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    right: -40px;
    bottom: 0px;
    transform: translateX(100%);
    z-index: 1;
}
.mainvCover .inBox .corner::before {
    display: block;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0px;
    left: 0px;
    content: '';
    background: transparent;
    border-radius: 50%;
    box-shadow: -40px 40px 0 0 var(--white);
    transform: translate(-50%, -50%);
}

.mainv p.siteName {
    font-size: 16px;
    font-weight: bold;
    color: var(--main-color01);
    writing-mode: vertical-rl;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 3;
}

.loopText {
  display: flex;
  width: 100%;
  overflow: hidden;
  transform: translateY(-50%);
  position: relative;
  z-index: 2;
}

.loopText img {
  flex: 0 0 auto;
  overflow: hidden;
  padding-left: 20px;
}

.loopText img:nth-child(odd) {
  animation: loop 80s -40s linear infinite;
}

.loopText img:nth-child(even) {
  animation: loop2 80s linear infinite;
}

@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
}

.slider .slick-prev,
.slider .slick-next {
    z-index: 10;
}

.slider .slick-prev {
    left: 0;
}

.slider .slick-next {
    right: -10px;
}

.slider .slick-prev::before,
.slider .slick-prev::after,
.slider .slick-next::before,
.slider .slick-next::after {
    content: "";
    display: block;
    position: absolute;
    inset: -100%;
    margin: auto;
}

.slider .slick-prev::before,
.slider .slick-prev::after {
    transform: translate(50%, -50%);
}

.slider .slick-next::before,
.slider .slick-next::after {
    transform: translate(-50%, -50%);
}

.slider .slick-next::before,
.slider .slick-prev::before {
    width: 50px;
    height: 50px;
    background: var(--black);
    opacity: 0.8;
    border-radius: 100vh;
}

.slider .slick-next::after,
.slider .slick-prev::after {
    --mask: url(img/svg_arrow01.svg);
    width: 50px;
    height: 50px;
    background: var(--white);
    -webkit-mask-image: var(--mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: contain;
    mask-image: var(--mask);
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: contain;
}

.slider .slick-prev::after {
    transform: scaleX(-1) translate(-50%, -50%);
}

.slick-dotted.slick-slider {
    margin-bottom: 0 !important;
}

.slick-slider .slick-dots {
    --color: #616161;
    bottom: 0;
    z-index: 100;
    line-height: 1;
    display: flex;
    padding: 0;
    width: 100%;
    list-style: none;
    justify-content: center;
    position: static;
    padding: 20px 0 20px;
}

#top .slick-slider .slick-dots {
    --color: #fff;
}

.slick-slider .slick-dots li {
    position: relative;
    display: block;
    margin: 0 9px;
    padding: 0;
    width: 12px;
    height: 12px;
    cursor: pointer;
}

.slick-dots li button {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    outline: none;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:hover::before,
.slick-dots li button:focus::before {
    opacity: 1;
}

.slick-slider .slick-dots li button::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color);
    opacity: 0.4 !important;
    content: '' !important;
    text-align: center;
    font-size: 6px;
    line-height: 20px;
}

.slick-dots li.slick-active button::before {
    opacity: 1 !important;
}

/* -----------------------------------------------------------
    .postList
----------------------------------------------------------- */
.postList li {
    transform: scale(1);
    transition: 0.3s ease;
    overflow: hidden;
}
.postList li:hover {
    transform: scale(1.05);
}

#main .postList li a,
#main .postList li a:hover {
    color: var(--black);
    text-decoration: none;
}

.postList .mainThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.postList a:hover .mainThumb img {
    opacity: 1;
}

.postList .time {
    font-size: 16px;
    text-align: left;
    color: #777;
    line-height: 1;
    display: flex;
    align-items: flex-end;   
    margin-top: 0;
}

.postList li .cats {
    pointer-events: none;
    display: flex;
    justify-content: flex-start;
    gap: 10px 10px;
    flex-wrap: wrap;
}

.postList .cats a {
    display: block;
    text-decoration: none !important;
    line-height: 1;
    pointer-events: auto;
    transition: all 0.3s ease;
}
.postList .cats a:hover {
    opacity: 0.7;
}


/* -----------------------------------------------------------
    投稿系共通
----------------------------------------------------------- */
.postTitle {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
    padding: 10px 0;
    position: relative;
    margin-bottom: 15px;
    overflow-wrap: anywhere;
    word-break: break-all;
    line-break: strict;
    border-bottom: 5px solid var(--main-color01);
}

.single-content h1 {
    font-size: calc(var(--base-font-size) * var(--font-scale) * 1.666);
    font-weight: 700;
}

.single-content h1::before {
    position: absolute;
    inset: 0 auto auto 0;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-width: 11px;
    border-style: solid;
    border-color: transparent;
    border-top-color: var(--main-color01);
    border-left-color: var(--main-color01);
}

.single-content h2 + table {
    margin-top: 20px;
}

.single-content table {
    margin-bottom: 50px;
}

.single-content + .pagenavi {
    margin-bottom: 100px;
}

.single-content .btn {
    margin-top: 60px;
}


/* -----------------------------------------------------------
    wysiwyg
----------------------------------------------------------- */
.wysiwyg {
    font-size: var(--base-font-size);
}

.wysiwyg > *:first-child {
    margin-top: 0 !important;
}

.wysiwyg > *:last-child {
    margin-bottom: 0 !important;
}

.wysiwyg * {
    word-break: break-word;
    font-weight: 400;
}

.wysiwyg strong {
    font-weight: 700;
}

.wysiwyg img {
    max-width: 100%;
    height: auto;
}

.wysiwyg p {
    margin: 0 0 15px 0;
    line-height: 2;
    text-align: justify;
}

.wysiwyg p + h2,
.wysiwyg p + h3,
.wysiwyg p + h4,
.wysiwyg p + h5,
.wysiwyg p + h6 {
    margin-top: 30px;
}

.wysiwyg p a {
    color: var(--main-color01);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: 0.3s;
}
.wysiwyg p a:hover {
    opacity: 0.7;
}

.wysiwyg h2,
.wysiwyg .h2 {
    font-size: 26px;
    font-weight: 700;
    padding: 10px 30px;
    position: relative;
    margin: 30px 0;
    border-top: 3px solid #0c3f8a;
    border-bottom: 3px solid #0c3f8a;
}

.wysiwyg h3,
.wysiwyg .h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    background: #0c3f8a;
    padding: 10px 30px;
    position: relative;
    margin: 30px 0;
}

.wysiwyg h4,
.wysiwyg .h4 {
    font-size: 20px;
    color: var(--white);
    background: var(--main-color01);
    padding: 10px 30px;
    position: relative;
    margin: 30px 0;
}

.wysiwyg h4 a,
.wysiwyg .h4 a {
    color: var(--white);
    text-decoration: underline;
}

.wysiwyg h5,
.wysiwyg .h5 {
    font-size: 19px;
    margin: 30px 0;
    padding: 10px 30px;
    color: var(--main-color03);
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.wysiwyg h6,
.wysiwyg .h6 {
    font-size: 18px;
    margin: 30px 0;
    padding: 10px 30px;
    border-bottom: 3px double currentColor;
}

.wysiwyg blockquote {
    background: #eee;
    padding: calc(var(--base-font-size) * 1.944);
    margin: calc(var(--base-font-size) * 1.666) 0;
    --bc: var(--black);
    background-image:
        linear-gradient(to right, var(--bc), var(--bc) 1px, transparent 1px, transparent 2px),
        linear-gradient(to bottom, var(--bc), var(--bc) 1px, transparent 1px, transparent 2px),
        linear-gradient(to left, var(--bc), var(--bc) 1px, transparent 1px, transparent 2px),
        linear-gradient(to top, var(--bc), var(--bc) 1px, transparent 1px, transparent 2px);
    background-size: 2px 1px, 1px 2px, 2px 1px, 1px 2px;
    background-position: left top, right top, right bottom, left bottom;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
}

.wysiwyg blockquote p {
    line-height: 1.7;
    margin: 0;
}

#main .wysiwyg ul {
    margin: 0 0 15px 0;
}

#main .wysiwyg ul li {
    list-style: none;
    line-height: 1.7;
    margin-bottom: 10px;
    padding-left: 30px;
    position: relative;
}
#main .wysiwyg ul li::before {
    content: '';
    display: block;
    left: 8px;
    top: 10px;
    width: 12px;
    height: 12px;
    background: var(--main-color03);
    position: absolute;
    border-radius: 2px;
}

#main .wysiwyg ul li:last-child {
    margin-bottom: 0;
}

#main .wysiwyg ol {
    counter-reset: my-counter;
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

#main .wysiwyg ol li {
    list-style: none;
    line-height: 1.7;
    margin-bottom: 10px;
    padding-left: 36px;
    position: relative;
}
#main .wysiwyg ol li::before {
    font-size: 16px;
    content: counter(my-counter);
    counter-increment: my-counter;
    background-color: var(--main-color03);
    color: var(--white);
    display: block;
    line-height: 18px;
    text-align: center;
    height: 20px;
    width: 20px;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
}

#main .wysiwyg ol li:last-child {
    margin-bottom: 0;
}

.wysiwyg table caption {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    padding-bottom: 15px;
}

.wysiwyg table caption strong {
    font-weight: 700;
    display: inline-block;
    color: var(--white);
    background: var(--main-color01);
    padding: 1px 5px 3px;
    margin-right: 0.5rem;
    text-align: center;
    min-width: 90px;
}

.wysiwyg table {
    width: 100%;
    margin: 30px 0;
}

.wysiwyg table th,
.wysiwyg table td {
    padding: calc(var(--base-font-size) * 0.833) calc(var(--base-font-size) * 1.111);
    width: auto;
    font-weight: 400;
    text-align: left;
    vertical-align: top;
    position: relative;
}

.wysiwyg table th.tl, 
.wysiwyg table td.tl {
    background: var(--main-color01);
    color: var(--white);
    text-align: center;
}

.wysiwyg table th {
    color: var(--body-text-color);
    width: 30%;
    background: #eee;
}

.wysiwyg iframe {
    width: 100%;
    height: 500px;
}

/*投稿画像の回り込み処理*/
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignright {
    padding: 0;
    margin: 0 0 2px 7px;
    display: inline;
}

img.alignleft {
    padding: 0;
    margin: 0 30px 10px 0;
    display: inline;
}

img.aligncenter {
    display: block;
    margin: 0 auto;
}

.alignright {
    float: right;
    margin-left: 10px;
    margin-bottom: 2px;
}

.alignleft {
    float: left;
    margin-right: 10px;
    margin-bottom: 2px;
}

/* -----------------------------------------------------------
    .wp-pagenavi
----------------------------------------------------------- */
.wp-pagenavi {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60px auto 0;
    width: fit-content;
    border: 2px solid var(--main-color03);
    border-radius: 4px;
}

.wp-pagenavi .pages {
    border: 0;
}

.wp-pagenavi a {
    text-decoration: none !important;
    border-right: 2px solid var(--main-color03) !important;
}
.wp-pagenavi a:last-child {
    border-right: 0 !important;
}

.wp-pagenavi a,
.wp-pagenavi span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    border: 0;
    color: var(--body-text-color) !important;
    background: var(--white);
    padding: 5px 8px;
    margin: 0;
    line-height: 1;
    border-radius: 0;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    min-width: 2.1875em;
}

.wp-pagenavi span.extend {
    background: transparent !important;
}

.wp-pagenavi a:hover,
.wp-pagenavi span.current {
    background: var(--body-text-color);
    color: var(--white) !important;
}

.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.nextpostslink {
    position: relative;
    text-align: center;
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: var(--main-color01) !important;
}
.wp-pagenavi a:hover.previouspostslink,
.wp-pagenavi a:hover.nextpostslink {
    color: var(--white) !important;
}

.wp-pagenavi a.first, 
.wp-pagenavi a.last {
    padding: 5px 20px;
    color: var(--main-color01) !important;
}
.wp-pagenavi a:hover.first, 
.wp-pagenavi a:hover.last {
    color: var(--white) !important;
}

/* -----------------------------------------------------------
    .pagenavi
----------------------------------------------------------- */
.pagenavi {
    clear: both;
    width: 100%;
    max-width: 1200px;
    margin: 80px 0 0;
}

.pagenavi ul {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
    width: fit-content;
    max-width: 1100px;
    border: 2px solid var(--main-color03);
    border-radius: 4px;
}

.pagenavi ul li {
    display: block;
    padding: 0 !important;
    margin-bottom: 0;
}

.pagenavi ul li p {
    margin-top: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    letter-spacing: -0.01em;
}

.pagenavi ul li.prev p {
    padding-right: 0;
}

.pagenavi ul li.next p {
    padding-left: 0;
    width: fit-content;
    margin-left: auto;
}

.pagenavi ul li::before {
    content: none;
}

.pagenavi ul li a {
    display: block;
    border: 0;
    color: var(--body-text-color) !important;
    background: var(--white);
    padding: 10px 40px;
    line-height: 1;
    border-radius: 0;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    min-width: 2.1875em;
    box-sizing: border-box;
}

.pagenavi ul li.list a {
    background: transparent;
    width: fit-content;
    margin: 0 auto;
}
.pagenavi ul li.list a:hover {
    color: var(--white) !important;
    background: var(--body-text-color);
}

.pagenavi ul li.list a i[class^='fa'] {
    color: var(--main-color01);
    margin-right: 10px;
    font-size: 1.2em;
    vertical-align: middle;
    transition: 0.3s;
}
.pagenavi ul li.list a:hover i[class^='fa'] {
    color: var(--white);
}

.pagenavi ul li.next a,
.pagenavi ul li.prev a {
    width: fit-content;
    padding-top: 12px;
    padding-bottom: 13px;
}

.pagenavi ul li.prev {
    text-align: left;
}

.pagenavi ul li.next a {
    position: relative;
    /* margin: 0 auto 0 50px; */
    margin: 0 auto 0 0;
    padding-left: 25px;
    padding-right: 50px;
    text-align: left;
    border-left: 2px solid var(--main-color03);
}
.pagenavi ul li.next a::before {
    content: ">";
    font-size: var(--base-font-size);
    color: var(--main-color01);
    margin: auto 0;
    position: absolute;
    inset: 8px 10px 0 auto;
    transition: 0.3s;
}

.pagenavi ul li.prev a {
    position: relative;
    /* margin: 0 50px 0 auto; */
    margin: 0 0 0 auto;
    padding-left: 50px;
    padding-right: 25px;
    text-align: right;
    border-right: 2px solid var(--main-color03);
}
.pagenavi ul li.prev a::after {
    content: "<";
    font-size: var(--base-font-size);
    color: var(--main-color01);
    margin: auto 0;
    position: absolute;
    inset: 8px auto 0 10px;
    transition: 0.3s;
}

.pagenavi ul li.next a:hover::before,
.pagenavi ul li.prev a:hover::after {
    color: var(--white);
}

.pagenavi ul li.prev a i {
    margin-right: 1.0rem;
}

.pagenavi ul li.next {
    text-align: right;
}

.pagenavi ul li.next a i {
    margin-left: 1.0rem;
}

.pagenavi ul li.next a:hover,
.pagenavi ul li.prev a:hover {
    background: var(--body-text-color);
    color: var(--white) !important;
}

.pagenavi ul li.list {
    text-align: center;
}


/* -----------------------------------------------------------
    #top
----------------------------------------------------------- */
/* ----- .newsList ----- */
.newsList .title01 {
    margin-bottom: 80px;
}

#top .newsList .flex {
    justify-content: space-between;
}

#top .newsList ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    text-align: left;
    width: 810px;
}

#top .newsList li {
    border-radius: 10px;
}

#top .newsList li a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#top .newsList .mainThumb {
    width: 100%;
    aspect-ratio: 13 / 11;
    border-radius: 10px;
    overflow: hidden;
}

#top .newsList .title {
    font-size: var(--base-font-size);
    padding: 10px;
    flex: 1;
}

#top .newsList .time {
    justify-content: flex-end;
    padding: 10px;
}

#top .newsList .cats {
    position: absolute;
    top: 0;
    right: 0;
}

#top .newsList .cats a {
    border-radius: 0;
    font-size: 14px;
    padding: 7px 10px 8px;
    color: var(--white) !important;
    background: var(--main-color01);
}

/* ----- .corporateContent ----- */
.bg_corporate-t {
    margin-top: 150px;
}
.bg_corporate-t::after {
    content: "";
    background: url(img/illust_top01.png) no-repeat center;
    width: 457px;
    aspect-ratio: 457 / 209;
    background-size: 457px;
    position: absolute;
    top: -100px;
    left: 40px;
}

.bg_corporate-t, 
.bg_corporate-b {
    position: relative;
}

.bg_wave-t, 
.bg_wave-b {
    width: 100%;
    aspect-ratio: 96 / 17;
}
.bg_wave-t img, 
.bg_wave-b img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg_wave-map {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 480 / 251;
}
.bg_wave-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.corporateContent {
    position: relative;
    background: var(--sub-color01);
    padding-bottom: 150px;
}

.corporateContent .wideLg {
    margin: 0 auto 0 0;
    position: relative;
    z-index: 1;
}

.corporateContent .flex {
    flex-direction: row-reverse;
    gap: 50px;
}
.corporateContent .flex::after {
    content: "";
    background: url(img/img_corporate02.png) no-repeat center;
    width: 630px;
    aspect-ratio: 63 / 53;
    background-size: 630px;
    position: absolute;
    bottom: -530px;
    right: 0;
}

.corporateContent .flex > * {
  min-width: 0;
}

.corporateContent div:has(> h2) {
    flex: 0 1 15%;
    max-width: 15%;
}

.corporateContent h2 {
    font-size: clamp(33px, 3vw, 50px);
    font-weight: 800;
    color: var(--white);
    line-height: 1.5;
    letter-spacing: 5px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform: translateY(-100px);
}
.corporateContent h2 > b {
    color: var(--sub-color02);
}

.corporateContent .inBox {
    flex: 0 1 30%;
    max-width: 30%;
}

.corporateContent .inBox > p {
    font-size: var(--base-font-size);
    color: var(--white);
    line-height: 2.5;
}

.corporateContent .inBox > p > b {
    font-weight: 600;
    color: var(--sub-color02);
}

.corporateContent .inBox > .btn {
    margin-top: 80px;
}

.corporateContent figure {
    flex: 0 1 55%;
    max-width: 55%;
    max-height: 630px;
    aspect-ratio: 5 / 4;
    border-radius: 0 40px 40px 0;
    overflow: hidden;
}

.corporateContent figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- .businessContent ----- */
.businessContent {
    margin: 300px 0 200px;
    position: relative;
}
.businessContent::before {
    content: "";
    background: url(img/illust_top02.png) no-repeat center;
    width: 480px;
    aspect-ratio: 30 / 13;
    background-size: 480px;
    position: absolute;
    top: -150px;
    left: 0;
    z-index: -1;
}
.businessContent::after {
    content: "";
    background: url(img/illust_top04.png) no-repeat center;
    width: 288px;
    aspect-ratio: 96 / 103;
    background-size: 288px;
    position: absolute;
    top: 75%;
    left: 35px;
    z-index: -1;
}

#top .businessContent .full {
    padding: 0 40px 260px;
    position: relative;
}
#top .businessContent .full::after {
    content: "";
    background: url(img/illust_top03.png) no-repeat center;
    width: 367px;
    aspect-ratio: 367 / 197;
    background-size: 367px;
    position: absolute;
    bottom: -100px;
    right: 0;
    z-index: -1;
}

#top .businessContent .bg_business {
    width: 100%;
    height: auto;
    aspect-ratio: 46 / 15;
    border-radius: 40px;
    overflow: hidden;
}

#top .businessContent .bg_business img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#top .businessContent h3.bgWhite {
    font-size: 40px;
    font-weight: 800;
    text-align: justify;
    line-height: 1.5;
    max-width: 520px;
    padding: 50px 70px;
    border-radius: 40px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    transform: translateY(50%);
}

#top .businessContent h3.bgWhite b {
    font-weight: 800;
    color: var(--main-color01);
}

#top .businessContent ul {
    display: flex;
    gap: 20px 60px;
    flex-wrap: wrap;
    margin-top: 50px;
    justify-content: center;
}

#top .businessContent ul li {
    display: block;
    width: calc((100% - 60px) / 2);
    position: relative;
    counter-increment: number;
}
#top .businessContent ul li::before {
    content: counter(number, decimal-leading-zero);
    font-family: var(--en-font-family);
    font-size: 70px;
    font-weight: bold;
    color: var(--white);
    text-align: center;
    line-height: 160px;
    width: 160px;
    height: 160px;
    background: var(--main-color03);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    margin: 0 auto;
}

#top .businessContent ul li figure {
    width: 100%;
    order: -1;
    border-radius: 40px;
    overflow: hidden;
}

#top .businessContent ul li figure img {
    width: 100%;
    height: auto;
}

#top .businessContent ul li .bgWhite {
    transform: translateY(-80px);
    margin-right: 60px;
    padding: 40px;
    border-radius: 0 40px 0 0;
}

#top .businessContent ul li h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--main-color01);
    line-height: 1.5;
    margin-bottom: 15px;
}

#top .businessContent ul li h3 + p {
    font-size: var(--base-font-size);
    line-height: 2;
    letter-spacing: -0.05em;
    text-align: justify;
}

#top .businessContent .btn {
    margin: 0 auto;
}

/* ----- .groupCorpContent ----- */
.groupCorpContent {
    margin-bottom: 200px;
}

.groupCorpContent .wide {
    background: #0c3f8a;
    border-radius: 40px;
    padding: 0 40px 100px;
}

.groupCorpContent .contentTitle01 {
    color: var(--white);
    text-align: center;
    transform: translateY(-40%);
}

.groupCorpContent .contentTitle01 .en {
    font-size: 100px;
    color: var(--body-text-color);
}

.groupCorpContent .groupCorpList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    justify-content: center;
}

.groupCorpContent .groupCorpList li {
    width: calc((100% - 40px) / 2);
}

.groupCorpContent .groupCorpList li a img {
    width: 100%;
}

.groupCorpContent .btn {
    margin: 100px auto 0;
}

/* ----- .recruitContent ----- */
.recruitContent .full {
    padding: 0 40px;
}

.recruitContent .wideLg {
    margin: 0 0 0 auto;
}

.recruitContent .wideLg .bg_recruit {
    width: 100%;
    height: auto;
    aspect-ratio: 151 / 38;
    border-radius: 40px 0 0 0;
    overflow: hidden;
}

.recruitContent .wideLg .bg_recruit img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recruitContent .inner.flex {
    gap: 100px;
    align-items: center;
    padding-top: 50px;
    margin: 0 auto 0 0;
}

.recruitContent p {
    font-size: var(--base-font-size);
    line-height: 3;
    width: 770px;
}


/* -----------------------------------------------------------
    #corporate
----------------------------------------------------------- */
/* ----- .messageContent ----- */
.messageContent {
    padding: 0 0 100px;
    position: relative;
    border-bottom: 8px solid #0c3f8a;
}
.messageContent::after {
    content: "";
    width: 100%;
    height: 580px;
    background: url(img/bg_messageContent.jpg) no-repeat center;
    position: absolute;
    bottom: 0;
    z-index: -1;
}

.messageContent .inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 80px 40px;
}

.messageContent .inner .title02 {
    color: var(--black);
    background: transparent;
    font-size: calc(var(--base-font-size) * var(--font-scale) * 1.666);
    line-height: 1.5;
}

.messageContent .text p {
    font-size: var(--base-font-size);
    line-height: 2.5;
    text-align: justify;
}

.messageContent .text p:has(.name) {
    text-align: right;
    font-weight: 700;
    line-height: 70px;
    margin-top: 2em;
}

.messageContent .inner .name,
.messageContent .inner .corp {
    display: block;
}

.messageContent .inner .corp {
    font-size: var(--base-font-size)
}

.messageContent .inner .name {
    font-family: "HG行書体", "HGGyoshotai", serif;
    font-size: 60px;
    font-weight: 500;
}

.messageContent .inner figure {
    display: block;
    width: fit-content;
    margin: 0 auto;
    border-radius: 40px;
    overflow: hidden;
}
.messageContent .inner figure img {
    width: 100%;
    height: auto;
}

/* ----- .corporateOutline ----- */
.corporateOutline {
    font-size: var(--base-font-size);
    padding: 150px 0;
}
.corporateOutline.bg01 {
    padding-top: 0;
}

.philosophy figure {
    width: fit-content;
    margin: 0 auto 60px;
    border-radius: 40px;
    overflow: hidden;
}

.philosophy h3 {
    font-size: 66px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 60px;
}
.philosophy h3 b {
    font-weight: 800;
    color: var(--main-color01);
}

.philosophy p {
    text-align: center;
    line-height: 2.5;
}

.values {
    margin-top: 150px;
}

.values th, 
.values td {
    display: block;
    width: 100%;
}

.values th {
    font-size: 22px;
    text-align: center;
}

.values table tr:first-child *:first-child {
  border-radius: 16px 16px 0 0;
}
.values table tr:first-child *:last-child {
  border-top-right-radius: 0;
}
.values table tr:last-child *:first-child {
  border-bottom-left-radius: 0;
}
.values table tr:last-child *:last-child {
  border-radius: 0 0 16px 16px;
}

.profile {
    padding-top: 600px;
    position: relative;
}
.profile::before {
    content: "";
    width: 100%;
    height: 600px;
    background: url(img/bg_profile.jpg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
}
.profile::after {
    content: "";
    width: 1660px;
    height: 200px;
    background: #eee;
    border-radius: 100px 0 0 0;
    position: absolute;
    top: 500px;
    right: 0;
}

.history {
    margin-top: 150px;
    padding: 150px 0;
    overflow: hidden;
    position: relative;
}
.history::before {
    content: "";
    width: 1660px;
    height: 100%;
    background: var(--white);
    border-radius: 0 100px 100px 0;
    position: absolute;
    top: 0;
    left: 0;
}

.history .dl01 {
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
}
.history .dl01::before {
    content: "";
    width: 1px;
    height: 100%;
    background: #ccc;
    position: absolute;
    left: 7px;
}

.history .dl01 > div {
    display: flex;
    gap: 0;
    grid-column: none;
    align-items: baseline;
}
.history .dl01 > div::before {
    content: none;
}

.history .dl01 dt, 
.history .dl01 dd {
    padding: 30px 20px;
}

.history .dl01 dt {
    font-weight: 600;
    color: var(--main-color01);
    padding-left: 120px;
    width: 25%;
    position: relative;
    box-sizing: border-box;
}
.history .dl01 dt::before {
    content: "";
    width: 14px;
    height: 14px;
    background: var(--sub-color01);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.history .dl01 dt::after {
    content: "";
    width: 60px;
    height: 2px;
    background-image: radial-gradient(circle, var(--sub-color01) 1px, transparent 1px);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 6px 2px;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.history .dl01 dt span {
    font-family: var(--en-font-family);
    font-size: 30px;
    font-weight: 800;
}

.history .dl01 dd {
    width: 75%;
    box-sizing: border-box;
}

/* ----- .accessContent ----- */
.accessContent {
    font-size: var(--base-font-size);
    padding-top: 600px;
    position: relative;
}
.accessContent::before {
    content: "";
    width: 100%;
    aspect-ratio: 16 / 5;
    background: url(img/bg_access.jpg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
}
.accessContent::after {
    content: "";
    width: 1660px;
    height: 200px;
    background: var(--white);
    border-radius: 100px 0 0 0;
    position: absolute;
    top: 500px;
    right: 0;
}

.accessContent iframe {
    width: 100%;
    height: 450px;
    border-radius: 40px;
    margin-top: 80px;
}


/* -----------------------------------------------------------
    #group
----------------------------------------------------------- */
/*----- .businessIndex -----*/
.businessIndex {
    margin: 0 0 100px;
    padding: 0 0 100px;
    position: relative;
    z-index: 1;
}

.businessIndex .inner {
    overflow: visible;
}

.businessIndex h2 {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 25px;
}

.businessIndex h2 b {
    font-weight: 900;
    color: var(--main-color01);
}

.businessIndex h2 + p {
    font-size: var(--base-font-size);
    line-height: 2.5;
}

.businessIndex ul {
    display: flex;
    flex-wrap: wrap;
    gap: 70px 40px;
    justify-content: center;
    margin-top: 70px;
}

.businessIndex li {
    display: block;
    width: calc((100% - 40px * 3) / 4);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.businessIndex li a {
    display: block;
    color: var(--body-text-color);
    text-align: center;
    padding-bottom: 35px;
    transition: 0.3s ease;
}
.businessIndex li a:hover {
    transform: scale(1.05);
}

.businessIndex li a::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    background: #f3f3f3 url(./img/ico_arrow-g.png) no-repeat center;
    background-size: 15px;
    border-radius: 50%;
    transform: rotate(90deg);
    transition: 0.3s ease;
    z-index: -1;
}
.businessIndex li a:hover::after {
    background: var(--main-color03) url(./img/ico_arrow-w.png) no-repeat center;
    background-size: 15px;
    transform: rotate(90deg) scale(0.8);
    bottom: -10px;
}

.businessIndex li a > * {
    transition: 0.3s ease;
}

.businessIndex li figure {
    width: 100%;
    height: 180px;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
}
.businessIndex li figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.businessIndex li a .txt {
    font-size: 22px;
    font-weight: 500;
}

.businessIndex li a .txt p {
    line-height: 1.55;
}

/* ----- .businessDetailGroup ----- */
.businessDetailGroup > * {
    padding: 400px 0 0;
    position: relative;
}
.businessDetailGroup > *::before {
    content: "";
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0;
}
.businessDetailGroup > *::after {
    content: "";
    width: 1660px;
    height: 200px;
    background: var(--white);
    border-radius: 100px 0 0 0;
    position: absolute;
    top: 300px;
    right: 0;
}
#business01::before {
    background: url(img/bg_business01.jpg) no-repeat center / cover;
}
#business02::before {
    background: url(img/bg_business02.jpg) no-repeat center / cover;
}
#business03::before {
    background: url(img/bg_business03.jpg) no-repeat center / cover;
}
#business04::before {
    background: url(img/bg_business04.jpg) no-repeat center / cover;
}

.businessDetailGroup .businessDetail {
    padding-bottom: 150px;
}
.businessDetailGroup > div:last-of-type .businessDetail {
    padding-bottom: 0;
}

.businessDetail > .inner > figure {
    margin: 0 auto 50px;
    width: 600px;
    height: 400px;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
}
.businessDetail > .inner > figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.businessDetail p {
    font-size: var(--base-font-size);
    line-height: 2.5;
}
.businessDetail p > span {
    display: block;
    font-size: 26px;
    font-weight: 600;
    color: var(--main-color01);
    margin-bottom: 10px;
}

.groupCorpList h3 {
    font-size: 30px;
    text-align: center;
    padding: 15px 0;
    margin: 50px 0;
    border-top: 5px solid var(--main-color01);
    border-bottom: 5px solid var(--main-color01);
}

.groupCorpList ul {
    margin:  0 60px;
}

.groupCorpList ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px dotted var(--main-color03);
}

.groupCorpList ul li > div > a {
    font-size: var(--base-font-size);
    color: var(--main-color01);
    text-decoration: underline;
    padding-left: 20px;
    position: relative;
    transition: all 0.3s;
}
.groupCorpList ul li > div > a::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--main-color01);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.groupCorpList ul li > div > a:hover {
    opacity: 0.7;
}

.groupCorpList ul li > figure {
    width: 340px;
    border: 2px solid #777;
}
.groupCorpList ul li > figure img {
    width: 100%;
}


/* -----------------------------------------------------------
    #recruit
----------------------------------------------------------- */
/* ----- .recruitCategories ----- */
.recruitCategories {
    padding: 60px 0 40px;
    margin: 80px 0;
    background: #eee;
    border-top: 5px solid #333;
    border-bottom: 5px solid #333;
    position: relative;
}

.recruitCategories h4 {
    font-size: 17px;
    color: var(--white);
    width: fit-content;
    background: var(--main-color01);
    padding: 15px 30px 15px 70px;
    border-radius: 4px;
    position: absolute;
    inset: 0 0 auto 0;
    margin: 0 auto;
    transform: translateY(-50%);
}
.recruitCategories h4::before {
    content: "";
    background: url(img/ico_recruit.png) no-repeat center;
    width: 32px;
    height: 37px;
    background-size: 32px;
    position: absolute;
    left: 30px;
}

.recruitCategories .cats {
    gap: 20px 10px;
}

.recruitCategories .cats a {
    color: var(--body-text-color);
    background: var(--white);
    padding: 5px 20px;
    border: 1px solid #333;
    border-radius: 4px;
}
.recruitCategories .cats a.active {
    color: var(--white);
    background: #333;
}

/* ----- .recruitList ----- */
.recruitList li {
    background: url(img/bg_pattern01.jpg);
    border-radius: 40px;
    margin-bottom: 60px;
}
.recruitList li:last-child {
    margin-bottom: 0;
}

.recruitList li:hover .btn a::before {
    background: #f3f3f3 url(./img/ico_arrow-g.png) no-repeat center;
    background-size: 17px;
    transform: scale(0.8);
}

.recruitList li .inBox {
    background: var(--white);
    border-radius: 40px;
    border: 5px solid var(--main-color01);
}

.recruitList li .inBox > a {
    display: flex;
    gap: 30px;
    padding: 40px;
}

.recruitList li .mainThumb {
    flex-shrink: 0;
    width: 340px;
    aspect-ratio: 17 / 12;
    border-radius: 40px;
    overflow: hidden;
}

.recruitList li .title {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 0 0 20px;
    border-bottom: 3px solid currentColor;
}

p.salary, 
p.corpName, 
p.access, 
p.interview {
    margin-bottom: 5px;
    padding-left: 30px;
    position: relative;
}

p.interview {
    font-size: 17px;
    color: var(--main-color01);
    text-decoration: underline;
    width: fit-content;
    margin: 0 0 0 auto;
}

p.salary::before, 
p.corpName::before, 
p.access::before, 
p.interview::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
p.salary::before {
    background: url(img/ico_salary.png) no-repeat center;
    width: 20px;
    height: 20px;
}
p.corpName::before {
    background: url(img/ico_corpName.png) no-repeat center;
    width: 17px;
    height: 19px;
}
p.access::before {
    background: url(img/ico_access.png) no-repeat center;
    width: 17px;
    height: 24px;
}
p.interview::before {
    background: url(img/ico_interview.png) no-repeat center;
    width: 13px;
    height: 24px;
}

.recruitList li .btn {
    margin: 30px auto;
}
.recruitList li .btn::after {
    content: none;
}

.recruitList li .btn a {
    color: var(--white) !important;
}
.recruitList li .btn a::before {
    width: 70px;
    height: 70px;
    background-size: 17px;
}
.recruitList li .btn a:hover::after {
    opacity: 0;
}
.recruitList li .btn a:hover span {
    opacity: 1;
}

/* -----------------------------------------------------------
    #recruit single
----------------------------------------------------------- */
/* -----  .recruitHead  ----- */
.recruitHead .btn {
    background: var(--main-color01);
    margin: 0 0 50px auto;
    border-radius: 100px;
}

.recruitHead .btn::before {
    width: 67%;
    height: 1px;
    left: auto;
    right: 40px;
    bottom: 20px;
}
.recruitHead .btn::after {
    content: none;
}

.recruitHead .btn a {
    font-size: 16px;
    padding: 30px 40px 30px 70px;
}
.recruitHead .btn a::before {
    background: var(--main-color03) url(./img/ico_arrow-w.png) no-repeat center;
    background-size: 15px;
    width: 50px;
    height: 50px;
    inset: 0 auto 0 1.9em;
    transform: rotate(180deg);
}
.recruitHead .btn a:hover::before {
    background: #f3f3f3 url(./img/ico_arrow-g.png) no-repeat center;
    background-size: 15px;
    transform: scale(0.8) translateX(-10px) rotate(180deg);
}
.recruitHead .btn a:hover span {
    opacity: 1;
}

#recruit .postTitle {
    border: 0;
}

#recruit .mainv {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 40px;
}

.recruitSlider {
  width: 500px;
  aspect-ratio: 5 / 4;
}

.recruitSlider .slick-track::before, 
.recruitSlider .slick-track::after {
    content: none;
}

.recruitSlider .slick-slide {
    width: 500px !important;
    aspect-ratio: 5 / 4;
    border-radius: 10px;
    overflow: hidden;
}

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

.thumbSlider {
  width: 210px;
}

.thumbSlider .slick-track {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100% !important;
  transform: unset !important;
}
.thumbSlider .slick-track::before, 
.thumbSlider .slick-track::after {
    content: none;
}

.thumbSlider .slick-slide {
  width: 100px !important;
  height: 100px;
  opacity: 0.7;
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px;
  box-sizing: border-box;
}
.thumbSlider .slick-slide.slick-current {
  opacity: 1;
  border: 3px solid var(--main-color01);
}

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

body[data-single='true'] p.salary, 
body[data-single='true'] p.corpName, 
body[data-single='true'] p.access, 
body[data-single='true'] p.interview {
    font-size: var(--base-font-size);
}

/* -----  .contactBtn ----- */
.contactBtn {
    display: flex;
    justify-content: center;
}

.recruitHead .contactBtn {
    gap: 40px;
    margin-top: 60px;
}

.recruitSingleSide .side-nav .contactBtn {
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.recruitSingleSide .side-nav .contactBtn > a, 
.recruitSingleSide .side-nav .contactBtn > figure {
    text-align: center;
}

/* -----  .recruitSingleLayout ----- */
.recruitSingleLayout {
    border-top: 5px solid var(--main-color01);
    margin-top: 60px;
    padding-top: 60px;
}

.recruitSingleLayout > .inner.flex {
    gap: 60px;
}

/* -----  .recruitSingleSide ----- */
.recruitSingleSide {
    width: 280px;
}

.recruitSingleSide .side-nav {
    position: sticky;
    top: 150px;
    display: flex;
    flex-direction: column;
    padding: 40px 0;
    background: #f3f3f3;
    border-radius: 40px;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
}

.recruitSingleSide .nav-link {
    font-size: var(--base-font-size);
    font-weight: 600;
    color: var(--body-text-color);
    text-align: center;
    padding: 20px;
    background: var(--white);
    border-bottom: 2px solid var(--main-color03);
    transition: 0.2s;
    position: relative;
}
.recruitSingleSide .nav-link:first-child {
    border-top: 2px solid var(--main-color03);
}
.recruitSingleSide .nav-link.active {
    background: var(--main-color01);
    color: #fff;
}
.recruitSingleSide .nav-link::before {
    content: "";
    background: url(img/img_triangle.png) no-repeat center;
    width: 22px;
    height: 25px;
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    opacity: 0;
    transition: 0.2s;
}
.recruitSingleSide .nav-link.active::before {
    opacity: 1;
}

/* -----  .recruitSingleData ----- */
.recruitSingleData {
    width: 760px;
}

.recruitSingleData table {
    border: 0;
    margin-bottom: 60px;
}
.recruitSingleData table:last-child {
    margin-bottom: 0;
}

.recruitSingleData caption {
    font-size: 22px;
    font-weight: 500;
    color: var(--white);
    text-align: center;
    background: var(--main-color01);
    padding: 15px;
    border: 1px solid var(--main-color01);
    border-radius: 16px 16px 0 0;
}

.recruitSingleData .wysiwyg {
    font-size: 16px;
}

.recruitSingleData th, 
.recruitSingleData td {
    display: block;
    width: 100%;
}

.recruitSingleData th {
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    padding: 15px;
    background: var(--main-color03);
    border: 1px solid var(--main-color03);
}

.recruitSingleData td {
    padding: 20px 30px;
    border: 1px solid #ccc;
}

.recruitSingleData table tr:first-child *:first-child {
    border-top-left-radius: 0;
}
.recruitSingleData table tr:first-child *:last-child {
    border-top-right-radius: 0;
}
.recruitSingleData table tr:last-child *:first-child {
    border-bottom-left-radius: 0;
}
.recruitSingleData table tr:last-child *:last-child {
    border-radius: 0;
}

/* -----  #form ----- */
#recruit #form {
    margin-top: 150px;
    padding-top: 460px;
    position: relative;
}
#recruit #form::before {
    content: "";
    width: 100%;
    height: 460px;
    background: url(img/bg_recruit_form.jpg) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
}
#recruit #form::after {
    content: "";
    width: 1660px;
    height: 200px;
    background: var(--white);
    border-radius: 100px 0 0 0;
    position: absolute;
    top: 360px;
    right: 0;
}

#recruit #form .jobTitle {
    display: flex;
    gap: 50px;
    font-size: var(--base-font-size);
    margin-bottom: 40px;
    padding: 20px 30px;
    border: 3px solid currentColor;
    border-radius: 16px;
}

#recruit #form .jobTitle span {
    font-weight: 600;
    white-space: nowrap;
}


/* -----------------------------------------------------------
    #news
----------------------------------------------------------- */
/* -----  .newsLayout ----- */
.newsLayout {
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.newsLayout .main {
    width: 790px;
}

/* ----- .newsSide ----- */
#news .newsSide {
    width: 250px;
}

#news .newsSide h3 {
    font-size: var(--base-font-size);
    font-weight: 500;
    border-bottom: solid 3px currentColor;
    padding: 0 10px 10px 15px;
    position: relative;
}
#news .newsSide h3::before {
    content: "";
    width: 5px;
    height: 15px;
    background: var(--main-color01);
    border-radius: 3px;
    position: absolute;
    top: 18px;
    left: 0;
    transform: translateY(-50%);
}
#news .newsSide *+h3 {
    margin-top: 50px;
}

#news .newsSide .categories .cats .cat {
    font-size: 16px;
    color: var(--body-text-color) !important;
    background: none;
    width: 100%;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid currentColor;
}

#news .newsSide ul {
    display: block !important;
    width: 250px !important;
    margin: 20px 0;
}

#news .newsSide ul li {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 15px !important;
    width: 100%;
    padding: 0 0 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--main-color03) !important;
    border-radius: 0;
}
#news .newsSide ul li:last-child {
    border-bottom: 1px solid var(--main-color03) !important;
}
#news .newsSide ul li + li {
    margin-top: 20px;
}
#news .newsSide ul li:hover {
    transform: scale(1);
}

#news .newsSide ul li .thumbnail a {
    display: block;
    width: 65px;
    height: 65px;
    border-radius: 4px;
    overflow: hidden;
}
#news .newsSide ul li .thumbnail a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#news .newsSide ul li a.text {
    transition: 0.3s;
}
#news .newsSide ul li a.text:hover {
    opacity: 0.7;
}

#news .newsSide ul li .title {
    font-size: 16px;
    font-weight: 500;
    color: var(--body-text-color);
    padding: 0;
    margin-bottom: 10px;
}

#news .newsSide ul li .date, 
#news .newsSide ul li .cats a {
    font-size: 14px;
    font-weight: 500;
    color: #777 !important;
    line-height: 1.5;
}

#news .newsSide ul li .cats {
    display: inline-block;
    position: static;
    line-height: 1.2;
}

#news .newsSide ul li .cats a {
    display: inline-block;
    padding: 0;
    margin-right: 5px;
    background: none;
    border: 0;
}

#news .newsSide select {
    font-family: var(--base-font-family);
    font-weight: 500;
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    background: #f1f1f1;
    border: 1px solid #bbb;
    border-radius: 4px;
    cursor: pointer;
}

/* ----- .newsList ----- */
#news .newsList ul li {
    display: flex;
    gap: 30px;
    border-top: 5px solid var(--main-color01);
    padding: 40px 0;
}
#news .newsList ul li:last-child {
    border-bottom: 5px solid var(--main-color01);
}

#news .newsList .mainThumb {
    width: 220px;
    aspect-ratio: 11 / 9;
    border-radius: 10px;
    overflow: hidden;
}

#news .newsList .inBox {
    width: 540px;
}

#news .newsList .inBox .flex {
    justify-content: flex-start;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

#news .newsList .title {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 10px;
}

#news .newsList p {
    font-size: var(--base-font-size);
}

#news .newsList li .cats a {
    font-size: 16px;
    background: none;
    padding: 7px 15px 8px;
    border: 1px solid currentColor;
    border-radius: 50px;
}

/* -----------------------------------------------------------
    #news single
----------------------------------------------------------- */
.newsSingle .time {
    font-size: 16px;
    font-weight: 500;
    color: #777;
    text-align: end;
    margin-top: 10px;
}

.newsSingle .main .cats a {
    color: var(--body-text-color);
    background: none;
    border: 1px solid currentColor;
    border-radius: 50px;
}

.newsSingleDetail {
    margin-top: 30px;
}

.newsSingleDetail figure {
    width: 100%;
    margin: 30px 0 60px;
}
.newsSingleDetail figure img {
    width: 100%;
}


/* -----------------------------------------------------------
    #contact
----------------------------------------------------------- */
body[data-pagename='cmp'] .articleContents {
    font-size: var(--base-font-size);
}

body[data-pagename='cmp'] .btn {
    margin-top: 60px;
}

/* -----------------------------------------------------------
    form
----------------------------------------------------------- */
#main .formBox {
    margin-bottom: 100px;
}

#main .formBox table {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin: 20px auto 0;
}

.formBox table th,
.formBox table td {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    line-height: 1.3;
    vertical-align: top;
}

.formBox table th {
    width: 30%;
    vertical-align: middle;
    background: #333;
    position: relative;
    line-height: 1;
    font-size: var(--base-font-size);
    padding: 25px 20px;
}

.formBox table td {
    position: static;
    padding: 25px 20px;
    vertical-align: middle;
}

.formBox table td.flex {
    gap: 40px;
}
.formBox table td.flex > div {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: var(--base-font-size);
}
.formBox table td.flex > div p {
    white-space: nowrap;
}

.wpcf7-form-control-wrap[data-name='your-age'] {
    width: 150px;
}

.formBox table th p,
.formBox table td p {
    margin-bottom: 0 !important;
}

.formBox table th span {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    background: #ccc;
    color: var(--white);
    margin-left: 0.5em;
    padding: 5px 5px 7px;
    border-radius: 4px;
    height: fit-content;
}

.formBox table th span.req {
    background: var(--sub-color03);
}

.formBox table td .wpcf7-form-control.wpcf7-radio {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 10px;
    font-size: var(--base-font-size);
}

.formBox table td .wpcf7-form-control.wpcf7-radio .wpcf7-list-item {
    margin: 0;
}

.formBox input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]),
.formBox select,
.formBox textarea {
    font-size: 16px;
    padding: 5px;
    width: 380px;
    border: 1px solid #999;
    /* box-sizing: border-box; */
    /* border-boxを指定する際は環境によっては見えなくなるので十分なheightを指定する */
    background: var(--white);
    border-radius: 4px;
    width: calc(100% - 10px);
}

.formBox input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]),
.formBox select {
    height: 40px;
    /* box-sizing: border-box; */
    /* border-boxを指定する際は環境によっては見えなくなるので十分なheightを指定する */
}

.formBox input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"])::placeholder,
.formBox textarea::placeholder {
    color: #ddd;
    font-weight: 400;
}

.formBox select {
    width: 300px;
}

.formBox textarea {
    /* height: 60px; */
    width: calc(100% - 20px);
}

.formBox .accept {
    border-radius: 6px;
    text-align: center;
    padding: 20px;
    margin: 10px 0 0;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.formBox .accept .wpcf7-list-item-label {
    font-size: 16px;
    font-weight: 500;
}

.formBox .accept input[type="checkbox"] {
    vertical-align: text-bottom;
}

.formBox .accept small {
    display: inline-block;
    line-height: 1;
    font-size: 14px;
    margin-top: 0.35em;
}

.formBox .accept small a {
    color: var(--main-color03);
}


.formBox input[type="checkbox"],
.formBox input[type="radio"] {
    transform: scale(1.5);
    margin: 0 6px 0 0;
}

.wpcf7-not-valid-tip {
    font-size: 16px;
    margin-top: 5px;
}

.formBox .submit {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}
.formBox .submit::before, 
.formBox .submit::after {
    content: none;
}

.formBox input[type="submit"] {
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
    padding: 30px 50px;
    background: var(--main-color01);
    border-radius: 50px;
    border: 2px solid var(--main-color03);
    cursor: pointer;
}
.formBox input[type="submit"]:disabled {
    color: var(--white) !important;
    cursor: default;
    background: #ccc;
    transition: all 0.3s ease;
    border: 2px solid #aaa;
    cursor: default;
}

.formBox .wpcf7-spinner {
    display: none !important;
	margin: 10px auto 0;
}
.submitting .formBox .wpcf7-spinner {
    display: block !important;
}

.formBox .wpcf7-list-item-label {
    vertical-align: text-bottom;
}

#main .formBox .privacyBox {
    padding: 60px 60px 45px;
    background: #eee;
    display: block;
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: 16px;
}

#main .formBox .privacyBox dt {
    font-size: var(--base-font-size);
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

#main .formBox .privacyBox dd {
    font-size: var(--base-font-size);
    line-height: 2;
}

#main .formBox .privacyBox dd a {
    color: var(--main-color01);
    text-decoration: underline;
    transition: all 0.3s;
}
#main .formBox .privacyBox dd a:hover {
    opacity: 0.7;
}


/* -----------------------------------------------------------
    #privacy
----------------------------------------------------------- */
#privacy .wysiwyg .lead {
    background:#eee;
    margin-bottom: 80px;
    padding: 60px;
}
#privacy .wysiwyg .lead > p {
    width: fit-content;
    margin: 0 auto;
}

#privacy .wysiwyg .border-bottom1 {
    padding-bottom: 30px;
    border-bottom: 2px solid var(--main-color03);
}

#privacy .wysiwyg .border-bottom1 > *:last-child {
    margin-bottom: 0;
}

#privacy .wysiwyg .border-bottom1 h3 {
    font-size: 30px;
    color: var(--main-color01);
    background: none;
    margin: 30px 0 20px;
    padding: 0;
}