@charset "utf-8";
:root {
--c-main: var(--c-sea-green);
--c-sub: #2f8645;
--c-accent: var(--c-flamenco);
--c-barley-white: #fff5ce;
--c-dove-gray: #707070;
--c-gray-1: #bbb;
--c-pink-swan: #bbb;
--c-gray-2: #888;
--c-red: #d64045;
--c-error: #d64045;
--font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
--header-height: 98.8px;
--mask-buildings: url('data:image/svg+xml;utf8,')
no-repeat center / contain;
/* アスペクト比 10:17 */
--mask-caret-right: url('data:image/svg+xml;utf8,')
no-repeat center / contain;
--mask-chevron-down: url('data:image/svg+xml;utf8,')
no-repeat center / contain;
--mask-chevron-down-aspect-ratio: 7 / 4;
--mask-chevron-left: url('data:image/svg+xml;utf8,')
no-repeat center / contain;
--mask-chevron-left-aspect-ratio: 11 / 20;
--mask-chevron-right: url('data:image/svg+xml;utf8,')
no-repeat center / contain;
--mask-chevron-right-aspect-ratio: 11 / 20;
--mask-comment-dots: url('data:image/svg+xml;utf8,')
no-repeat center / contain;
--mask-link: url('data:image/svg+xml;utf8,')
no-repeat center / contain;
--mask-list-ul: url('data:image/svg+xml;utf8,')
no-repeat center / contain;
--mask-list-ul-aspect-ratio: 9 / 8;
--mask-newspaper: url('data:image/svg+xml;utf8,')
no-repeat center / contain;
--mask-pencil: url('data:image/svg+xml;utf8,')
no-repeat center / contain;
--mask-users: url('data:image/svg+xml;utf8,')
no-repeat center / contain;
--size-radio-btn-1-marker: 20px;
--size-check-box-1-marker: 18px;
}
html {
scroll-behavior: smooth;
}
@media (max-width: 737px) {
:root {
--header-height: 60px;
}
}
/*記事の行間*/
@media screen and (max-width: 737px) {
.post-single-content p {
margin: 1.4em 0;
}
}
::marker {
color: var(--c-sea-green);
}
/*グレーフォント*/
p .gray {
font-size: 16px;
}
.post-single-content .thumb-inline-link {
font-size: 16px;
}
.post-single-content li,
.post-single-content p {
line-height: 1.8;
}
post-single-content .corporate-information-table {
margin-bottom: 40px;
}
/*ウィジェット見出し*/
.textwidget p,
.textwidget h4 {
text-align: left;
}
/*アーカイブコンポーネント余白*/
.common-matome-list .item .txt,
.common-matome-list li .txt {
padding: 0 0 0 20px;
}
@media screen and (max-width: 737px) {
.common-matome-list .item .txt,
.common-matome-list li .txt {
padding: 0 0 0 4vw;
}
}
/*スタディサプリボタン*/
.studysapuri a {
padding: 0 40px;
background-color: var(--c-sea-green);
}
/* アドセンス系 */
.ad-bottom {
max-width: 100%;
margin: 24px auto;
text-align: center;
overflow: hidden
}
.ad-type-m {
width: 336px
}
.ad-content-under .ad-w {
display: inline-block;
width: 49.4%;
margin: 1em 0 .7em
}
/*上部広告枠*/
.ad-content-under {
margin: 20px;
}
#ad-postunder {
margin: 20px auto 20px
}
.ad-center-text {
margin: 10px auto 10px;
text-align: center;
}
.ad-center-text p {
font-size: 18px;
}
.google-auto-placed {
padding-bottom: 16px
}
/* アフィリエイト系 */
.af-section {
border-top: dotted 2px gray;
border-bottom: dotted 2px gray;
padding: 30px 0 10px;
margin-bottom: 20px;
position: relative;
font-size: 18px;
line-height: 1.625;
font-weight: 500;
color: #333
}
.af-btn a .text {
font-size: 18px;
}
@media screen and (max-width: 737px) {
.af-section {
font-size:16px
}
}
.af-btn {
margin: 0;
}
.af-btn a .btn {
color: #333;
}
.af-section {
margin: 2em 0;
border: none;
padding: 18px 0px;
position: relative;
border-radius: 8px;
font-size: 18px;
}
/*ボックス 20200724*/
.ul-box {
margin: 1em 0;
border: 1px solid #bbb;
padding: 12px 30px 12px 40px;
position: relative;
border-radius: 8px;
font-size: 18px;
list-style: disc;
}
.post-single-content .border-box,
.post-single-content .gray-box {
padding: 4px 30px 18px 40px;
}
.post-single-content .border-box.outside-title {
margin: 2em 0;
padding: 18px 30px 18px 40px;
}
.post-single-content .border-box .title + p,
.post-single-content .border-box p:first-child {
margin: 1em 0;
}
/*吹き出し*/
.speech-bubble .img {
position: absolute;
top: -5px;
}
.speech-bubble.right .img {
left: 0;
}
.speech-bubble .img {
right: 0;
}
.speech-bubble {
position: relative;
}
.speech-bubble.right {
padding-left: 75px;
}
.speech-bubble .img img {
width: 50px !important;
height: 50px;
position: inherit !important;
border-radius: 50%;
top: inherit !important;
left: inherit !important;
}
.speech-bubble .txt::after {
top: 12px !important;
}
.speech-bubble .txt::after {
content: '';
position: absolute;
top: 10px !important;
margin-top: -11px !important;
right: -19px !important;
width: 34px !important;
height: 17px !important;
background: #fff !important;
border-top: 1px solid #bbb !important;
}
.speech-bubble .txt::before {
content: '';
position: absolute;
top: 4px !important;
margin-top: -11px !important;
right: -18px !important;
width: 27px !important;
height: 17px !important;
background: transparent !important;
border-bottom: 1px solid #bbb !important;
transform: rotate(-42deg);
z-index: 99;
}
.speech-bubble.right .txt::after {
right: auto;
left: -20px !important;
transform: inherit !important;
}
.speech-bubble.right .txt::before {
right: auto;
left: -30px;
transform: rotate(222deg);
top: 17px !important;
}
/*キャプション*/
.wp-caption-text a {
font-size: 16px;
}
/*キャプションの上の余白*/
.wp-caption-dd {
margin: -15px 0;
}
.summary-box {
margin: 40px 0 0;
border-top: 2px dotted var(--c-sea-green);
padding-top: 20px;
}
.lead-box {
padding: 30px 0 16px;
font-size: 18px;
margin: 40px 0;
border-block: 1px solid var(--c-sea-green);
}
@media screen and (max-width: 737px) {
.lead-box {
font-size: 16px;
margin: 25px 0;
padding: 20px 0 8px;
}
}
.indexes-list {
margin-bottom: 60px;
}
.title-phrase {
display: inline;
background: linear-gradient(
transparent 60%,
#c6f4bc 60%,
#c6f4bc 90%,
transparent 0%
);
font-weight: bolder;
}
/*トップページ余白*/
.bg-padding01 {
padding: 1px 0 20px;
}
.bg-padding-default {
padding: 40px 0 60px;
}
.bg-padding02 {
padding: 1px 0 40px;
}
/*uenimo200506 トップページアイキャッチサイズ*/
.single .bg-padding01 {
padding: 1px 0 0;
}
.common-img-title-list li a {
display: flex;
align-items: center;
padding: 5px;
min-height: 60px;
height: 100px;
}
.common-img-title-list li a .img {
width: 38.2%;
padding-top: 90px;
border-radius: 4px;
overflow: hidden;
}
.common-img-title-list li a .txt {
width: calc(100% - 38.2%);
padding: 0;
padding-left: 10px;
font-size: 20px;
line-height: 1.2857142857;
text-align: left;
}
@media screen and (max-width: 737px) {
.common-img-title-list li a {
height: inherit;
}
.common-img-title-list li a .img {
padding-top: 31.8206%;
}
.common-img-title-list li a .txt {
font-size: 14px;
}
}
/*uenimo200605 AmazonLP*/
.f-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}
.mx-auto {
margin: 0 auto;
}
.d-block {
display: block;
}
img.d-block {
width: 100px;
padding: 20px 0 20px;
}
.col5,
.col2 {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: inherit;
-ms-flex-align: inherit;
-webkit-align-items: inherit;
align-items: inherit;
position: relative;
width: 100%;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col2 {
align-items: center;
width: 50px;
max-width: 100px;
}
.mt0 {
margin-top: 0 !important;
}
.mb0 {
margin-bottom: 0 !important;
}
.border-box-green {
border: 2px solid var(--c-sea-green);
}
.border-box-green h3 {
background: var(--c-sea-green);
color: #fff;
text-align: center;
margin: 0;
padding-left: 0;
}
.border-box-green .inner {
padding: 1.5em;
margin-bottom: 0;
}
p.text-center {
text-align: center;
}
p.text-o {
color: #f1a400;
font-weight: bold;
}
h3.none-b:before {
content: '';
display: block;
width: inherit;
height: inherit;
position: inherit;
top: inherit;
left: inherit;
border: inherit;
border-radius: inherit;
box-sizing: border-box;
}
.post-single-content .box p:first-child {
margin: 0;
}
.post-single-content .box p:last-child {
margin-bottom: 0;
}
.flow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flow > li {
padding: 20px 30px;
margin-bottom: 8vh;
-ms-flex-preferred-size: 48%;
flex-basis: 33.33333%;
border: 2px solid var(--c-sea-green);
position: relative;
}
.flow > li:not(:first-child) {
border-left: 0;
}
.flow > li:not(:last-child)::before,
.flow > li:not(:last-child)::after {
content: '';
border: solid transparent;
position: absolute;
top: 50%;
left: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.flow > li:not(:last-child)::before {
border-width: 22px;
border-left-color: var(--c-sea-green);
}
.flow > li:not(:last-child)::after {
border-width: 20px;
border-left-color: #fff;
}
.flow > li .icon {
font-size: 18px;
color: #fff;
background: var(--c-sea-green);
padding: 5px 20px;
display: block;
border-radius: 20px;
position: absolute;
top: -10px;
left: -10px;
z-index: 100;
}
.flow > li dl dt {
font-size: 20px;
font-weight: 600;
color: var(--c-sea-green);
margin: 20px 0;
}
@media screen and (max-width: 737px) {
.f-container {
display: block;
width: auto;
margin: 0 4vw;
}
.col5,
.col2 {
width: auto;
margin: 0;
padding: 0 !important;
}
.col2 {
align-items: center;
width: 50px;
max-width: 100px;
margin: 0 auto;
}
.flow {
display: block;
width: auto;
margin: 0 4vw;
padding: 0 !important;
}
.flow > li {
display: block;
border-left: 2px solid var(--c-sea-green) !important;
margin-bottom: 5vh;
}
.flow > li {
border-left: 0;
}
.flow > li:not(:last-child)::before,
.flow > li:not(:last-child)::after,
.flow > li::before,
.flow > li::after {
content: '';
border: solid transparent;
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.flow > li:not(:last-child)::before,
.flow > li::before {
border-width: 22px;
border-top-color: var(--c-sea-green);
}
.flow > li:not(:last-child)::after,
.flow > li::after {
border-width: 20px;
border-top-color: #fff;
}
}
/*uenimo200605 AmazonLP ここまで */
/*アーカイブコンポーネント コンパクト版 20200724*/
ul.common-matome-list-slim {
margin: 20px -15px 34px;
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
.common-matome-list-slim li.item {
list-style: none;
width: 340px;
margin: -1px 15px 0;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
}
.common-matome-list-slim .img-wrap {
/*padding-top: 66.6%;*/
position: relative;
border-radius: 4px;
overflow: hidden;
}
.common-matome-list-slim .img {
width: 80px;
}
.common-matome-list-slim li a {
display: flex;
align-items: center;
/*border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;*/
padding: 10px;
height: 100%;
text-decoration: none;
}
.common-matome-list-slim .txt {
/* font-size: 14px; */
width: calc(100% - 120px);
font-size: 16px;
font-weight: 500;
line-height: 1.625;
color: #333;
padding: 0 10px;
}
.common-matome-list-slim li.item p {
display: none;
}
.common-matome-list-slim li a {
padding: 10px !important;
}
.common-job-cat-list dd {
height: calc(100% - 200px);
}
.common-job-cat-list li {
border-bottom: none;
}
.common-job-cat-list li a {
padding: 6px 15px;
}
.common-job-cat-list dt .img .img-wrap {
padding: 0px;
}
/*.txt {
font-size: 14px !important;
}*/
@media screen and (max-width: 737px) {
.common-job-cat-list li a {
font-size: 14px;
}
.common-job-cat-list dd .last-link a {
font-size: 14px;
}
}
.column_category-job-interview-cat .push-btn01.-slim {
margin-top: 20px;
}
/*.common-matome-list .item .txt, .common-matome-list li .txt {
font-size: 14px;
}*/
/*.common-matome-list .item .img, .common-matome-list li .img {
width: 80px;
}*/
/*uenimo20200916*/
.post-single-content .border-box,
.post-single-content .gray-box,
.post-single-content .lead-box {
padding: 18px 30px;
}
.post-single-content .ul-box {
padding: 18px 30px;
}
.post-single-content .border-box.outside-title {
margin: 2em 0;
padding: 18px 30px 18px 30px;
}
.post-single-content ul {
margin: 0;
}
.post-single-content .title + ul,
.post-single-content .title + ol {
margin-top: 18px;
margin-bottom: 0;
}
.post-single-content .border-box.inside-title .title + p:first-child {
margin-top: 0 !important;
}
.post-single-content .title + p:only-child,
.post-single-content p:only-child {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.post-single-content p:last-child {
margin-bottom: 0;
}
.post-single-content .border-box.outside-title .title + p:first-child,
.post-single-content .border-box p:first-child {
margin-top: 0;
}
.post-single-content .border-box.inside-title .title,
.post-single-content .border-box .title + p:last-child {
margin-bottom: 0;
}
/*就職するコンポーネント*/
.base-inner1 .common-img-title-list.-with-border.common-img-title-list1 {
width: 1200px;
margin: -15px -100px 0;
}
/*Youtube埋め込み*/
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
/*サムネイル付きリンクのボックスサイズ*/
.post-single-content .thumb-inline-link {
width: 100%;
}
/*職業まとめボックス*/
.job_matome_set {
margin-bottom: 30px;
}
.l-container--1 {
margin: 0 auto;
width: min(500px, calc(100% - 30px));
}
.c-btn--2 {
background: var(--c-sea-green);
border: none;
border-radius: 14px;
color: #fff;
padding: 5px 16px;
}
/**
* 職業口コミ投稿キャンペーンページ（/kuchikomi-campaign/）
* by WEB DESIGN 84
* start
*/
.c-bg--gray {
background: #f2f2f2;
}
.c-plus-icon,
.c-chevron-down-icon {
height: 3rem;
position: relative;
width: 3rem;
}
.c-plus-icon::before,
.c-plus-icon::after {
background: var(--c-sea-green);
content: '';
left: 0;
height: 2px;
position: absolute;
top: 50%;
width: 100%;
}
.c-plus-icon::after {
transform: rotate(90deg);
}
.c-chevron-down-icon::before,
.c-chevron-down-icon::after {
background: var(--c-sea-green);
content: '';
height: 2px;
position: absolute;
top: 50%;
width: calc(100% / 1.73205080757 - 0.1rem);
}
.c-chevron-down-icon::before {
left: 0;
transform: rotate(30deg);
}
.c-chevron-down-icon::after {
right: 0;
transform: rotate(-30deg);
}
.p-amazon-campaign {
border-collapse: collapse;
margin: 0 auto;
max-width: 600px;
table-layout: fixed;
width: 100%;
}
.p-amazon-campaign * {
letter-spacing: 0.1rem;
}
.p-amazon-campaign td {
padding: 1.5rem;
}
.p-amazon-campaign img {
display: block;
margin: 0 auto;
max-width: 200px;
width: 100%;
}
.p-amazon-campaign .post-single-content p {
margin: 0;
}
.p-amazon-campaign .c-plus-icon,
.p-amazon-campaign .c-chevron-down-icon {
margin: 0 auto;
}
.p-review-steps {
counter-reset: i;
display: flex;
list-style: none;
padding-left: 0;
}
.post-single-content .p-review-steps__item {
align-items: center;
display: flex;
flex: 0 0 calc((100% - ((100% - 40px * 2) / 3)) / 2);
margin: 0;
position: relative;
}
.post-single-content .p-review-steps__item::before {
color: #fff;
content: counter(i);
counter-increment: i;
left: 2.3rem;
position: absolute;
top: 3rem;
z-index: 10;
}
.post-single-content .p-review-steps__item:last-child {
flex: 0 0 calc((100% - 40px * 2) / 3);
}
.p-review-steps__item:not(:last-child)::after {
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.5%22%3E%3Cpath%20d%3D%22M36.25%202.003l27.5%2047.632%22%20fill%3D%22none%22%20stroke%3D%22%2375cb64%22%20stroke-width%3D%221.995872%22%2F%3E%3Cpath%20d%3D%22M31.225%209.412l29.859%2032.442%22%20fill%3D%22none%22%20stroke%3D%22%2375cb64%22%20stroke-width%3D%221.6%22%20transform%3D%22matrix(-.21939%20-1.10213%201.04961%20-.45382%2033.221%20136.682)%22%2F%3E%3C%2Fsvg%3E')
no-repeat;
content: '';
display: block;
flex: 0 0 40px;
height: 5rem;
width: 5rem;
}
.p-review-step {
border-radius: 4px;
flex: 1;
height: 100%;
overflow: hidden;
padding: 5rem 2rem 2rem;
position: relative;
}
.p-review-step::before {
border-color: var(--c-sea-green) transparent transparent transparent;
border-style: solid;
border-width: 100px 100px 0 0;
content: '';
height: 0;
left: 0;
position: absolute;
top: 0;
width: 0;
}
.p-review-step::after {
color: #fff;
content: 'STEP';
font-size: 1.4rem;
left: 1rem;
letter-spacing: 0.25rem;
position: absolute;
top: 0.8rem;
}
.p-review-step__img {
margin: 0 auto;
max-width: 130px;
}
.p-review-step__ttl {
font-size: 1.6rem;
font-weight: bold;
}
.p-review-step__desc {
font-size: 1.4rem;
}
.u-bd--green {
border: 1px solid var(--c-sea-green);
}
.u-bd--orange {
border: 1px solid #f1a400;
}
.u-br--10 {
border-radius: 10px;
}
.post-single-content .u-fc--orange {
color: #f1a400;
}
.u-fs--1_5 {
font-size: 1.5rem;
}
.u-fs--2_5 {
font-size: 2.5rem;
}
.u-fs--3 {
font-size: 3rem;
}
.u-mb--1_5 {
margin-bottom: 1.5rem;
}
.u-mb--2 {
margin-bottom: 2rem;
}
.u-mb--3 {
margin-bottom: 3rem;
}
.u-mt--2 {
margin-top: 2rem;
}
.u-p--1_5 {
padding: 1.5rem;
}
.u-ta--c {
text-align: center;
}
.u-ws--n {
white-space: nowrap;
}
@media (max-width: 600px) {
.p-review-steps,
.p-review-steps__item {
flex-direction: column;
}
.p-review-steps {
align-items: center;
}
.p-review-steps__item {
max-width: 250px;
}
.p-review-step {
width: 100%;
}
.p-review-steps__item:not(:last-child)::after {
flex: auto;
transform: rotate(90deg);
}
}
@media (max-width: 425px) {
.u-fs--1_5 {
font-size: 1rem;
}
.u-fs--2_5 {
font-size: 2rem;
}
.u-fs--3 {
font-size: 2.5rem;
}
}
/**
* 職業口コミ投稿キャンペーンページ（/kuchikomi-campaign/）
* by WEB DESIGN 84
* end
*/
/**
* TOPカルーセル除去
* by WEB DESIGN 84
* 2021/03/01
* start
*/
.top-pickup-list {
flex-wrap: wrap;
justify-content: flex-start;
margin: -15px;
overflow: hidden;
}
.top-pickup-list .item {
flex: 0 0 25%;
margin: 0;
min-width: 0;
padding: 15px;
width: auto;
}
@media (max-width: 737px) {
.top-pickup-list {
display: flex;
white-space: normal;
}
.top-pickup-list .item {
flex-basis: 50%;
}
}
.u-flex--4 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: -15px;
overflow: hidden;
}
.u-flex--4 .item {
flex: 0 0 25%;
margin: 0;
min-width: 0;
padding: 15px;
width: auto;
}
@media (max-width: 737px) {
.u-flex--4 .item {
flex-basis: 50%;
}
}
/**
* TOPカルーセル除去
* by WEB DESIGN 84
* 2021/03/01
* end
*/
/**
* ボタングレーアウト
* by WEB DESIGN 84
* 2021/04/06
* start
*/
.u-btn-gray-out {
cursor: not-allowed !important;
filter: grayscale(1);
pointer-events: none !important;
}
@media (max-width: 480px) {
.page-template-page-reviews_entry_reviews .form-border-wrap .section .circle-fill-hd01-wrap {
flex-direction: column;
align-items: flex-start;
}
.page-template-page-reviews_entry_reviews .form-border-wrap .section .circle-fill-hd01-wrap .content-count-wrap {
margin-left: 0;
}
}
.u-mb--1 {
margin-bottom: 1rem;
}
/**
* ボタングレーアウト
* by WEB DESIGN 84
* 2021/04/06
* end
*/
/**
* 「つづきを読む」ボタン
* by WEB DESIGN 84
* 2021/04/12
* start
*/
.c-bg-btn--green {
background: var(--c-sea-green);
border-radius: 6px;
cursor: pointer;
font-size: 20px;
font-weight: 700;
padding: 1rem;
text-align: center;
transition: .3s;
}
.c-bg-btn--green:hover {
background: var(--c-peppermint);
}
.c-link--ul {
color: var(--c-mackerel);
text-decoration: underline;
}
.c-link--ul:hover {
text-decoration: none;
}
.post-single-content a.c-link--ul {
text-decoration: underline;
}
.p-read-more {
position: relative;
}
.p-read-more__trigger {
display: none;
}
.p-read-more__blur {
background: linear-gradient(180deg, rgba(255, 255, 255, 0), 40%, #fff);
bottom: 100%;
content: '';
height: 10rem;
left: 0;
position: absolute;
width: 100%;
}
.p-read-more__btn {
display: block;
}
.p-read-more__btn.c-bg-btn--green {
margin: 0 auto;
position: relative;
width: min(300px, 100%);
}
.p-read-more__btn.c-bg-btn--green::after {
border-radius: 2px;
border-right: 4px solid #fff;
border-top: 4px solid #fff;
content: '';
height: 10px;
margin-top: -2px;
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%) rotate(135deg);
transition: .3s;
width: 10px;
}
.p-read-more__btn.c-bg-btn--green:hover::after {
border-color: var(--c-sea-green);
}
.p-read-more__contents {
max-height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transition: max-height .3s ease-out, opacity .2s ease-out .2s;
z-index: -1;
}
.p-read-more__trigger:not(:checked) ~ .p-read-more__btn {
margin: 2rem auto 2rem;
}
.p-read-more__trigger:checked ~ :where(.p-read-more__btn, .p-read-more__blur) {
display: none;
}
.p-read-more__trigger:checked ~ .p-read-more__contents {
max-height: 100%;
opacity: 1;
pointer-events: auto;
z-index: 1;
}
p + .p-read-more > .p-read-more__trigger:checked ~ .p-read-more__contents {
margin-top: -1em;
}
@media (max-width: 737px) {
p + .p-read-more > .p-read-more__trigger:checked ~ .p-read-more__contents {
margin-top: -1.4em;
}
}
.post-single-content .p-read-more__contents h3:first-child {
margin-top: 60px;
}
@media (max-width: 737px) {
.post-single-content .p-read-more__contents h3:first-child {
margin-top: 30px;
}
}
.cf-contents img {
display: block;
margin: 0 auto;
max-width: min(760px, 100%);
}
/* layout.css のオーバーライド */
.review-text-wrap .more-block-btn-wrap .more-block-btn {
background-color: var(--c-sea-green);
border-color: var(--c-sea-green);
}
.review-text-wrap .more-block-btn-wrap .more-block-btn:hover {
background-color: var(--c-peppermint);
}
.review-text-wrap .more-block-btn-wrap .more-block-btn::after {
border-right-color: #fff;
border-top-color: #fff;
}
.review-text-wrap .more-block-btn-wrap .more-block-btn:hover::after {
border-right: 4px solid var(--c-sea-green);
border-top: 4px solid var(--c-sea-green);
}
/**
* 「つづきを読む」ボタン
* by WEB DESIGN 84
* 2021/04/12
* end
*/
/**
* 子サイトTOP おすすめ記事
* by WEB DESIGN 84
* 2021/04/20
* start
*/
.p-recommend-posts {
border: 1px solid var(--c-teal);
border-radius: 10px;
margin: 30px 0;
padding: 2.5rem 1.5rem 1.5rem;
position: relative;
}
.p-recommend-posts::before {
background: var(--c-teal);
color: #fff;
content: 'おすすめ記事';
font-size: 16px;
left: 1.5rem;
padding: .2rem 1rem;
position: absolute;
top: 0;
transform: translateY(-50%);
}
@media(max-width: 480px) {
.p-recommend-posts::before {
font-size: 14px;
}
}
.p-recommend-posts__item {
padding-left: 2.5rem;
position: relative;
}
.p-recommend-posts__item:not(:last-child) {
margin-bottom: .5rem;
}
.p-recommend-posts__item::before {
--size: 16px;
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: var(--mask-value);
background-color: var(--c-teal);
content: '';
display: block;
height: var(--size);
left: 0;
mask: var(--mask-value);
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--size);
}
.p-recommend-posts a {
color: #333;
font-size: 18px;
letter-spacing: .1rem;
}
@media(max-width: 480px) {
.p-recommend-posts a {
font-size: 16px;
}
}
.p-recommend-posts a:hover {
text-decoration: underline;
}
/**
* 子サイトTOP おすすめ記事
* by WEB DESIGN 84
* 2021/04/20
* end
*/
/**
* アフィリエイトボタン
* by WEB DESIGN 84
* 2021/05/24
* start
*/
.c-bg-btn--accent {
background: var(--c-flamenco);
box-shadow: 0 4px 0 0 #bf6005;
color: var(--c-mine-shaft);
display: block;
font-size: 24px;
font-weight: 900;
margin: 8px 0 4px;
padding: 12px 48px 11px;
position: relative;
text-align: center;
transition: all ease .3s;
}
.c-bg-btn--accent::after {
border: 8px solid transparent;
border-left: 8px solid var(--c-mine-shaft);
content: '';
height: 0;
margin-top: -8px;
position: absolute;
right: 10px;
top: 50%;
transition: margin ease .3s;
width: 0;
}
@media (max-width: 737px) {
.c-bg-btn--accent {
font-size: 20px;
padding: 10px 30px 9px;
box-shadow: 0 2px 0 0 #bf6005;
margin-top: 5px;
}
}
.post-single-content .thumb-inline-link .img {
background-image: none;
}
/**
* アフィリエイトボタン
* by WEB DESIGN 84
* 2021/05/24
* end
*/
/**
* 子サイトTOPの検索ボタンがSafariで左側による問題の解消
* by WEB DESIGN 84
* 2021/06/05
* start
*/
.top-search-wrap .row01 table.gsc-search-box td.gsc-input {
width: auto;
}
/**
* 子サイトTOPの検索ボタンがSafariで左側による問題の解消
* by WEB DESIGN 84
* 2021/06/05
* end
*/
/**
* 専門職コラム記事カード
* by WEB DESIGN 84
* 2021/06/07
* start
*/
.common-matome-list a.p-profession-column-card {
display: -ms-grid;
display: grid;
grid-gap: .5rem 1rem;
-ms-grid-rows: auto .5rem 1fr;
-ms-grid-columns: 32px 1rem 1fr;
grid-template: auto 1fr / 32px 1fr;
}
.p-profession-column-card * {
color: #333;
font-weight: normal;
}
.p-profession-column-card__img img {
border-radius: 50%;
height: 32px;
-o-object-fit: cover;
object-fit: cover;
width: 32px;
}
.p-profession-column-card__title {
color: var(--c-sea-green);
-ms-grid-row-align: start;
align-self: start;
font-size: 1.5rem;
font-weight: normal;
grid-column: 1 / -1;
}
.u-cmr--1 > *:not(:last-child) {
margin-right: 1rem;
}
.u-fw--b {
font-weight: bold;
}
/**
* 専門職コラム記事カード
* by WEB DESIGN 84
* 2021/06/07
* end
*/
/**
* 専門職コラムアーカイブページ
* by WEB DESIGN 84
* 2021/06/11
* start
*/
.u-mb--5 {
margin-bottom: 5rem;
}
/**
* 専門職コラムアーカイブページ
* by WEB DESIGN 84
* 2021/06/11
* start
*/
/**
* 専門職コラムユーザーアーカイブページ
* by WEB DESIGN 84
* 2021/06/14
* start
*/
.c-ellipse-btn--green {
background: var(--c-sea-green);
border: 1px solid var(--c-sea-green);
border-radius: 50px;
color: #fff;
padding: .5rem 1rem;
-webkit-transition: .2s;
transition: .2s;
}
.c-ellipse-btn--green:hover {
background: #fff;
color: var(--c-sea-green);
}
.p-user-post-authors {
display: -ms-grid;
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(auto-fit, minmax(248px, 340px));
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.p-user-post-author {
border: 1px solid #bbb;
border-radius: 4px;
display: -ms-grid;
display: grid;
grid-gap: 1rem;
-ms-grid-rows: auto 1rem 1fr 1rem auto;
-ms-grid-columns: 48px 1rem 1fr;
grid-template: auto 1fr auto / 48px 1fr;
padding: 1rem;
}
.p-user-post-author__img, .p-user-post-author__meta {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.p-user-post-author__img img {
border-radius: 50%;
height: 48px;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
width: 48px;
}
.p-user-post-author__meta {
font-size: 16px;
}
.p-user-post-author__desc, .p-user-post-author__detail {
grid-column: 1 / -1;
}
.p-user-post-author__detail {
-ms-grid-column-align: center;
justify-self: center;
}
.p-user-post-author__detail .c-ellipse-btn--green {
color: #fff;
text-decoration: none;
}
.p-user-post-author__detail .c-ellipse-btn--green:hover {
color: var(--c-sea-green)
}
/**
* 専門職コラムユーザーアーカイブページ
* by WEB DESIGN 84
* 2021/06/14
* end
*/
/**
* caption ショートコードの画像はみ出し防止
* by WEB DESIGN 84
* 2021/07/07
*/
.wp-caption {
max-width: 100%;
}
/**
* / caption ショートコードの画像はみ出し防止
*/
/**
* カテゴリページレイアウト調整
* by WEB DESIGN 84
* 2021/07/12
*/
#career-site.category .entry-header {
height: auto;
margin-bottom: .8rem;
padding-top: 0;
}
#career-site.category .base-inner > article:not(:last-child) {
margin-bottom: 5rem;
}
/**
* / カテゴリページレイアウト調整
*/
/**
* ポータルTOP見出しデザイン調整
* by WEB DESIGN 84
* 2021/07/13
*/
.icon-hd01 {
align-items: center;
display: flex;
justify-content: center;
}
.icon-hd01 .icon {
flex: 0 0 60px;
margin-bottom: 0;
margin-right: 20px;
}
.icon-hd01 .icon img {
height: auto;
max-height: 40px;
max-width: 100%;
}
@media (max-width: 480px) {
.icon-hd01 .icon {
flex: 0 0 30px;
}
.icon-hd01 .icon img {
max-height: 30px;
}
}
/**
* / ポータルTOP見出しデザイン調整
*/
/**
* Safariでフォントが太く見える問題の解消
* by WEB DESIGN 84
* 2021/08/10
*/
body, .post-single-content li, .post-single-content p, header .fixd-wrap.v2 .nav-wrap li a, .common-matome-list .item .txt, .common-matome-list li .txt, .top-search-wrap .row02 li a, .top-pickup-list .item .txt-wrap, .career-description p, .career-related-work-list li .txt, .common-matome-list-slim .txt, .workstyle-pickup-list .item .txt-wrap, .careercat-list-job-group-list-wrap .job-category-description {
font-weight: 400;
}
@media (max-width: 737px) {
header .sp-content-nav-wrap a, .career-related-work-list li .txt {
font-weight: 400;
}
}
/**
* / Safariでフォントが太く見える問題の解消
*/
/**
* 監修者カード
* by WEB DESIGN 84
* 2021/08/11
*/
li.p-post-supervisors__item {
margin: 0;
}
.p-post-supervisors__item:not(:last-child) {
margin-bottom: 16px;
}
.p-post-supervisor {
border: 1px solid #bbb;
border-radius: 4px;
color: #555;
display: grid;
grid-gap: 2rem 2.5rem;
grid-template: auto auto / 80px 1fr 150px;
padding: 2rem 2.5rem;
}
@media (max-width: 480px) {
.p-post-supervisor {
grid-template-columns: 60px 1fr;
}
}
.p-post-supervisor__img {
align-self: center;
height: 80px;
}
@media (max-width: 480px) {
.p-post-supervisor__img {
height: 60px;
}
}
.p-post-supervisor__img img {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.p-post-supervisor__summary {
grid-column: 2 / -1;
}
@media (max-width: 480px) {
.p-post-supervisor__summary {
grid-column: 2;
}
}
.p-post-supervisor__summary h1 {
border-bottom: 1px solid;
font-size: 16px;
letter-spacing: .2rem;
margin-bottom: 1rem;
}
.p-post-supervisor__summary p {
margin: 0;
}
.p-post-supervisor__summary p:first-of-type {
font-size: 1.2rem;
letter-spacing: .1rem;
}
.p-post-supervisor__summary p:last-of-type {
font-size: 1.5rem;
}
.p-post-supervisor__profile {
grid-column: 1 / 3;
}
.p-post-supervisor__profile h2 {
font-family: var(--font-sans);
font-size: 14px;
margin: 0 0 .5rem;
text-align: left;
}
.p-post-supervisor__profile h2::after {
content: none;
}
.p-post-supervisor__profile p {
font-size: 14px;
letter-spacing: .1rem;
line-height: 1.5;
margin: 0;
}
.p-post-supervisor__to-detail {
place-self: center;
}
@media (max-width: 480px) {
.p-post-supervisor__to-detail {
grid-column: 1 / -1;
}
}
.p-post-supervisor__to-detail a {
background: var(--c-sea-green);
border: 1px solid var(--c-sea-green);
border-radius: 30px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: .5rem 1.5rem;
text-decoration: none;
transition: background .3s, color .3s;
}
.p-post-supervisor__to-detail a:hover {
background: #fff;
color: #555;
}
.post-single-content aside + aside {
margin-top: 3rem;
}
/**
* / 監修者カード
*/
/**
* 編集部（著者）
* by WEB DESIGN 84
* 2021/08/13
*/
.p-post-author {
font-size: 16px;
margin: 1rem 0;
text-align: right;
}
.p-post-author a {
color: #888;
text-decoration: none;
}
.p-post-author + div:not(.career-main-img-wrap) {
margin-top: -1rem !important;
}
/**
* / 編集部（著者）
*/
/**
* フッターリンクを一部非表示にしたことによるnth-child指定のデザイン崩れを修正
* by WEB DESIGN 84
* 2021/08/17
*/
@media (max-width: 737px) {
footer .footer-nav02 li:last-child {
border-left: 1px solid #9bc894;
}
}
/**
* / フッターリンクを一部非表示にしたことによるnth-child指定のデザイン崩れを修正
*/
/**
* キャリアガーデン編集部
* by WEB DESIGN 84
* 2021/08/17
*/
ul.p-editorial-staff {
margin: -2.5rem 0;
}
li.p-editorial-staff__item {
margin: 0;
padding: 2.5rem 0;
}
li.p-editorial-staff__item:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.p-editorial-staff-member {
display: grid;
grid-gap: 0 1rem;
grid-template: 1fr 1fr auto / 78px 1fr;
}
.p-editorial-staff-member__img {
align-self: center;
grid-row: 1 / 3;
}
.p-editorial-staff-member__img img {
border-radius: 50%;
height: 78px;
object-fit: cover;
overflow: hidden;
width: 100%;
}
.p-editorial-staff-member__position, .p-editorial-staff-member__name {
font-size: 18px;
line-height: 1.5;
}
.p-editorial-staff-member__position {
align-self: end;
}
.p-editorial-staff-member__description {
align-self: start;
grid-column: 1 / -1;
margin-top: 1rem;
}
.p-editorial-staff-member__description p {
font-size: 16px;
}
/**
* / キャリアガーデン編集部
*/
/**
* 子サイトインクルードのアコーディオン
* by WEB DESIGN 84
* 2021/08/18
*/
.c-link--1, .c-link--1:link, .c-link--1:visited, .c-link--1:hover, .c-link--1:active {
color: var(--c-mackerel);
text-decoration: underline;
}
.p-acc {
margin: 1rem 0;
}
.p-acc__title {
background: var(--c-sea-green);
color: #333;
cursor: pointer;
font-size: 20px;
font-weight: 700;
padding: 16px 0 15px;
position: relative;
text-align: center;
transition: all ease 0.3s;
}
@media (max-width: 737px) {
.p-acc__title {
font-size: 18px;
padding: 8px 0 7px;
}
}
.p-acc__title::after {
border-radius: 2px;
border-right: 4px solid #fff;
border-top: 4px solid #fff;
content: '';
height: 10px;
margin-top: -6px;
position: absolute;
right: 23px;
top: 50%;
transform: rotateZ(135deg) rotateY(0deg);
transition: all ease 0.3s;
width: 10px;
}
@media (max-width: 737px) {
.p-acc__title::after {
border-right-width: 3px;
border-top-width: 3px;
height: 8px;
margin-top: -5px;
right: 13px;
width: 8px;
}
}
.p-acc__title:hover, .p-acc__title.open {
background: var(--c-peppermint);
}
.p-acc__title:hover::after {
border-color: var(--c-sea-green);
}
.p-acc__title.open::after {
border-right-color: var(--c-sea-green);
border-top-color: var(--c-sea-green);
transform: rotateZ(45deg) rotateY(180deg);
}
.p-acc__contents {
border: 1px solid #bbb;
border-radius: 0 0 4px 4px;
border-top: none;
display: none;
padding: 24px 89px;
}
@media (max-width: 737px) {
.p-acc__contents {
padding: 14px 10px;
}
}
.p-acc__contents .common-matome-list {
justify-content: center;
}
.p-acc__contents .border-block-list-wrap {
border: none;
}
.p-acc__contents :is(.common-matome-list :where(.item, li)) {
width: 280px;
}
@media (max-width: 737px) {
.p-acc__contents :is(.common-matome-list :where(.item, li)) {
width: 100%;
}
}
/**
* / 子サイトインクルードのアコーディオン
*/
/**
* コラム下NPO法人カード
* by WEB DESIGN 84
* 2021/08/19
*/
.p-npo-summary {
border: 1px solid #bbb;
border-radius: 4px;
display: grid;
grid-gap: 0 2rem;
grid-template: repeat(4, auto) / 78px 1fr;
margin: 1rem 0;
padding: 2rem;
}
.p-npo-summary * {
font-size: 16px;
}
.p-npo-summary__img {
align-items: center;
align-self: center;
border: 2px solid #eee;
border-radius: 50%;
display: flex;
grid-row: 1 / 4;
height: 100%;
max-height: 78px;
}
.p-npo-summary__img img {
border-radius: 50%;
margin: 0;
overflow: hidden;
width: 100%;
}
.p-npo-summary__name {
font-size: 18px;
font-weight: bold;
}
.p-npo-summary__description {
grid-column: 1 / -1;
margin-top: 1rem;
}
.p-npo-summary__description *:not(:last-child) {
margin-bottom: 1rem;
}
.p-npo-summary__description p {
font-size: 14px;
margin: 0;
}
/**
* / コラム下NPO法人カード
*/
/**
* キャリア支援団体一覧ページ
* by WEB DESIGN 84
* 2021/08/19
*/
.p-careersupport-list {
display: grid;
grid-auto-rows: auto;
grid-gap: 3rem 2rem;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 737px) {
.p-careersupport-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.p-careersupport-list {
grid-template-columns: 1fr;
}
}
a.p-careersupport {
color: #555;
text-decoration: none;
}
a.p-careersupport:hover .p-careersupport__img {
opacity: .7;
}
a.p-careersupport:hover .p-careersupport__npo-name {
color: var(--c-sea-green);
}
.p-careersupport__img {
height: 0;
margin-bottom: 1rem;
padding-top: calc( 9% / 16 * 100 );
position: relative;
transition: opacity .2s;
}
.p-careersupport__img img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
}
.p-careersupport__npo-name {
font-weight: bold;
margin-bottom: .5rem;
transition: color .2s;
}
.p-careersupport__npo-name h1 {
font-size: 14px;
}
.p-careersupport__catchcopy {
font-size: 12px;
}
/**
* / キャリア支援団体一覧ページ
*/
/**
* インクルードのアコーディオン内デザイン調整
* by WEB DESIGN 84
* 2021/08/31
*/
.p-acc__contents .maru-hd01 {
margin: 30px 0 0;
}
.p-acc__contents .border-block-list-wrap {
margin: 0 0 16px;
}
/**
* / インクルードのアコーディオン内デザイン調整
*/
/**
* インクルードの職業口コミ、専門職コラム
* by WEB DESIGN 84
* 2021/09/02
*/
.p-inc-custom-posts {
display: flex;
margin: 3rem 0;
}
@media (max-width: 736px) {
.p-inc-custom-posts {
flex-direction: column;
}
}
.p-inc-custom-posts li {
list-style: disc inside;
}
.p-inc-custom-posts li:not(:last-child) {
margin-bottom: 8px;
}
.p-inc-custom-posts li a {
color: #555;
}
.p-inc-custom-posts a {
font-size: 16px;
text-decoration: underline;
}
.p-inc-custom-posts__reviews, .p-inc-custom-posts__user-posts {
flex: 1;
}
@media (min-width: 737px) {
.p-inc-custom-posts__reviews {
margin-right: 2rem;
}
}
@media (max-width: 736px) {
.p-inc-custom-posts__reviews {
margin-bottom: 2rem;
}
}
/**
* / インクルードの職業口コミ、専門職コラム
*/
/**
* TOPへ戻るボタン
* by WEB DESIGN 84
* 2021/09/06
*/
.c-chev-up {
position: relative;
}
.c-chev-up::before {
border-left: 2px solid var(--c-teal);
border-top: 2px solid var(--c-teal);
content: '';
display: block;
height: 1rem;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -25%) rotate(45deg);
width: 1rem;
}
/**
* / TOPへ戻るボタン
*/
/**
* コメントショートコード
* by WEB DESIGN 84
* 2021/09/06
*/
.p-sc-comment {
border: 1px solid #aaa;
margin: 2rem 0;
}
.p-sc-comment__title {
background: #e5e5e5;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
display: inline-block;
font-size: 14px;
padding: .5rem 1.5rem;
}
.p-sc-comment__contents {
font-size: 18px;
padding: 1.5rem;
}
/**
* / コメントショートコード
*/
/**
* WP User Frontend プラグインの必須項目のスタイルを調整する
* by WEB DESIGN 84
* 2021/09/30
*/
body #up-form .wpuf-form input.required {
border: 1px solid #bbb;
}
/**
* / WP User Frontend プラグインの必須項目のスタイルを調整する
*/
/**
* インクルードの専門職コラムカード
* by WEB DESIGN 84
* 2021/10/31
*/
.common-matome-list li a.p-profession-column-card-2__title {
border: none;
display: block;
margin-bottom: 1rem;
padding: 0;
text-decoration: underline;
}
@media (max-width: 737px) {
.common-matome-list li a.p-profession-column-card-2__title {
margin-bottom: 0;
}
}
.p-profession-column-card-2__title h1 {
font-size: 16px;
}
.p-inc-section--profession ul {
position: relative;
}
.p-inc-section--profession ul::after {
background: #fff;
bottom: 0;
content: '';
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
.p-inc-section--profession li {
border-bottom: 1px solid #ccc;
padding: 20px 0;
}
.p-inc-section--profession .item:not(:last-child) {
margin-bottom: 2rem;
}
/**
* / インクルードの専門職コラムカード
*/
/**
* インクルード内関連の記事＆専門職コラム
* by WEB DESIGN 84
* 2021/11/1
*/
:where(.p-inc-section--related-posts, .p-inc-section--profession) .p-acc__contents {
padding: 30px 50px;
}
@media (max-width: 737px) {
:where(.p-inc-section--related-posts, .p-inc-section--profession) .p-acc__contents {
padding: 14px 10px;
}
}
:where(.p-inc-section--related-posts, .p-inc-section--profession) .common-matome-list {
margin: 0;
}
:where(.p-inc-section--related-posts, .p-inc-section--profession) .common-matome-list :is(.item, li) {
margin: -1px 20px 0;
}
@media (max-width: 737px) {
:where(.p-inc-section--related-posts, .p-inc-section--profession) .common-matome-list :is(.item, li) {
margin: -1px 0 0;
}
}
/**
* / インクルード内関連の記事＆専門職コラム
*/
/**
* 子サイトトップの日付周りのマージン
* by WEB DESIGN 84
* 2021/11/3
*/
.career-main-img-wrap {
margin: 2rem 0 24px;
}
/**
* / 子サイトトップの日付周りのマージン
*/
/**
* ヘッダーデザイン調整
* by WEB DESIGN 84
* 2021/11/3
*/
.p-header-main-menu {
height: 100%;
}
.p-header-main-menu__item:not(:last-child) {
margin-right: 16px;
}
.c-link--2 {
font-size: 14px;
}
.c-link--2, .c-link--2:link, .c-link--2:visited {
color: #333;
}
.c-link--2:hover {
text-decoration: underline;
}
header .fixd-wrap.v2 .icon-btn-wrap .img-link {
margin-left: 0;
}
.p-mypage-menu {
position: relative;
}
.p-mypage-menu:hover .p-mypage-menu__nav {
opacity: 1;
pointer-events: unset;
z-index: 100;
}
.p-mypage-menu__icon {
border: 1px solid #ccc;
border-radius: 50%;
height: 32px;
list-style: none;
overflow: hidden;
width: 32px;
}
.p-mypage-menu__icon::-webkit-details-marker {
display: none;
}
.p-mypage-menu__nav {
background: #fff;
border-radius: 4px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
opacity: 0;
padding: 1.5rem;
pointer-events: none;
position: absolute;
top: 100%;
transition: opacity .2s;
right: 0;
width: 200px;
z-index: -1;
}
.p-mypage-menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.p-mypage-menu-list__item:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.p-mypage-menu-list__item a {
color: #333;
display: block;
padding: calc(.7rem + 1px) 0 .7rem;
transition: color .2s, transform .2s;
}
.p-mypage-menu-list__item a:hover {
color: var(--c-mackerel);
transform: translateX(4px);
}
header .fixd-wrap .flex-wrap, header .fixd-wrap.v2 .icon-btn-wrap {
overflow: unset;
}
.c-before-caret--right {
padding-left: 1.2rem;
position: relative;
}
.c-before-caret--right::before {
border-bottom: 4px solid transparent;
border-left: 5px solid var(--c-sea-green);
border-top: 4px solid transparent;
content: '';
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/**
* / ヘッダーデザイン調整
*/
/**
* マイページの生年月表示の注釈を縦並びに
* by WEB DESIGN 84
* 2021/11/16
*/
@media (max-width: 737px) {
.mypage-table.sp-mypage-table tr:nth-child(4) td {
align-items: flex-start;
flex-direction: column;
}
}
/**
* / マイページの生年月表示の注釈を縦並びに
*/
/**
* 汎用的なgrid
* by WEB DESIGN 84
* 2021/11/16
*/
.l-grid--1 {
display: grid;
grid-auto-rows: auto;
grid-gap: 0 20px;
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
@media (max-width: 480px) {
.l-grid--1 {
grid-template-columns: 1fr;
}
}
/**
* / 汎用的なgrid
*/
/**
* マイページのテーブルのフォントサイズを調整
* by WEB DESIGN 84
* 2021/11/17
*/
.mypage-table td {
font-size: 18px;
}
@media (max-width: 737px) {
.mypage-table td {
font-size: 14px;
}
}
/**
* / マイページのテーブルのフォントサイズを調整
*/
/**
* 口コミ投稿詳細ページ
* by WEB DESIGN 84
* 2021/11/18
*/
.review-data-wrap .square-hd01:first-child::after {
color: #595959;
content: '※投稿時';
font-size: 16px;
margin-left: 1.5rem;
}
.review-data-wrap .info-wrap .txt {
text-align: unset;
}
.c-separator--1 {
margin-right: 20px;
}
@media (max-width: 737px) {
.c-separator--1 {
display: block;
}
}
/**
* / 口コミ投稿詳細ページ
*/
/**
* 専門職コラム投稿フォーム
* by WEB DESIGN 84
* 2021/11/27
*/
.c-btn--1 {
background: #f7f7f7;
border: 1px solid #dfdfdf;
border-radius: 3px;
box-shadow: 0 1px 0 #ccc;
cursor: pointer;
display: inline-block;
font-size: 16px;
padding: 4px 6px;
}
.c-note--1 {
color: #888888;
font-size: 14px;
}
.u-flex--1 {
align-items: center;
display: flex;
}
.u-flex--1 > * {
flex: 0 0 auto;
}
.u-flex--1 > *:not(:last-child) {
margin: 0 2rem 0 0;
}
@media (max-width: 737px) {
.u-flex--1 {
align-items: flex-start;
flex-direction: column;
}
.u-flex--1 > *:not(:last-child) {
margin: 0 0 1rem 0;
}
}
.c-text-btn--1 {
background: none;
border: none;
border-radius: 4px;
color: var(--c-mackerel);
font-weight: bold;
padding: 7px 10px;
transition: background .2s;
}
.c-text-btn--1:hover {
background: #f2f2f2;
}
.u-flex--2 {
align-items: center;
display: flex;
}
.u-flex--2 > * {
flex: 0 0 auto;
}
.u-flex--2 > *:not(:last-child) {
margin: 0 2rem 0 0;
}
/**
* / 専門職コラム投稿フォーム
*/
/**
* ボタン
* by WEB DESIGN 84
* 2021/12/6
*/
.push-btn01.-slim a {
cursor: pointer;
}
/**
* / ボタン
*/
.c-note--2 {
display: block;
font-size: 14px;
}
.c-note--3 {
color: #f00;
display: block;
font-size: 14px;
}
.c-note--4 {
color: #f1a400;
font-size: 14px;
}
@media (max-width: 737px) {
.c-note--4 {
font-size: 12px;
}
}
.u-mt--1 {
margin-top: 1rem;
}
.workstyle-pickup-list .slick-track {
display: flex;
}
@media (min-width: 734px) {
.c-br-spacer--1 {
display: inline-block;
margin-right: 1rem;
}
}
header .p-header {
animation: show-header .5s ease-out 0s 1 normal forwards;
will-change: translate;
}
header .p-header--hide {
animation: hide-header .5s ease-out 0s 1 normal forwards;
}
@keyframes show-header {
0% {
translate: 0 -100%;
}
100% {
translate: 0 0;
}
}
@keyframes hide-header {
0% {
translate: 0 0;
}
100% {
translate: 0 -100%;
}
}
/**
* 職業まとめコラムの職業カード
* by WEB DESIGN 84
* 2022/2/22
*/
/* wpautopで自動的に付与されるpタグを非表示にする */
.p-occupation-card > p, .p-occupation-card :not(.p-occupation-card__description) > p {
display: none;
}
.p-occupation-card > .p-occupation-card__inner {
background: rgba(117, 203, 100, .08);
border-radius: 4px;
color: #333;
display: grid;
grid-gap: 16px 24px;
padding: 16px;
transition: background .2s;
}
.p-occupation-card > .p-occupation-card__inner--link.p-occupation-card__inner--show-image {
grid-template: repeat(3, auto) / 35% minmax(0, 1fr);
}
@media (max-width: 737px) {
.p-occupation-card > .p-occupation-card__inner--link.p-occupation-card__inner--show-image {
grid-template: repeat(4, auto) / minmax(0, 1fr);
}
}
.p-occupation-card > .p-occupation-card__inner--link.p-occupation-card__inner--hide-image {
grid-template: repeat(3, auto) / minmax(0, 1fr);
}
.p-occupation-card > .p-occupation-card__inner--not-link.p-occupation-card__inner--show-image {
grid-template: repeat(2, auto) / 35% minmax(0, 1fr);
}
@media (max-width: 737px) {
.p-occupation-card > .p-occupation-card__inner--not-link.p-occupation-card__inner--show-image {
grid-template: repeat(3, auto) / minmax(0, 1fr);
}
}
.p-occupation-card > .p-occupation-card__inner--not-link.p-occupation-card__inner--hide-image {
grid-template: repeat(2, auto) / minmax(0, 1fr);
}
.p-occupation-card__inner--link:hover {
background: rgba(117, 203, 100, .2);
}
.p-occupation-card, .p-occupation-card:link, .p-occupation-card__inner, .p-occupation-card__inner:link {
text-decoration: none;
}
.p-occupation-card__img {
overflow: hidden;
}
@media (min-width: 738px) {
.p-occupation-card__img {
grid-row: 1 / -1;
}
}
.p-occupation-card__img > div {
height: 0;
padding-top: calc(3 / 4 * 100%);
position: relative;
}
.p-occupation-card__img > div img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
.p-occupation-card__name > h3 {
border-bottom: none;
color: var(--c-sea-green);
font-size: 22px;
margin: 0;
padding-left: 0;
}
.p-occupation-card__name > h3::before {
content: none;
}
@media (max-width: 737px) {
.p-occupation-card__name > h3 {
font-size: 20px;
}
}
.p-occupation-card__description, .p-occupation-card__description p {
font-size: 16px;
line-height: 1.3;
}
.p-occupation-card__description p {
margin: 0;
}
.p-occupation-card__description p:not(:first-child) {
margin-top: 16px;
}
.p-occupation-card__btn {
text-align: right;
}
@media (max-width: 737px) {
.p-occupation-card__btn {
text-align: center;
}
}
.p-occupation-card__btn > .c-btn--2 {
border-radius: 20px;
padding: 10px 24px;
}
.u-row-gap--24 > *:not(:first-child) {
margin-top: 24px;
}
/**
* / 職業まとめコラムの職業カード
*/
/* simplebar */
.simplebar-track.simplebar-horizontal div.simplebar-scrollbar.simplebar-visible {
height: 4px;
}
.simplebar-track.simplebar-horizontal div.simplebar-scrollbar.simplebar-visible::before {
background: var(--c-sea-green);
border-radius: 2px;
height: 100%;
opacity: 1;
}
.u-mt--24 {
margin-top: 24px;
}
.p-related-occupations {
background: var(--c-peppermint);
border-radius: 10px;
padding: 16px 24px;
}
.p-related-occupations__title {
font-size: 18px;
font-weight: 700;
}
.p-related-occupations__list {
margin-top: 8px;
}
.p-related-occupations__to-list {
margin-top: 8px;
text-align: right;
}
.p-related-occupations__to-list > a {
color: #333;
font-size: 16px;
text-decoration: underline;
}
.p-related-occupations-list {
display: flex;
flex-wrap: wrap;
margin-left: -16px;
}
.p-related-occupations-list__item {
flex: none;
margin-left: 16px;
}
.p-related-occupations-list__item > a {
color: #333;
font-size: 16px;
text-decoration: underline;
}
.l-container--800 {
width: min(800px, 100%);
}
.l-container--1080 {
width: min(1080px, 100%);
}
.u-m--auto {
margin: auto;
}
.post-single-content .c-list-1 {
display: grid;
grid-auto-rows: auto;
grid-gap: 1px;
}
.post-single-content .c-list-1--3-column {
grid-template-columns: repeat(auto-fill, minmax(calc((800px - 2px) / 3), 1fr));
}
.post-single-content .c-list-1--4-column {
grid-template-columns: repeat(auto-fill, minmax(calc((800px - 3px) / 4), 1fr));
}
@media (max-width: 480px) {
.post-single-content .c-list-1 {
grid-template-columns: repeat(2, calc((100% - 1px) / 2));
}
}
.post-single-content .c-list-1__item {
box-shadow: 0 0 0 1px #bbb;
margin: 0;
}
.post-single-content .c-list-1__item > a {
align-items: center;
color: #333;
display: flex;
height: 100%;
justify-content: center;
padding: 8px;
position: relative;
text-align: center;
text-decoration: none;
}
.post-single-content .c-list-1__item--chev-down > a {
padding-right: 36px;
}
.post-single-content .c-list-1__item--chev-down > a::after {
background: linear-gradient(90deg, transparent 80%, var(--c-sea-green) 80% 100%) no-repeat, linear-gradient(180deg, transparent 80%, var(--c-sea-green) 80% 100%) no-repeat;
content: '';
height: 14px;
position: absolute;
right: 14px;
top: 45%;
transform: translateY(-50%) rotate(45deg);
width: 14px;
}
.p-careersupport-posts {
display: grid;
grid-auto-rows: auto;
grid-gap: 24px 16px;
grid-template-columns: repeat(auto-fill, minmax(222px, 1fr));
}
.post-single-content .p-careersupport-posts__item {
margin: 0;
}
.p-careersupport-posts__item :where(article, .p-column-card) {
height: 100%;
}
.p-column-card {
border: 1px solid #bbb;
border-radius: 4px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.p-column-card:visited {
color: inherit;
}
@media (hover: hover) {
.p-column-card:hover .p-column-card__img img {
transform: scale(1.1);
}
.p-column-card:hover :where(.p-column-card__title, .p-column-card__catchcopy) {
color: #2f8645;
}
}
.p-column-card, .p-column-card:link {
color: #333;
text-decoration: none;
}
.p-column-card__img {
flex: none;
height: 0;
overflow: hidden;
padding-top: calc(9 / 16 * 100%);
position: relative;
}
.p-column-card__img img {
height: 100%;
left: 0;
margin: 0;
object-fit: cover;
position: absolute;
top: 0;
transition: transform .2s;
width: 100%;
}
.p-column-card__title {
flex: none;
margin-top: 12px;
padding: 0 16px;
transition: color .2s;
}
.p-column-card__title:last-child {
flex: 1;
}
.p-column-card__title > h1 {
font-size: 18px;
line-height: 1.4;
}
@media (max-width: 737px) {
.p-column-card__title > h1 {
font-size: 16px;
}
}
.p-column-card__catchcopy {
flex: 1;
font-size: 14px;
line-height: 1.4;
margin-top: 8px;
padding: 0 16px;
transition: color .2s;
}
.p-column-card__more {
text-align: center;
margin-top: 16px;
padding: 0 16px 16px;
}
.p-column-card__more > span {
background: var(--c-sea-green);
border-radius: 20px;
color: #fff;
font-size: 14px;
font-weight: 700;
padding: 8px 20px;
}
.p-careersupport-links {
display: grid;
grid-auto-rows: auto;
grid-gap: 24px 16px;
grid-template-columns: repeat(auto-fill, minmax(222px, 1fr));
overflow: hidden;
}
.post-single-content .p-careersupport-links__item {
margin: 0;
position: relative;
}
.post-single-content .p-careersupport-links__item::before {
border-top: 1px dashed #bbb;
content: '';
position: absolute;
right: 0;
top: -12px;
width: calc(100% + 16px);
}
.post-single-content .p-careersupport-links__item > p {
margin: 0;
}
.post-single-content .p-careersupport-links__item > p:first-child {
font-size: 16px;
}
.post-single-content .p-careersupport-links__item > p:nth-child(2) {
font-size: 14px;
}
.l-grid-1 {
display: grid;
grid-auto-rows: auto;
grid-gap: 24px 16px;
grid-template-columns: repeat(auto-fill, minmax(calc((1080px - 48px) / 4), 1fr));
}
@media (max-width: 737px) {
.l-grid-1 {
grid-template-columns: repeat(2, calc((100% - 16px) / 2));
}
}
li.l-grid-1__item {
margin: 0;
}
.l-grid-2 {
display: grid;
grid-auto-rows: auto;
grid-gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(calc((1080px - 48px) / 4), 1fr));
}
@media (max-width: 737px) {
.l-grid-2 {
grid-template-columns: repeat(2, calc((100% - 16px) / 2));
}
}
li.l-grid-2__item {
margin: 0;
}
.l-grid-3 {
display: grid;
grid-auto-rows: auto;
grid-gap: 1px 16px;
grid-template-columns: repeat(auto-fill, minmax(calc((1080px - 32px) / 3), 1fr));
}
@media (max-width: 737px) {
.l-grid-3 {
grid-template-columns: minmax(0, 1fr);
}
}
li.l-grid-3__item {
margin: 0;
}
.p-article-card-1, .p-article-card-1__link {
height: 100%;
}
.p-article-card-1__link {
display: flex;
flex-direction: column;
}
.p-article-card-1__link * {
line-height: 1.4;
}
.p-article-card-1__link:is(:link, :visited) {
color: #333;
text-decoration: none;
}
.p-article-card-1__img img {
aspect-ratio: 16 / 9;
margin: 0;
object-fit: cover;
}
.p-article-card-1__title:not(:first-child) {
margin-top: 8px;
}
.p-article-card-1__title > h1 {
font-size: 18px;
font-weight: 700;
}
.p-article-card-1__lead {
font-size: 14px;
margin-top: 8px;
}
.p-article-card-1__author {
margin-top: 12px;
}
.p-article-card-2 {
height: 100%;
}
.p-article-card-2__link {
display: block;
height: 100%;
padding: 8px;
}
.p-article-card-2__link * {
line-height: 1.4;
}
.p-article-card-2__link:is(:link, :visited) {
color: #333;
text-decoration: none;
}
.p-article-card-2__img {
margin: 0 0 12px 12px;
}
.p-article-card-2__img img {
aspect-ratio: 4 / 3;
border-radius: 6px;
margin: 0;
object-fit: cover;
}
.p-article-card-2__title > h1 {
font-size: 18px;
font-weight: 700;
}
.p-article-card-2__lead {
font-size: 14px;
margin-top: 8px;
}
.p-article-card-2__img {
float: right;
max-width: 30%;
}
.p-article-card-2__author {
clear: both;
margin-top: 12px;
}
.p-article-card-author-1 {
align-items: center;
display: grid;
grid-gap: 0 8px;
grid-template: repeat(2, auto) / auto minmax(0, 1fr);
}
.p-article-card-author-1__img {
grid-row: 1 / -1;
}
.p-article-card-author-1__img img {
border-radius: 50%;
height: 32px;
object-fit: cover;
width: 32px;
}
.p-article-card-author-1__position {
font-size: 12px;
}
.p-article-card-author-1__name {
font-size: 14px;
}
.p-article-card-author-1__img + .p-article-card-author-1__name {
grid-row: 1 / -1;
}
.c-tag-1:is(:link, :visited) {
align-items: center;
border: 1px solid #bbb;
border-radius: 4px;
display: flex;
font-size: 16px;
font-weight: 700;
height: 100%;
padding: 8px 16px;
text-decoration: none;
transition: background .2s;
}
@media (hover: hover) {
.c-tag-1:hover {
background: var(--c-peppermint);
}
}
.c-tag-2:is(:link, :visited) {
align-items: center;
border: 1px solid #bbb;
border-radius: 24px;
display: flex;
height: 100%;
justify-content: center;
padding: 8px 16px;
text-decoration: none;
transition: background .2s;
}
@media (max-width: 480px) {
.c-tag-2:is(:link, :visited) {
font-size: 12px;
font-weight: 700;
}
}
@media (hover: hover) {
.c-tag-2:hover {
background: var(--c-peppermint);
}
}
.c-list-2__item {
box-shadow: 0 1px #bbb, 0 -1px #bbb;
}
.c-chevron {
height: 20px;
position: relative;
width: 20px;
}
.c-chevron::before, .c-chevron::after {
background: currentColor;
border-radius: 10px;
content: '';
height: 3px;
position: absolute;
width: 65%;
}
.c-chevron--left::before, .c-chevron--left::after {
right: calc(50% - (65% - 65% / 1.41421356) - 3px / 2);
transform-origin: center left;
}
.c-chevron--left::before {
top: calc(50% + 3px / 4);
transform: translate(calc(65% / 1.41421356 / 2), -50%) rotate(-45deg);
}
.c-chevron--left::after {
top: calc(50% - 3px / 4);
transform: translate(calc(65% / 1.41421356 / 2), -50%) rotate(45deg);
}
.c-chevron--right::before, .c-chevron--right::after {
left: calc(50% - (65% - 65% / 1.41421356) - 3px / 2);
transform-origin: center right;
}
.c-chevron--right::before {
top: calc(50% + 3px / 4);
transform: translate(calc(65% / 1.41421356 / -2), -50%) rotate(45deg);
}
.c-chevron--right::after {
top: calc(50% - 3px / 4);
transform: translate(calc(65% / 1.41421356 / -2), -50%) rotate(-45deg);
}
.p-pagination {
align-items: center;
display: flex;
justify-content: center;
}
.p-pagination__item.p-pagination__item {
flex: 0 0 38px;
height: 38px;
margin: 0;
}
.p-pagination__item:not(:first-child) {
margin-left: 8px;
}
.p-pagination__item > a {
color: var(--c-mackerel);
text-decoration: none;
}
.p-pagination__item--number > a {
border: 1px solid var(--c-sea-green);
transition: background .2s, color .2s;
}
@media (hover: hover) {
.p-pagination__item--number > a:hover {
background: var(--c-sea-green);
color: #fff;
}
}
.p-pagination__item--current > span {
background: var(--c-sea-green);
color: #fff;
}
:where(.p-pagination__item--number, .p-pagination__item--current) > * {
align-items: center;
border-radius: 50%;
display: flex;
height: 100%;
justify-content: center;
}
.p-pagination__item--next, .p-pagination__item--prev {
align-items: center;
display: flex;
justify-content: center;
}
:where(.p-pagination__item--next, .p-pagination__item--prev) .c-chevron::before, :where(.p-pagination__item--next, .p-pagination__item--prev) .c-chevron::after {
background: #cacaca;
transition: .2s background;
}
@media (hover: hover) {
:where(.p-pagination__item--next, .p-pagination__item--prev) .c-chevron:hover::before, :where(.p-pagination__item--next, .p-pagination__item--prev) .c-chevron:hover::after {
background: var(--c-sea-green);
}
}
.p-pagination__item--dots {
text-align: center;
}
.p-pagination__item--dots > span {
color: #bbb;
}
.u-fs--16-l-md-14-clamp {
font-size: clamp(14px, 1.9vw, 16px);
}
.u-fs--16-l-sm-14-clamp {
font-size: clamp(14px, 2.92vw, 16px);
}
.page-pro-column :where(.post-single-eyechatch-wrap img, .post-single-content > h2:first-of-type ~ img, .post-single-content > h2:first-of-type ~ * img) {
display: block;
margin-inline: auto;
max-height: 600px;
object-fit: contain;
}
.u-mi--auto {
margin-inline: auto;
}
.c-box-1 {
border: 1px solid #bbb;
border-radius: 10px;
padding: 48px;
}
@media (max-width: 737px) {
.c-box-1 {
padding: 20px;
}
}
.c-box-1 > h2:first-child {
margin-top: 0;
}
.c-btn--3.c-btn--3.c-btn--3.c-btn--3.c-btn--3.c-btn--3 {
background: var(--c-flamenco);
border-radius: 10px;
box-shadow: 0 2px 3px 0 rgb(0 0 0 / 15%);
color: var(--c-mine-shaft);
display: block;
font-size: 20px;
font-weight: 700;
margin-inline: auto;
padding: 12px 24px;
text-align: center;
text-decoration: none;
transition: box-shadow .2s, transform .2s;
width: min(500px, 100%);
}
@media (hover: hover) {
.c-btn--3.c-btn--3.c-btn--3.c-btn--3.c-btn--3.c-btn--3:hover {
box-shadow: 0 7px 10px 0 rgb(0 0 0 / 12%);
transform: translateY(-2px);
}
}
.p-workflow {
display: flex;
flex-direction: column;
list-style: none;
padding-left: 0;
}
.p-workflow__item.p-workflow__item {
background: var(--c-peppermint);
flex: none;
margin: 0;
padding: 24px;
}
@media (max-width: 737px) {
.p-workflow__item.p-workflow__item {
padding: 16px;
}
}
.p-workflow__item.p-workflow__item:not(:first-child) {
margin-top: 60px;
position: relative;
}
.p-workflow__item.p-workflow__item:not(:first-child)::before {
border-bottom: 4px solid #2f8645;
border-right: 4px solid #2f8645;
box-sizing: border-box;
content: '';
height: 20px;
left: 50%;
position: absolute;
top: calc(-30px - 7.07px); /* margin-top / 2 - 20√2 / 4 */
transform: translate(-50%, -50%) rotate(45deg);
width: 20px;
}
.p-workflow__title.p-workflow__title {
border-bottom: none;
font-size: 20px;
font-weight: 700;
margin-bottom: 0;
padding-left: 0;
}
.p-workflow__title.p-workflow__title::before {
content: none;
}
.p-table-1.p-table-1 {
overflow-x: auto;
}
.p-table-1__table.p-table-1__table {
border-collapse: separate;
border-spacing: 0;
}
.p-table-1.p-table-1 :where(.p-table-1__th, .p-table-1__td) {
border-bottom: 2px solid #eaeaea;
border-right: 2px solid #eaeaea;
padding: 8px 16px;
}
.p-table-1.p-table-1 :where(.p-table-1__th, .p-table-1__td, .p-table-1__th p, .p-table-1__td p) {
font-size: clamp(14px, 2.17vw, 16px);
line-height: 1.5;
}
.p-table-1.p-table-1 :where(.p-table-1__th, .p-table-1__th p) {
font-size: clamp(16px, 2.71vw, 20px);
font-weight: 700;
}
.p-table-1__thead.p-table-1__thead :where(.p-table-1__th, .p-table-1__td) {
background: #2f8645;
color: #fff;
}
.p-table-1__thead.p-table-1__thead .p-table-1__th {
border-top: 2px solid #eaeaea;
}
.p-table-1__tbody.p-table-1__tbody .p-table-1__tr:nth-child(odd) > :where(.p-table-1__th, .p-table-1__td) {
background: var(--c-peppermint);
}
.p-table-1__tbody.p-table-1__tbody .p-table-1__tr:nth-child(even) > :where(.p-table-1__th, .p-table-1__td) {
background: #fff;
}
.p-table-1__tbody.p-table-1__tbody .p-table-1__th {
color: #2f8645;
text-align: left;
}
.p-table-1__tr.p-table-1__tr > .p-table-1__th:first-child {
border-left: 2px solid #eaeaea;
left: 0;
position: sticky;
z-index: 1;
width: min(200px, 30vw);
}
@media (max-width: 737px) {
.p-table-1__tr.p-table-1__tr > :where(.p-table-1__th:not(:first-child), .p-table-1__td:not(:first-child)) {
width: min(300px, 40vw);
}
}
.u-fs--18-lt-md-16-clamp.u-fs--18-lt-md-16-clamp {
font-size: clamp(16px, 2.44vw, 18px);
}
.c-list-3 {
background: var(--c-peppermint);
padding: 0 16px;
}
.c-list-3__item.c-list-3__item {
font-weight: 700;
line-height: 1.2;
margin: 0;
padding: 8px 0;
}
.c-list-3__item.c-list-3__item:not(:first-child) {
border-top: 1px dashed #bbb;
}
.c-list-4 {
list-style: none;
}
.c-list-4__item.c-list-4__item {
line-height: 1.8;
margin: 0;
padding-left: 1.5em;
position: relative;
}
.c-list-4__item.c-list-4__item::before {
background: #2f8645;
border-radius: 50%;
content: '';
height: 5px;
left: .75em;
position: absolute;
top: 16.2px;
transform: translate(-50%, -50%);
width: 5px;
}
.c-list-4__item.c-list-4__item > * {
font-size: 18px;
}
.c-list-4__item.c-list-4__item > a {
color: #2f8645;
}
@media (max-width: 737px) {
.c-list-4__item.c-list-4__item > * {
font-size: 16px;
}
}
.c-attention.c-attention {
line-height: 1;
margin-inline: auto;
padding: 0 calc(1em + 4px);
position: relative;
width: fit-content;
}
.c-attention::before, .c-attention::after {
background: currentColor;
bottom: 1em;
content: '';
height: 2px;
position: absolute;
width: calc(1em * 1.414);
}
.c-attention::before {
left: 0;
transform: rotate(45deg);
transform-origin: left;
}
.c-attention::after {
right: 0;
transform: rotate(-45deg);
transform-origin: right;
}
.p-introduce-services__list {
display: grid;
grid-gap: 24px 16px;
grid-template-columns: repeat(auto-fill, minmax(0, 256px));
justify-content: center;
}
.p-introduce-services__item.p-introduce-services__item {
margin: 0;
}
.p-introduce-service {
border: 2px solid #ddd;
padding-bottom: 20px;
}
.p-introduce-service__img {
border-bottom: 2px solid #ddd;
line-height: 0;
}
.p-introduce-service__img picture > img {
aspect-ratio: 16 / 9;
object-fit: contain;
}
.p-introduce-service__title {
font-size: 18px;
padding: 8px 16px;
text-align: center;
}
.p-introduce-service__point > .c-list-3 {
font-size: 18px;
padding-bottom: 16px;
padding-top: 48px;
position: relative;
}
.p-introduce-service__point > .c-list-3::before {
background: #2f8645;
border-radius: 4px;
color: #fff;
content: 'Point!';
font-size: 12px;
font-weight: 700;
left: 16px;
letter-spacing: .17em;
padding: 4px 8px;
position: absolute;
top: 16px;
}
.p-introduce-service__point .c-list-3__item {
align-items: center;
display: flex;
min-height: 60px;
padding: 0;
}
.p-introduce-service__copy {
color: #f1a400;
font-size: 14px;
font-weight: 700;
margin-top: 16px;
}
.p-introduce-service__btn {
margin-top: 8px;
padding: 0 16px;
}
.p-introduce-service__btn > .c-btn--3.c-btn--3.c-btn--3.c-btn--3.c-btn--3 {
padding: 8px 16px;
}
.indexes-list li a {
padding: 0 40px;
position: relative;
}
@media (max-width: 737px) {
.indexes-list li a {
padding: 0 24px;
}
}
@media (hover: hover) {
.indexes-list li a:hover::after {
border-color: #fff;
}
}
.indexes-list li a::after {
border-bottom: 2px solid #2f8645;
border-right: 2px solid #2f8645;
content: '';
height: 10px;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(calc(-50% - 10px / 1.414 / 2)) rotate(45deg);
width: 10px;
}
@media (max-width: 737px) {
.indexes-list li a::after {
height: 7px;
right: 10px;
transform: translateY(calc(-50% - 7px / 1.414 / 2)) rotate(45deg);
width: 7px;
}
}
.p-acc-1 {
border: 1px solid var(--c-sea-green);
overflow: hidden;
}
.p-acc-1__tab > button {
background-color: var(--c-white);
border: none;
color: var(--c-sea-green);
font-family: var(--font-sans);
font-size: 16px;
font-weight: 700;
line-height: 1.5;
padding: 8px 48px;
position: relative;
transition: background .2s;
width: 100%;
}
@media (max-width: 737px) {
.p-acc-1__tab > button {
font-size: 14px;
}
}
.p-acc-1__tab > button::after {
--size: 1em;
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: var(--mask-value);
background-color: currentColor;
content: '';
display: block;
height: var(--size);
mask: var(--mask-value);
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
width: var(--size);
}
.p-acc-1__tab > button[aria-expanded="true"]::after {
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.p-acc-1__panel {
overflow: hidden;
padding: 14px 29px;
}
@media (max-width: 737px) {
.p-acc-1__panel {
padding: 12px 14px;
}
}
.p-acc-2 {
border-radius: 4px;
overflow: hidden;
}
.p-acc-2__tab {
height: initial;
padding-top: initial;
}
.p-acc-2__tab > button {
background: var(--c-sea-green);
border: none;
color: #fff;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 700;
line-height: 1.8;
padding: 4px 0;
position: relative;
transition: background .2s;
width: 100%;
}
@media (min-width: 738px) {
.p-acc-2__tab > button {
font-size: 20px;
}
}
.p-acc-2__tab > button::after {
/* backgroundでchevronマークの色を変更する */
/* @link https://systemuicons.com/ */
--size: 28px;
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: var(--mask-value);
background: #fff;
content: '';
display: block;
height: var(--size);
mask: var(--mask-value);
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
transition: transform .3s;
width: var(--size);
}
@media (min-width: 738px) {
.p-acc-2__tab > button::after {
--size: 42px;
height: var(--size);
width: var(--size);
}
}
.p-acc-2__tab > button[aria-expanded="false"]::after {
transform: translateY(-50%) rotateX(180deg);
}
.p-acc-2__panel {
border-bottom: 1px solid #bbb;
border-inline: 1px solid #bbb;
border-radius: 0 0 4px 4px;
overflow: hidden;
padding: 4px 30px;
}
.u-mt--5 {
margin-top: 5px;
}
@media (max-width: 737px) {
.form-wrap .form-item .label-wrap .label {
white-space: initial;
}
}
.p-number-of-matches {
font-weight: 700;
text-align: center;
}
.p-number-of-matches__number {
color: var(--c-accent);
font-size: 24px;
}
.p-number-of-matches__text {
font-size: 18px;
margin-left: 4px;
}
.p-diagnosed-job-change-services__item:not(:first-child) {
margin-top: 48px;
}
.p-job-change-service-card {
border: 1px solid #bbb;
border-radius: 4px;
padding-bottom: 24px;
}
.p-job-change-service-card__header {
border-bottom: 1px solid #555;
height: auto;
padding-bottom: 16px;
padding-top: 0;
}
.p-job-change-service-card__body {
padding: 24px 16px 0;
}
.p-job-change-service-card__footer {
background: none;
margin-top: 0;
padding: 0 16px;
}
.p-job-change-service-card__recommendation {
background: var(--c-teal);
color: #fff;
font-weight: 700;
padding: 8px 16px;
}
.p-job-change-service-card__header-image.p-job-change-service-card__header-image.p-job-change-service-card__header-image.p-job-change-service-card__header-image.p-job-change-service-card__header-image a::after {
content: none;
}
.p-job-change-service-card__header-image :is(figure, img) {
margin: 0;
width: 100%;
}
.p-job-change-service-card__header-image-caption {
color: var(--c-gray-2);
font-size: 12px;
margin-top: 8px;
padding-inline: 8px;
text-align: right;
}
.p-job-change-service-card__header-image-caption a {
color: var(--c-gray-2);
text-decoration: underline;
}
.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary {
column-gap: 24px;
display: grid;
grid-template: repeat(3, auto) / minmax(0, 1fr);
padding-inline: 16px;
}
.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary,
.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary:is(:link, :visited) {
text-decoration: none;
}
.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary::after {
content: none;
}
@media (min-width: 738px) {
.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary.p-job-change-service-card__summary {
grid-template: repeat(2, 70px) / 30% auto;
}
}
.p-job-change-service-card__logo {
align-self: center;
grid-row: 1 / -1;
padding: 0 16px;
}
.p-job-change-service-card__logo img {
aspect-ratio: 16 / 9;
object-fit: contain;
margin: 0;
}
.p-job-change-service-card__slogan {
color: var(--c-mine-shaft);
align-self: end;
}
@media (max-width: 737px) {
.p-job-change-service-card__slogan {
margin-top: 16px;
}
}
.p-job-change-service-card__name > h2 {
color: var(--c-mine-shaft);
font-family: var(--font-sans);
font-size: 1.5em;
margin: 0;
text-align: left;
}
.p-job-change-service-card__name > h2::after {
content: none;
}
.p-job-change-service-card__area {
font-size: 18px;
padding: 0 16px;
}
.p-job-change-service-card__points {
padding-top: 30px;
position: relative;
}
.p-job-change-service-card__area + .p-job-change-service-card__points {
margin-top: 24px;
}
.p-job-change-service-card__points::before {
background: var(--c-accent);
border-radius: 4px;
content: 'Points!';
font-size: 16px;
font-weight: 700;
left: 16px;
letter-spacing: .2rem;
padding: 2px 10px;
position: absolute;
text-indent: .2rem;
top: 0;
}
.p-job-change-service-card__points .c-list-3 {
background: none;
}
.p-job-change-service-card__points .c-list-3__item {
align-items: center;
display: flex;
font-size: 18px;
min-height: 60px;
padding-left: 20px;
position: relative;
}
.p-job-change-service-card__points .c-list-3__item::before {
--size: 8px;
background: var(--c-accent);
border-radius: 50%;
content: '';
height: var(--size);
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--size);
}
.p-job-change-service-card__description.p-job-change-service-card__description {
font-size: 16px;
margin: 16px 0 0;
padding: 0 16px;
}
.p-job-change-service-card__supplement {
margin-top: 16px;
padding-inline: 16px;
}
.p-job-change-service-card__supplement.p-job-change-service-card__supplement > * {
font-size: 16px;
}
.p-job-change-service-card__microcopy {
color: var(--c-accent);
font-size: 16px;
margin-top: 32px;
}
.p-job-change-service-card__to-official {
margin-top: 8px;
}
.p-job-change-service-card__to-official > .c-btn--3.c-btn--3.c-btn--3.c-btn--3.c-btn--3 {
border-radius: 4px;
width: min(300px, 100%);
}
.p-job-change-service-card__to-official.p-job-change-service-card__to-official.p-job-change-service-card__to-official.p-job-change-service-card__to-official.p-job-change-service-card__to-official > a {
color: var(--c-sea-green);
text-decoration: underline;
}
.p-job-change-service-card__to-official.p-job-change-service-card__to-official.p-job-change-service-card__to-official.p-job-change-service-card__to-official.p-job-change-service-card__to-official > a::after {
content: none;
}
.p-job-change-service-card__related-posts {
margin-top: 16px;
padding: 0 16px;
text-align: center;
}
.p-job-change-service-card__related-posts.p-job-change-service-card__related-posts.p-job-change-service-card__related-posts ul li {
list-style: none;
}
.p-job-change-service-diagnosis-answers {
border-collapse: collapse;
font-size: 16px;
margin-inline: auto;
width: min(600px, 100%);
}
.p-job-change-service-diagnosis-answers__caption {
background: var(--c-sub);
border-radius: 4px 4px 0 0;
color: #fff;
font-weight: 700;
line-height: 2.5;
}
.p-job-change-service-diagnosis-answers__tr:nth-child(even) {
background: #f9f9f9;
}
.p-job-change-service-diagnosis-answers__th, .p-job-change-service-diagnosis-answers__td {
padding: 4px 16px;
}
.p-job-change-service-diagnosis-answers__th {
text-align: left;
width: 35%;
}
.c-radio-1 {
display: inline-block;
}
.l-grid-2__item > .c-radio-1 {
width: 100%;
}
.c-radio-1__input {
appearance: none;
opacity: 0;
position: absolute;
}
.c-radio-1__label {
align-items: center;
background: #fff;
border: 1px solid var(--c-celeste);
cursor: pointer;
display: flex;
padding: 8px 16px;
transition: border-color .2s;
}
.c-radio-1__marker {
border: 1px solid var(--c-celeste);
border-radius: 50%;
flex: none;
height: var(--size-radio-btn-1-marker);
left: 0;
position: relative;
transition: border-color .2s;
width: var(--size-radio-btn-1-marker);
}
.c-radio-1__marker::before {
background: var(--c-teal);
border-radius: 50%;
box-sizing: border-box;
content: '';
height: calc(var(--size-radio-btn-1-marker) * 0.6);
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity .2s;
width: calc(var(--size-radio-btn-1-marker) * 0.6);
}
.c-radio-1__input:where(:focus-visible, :checked) + .c-radio-1__label, .c-radio-1__input:checked + .c-radio-1__label > .c-radio-1__marker {
border-color: var(--c-teal);
}
.c-radio-1__input:checked + .c-radio-1__label > .c-radio-1__marker::before {
opacity: 1;
}
.c-radio-1__text {
flex: 1;
margin-left: 8px;
}
.p-form-wizard-1__actions {
display: flex;
justify-content: space-between;
margin-top: 8px;
}
.p-form-wizard-1__prev-btn {
background: none;
border: none;
border-radius: 4px;
color: var(--c-teal);
font-size: 16px;
font-weight: 700;
padding: 10px 24px;
transition: background .2s;
}
@media (hover: hover) {
.p-form-wizard-1__prev-btn:hover {
background: rgba(var(--c-teal-rgb), .2);
}
}
.p-form-wizard-1__next-btn, .p-form-wizard-1__submit-btn {
align-items: center;
background: var(--c-flamenco);
border: none;
border-radius: 20px;
color: var(--c-mine-shaft);
display: inline-flex;
font-size: 16px;
font-weight: 700;
height: 40px;
margin-left: auto;
padding-inline: 40px;
position: relative;
}
:where(.p-form-wizard-1__next-btn, .p-form-wizard-1__submit-btn) > .c-chevron-right-icon-1 {
background-color: currentColor;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.p-form-step-1__header {
align-items: center;
display: flex;
height: auto;
padding: 0;
}
.p-form-step-1__title {
flex: 1;
}
.p-form-step-1__progress {
flex: none;
margin-left: 16px;
}
.p-form-step-1__title > h2 {
align-items: center;
column-gap: 12px;
display: flex;
font-size: 24px;
font-weight: normal;
margin: 0;
text-align: left;
}
.p-form-step-1__title > h2::after {
content: none;
}
.p-form-step-1__title > h2 > span:first-child {
--size: 32px;
align-items: center;
background-color: var(--c-teal);
color: #fff;
display: flex;
flex: 0 0 var(--size);
font-size: 16px;
height: var(--size);
justify-content: center;
position: relative;
}
@media (max-width: 737px) {
.p-form-step-1__title > h2 > span:first-child {
font-size: 14px;
}
}
.p-form-step-1__title > h2 > span:last-child {
flex: 1;
font-size: 16px;
font-weight: 700;
}
@media (max-width: 737px) {
.p-form-step-1__title > h2 > span:last-child {
align-items: center;
display: flex;
font-size: 16px;
min-height: calc(16px * 1.6 * 2);
}
}
.p-progress-nums-1 {
background: var(--c-teal);
border-radius: 13px;
color: #fff;
font-size: 16px;
line-height: 1;
padding: 6px 32px;
}
.p-form-step-1__body {
background-color: var(--c-black-haze);
height: 40vh;
margin-top: 8px;
overflow-y: auto;
padding: 24px 16px;
}
@media (min-width: 738px) {
.p-form-step-1__body {
height: 24vh;
padding-inline: 20px;
}
}
.p-form-step-1__error {
color: var(--c-error);
font-size: 16px;
margin-top: 16px;
padding: 0 16px;
}
.c-select-1 {
display: inline-block;
position: relative;
}
.c-select-1::after {
--size: 10px;
border-bottom: 1px solid #555;
border-right: 1px solid #555;
content: '';
height: var(--size);
position: absolute;
right: 16px;
top: 50%;
transform: translate(calc((var(--size) * 1.414 - var(--size)) / -2), calc(-50% - var(--size) * 1.414 / 2 / 2)) rotate(45deg);
width: var(--size);
}
.c-select-1__select {
appearance: none;
background: #fff;
border: 1px solid var(--c-celeste);
color: #555;
cursor: pointer;
font-size: 18px;
padding: 8px 46px 8px 16px;
transition: border-color .2s;
}
.c-select-1__select:focus-visible {
border-color: var(--c-teal);
outline: none;
}
.c-checkbox-1__input {
appearance: none;
opacity: 0;
position: absolute;
}
.c-checkbox-1__label {
align-items: center;
background: #fff;
border: 1px solid var(--c-celeste);
cursor: pointer;
display: flex;
padding: 8px 16px;
transition: border-color .2s, opacity .2s;
}
.c-checkbox-1--disabled > .c-checkbox-1__label{
cursor: not-allowed;
opacity: .6;
}
.c-checkbox-1__marker {
border: 1px solid var(--c-celeste);
border-radius: 2px;
flex: none;
height: var(--size-check-box-1-marker);
left: 0;
position: relative;
transition: background .2s, border-color .2s;
width: var(--size-check-box-1-marker);
}
.c-checkbox-1__marker::before {
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
box-sizing: border-box;
content: '';
height: calc(var(--size-check-box-1-marker) * 0.6);
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
transform: translate(-50%, calc(-50% - (var(--size-check-box-1-marker) * 0.6 - var(--size-check-box-1-marker) * 0.6 / 1.414) / 2)) rotate(45deg);
transition: opacity .2s;
width: calc(var(--size-check-box-1-marker) * 0.4);
}
.c-checkbox-1__input:where(:focus-visible, :checked) + .c-checkbox-1__label {
border-color: var(--c-teal);
}
.c-checkbox-1__input:checked + .c-checkbox-1__label > .c-checkbox-1__marker {
background: var(--c-teal);
border-color: var(--c-teal);
}
.c-checkbox-1__input:checked + .c-checkbox-1__label > .c-checkbox-1__marker::before {
opacity: 1;
}
.c-checkbox-1__text {
flex: 1;
margin-left: 8px;
}
.slide-enter-active {
transition: opacity .2s ease .3s, max-height 0s ease .2s;
}
.slide-leave-active {
transition: opacity .2s ease, max-height 0s ease .2s;
}
.slide-enter-from,
.slide-leave-to {
max-height: 0;
opacity: 0;
}
.slide-leave-from,
.slide-enter-to {
max-height: 100vh;
}
.t-grid {
display: grid;
}
.t-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.t-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 738px) {
.t-md-grid-cols-\[minmax\(0\,_1fr\)_minmax\(0\,_2fr\)\] {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
@media (min-width: 738px) {
.t-md-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 738px) {
.t-md-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 738px) {
.t-md-row-start-1 {
grid-row-start: 1;
}
}
@media (min-width: 738px) {
.t-md-col-span-full {
grid-column: 1 / -1;
}
}
.t-gap-x-2 {
column-gap: 8px;
}
.t-gap-x-4 {
column-gap: 16px;
}
.t-gap-x-6 {
column-gap: 24px;
}
.t-gap-y-1 {
row-gap: 4px;
}
.t-gap-y-2 {
row-gap: 8px;
}
.t-gap-y-3 {
row-gap: 12px;
}
.t-gap-y-4 {
row-gap: 16px;
}
.t-gap-y-6 {
row-gap: 24px;
}
@media (min-width: 738px) {
.t-md-gap-x-6 {
column-gap: 24px;
}
}
.t-list-none.t-list-none {
list-style-type: none;
}
.t-m-0.t-m-0 {
margin: 0;
}
.t-first-mt-0:first-child {
margin-top: 0;
}
.t-w-15 {
width: 60px;
}
.t-w-fit {
width: fit-content;
}
.t-w-full {
width: 100%;
}
.u-color--red {
color: #f00;
}
.t-text-xs {
font-size: 12px;
line-height: 16px;
}
.t-text-sm {
font-size: 14px;
line-height: 20px;
}
.t-text-base.t-text-base {
font-size: 16px;
line-height: 24px;
}
.t-text-lg.t-text-lg {
font-size: 18px;
line-height: 28px;
}
.t-text-xl {
font-size: 20px;
line-height: 28px;
}
@media (min-width: 738px) {
.t-md-text-sm.t-md-text-sm {
font-size: 14px;
line-height: 20px;
}
}
@media (min-width: 738px) {
.t-md-text-base {
font-size: 16px;
line-height: 24px;
}
}
@media (min-width: 738px) {
.t-md-text-lg.t-md-text-lg {
font-size: 18px;
line-height: 28px;
}
}
@media (min-width: 738px) {
.t-md-text-xl.t-md-text-xl {
font-size: 20px;
line-height: 28px;
}
}
@media (min-width: 738px) {
.t-md-text-2xl.t-md-text-2xl {
font-size: 24px;
line-height: 32px;
}
}
.t-break-keep {
word-break: keep-all;
}
.t-h-full {
height: 100%;
}
.t-mb-4 {
margin-bottom: 16px;
}
.t-ml-2 {
margin-left: 8px;
}
.t-mr-4 {
margin-right: 16px;
}
.t-mt-1 {
margin-top: 4px;
}
.t-mt-2.t-mt-2 {
margin-top: 8px;
}
.t-mt-4 {
margin-top: 16px;
}
.t-mt-6 {
margin-top: 24px;
}
.t-mt-7-5 {
margin-top: 30px;
}
.t-mt-10 {
margin-top: 40px;
}
@media (min-width: 738px) {
.t-md-mt-0 {
margin-top: 0;
}
}
.t-my-6 {
margin-block: 24px;
}
.t-underline.t-underline {
text-decoration-line: underline;
}
.t-block {
display: block;
}
.t-basis-4 {
flex-basis: 16px;
}
.t-grow-0 {
flex-grow: 0;
}
.t-shrink-0 {
flex-shrink: 0;
}
.t-flex.t-flex.t-flex {
display: flex;
}
@media (min-width: 738px) {
.t-md-flex {
display: flex;
}
.t-md-flex-1 {
flex: 1;
}
.t-md-flex-2 {
flex: 2;
}
}
.t-flex-wrap {
flex-wrap: wrap;
}
.t-text-black.t-text-black.t-text-black.t-text-black.t-text-black.t-text-black {
color: var(--c-mine-shaft);
}
.t-text-sub, .t-text-sub:link, .t-text-sub:visited, .t-text-sub:hover, .t-text-sub:active {
color: var(--c-mackerel);
}
.t-text-accent {
color: var(--c-accent);
}
.t-text-teal.t-text-teal {
color: var(--c-teal);
}
.t-after-content-none.t-after-content-none.t-after-content-none.t-after-content-none.t-after-content-none.t-after-content-none::after {
content: none;
}
.t-leading-none {
line-height: 1;
}
.t-leading-4.t-leading-4 {
line-height: 16px;
}
.t-leading-7 {
line-height: 28px;
}
.t-border {
border-width: 1px;
}
.t-border-2 {
border-width: 2px;
}
.t-border-b {
border-bottom-width: 1px;
}
.t-border-dotted {
border-style: dotted;
}
.t-border-dove-gray {
border-color: var(--c-dove-gray);
}
.t-border-flamenco {
border-color: var(--c-flamenco);
}
.t-border-gray-1 {
border-color: #bbb;
}
.t-border-pink-swan {
border-color: #bbb;
}
.t-border-solid {
border-style: solid;
}
.t-border-t-0 {
border-top-width: 0;
}
.t-border-teal {
border-color: var(--c-teal);
}
.t-border-x {
border-inline-width: 1px;
}
.t-border-x-0 {
border-inline-width: 0;
}
.t-rounded-lg {
border-radius: 8px;
}
.t-p-2 {
padding: 8px;
}
.t-p-4 {
padding: 16px;
}
.post-single-column-writer-wrap > .txt-wrap {
margin-top: 16px;
}
.post-single-column-writer-wrap > .txt-wrap > .profile {
font-size: 16px;
}
.p-corr-course-section {
margin-inline: auto;
max-width: 336px;
}
@media (min-width: 738px) {
.p-corr-course-section {
max-width: 800px;
}
}
.p-corr-course-section__title.p-corr-course-section__title {
align-items: center;
background: var(--c-sea-green);
color: #fff;
column-gap: 16px;
display: flex;
font-family: var(--font-sans);
justify-content: center;
margin: 0;
padding: 8px;
position: static;
}
.p-corr-course-section__title > span:first-child {
font-size: 18px;
letter-spacing: .11rem;
}
@media (min-width: 738px) {
.p-corr-course-section__title > span:first-child {
font-size: 24px;
}
}
@media (max-width: 737px) {
.p-corr-course-section__title > span:nth-child(2) {
display: none;
}
}
.p-corr-courses {
display: flex;
flex-direction: column;
row-gap: 16px;
}
.p-corr-courses__item.p-corr-courses__item {
margin: 0;
}
.p-corr-course.p-corr-course.p-corr-course.p-corr-course.p-corr-course.p-corr-course {
align-items: center;
border: 1px solid var(--c-gray-1);
border-radius: 4px;
color: var(--c-mine-shaft);
display: grid;
gap: 8px 16px;
grid-template: repeat(2, auto) / minmax(0, 1fr) auto 32px;
min-height: 90px;
padding: 8px 16px;
text-decoration: none;
}
@media (min-width: 738px) {
.p-corr-course.p-corr-course.p-corr-course.p-corr-course.p-corr-course.p-corr-course {
gap: 0 16px;
grid-template: auto / 200px minmax(0, 1fr) auto 32px;
}
}
.p-corr-course__img {
text-align: center;
}
@media (min-width: 738px) {
.p-corr-course__img {
order: 1;
}
.p-corr-course__doc-request {
order: 3;
}
}
.p-corr-course__caret {
background: var(--c-sea-green);
border-radius: 50%;
}
@media (min-width: 738px) {
.p-corr-course__caret {
order: 4;
}
}
@media (max-width: 737px) {
.p-corr-course__caret {
grid-column: 3;
grid-row: 1 / -1;
}
}
.p-corr-course__caret > .c-chevron-right {
--size: 32px;
background: #fff;
height: var(--size);
width: var(--size);
}
@media (min-width: 738px) {
.p-corr-course__features {
order: 2;
}
}
@media (max-width: 737px) {
.p-corr-course__features {
grid-column: 1 / 3;
}
}
.p-corr-course__features.p-corr-course__features li {
font-size: 14px;
font-weight: 700;
list-style: none;
margin: 0;
padding-left: .7em;
position: relative;
text-align: left;
}
@media (min-width: 738px) {
.p-corr-course__features.p-corr-course__features li {
font-size: 16px;
}
}
.p-corr-course__features li::before {
--size: .3em;
background: currentColor;
border-radius: 50%;
content: '';
height: var(--size);
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: var(--size);
}
.t-inline-block {
display: inline-block;
}
@media (min-width: 738px) {
.t-md-px-4 {
padding-inline: 16px;
}
.t-md-py-2 {
padding-block: 8px;
}
}
.t-bg-main {
background-color: var(--c-sea-green);
}
.t-bg-sub {
background-color: var(--c-sub);
}
.t-bg-accent {
background-color: var(--c-accent);
}
.t-bg-mine-shaft {
background-color: var(--c-mine-shaft);
}
.t-bg-teal {
background-color: var(--c-teal);
}
.t-bg-white {
background-color: var(--c-white);
}
.t-text-white.t-text-white.t-text-white.t-text-white.t-text-white.t-text-white {
color: #fff;
}
.t-font-bold.t-font-bold {
font-weight: 700;
}
.c-chevron-right {
/* backgroundでchevronマークの色を変更する */
/* @link https://systemuicons.com/ */
--size: 16px;
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: var(--mask-value);
display: block;
height: var(--size);
mask: var(--mask-value);
width: var(--size);
}
.t-text-center {
text-align: center;
}
@media (min-width: 738px) {
.t-md-text-left {
text-align: left;
}
}
.t-mx-auto {
margin-inline: auto;
}
.base-inner-slim > :where(.w-career_h1_under_widget, .w-career_h1_under_sp_widget) {
width: 100%;
}
.t-sr-only.t-sr-only.t-sr-only {
border-width: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.t-max-w-600 {
max-width: 600px;
}
.t-max-w-800 {
max-width: 800px;
}
.t-max-w-1080 {
max-width: 1080px;
}
.t-decoration-none.t-decoration-none.t-decoration-none.t-decoration-none.t-decoration-none.t-decoration-none {
text-decoration: none;
}
.c-dotted-line-delimited-list {
display: flex;
flex-direction: column;
row-gap: 48px;
}
.c-dotted-line-delimited-list__item {
position: relative;
}
.c-dotted-line-delimited-list__item:not(:first-child)::before {
border-top: 2px dotted var(--c-gray-1);
content: '';
height: 0;
left: 0;
position: absolute;
top: -24px;
width: 100%;
}
@media (max-width: 737px) {
.p-breadcrumb {
padding-inline: 4vw;
}
}
.p-breadcrumb__list {
display: flex;
list-style: none;
overflow-x: auto;
padding: 10px 0;
}
.p-breadcrumb__item {
display: flex;
}
.p-breadcrumb__item:not(:first-child) > .p-breadcrumb__separator {
padding-left: 22px;
position: relative;
}
@media (max-width: 737px) {
.p-breadcrumb__item:not(:first-child) > .p-breadcrumb__separator {
padding-left: 18px;
}
}
.p-breadcrumb__separator::before {
content: '';
border: 6px solid transparent;
border-left-color: var(--c-gray-2);
height: 0;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-25%, -50%);
width: 0;
}
@media (max-width: 737px) {
.p-breadcrumb__separator::before {
border-width: 4px;
}
}
.p-breadcrumb__link.p-breadcrumb__link {
text-decoration: underline;
}
.p-breadcrumb__link.p-breadcrumb__link, .p-breadcrumb__text.p-breadcrumb__text {
color: var(--c-mine-shaft);
font-size: 12px;
white-space: nowrap;
}
@media (max-width: 737px) {
.p-breadcrumb__link.p-breadcrumb__link, .p-breadcrumb__text.p-breadcrumb__text {
font-size: 10px;
}
}
.c-link-3.c-link-3 {
color: var(--c-mackerel);
text-decoration: none;
}
@media (hover: hover) {
.c-link-3.c-link-3:hover {
color: var(--c-mackerel);
text-decoration: none;
}
}
.t-inline-flex {
display: inline-flex;
}
.t-items-center {
align-items: center;
}
@media (min-width: 738px) {
.t-md-items-center {
align-items: center;
}
}
.t-justify-center {
justify-content: center;
}
.t-flex-col {
flex-direction: column;
}
.t-px-2 {
padding-inline: 8px;
}
.t-px-4 {
padding-inline: 16px;
}
.t-px-6.t-px-6.t-px-6.t-px-6.t-px-6.t-px-6 {
padding-inline: 24px;
}
.t-px-12 {
padding-inline: 48px;
}
.t-px-20 {
padding-inline: 80px;
}
.t-py-1 {
padding-block: 4px;
}
.t-py-2 {
padding-block: 8px;
}
.t-py-4 {
padding-block: 16px;
}
.t-py-5 {
padding-block: 20px;
}
.t-py-6 {
padding-block: 24px;
}
.t-py-7 {
padding-block: 28px;
}
.t-py-8 {
padding-block: 32px;
}
.t-no-underline.t-no-underline.t-no-underline.t-no-underline.t-no-underline.t-no-underline {
text-decoration-line: none;
}
.t-text-2-7xl {
font-size: 28px;
line-height: 36px;
}
.t-h-8 {
height: 32px;
}
.t-h-12 {
height: 48px;
}
.t-h-13-5 {
height: 54px;
}
.t-h-14 {
height: 56px;
}
.t-h-15 {
height: 60px;
}
.t-h-24 {
height: 96px;
}
.t-h-44 {
height: 176px;
}
@media (min-width: 738px) {
.t-md-h-24 {
height: 96px;
}
}
.t-rounded {
border-radius: 4px;
}
.t-rounded-2xl {
border-radius: 16px;
}
.t-rounded-4xl {
border-radius: 36px;
}
.t-rounded-\[28px\] {
border-radius: 28px;
}
.t-rounded-full {
border-radius: 9999px;
}
.t-flex-none {
flex: none;
}
.t-overflow-hidden {
overflow: hidden;
}
.p-seminar-news {
border: 2px solid var(--c-sea-green);
border-radius: 2px;
font-size: 16px;
padding: 24px 16px;
}
@media (min-width: 738px) {
.p-seminar-news {
padding: 24px;
}
}
.p-seminar-news__title {
font-size: 18px;
font-weight: 700;
text-align: center;
}
@media (min-width: 738px) {
.p-seminar-news__title {
font-size: 22px;
}
}
.p-seminar-news__img {
margin-top: 16px;
}
.p-seminar-news__img img {
width: 100%;
}
.p-seminar-news__body {
margin: 24px auto 0;
max-width: 85%;
}
.p-seminar-news__footer {
margin-top: 24px;
}
.p-seminar-news__to-detail {
margin-top: 16px;
text-align: center;
}
.p-toc, .p-toc__item-group {
counter-reset: i;
list-style: none;
padding-left: initial;
}
:where(.p-toc, .p-toc__item-group) > .p-toc__item::before {
content: counter(i)'.';
counter-increment: i;
flex: none;
}
.p-toc > .p-toc__item::before {
font-size: 14px;
line-height: 30px;
}
@media (min-width: 738px) {
.p-toc > .p-toc__item::before {
font-size: 16px;
line-height: 32px;
}
}
.p-toc__item-group > .p-toc__item::before {
font-size: 14px;
line-height: 35px;
}
.p-toc__item.p-toc__item {
column-gap: 4px;
display: grid;
grid-auto-rows: auto;
grid-template-columns: auto minmax(0, 1fr);
margin: initial;
padding-left: 37px;
}
.p-toc > .p-toc__item {
padding: 5px 0 4px 20px;
}
@media (min-width: 738px) {
.p-toc > .p-toc__item {
padding: 7px 25px;
}
}
.p-toc > .p-toc__item:not(:first-child) {
border-top: 1px dotted var(--c-gray-1);
}
.p-toc__link.p-toc__link > a {
color: var(--c-mine-shaft);
font-size: 14px;
line-height: 2.5;
text-decoration: none;
transition: color .2s;
}
@media (hover: hover) {
.p-toc__link.p-toc__link > a:hover {
color: var(--c-mackerel);
}
}
.p-toc > .p-toc__item > .p-toc__link > a {
font-size: 14px;
line-height: 2.1875;
}
@media (min-width: 738px) {
.p-toc > .p-toc__item > .p-toc__link > a {
font-size: 16px;
}
}
.p-toc__item-group {
grid-column: 1 / -1;
}
.portaltop-search-list.tenshokutop h3 > :is(a, a:hover, a.open) {
border: none;
}
.portaltop-search-list.tenshokutop h3 > :is(a, a:hover) {
background: #cbedf6;
}
.portaltop-search-list.tenshokutop h3 > a.open::after {
border-right-color: #b6b6b6;
border-top-color: #b6b6b6;
}
.portaltop-search-list.tenshokutop h3 > a.open > .title {
color: var(--c-mine-shaft);
}
.portaltop-search-list.tenshokutop > .search-job-group > .ac-wrap {
background: #eef9fc;
}
.p-link-card-1.p-link-card-1.p-link-card-1.p-link-card-1.p-link-card-1.p-link-card-1 {
border: 1px solid var(--c-gray-1);
border-radius: 10px;
display: grid;
grid-template: repeat(3, auto) / minmax(0, 1fr);
padding: 16px 24px;
gap: 24px 16px;
text-decoration: none;
}
@media (min-width: 738px) {
.p-link-card-1.p-link-card-1.p-link-card-1.p-link-card-1.p-link-card-1.p-link-card-1 {
grid-template: repeat(2, auto) / minmax(0, 1fr) auto;
}
}
@media (min-width: 738px) {
.p-link-card-1__logo {
grid-column: 1 / -1;
}
}
@media (max-width: 737px) {
.p-link-card-1__logo {
text-align: center;
}
}
.p-link-card-1__logo > img {
max-width: 250px;
}
.p-link-card-1__meta {
color: var(--c-mine-shaft);
font-size: 16px;
}
.p-link-card-1__name {
font-weight: 700;
}
.p-link-card-1__points {
margin-top: 16px;
}
.p-link-card-1__points li {
font-size: 16px;
margin: 0;
}
.p-link-card-1__action {
align-self: center;
color: var(--c-mine-shaft);
}
@media (max-width: 737px) {
.p-link-card-1__action {
text-align: center;
}
}
.t-text-red {
color: var(--c-red);
}
.c-right-side-caret-down {
align-items: center;
column-gap: .5em;
display: inline-flex;
position: relative;
}
.c-right-side-caret-down::after {
border-inline: 0.4em solid transparent;
border-top: 0.5em solid currentColor;
content: '';
}
.c-list-disc {
align-items: center;
column-gap: .35em;
display: inline-flex;
list-style: none;
padding-left: .35em;
}
.c-list-disc::before {
--size: .3em;
background: currentColor;
border-radius: 50%;
content: '';
height: var(--size);
width: var(--size);
}
.c-btn-1 {
box-shadow: 0 2px 3px 0 rgb(0 0 0 / 15%);
transition: box-shadow .2s, transform .2s;
}
.c-btn-1:hover {
box-shadow: 0 7px 10px 0 rgb(0 0 0 / 12%);
transform: translateY(-2px);
}
.c-list-5__item {
list-style: none;
padding-left: 1.5em;
position: relative;
}
.c-list-5__item::before {
border-bottom: .1em solid currentColor;
border-right: .1em solid currentColor;
content: '';
height: .6em;
left: .75em;
position: absolute;
top: 45%; /* 視覚上の上下中央 */
transform: translate(-50%, -50%) rotate(45deg);
width: .3em;
}
.t-font-sans.t-font-sans {
font-family: var(--font-sans);
}
.c-list-6__item {
padding-left: 1.5em;
position: relative;
}
.c-list-6__item::before {
--size: .3em;
background: var(--c-sub);
border-radius: 50%;
content: '';
height: var(--size);
left: .75em;
position: absolute;
top: 12px;
transform: translateY(-50%);
width: var(--size);
}
@media (min-width: 738px) {
.c-list-6__item::before {
top: 14px;
}
}
.t-max-w-200 {
max-width: 800px;
}
.t-px-\[4vw\] {
padding-inline: 4vw;
}
@media (min-width: 738px) {
.t-md-px-0 {
padding-inline: 0;
}
}
.p-accordion-1 {
border: 1px solid var(--c-sea-green);
overflow: hidden;
overflow-wrap: break-word;
}
.p-accordion-1__summary {
color: var(--c-sea-green);
cursor: pointer;
display: block;
padding-inline: 48px;
position: relative;
transition: background-color .2s;
}
.p-accordion-1__summary::-webkit-details-marker {
display: none;
}
.p-accordion-1__summary::after {
--size: 1em;
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: var(--mask-value);
background-color: currentColor;
content: '';
display: block;
height: var(--size);
mask: var(--mask-value);
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
width: var(--size);
}
:where(.p-accordion-1--opening, .p-accordion-1--opened) > .p-accordion-1__summary::after {
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.p-accordion-2 {
border: 1px solid var(--c-sea-green);
overflow: hidden;
overflow-wrap: break-word;
}
.p-accordion-2__summary {
background-color: var(--c-sea-green);
color: var(--c-white);
cursor: pointer;
display: block;
padding-inline: 48px;
position: relative;
transition: background-color .2s;
}
.p-accordion-2__summary::-webkit-details-marker {
display: none;
}
.p-accordion-2__summary::after {
--size: 1em;
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: var(--mask-value);
background-color: currentColor;
content: '';
display: block;
height: var(--size);
mask: var(--mask-value);
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
width: var(--size);
}
:where(.p-accordion-2--opening, .p-accordion-2--opened) > .p-accordion-2__summary::after {
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.t-text-mackerel {
color: var(--c-mackerel);
}
.t-text-mine-shaft.t-text-mine-shaft {
color: var(--c-mine-shaft);
}
.c-caret-icon-right-1 {
--size: 16px;
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: var(--mask-value);
display: block;
height: var(--size);
mask: var(--mask-value);
width: var(--size);
}
.c-chevron-down-icon-2 {
--size: 16px;
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: var(--mask-value);
display: block;
height: var(--size);
mask: var(--mask-value);
transition: transform .2s;
width: var(--size);
}
.c-chevron-right-icon-1 {
--size: 16px;
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: var(--mask-value);
display: block;
height: var(--size);
mask: var(--mask-value);
transition: transform .2s;
width: var(--size);
}
.c-list-icon-1 {
--size: 1em;
--mask-value: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: var(--mask-value);
background-color: currentColor;
display: block;
height: var(--size);
mask: var(--mask-value);
width: var(--size);
}
.t-border-none {
border-style: none;
}
.p-button-1 {
position: relative;
}
.p-button-1__text {
color: var(--c-teal);
}
.p-button-1__icon {
background-color: var(--c-teal);
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
}
@media (hover: hover) {
.p-button-1:hover > .p-button-1__text {
color: var(--c-white);
}
.p-button-1:hover > .p-button-1__icon {
background-color: var(--c-white);
}
}
@media (hover: hover) {
.t-hover-bg-flamenco:hover {
background-color: var(--c-flamenco);
}
.t-hover-bg-teal:hover {
background-color: var(--c-teal);
}
.t-hover-text-white:hover {
color: var(--c-white);
}
}
.t-duration-200 {
transition-duration: 200ms;
}
.t-cursor-pointer {
cursor: pointer;
}
[id="inc-related-posts"] + div > .common-matome-list > .item {
width: 280px;
}
.t-pb-2 {
padding-bottom: 8px;
}
.t-pb-6 {
padding-bottom: 24px;
}
.c-box-2 {
background-image: linear-gradient(0deg, var(--c-mine-shaft) 1px, var(--c-black-haze) 1px 5px, var(--c-mine-shaft) 5px 6px, var(--c-black-haze) 6px calc(100% - 6px), var(--c-mine-shaft) calc(100% - 6px) calc(100% - 5px), var(--c-black-haze) calc(100% - 5px) calc(100% - 1px), var(--c-mine-shaft) calc(100% - 1px));
padding-block: 6px;
}
.t-h-auto {
height: auto;
}
.p-fab {
bottom: 10px;
position: fixed;
right: 44px;
z-index: 5;
}
@media (min-width: 738px) {
.p-fab {
bottom: 40px;
right: 80px;
}
}
.p-fab--absolute {
bottom: calc(100% + 10px);
position: absolute;
}
@media (min-width: 738px) {
.p-fab--absolute {
bottom: calc(100% + 40px);
}
}
.c-button-02 {
align-items: center;
border-radius: 28px;
display: inline-flex;
font-weight: 700;
height: 40px;
justify-content: center;
overflow: hidden;
padding-inline: 48px;
position: relative;
}
@media (min-width: 738px) {
.c-button-02 {
height: 56px;
padding-inline: 64px;
}
}
.c-button-02--sub {
background-color: var(--c-teal);
color: var(--c-white);
}
.c-icon-caret-right {
--width: 0.57em;
-webkit-mask: var(--mask-caret-right);
aspect-ratio: 4 / 7;
display: inline-block;
mask: var(--mask-caret-right);
width: var(--width);
}
@media (min-width: 738px) {
.c-icon-caret-right {
--width: 0.67em;
}
}
.grecaptcha-badge {
visibility: hidden;
}
/* Projects */
.p-scroll-to-top-button {
--size: 40px;
aspect-ratio: 1;
background-color: #fff;
border: 1px solid #068481;
border-radius: 50%;
display: block;
inline-size: var(--size);
position: relative;
transition: background-color 0.3s;
@media (min-width: 738px) {
--size: 60px;
}
@media (any-hover: hover) {
&:hover {
background-color: #068481;
&::before {
background-color: #fff;
}
}
}
&::before {
aspect-ratio: var(--mask-chevron-down-aspect-ratio);
background-color: #068481;
contain: content;
content: '';
display: block;
inline-size: 16px;
inset: 0;
margin: auto;
-webkit-mask: var(--mask-chevron-down);
mask: var(--mask-chevron-down);
rotate: 180deg;
position: absolute;
transition: background-color 0.3s;
}
}
/* Compound utility */
.u-text-sm {
font-size: 14px !important; /* 0.875rem */
line-height: 20px !important; /* 1.25rem */
}
.u-text-base {
font-size: 16px !important; /* 1rem */
line-height: 24px !important; /* 1.5rem */
}
.u-text-lg {
font-size: 18px !important; /* 1.125rem */
line-height: 28px !important; /* 1.75rem */
}
.u-transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
transition-duration: 150ms !important;
}
@media (width >= 738px) {
.md\:u-text-2xl {
font-size: 24px !important; /* 1.5rem */
line-height: 32px !important; /* 2rem */
}
}
/* Single utility */
.\[mask\:var\(--mask-buildings\)\] {
mask: var(--mask-buildings) !important;
}
.\[mask\:var\(--mask-comment-dots\)\] {
mask: var(--mask-comment-dots) !important;
}
.\[mask\:var\(--mask-chevron-left\)\] {
mask: var(--mask-chevron-left) !important;
}
.\[mask\:var\(--mask-chevron-right\)\] {
mask: var(--mask-chevron-right) !important;
}
.\[mask\:var\(--mask-link\)\] {
mask: var(--mask-link) !important;
}
.\[mask\:var\(--mask-list-ul\)\] {
mask: var(--mask-list-ul) !important;
}
.\[mask\:var\(--mask-newspaper\)\] {
mask: var(--mask-newspaper) !important;
}
.\[mask\:var\(--mask-pencil\)\] {
mask: var(--mask-pencil) !important;
}
.\[mask\:var\(--mask-users\)\] {
mask: var(--mask-users) !important;
}
.\[translate\:0_-50\%\] {
translate: 0 -50% !important;
}
.u-absolute {
position: absolute !important;
}
.u-aspect-\[--mask-chevron-left-aspect-ratio\] {
aspect-ratio: var(--mask-chevron-left-aspect-ratio) !important;
}
.u-aspect-\[--mask-chevron-right-aspect-ratio\] {
aspect-ratio: var(--mask-chevron-right-aspect-ratio) !important;
}
.u-aspect-\[--mask-list-ul-aspect-ratio\] {
aspect-ratio: var(--mask-list-ul-aspect-ratio) !important;
}
.u-aspect-\[3\/2\] {
aspect-ratio: 3 / 2 !important;
}
.u-aspect-square {
aspect-ratio: 1 / 1 !important;
}
.u-bg-black {
background-color: rgb(0 0 0) !important;
}
.u-bg-\[\#76a86f\] {
background-color: #76a86f;
}
.u-bg-\[--c-peppermint\] {
background-color: var(--c-peppermint) !important;
}
.u-bg-current {
background-color: currentColor !important;
}
.u-bg-sub {
background-color: var(--c-teal);
}
.u-bg-transparent {
background-color: transparent !important;
}
.aria-\[current\=\'page\'\]\:u-bg-\[--c-barley-white\][aria-current='page'] {
background-color: var(--c-barley-white) !important;
}
.u-block {
display: block !important;
}
.u-block-start-1\/2 {
inset-block-start: 50% !important;
}
.u-block-start-\[100px\] {
inset-block-start: 100px !important;
}
.u-block-start-\[132px\] {
inset-block-start: 132px !important;
}
.u-block-start-full {
inset-block-start: 100% !important;
}
.u-border {
border-width: 1px !important;
}
.u-border-\[--c-pink-swan\] {
border-color: var(--c-pink-swan) !important;
}
.u-border-0 {
border-width: 0 !important;
}
.u-border-b {
border-bottom-width: 1px !important;
}
.u-border-be-0 {
border-block-end-width: 0 !important;
}
.u-border-bs {
border-block-start-width: 1px !important;
}
.u-border-dotted {
border-style: dotted;
}
.u-border-dove-gray {
border-color: var(--c-dove-gray);
}
.u-border-ie-0 {
border-inline-end-width: 0 !important;
}
.last\:u-border-ie:last-child {
border-inline-end-width: 1px !important;
}
.u-border-is {
border-inline-start-width: 1px !important;
}
.u-border-lb-0 {
border-block-width: 0 !important;
}
.u-border-li-0 {
border-inline-width: 0 !important;
}
.u-border-none {
border-style: none !important;
}
.u-border-solid {
border-style: solid !important;
}
.u-border-sub {
border-color: var(--c-teal);
}
.u-border-t-0 {
border-top: 0 !important;
}
.u-border-x-0 {
border-inline: 0 !important;
}
.u-bs-\[18px\] {
block-size: 18px !important;
}
.u-decoration-transparent {
text-decoration-color: transparent !important;
}
.u-duration-200 {
transition-duration: 200ms !important;
}
.u-fixed {
position: fixed !important;
}
.u-flex {
display: flex !important;
}
.u-flex-\[1_0_104px\] {
flex: 1 0 104px !important;
}
.u-flex-col {
flex-direction: column !important;
}
.u-flex-none {
flex: none !important;
}
.u-font-bold {
font-weight: 700 !important;
}
.u-gap-2 {
gap: 8px !important;
}
.u-gap-4 {
gap: 16px !important;
}
.u-gap-x-2 {
column-gap: 8px !important;
}
.u-gap-x-4 {
column-gap: 16px !important;
}
.u-gap-y-2 {
row-gap: 8px !important;
}
.u-gap-y-6 {
row-gap: 24px !important;
}
.u-grid {
display: grid !important;
}
.u-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.u-hidden {
display: none !important;
}
.u-inline-block {
display: inline-block !important;
}
.u-inline-flex {
display: inline-flex !important;
}
.u-inline-start-0 {
inset-inline-start: 0 !important;
}
.u-inline-start-8 {
inset-inline-start: 32px !important;
}
.u-inline-end-0 {
inset-inline-end: 0 !important;
}
.u-inline-end-8 {
inset-inline-end: 32px !important;
}
.u-is-\[10px\] {
inline-size: 10px !important;
}
.u-is-4 {
inline-size: 16px !important;
}
.u-is-\[104px\] {
inline-size: 104px !important;
}
.u-is-full {
inline-size: 100% !important;
}
.u-items-center {
align-items: center !important;
}
.u-justify-center {
justify-content: center !important;
}
.u-leading-\[0\] {
line-height: 0 !important;
}
.u-m-0 {
margin: 0 !important;
}
.u-max-is-\[1080px\] {
max-inline-size: 1080px !important;
}
.u-mbs-0 {
margin-block-start: 0 !important;
}
.u-mbs-4 {
margin-block-start: 16px !important;
}
.u-mbs-12 {
margin-block-start: 48px !important;
}
.u-mli-auto {
margin-inline: auto !important;
}
.u-no-underline, .u-no-underline:link {
text-decoration-line: none !important;
}
.u-object-cover {
object-fit: cover !important;
}
.u-overflow-x-auto {
overflow-x: auto !important;
}
.u-overflow-hidden {
overflow: hidden !important;
}
.u-p-0 {
padding: 0 !important;
}
.u-p-4 {
padding: 16px !important;
}
.u-pbs-4 {
padding-block-start: 16px !important;
}
.u-plb-2 {
padding-block: 8px !important;
}
.u-plb-3 {
padding-block: 12px !important;
}
.u-pli-\[50px\] {
padding-inline: 50px !important;
}
.u-pli-4 {
padding-inline: 16px !important;
}
.u-relative {
position: relative !important;
}
.u-text-\[--c-mine-shaft\] {
color: var(--c-mine-shaft) !important;
}
.u-text-black {
color: rgb(0 0 0) !important;
}
.u-text-center {
text-align: center !important;
}
.u-text-white {
color: rgb(255 255 255) !important;
}
.u-underline {
text-decoration-line: underline !important;
}
@media (any-hover: hover) {
.hover\:u-decoration-white:hover {
text-decoration-color: #fff !important;
}
.hover\:u-bg-\[var\(--c-main\)\]:hover {
background-color: var(--c-main) !important;
}
.hover\:u-bg-\[\#fef5ce\]:hover {
background-color: #fef5ce !important;
}
.hover\:u-text-white:hover {
color: rgb(255 255 255) !important;
}
.u-group:hover .group-hover\:u-bg-white {
background-color: rgb(255 255 255) !important;
}
.u-group:hover .group-hover\:u-text-white {
color: rgb(255 255 255) !important;
}
}
@media (width >= 738px) {
.md\:u-border {
border-width: 1px !important;
}
.md\:u-border-\[var\(--c-celeste\)\] {
border-color: var(--c-celeste) !important;
}
.md\:u-border-solid {
border-style: solid !important;
}
.md\:u-block {
display: block !important;
}
.md\:u-flex-\[1_0_132px\] {
flex: 1 0 132px !important;
}
.md\:u-flex-\[2\] {
flex: 2 !important;
}
.md\:u-flex-1 {
flex: 1 !important;
}
.md\:u-flex-row {
flex-direction: row !important;
}
.md\:u-gap-4 {
gap: 16px !important;
}
.md\:u-gap-x-3 {
column-gap: 12px !important;
}
.md\:u-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.md\:u-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.md\:u-hidden {
display: none !important;
}
.md\:u-is-\[132px\] {
inline-size: 132px !important;
}
.md\:u-p-2 {
padding: 8px !important;
}
.md\:u-p-4 {
padding: 16px !important;
}
.md\:u-p-8 {
padding: 32px !important;
}
.md\:u-rounded {
border-radius: 4px !important;
}
}
@media (width >= 1080px) {
.min-\[1080px\]\:u-pli-0 {
padding-inline: 0 !important;
}
}
@media (width >= 1300px) {
.min-\[1300px\]\:u-border-\[--c-dove-gray\] {
border-color: var(--c-dove-gray) !important;
}
.min-\[1300px\]\:u-border-be-0 {
border-block-end-width: 0 !important;
}
.min-\[1300px\]\:u-border-bs {
border-block-start-width: 1px !important;
}
.min-\[1300px\]\:u-border-ie-0 {
border-inline-end-width: 0 !important;
}
.min-\[1300px\]\:last\:u-border-ie:last-child {
border-inline-end-width: 1px !important;
}
.min-\[1300px\]\:u-border-is {
border-inline-start-width: 1px !important;
}
.min-\[1300px\]\:u-border-lb-0 {
border-block-width: 0 !important;
}
.min-\[1300px\]\:u-border-li-0 {
border-inline-width: 0 !important;
}
.min-\[1300px\]\:u-border-solid {
border-style: solid !important;
}
.min-\[1300px\]\:u-flex-\[0_0_200px\] {
flex: 0 0 200px !important;
}
}