html {
/*
の文字サイズを滑らかに変化させる
画面幅(vw)に応じてサイズを計算
*/
font-size: 0.52vw;
}
/*
Theme Name: Co+ Design Theme
Description: 転職・採用コンサルティングサイト用のカスタムテーマ
Version: 1.0
Author: Co+ Design
*/
/* ===================== PC版でのSP要素非表示管理（720px以上） ===================== */
/* PC版（720px以上）では、すべてのSP版要素を非表示にする */
@media (min-width: 769px) {
.sp-header,
.sp-header-btn,
.sp-header-menu,
.sp-menu-btn,
.sp-menu-text,
.sp-menu-overlay,
.sp-menu-content,
.sp-overlay-header,
.sp-overlay-header-btn,
.sp-overlay-close-btn,
.sp-overlay-close-text,
.sp-menu-items,
.sp-company-analysis-btn,
.sp-consultation-btn,
/* SP版フロントページ要素 */
.hero-section-sp,
.hero-img-sp,
.scroll-section-sp,
.scroll-text-sp,
.scroll-icon-sp,
.about-section-sp,
.about-text-sp,
.about-text-highlight,
.about-button-sp,
.consultation-btn-link-sp,
.consultant-name-sp,
.voice-image-sp,
.voice-photos-sp,
.company-about__photo-sp,
.company-about__text-sp,
.feature-card__headline-sp,
.feature-card__body-sp,
.company-features__contact-text-sp,
.recruit-message__text-sp,
.essence-card__bg-sp,
.essence-card__title-sp,
.essence-card__text-sp,
.essence-card__img-sp,
.post-info-wrap-sp,
.footer-cta-section__text-sp,
.footer-cta-section__btn-text-sp,
.consultant-photo__image-sp,
.consultant-card__image-sp,
.voice-image-text-sp,
.top-message-img-sp {
display: none;
}
}
/* ===================== PC版ヘッダー（720px以上） ===================== */
/* 新しいヘッダー */
.header-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: auto;
display: flex;
align-items: center; /* flex-startからcenterに変更 */
justify-content: space-between; /* flex-endからspace-betweenに変更 */
padding-top: 0;
z-index: 1000;
}
/* 左上のロゴボタン */
.logo-container {
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.logo-link {
display: block;
text-decoration: none;
}
.logo-image {
display: block;
width: 18.9vw;
height: 8.9vw;
}
/* ヘッダーのdiv */
.header-div {
position: fixed;
top: 2.1vw;
right: 2.8vw;
/* width: 30.8333vw; */
height: 4.9444vw;
background: white;
border-radius: 0.4444vw;
z-index: 90;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.83vw;
box-sizing: border-box;
}
/* ナビゲーションリスト */
.nav-list ul {
display: flex;
list-style: none;
margin: 0;
padding: 0.8889vw 0.6667vw 0.8889vw 0.6667vw;
gap: 0.8889vw;
align-items: center;
}
/* ナビとボタンの間隔を約16pxに調整 */
.nav-list {
/* margin-right: 0.83vw; */
/* gap: 1.25vw; */
}
.nav-list li {
margin: 0;
padding: 0;
}
.nav-list a {
color: #131C2E;
text-decoration: none;
font-family: 'Noto Sans JP', sans-serif;
font-size: clamp(11px,1.4rem,160px);
font-weight: 700;
transition: opacity 0.3s;
white-space: nowrap;
}
.nav-list a:hover {
opacity: 0.7;
}
/* ヘッダーボタン */
.header-btn {
/* padding: 8px 6px 0 0; 右余白を少し狭く */
}
.header-btn a {
display: flex;
/* display: block; */
text-decoration: none;
width: 12.5vw;
height: clamp(20px,3.33vw,1000px);
margin-right: 0.5vw;
justify-content: center;
align-items: center;
border-radius: 0.4444vw;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
color: #FFF;
text-align: center;
font-feature-settings: 'pwid' on, 'palt' on;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.8rem,180px);
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 1.8px;
}
.consultation-btn {
position: absolute; /* staticからabsoluteに変更 */
top: 50%; /* 垂直中央に配置 */
right: 10px; /* 右端から10px */
transform: translateY(-50%); /* 垂直中央揃え */
display: flex;
align-items: center;
z-index: 20;
}
.consultation-btn img {
display: block;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ヒーローセクションの共通部分 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.hero {
height: auto;
background-image: url('images/ttl_bg_pc.png');
background-color: transparent;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
padding: 4.0rem;
}
.hero__inner {
max-width: 192rem;
text-align: center;
margin: 14.7rem auto 0.9rem auto;
}
.hero__title {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP", serif;
font-size: clamp(12px, 6.4rem, 1280px);
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.512rem;
margin: 0;
}
.hero__title::after {
content: "";
display: block;
width: 8rem;
height: 0.4rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 2.4rem auto;
}
.hero__label {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: clamp(11px,3.2rem,420px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.96rem;
margin: 0;
}
/* --------------------------フロントページ---------------------------------- */
/* ヒーローセクション */
.hero-section {
width: 100%;
height: auto;
flex-shrink: 0;
aspect-ratio: 48/25;
background: #131C2E;
margin: 0;
padding: 0;
position: relative;
padding-top: 9.6rem;
}
.hero-image {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.hero-img {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
/* スクロールセクション */
.scroll-section {
display: flex;
height: 10rem;
padding: 4rem 0;
justify-content: center;
align-items: center;
flex-shrink: 0;
align-self: stretch;
background: var(--dark-01131-c-2-e, #131C2E);
}
.scroll-img {
display: block;
height: 6.1vw;
width: 4vw;
}
/* アバウトセクション */
.about-section {
display: flex;
height: auto; /* 高さを自動に変更 */
padding: 4rem 0 4rem 0; /* 左右のパディングを削除 */
justify-content: center;
align-items: center;
background: var(--dark-01131-c-2-e, #131C2E);
flex-direction: column;
width: 100%;
position: relative;
z-index: 10;
}
.about-content {
width: 100%;
margin: 0 auto; /* 中央揃え */
padding: 0 20px; /* 左右の余白 */
box-sizing: border-box;
}
.about-text {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(11px,2.4rem,302px);
font-style: normal;
font-weight: 900;
line-height: 200%; /* 48px */
}
/* 特定のテキストに一行分の空白を追加 */
/* .about-text.extra-spacing 削除 */
.highlight-orange {
color: var(--secondary-ff-4-e-00, #FF7500);
font-family: "Noto Serif JP";
font-size: clamp(11px,3.2rem,400px);
font-style: normal;
font-weight: 900;
line-height: 200%;
}
.about-button {
display: flex;
width: 41.67vw;
height: 8vw;
/* min-height: 120px; 最小高さを確実に設定 */
justify-content: center;
align-items: center;
border-radius: 1.3333vw;
border: 1px solid var(--grad01alt, #1A2459);
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 5.2vw auto; /* 上100px 左右中央 下0px */
/* flex-shrink: 0; 縮小を防ぐ */
box-sizing: border-box;
}
.about-button a {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(11px,3rem,400px);
font-style: normal;
font-weight: 700;
line-height: 1; /* normalから1に変更 */
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 120px; /* 最小高さを確実に設定 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* コンサルタントセクション */
.consultant-section {
width: 100%;
height: auto;
flex-shrink: 0;
background: var(--white-01-f-1-eff-0, #F1EFF0);
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* ---------------- Front Page Consultant Section (flex layout) ---------------- */
[data-href] {
cursor: pointer;
}
/* コンサルタントアイテム全体のラップ */
.consultant-item {
margin: 7.92vw auto 12.34vw auto;
display: flex;
flex-direction: column;
gap: 6.17vw;
}
/* アイテム行: 写真とテキストを横並び、間隔40px */
.consultant-item-right {
position: relative;
display: flex;
gap: 2.08vw;
align-items: flex-start;
margin-top: 2vw;
}
.consultant-item-left {
position: relative;
display: flex;
gap: 2.08vw;
align-items: flex-start;
margin-top: 2vw;
}
/* 英字名: 大きな背景的テキスト */
.consultant-section .consultant-item-right .consultant-name {
position: absolute;
top: -2.5rem;
right: 0;
font-size: clamp(100px,18rem,2400px); /* 180px */
color: var(--white-02-d-8-dae-2, #D8DAE2);
font-family: "Noto Serif JP";
font-weight: 700;
line-height: 1;
pointer-events: none;
text-align: right;
}
.consultant-section .consultant-item-left .consultant-name {
position: absolute;
top: -2.5rem;
left: 0;
font-size: clamp(100px,18rem,2400px); /* 180px */
color: var(--white-02-d-8-dae-2, #D8DAE2);
font-family: "Noto Serif JP";
font-weight: 700;
line-height: 1;
pointer-events: none;
text-align: left;
}
/* 写真: vwでサイズ指定、通常フローに */
.consultant-photo {
position: static;
width: 25vw; /* 480px */
height: 18.75vw; /* 360px */
min-width: 270px;
min-height: 220px;
flex-shrink: 0;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
z-index: 50;
}
.consultant-photo__image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 情報ラップ: 左側写真の右に縦積み */
.consultant-section .consultant-item-right .consultant-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 35.42vw;
height: 18.75vw;
min-width: 380px;
min-height: 220px;
z-index: 10;
}
.consultant-section .consultant-item-left .consultant-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 35.42vw;
height: 18.75vw;
min-width: 380px;
min-height: 200px;
z-index: 10;
}
/* 日本語名 */
.consultant-japanese-name{
position: static;
font-size: clamp(12px,6.4rem,800px); /* 64px */
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-weight: 700;
line-height: 1;
text-align: left;
margin: 0;
}
/* 役職 */
.consultant-position{
position: static;
margin: 0;
margin-top: 0.8333vw;
font-size: clamp(12px,1.4rem,160px); /* 14px */
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-weight: 900;
line-height: 1;
text-align: left;
}
.consultant-lineview {
display: flex;
gap: clamp(35px, 5rem, 200px);
/* 垂直方向の中央揃えを追加すると、見た目が良くなります */
align-items: flex-end;
margin-top: 0.8rem;
}
/* 役職下のライン */
.consultant-position-line{
position: static;
width: 4.1667vw; /* 80px */
height: 2px;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin-top: 1.25vw;
position: relative;
z-index: 10;
}
/* .viewmore 自体ではなく、中の a タグにスタイルを適用する方が一般的です */
.viewmore {
position: relative;
border: none;
border-bottom: 1px solid #666;
width: 14rem;
min-width: 100px;
color: #333; /* 文字色を推奨 */
text-decoration: none; /* aタグのデフォルト下線を消去 */
padding-bottom: 0.5rem; /* 下線との間に余白を追加 */
max-width: 90%;
}
.viewmore a {
color: #333;
font-size: clamp(11px, 1.8rem, 400px);
text-decoration: none;
}
/* ::before ではなく ::after の方が自然かもしれません */
.viewmore a::before {
content: "";
display: block;
width: 3rem;
height: 0.1rem;
background: #666;
rotate: 40deg;
position: absolute;
right: -0.3rem;
bottom: 0.9rem;
}
.consultant-profile{
position: static;
width: 68rem;
height: 8.3rem;
min-width: 380px;
margin: 0;
margin-top: 0.8333vw;
font-size: clamp(11px,1.4rem,320px); /* 14px */
line-height: 1.5;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Sans JP";
text-align: left;
z-index: 10;
}
.consultant-bg-text {
margin-top: -6rem;
/* margin-right: -2.71vw; */
color: var(--white-02-d-8-dae-2, #D8DAE2);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(11px,20rem,240px);
font-style: normal;
font-weight: 900;
line-height: normal;
align-self: flex-end;
position: relative;
z-index: 1;
}
/* CONSULTANT タイトルとラインのラップ */
/* CONSULTANT テキスト */
.consultant-section .section-title {
margin-top: -4.48vw;
margin-left: 16.67vw;
align-self: flex-start;
z-index: 10;
}
.consultant-section .section-title h2 {
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Gill Sans";
font-size: clamp(11px, 10rem, 240px);
font-style: normal;
font-weight: 300;
line-height: normal;
margin: 0;
}
.consultant-section .section-title h2::after {
content: '';
display: block;
width: 8rem;
height: 0.4rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
/* margin: 4rem auto 0; */
}
/* 相談ボタン */
.consultant-item-right .consultant-button {
position: absolute;
right: 0;
bottom: -10px;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 16px;
border-radius: 60px;
background: var(--primary-0-d-355-c, #0D355C);
margin: 0;
align-self: flex-end;
z-index: 10;
}
.consultant-item-left .consultant-button {
position: absolute;
left: 0;
bottom: -25px;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 16px;
border-radius: 60px;
background: var(--primary-0-d-355-c, #0D355C);
margin: 0;
align-self: flex-end;
z-index: 10;
}
.consultant-button a {
color: var(--white-ffffff, #FFF);
text-align: center;
font-feature-settings: 'pwid' on, 'palt' on;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.8rem,204px);
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 1.8px;
text-decoration: none;
position: relative;
padding: 0.6771vw 0.8333vw 0.5729vw 2.5vw;
transition: background 0.3s ease, color 0.3s ease;
}
.consultant-button a:after {
content: '';
display: inline-block;
width: clamp(16px,1.75rem,50px);
height: clamp(30px,3.2rem,50px);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M17.4821 30L27.5 20L17.4821 10L15 12.4777L22.5358 20L15 27.5223L17.4821 30Z' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
vertical-align: middle;
}
.consultant-button:hover {
background: #FFFFFF;
box-shadow: 0 0 0 1px var(--primary-0-d-355-c, #0D355C) inset;
}
.consultant-button:hover a {
color: var(--primary-0-d-355-c, #0D355C);
}
.consultant-button:hover a:after {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M17.4821 30L27.5 20L17.4821 10L15 12.4777L22.5358 20L15 27.5223L17.4821 30Z' fill='%230D355C'/%3E%3C/svg%3E") no-repeat center / contain;
}
.consultant-btn-link {
display: inline-flex;
padding: 11px 16px 13px 48px;
justify-content: center;
align-items: center;
gap: 16px;
border-radius: 60px;
background: var(--primary-0-d-355-c, #0D355C);
text-decoration: none;
color: var(--white-ffffff, #FFF);
text-align: center;
font-feature-settings: 'pwid' on, 'palt' on;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.8rem,240px);
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 1.8px;
}
.btn-icon {
width: 4rem;
height: 4rem;
}
/* ===================== Voice Page (転職者の声) ===================== */
/*削除予定 -- Hero section -- */
/* .voice-hero {
height: 40rem;
flex-shrink: 0;
background-image: url('images/hero_pc.png');
background-color: transparent;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
}
.voice-hero__inner {
max-width: 192rem;
text-align: center;
}
.voice-hero__title {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP", serif;
font-size: clamp(11px, 6.4rem, 90px);
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.512rem;
margin: 0;
padding-top: 18.8rem;
}
.voice-hero__line {
width: 80px;
height: 4px;
flex-shrink: 0;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 24px auto 0;
}
.voice-hero__about {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: clamp(11px,3.2rem,42px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.96rem;
margin: 6rem 0 0 0;
} */
/* ===================== Common (共通) - Breadcrumb ===================== */
.breadcrumb {
/* width: 100%; */
height: 4rem;
flex-shrink: 0;
background: var(--dark-02333844, #333844);
display: flex; /* 横1920pxの中央に寄せる */
}
/* ===================== For Company Page (企業の方へ) ===================== */
/* -- Hero section -- */
/* .company-hero {
height: 40rem;
background-image: url('images/hero_pc.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
}
.company-hero__inner {
text-align: center;
} */
.company-about {
height: auto;
display: flex;
flex-direction: column;
background: var(--dark-01131-c-2-e, #131C2E);
z-index: 1;
overflow: hidden;
padding-bottom: 24rem;
}
.company-about__bgtext {
margin-top: -7.2rem;
margin-right: -2.2rem;
color: var(--link-black-2-a-3-b-62, #0D355C);
text-align: right;
font-family: "Noto Serif JP";
font-size: 20rem;
font-style: normal;
font-weight: 900;
line-height: normal;
pointer-events: none;
z-index: 0; /* 最背面（セクション内） */
white-space: nowrap; /* 改行させない */
}
/* .company-about__heading {
margin: 0;
color: var(--white-ffffff, #FFF);
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: 8rem;
font-style: normal;
font-weight: 200;
line-height: normal;
z-index: 1;
white-space: nowrap; /* 改行させない（前面表示のまま重ねる） */
}
/* .company-about__line {
width: 8rem;
height: 0.4rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
z-index: 1;
} */
.section-title {
}
.section-title h2 {
margin-top: 0;
margin-bottom: 0;
color: var(--white-ffffff, #FFF);
font-family: "Gill Sans", sans-serif;
font-size: clamp(40px, 8rem, 800px);
font-style: normal;
font-weight: 300;
line-height: normal;
margin-left: 32rem;
margin-top: -9.6rem;
position: relative;
z-index: 20;
}
.section-title h2::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin: 0;
margin-top: 3.2rem;
margin-bottom: 7.2rem;
}
.company-about__photo {
width: 128rem;
height: 72rem;
display: block;
z-index: 1;
margin-left: 64rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
}
.company-about__panel {
width: 128rem;
height: 46.4rem;
background: #212D49;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
margin-top: -64rem;
margin-left: 32rem;
}
.company-about__text {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(11px,2.4rem,320px);
font-style: normal;
font-weight: 900;
line-height: 200%;
margin: 16rem 12.8rem 16rem 12.8rem;
}
.company-features {
height: 475.6rem;
background: var(--white-02-d-8-dae-2, #D8DAE2);
z-index: 0; /* 子背景を後面に配置するためのスタッキングコンテキスト */
overflow: hidden; /* 背景画像が前セクションに干渉しないようにクリップ */
}
.company-features__bg {
z-index: -1; /* ヒーローや他要素より後面に */
margin-top: -81.5rem;
margin-left: 43.1rem;
}
.company-features__bg img {
display: block;
width: 233.8rem;
height: 233.8rem;
}
.company-features__inner {
z-index: 1;
}
.company-features__title {
margin-top: -139.4rem;
color: var(--dark-01131-c-2-e, #131C2E);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(11px,6.4rem,920px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.32rem;
}
.company-features__line {
width: 8rem;
height: 0.4rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 4rem auto 0; /* タイトル下40px */
}
.company-features__cards {
margin-top: 6.4rem; /* ライン下64px */
display: grid;
grid-template-rows: repeat(7, 50rem);
grid-template-columns: 1fr;
gap: 4rem; /* 各要素間は40px */
justify-items: center;
}
.company-features__contact {
margin-top: 16rem; /* 7要素の下240 */
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
}
.company-features__contact-text {
color: var(--dark-01131-c-2-e, #131C2E);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(11px,2.4rem,302px);
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 1.2px;
}
.company-features__contact-box {
width: 90.6rem;
height: 10.1rem;
flex-shrink: 0;
border: 1px solid var(--grad03, #1C5B9C);
background: var(--white-01-f-1-eff-0, #F1EFF0);
display: flex;
align-items: center;
justify-content: center;
}
.company-features__contact-email {
color: var(--primary-0-d-355-c, #0D355C);
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: clamp(11px,3.2rem,500px);
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16rem;
}
.company-features__contact-note {
margin-top: -8px; /* gap 40の中で下32px相当へ微調整 */
color: var(--dark-02333844, #333844);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.4rem,180px);
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.07rem;
}
.feature-card {
position: relative;
width: 128rem;
height: 50rem;
background: #20293F;
overflow: hidden;
}
.feature-card__img {
position: absolute;
right: 0; /* 画像の右端を要素の右端に揃える */
bottom: 0; /* 画像の下端を要素の下端に揃える */
width: auto;
height: auto;
object-fit: cover; /* はみ出しを防ぎつつトリミング */
max-width: 15.6rem;
z-index: 10;
}
.feature-card__headline {
margin: 0;
margin-top: 8rem;
margin-left: 8rem;
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: clamp(11px, 6rem, 956px);
font-style: normal;
font-weight: 900;
line-height: 120%;
}
.feature-card__headline .hl-orange { color: var(--secondary-ff-4-e-00, #FF7500); }
.feature-card__headline .hl-white { color: #FFF; }
/* 要素6: コンサルティングファームに強い（強調範囲をオレンジに） */
.feature-6 .feature-card__headline {
color: #FFF;
}
.feature-6 .feature-card__headline .hl-orange {
color: var(--secondary-ff-4-e-00, #FF7500);
}
.feature-6 .feature-card__headline .hl-white {
color: #FFF;
}
/* 見出しの個別位置（topのみ指定。right は共通で 176px, left は 80px） */
.feature-3 .feature-card__headline { top: 123px; }
.feature-5 .feature-card__headline { top: 123px; }
.feature-7 .feature-card__headline { top: 81px; }
.feature-card__body {
margin: 0;
margin-top: 4rem;
margin-left: 8rem;
height: 12.8rem;
max-width: 85%;
color: #FFF;
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.8rem,240px);
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.feature-card__body p{
margin: 0;
min-width: 400px;
}
.feature-card__body.body-strong { font-weight: 500; }
/* 個別の位置指定は不要（全て右下合わせ） */
/* .company-hero__title {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP", serif;
font-size: clamp(11px,6.4rem,92px);
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 5.12px;
margin: 0;
padding-top: 18.8rem;
}
.company-hero__line {
width: 80px;
height: 4px;
flex-shrink: 0;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 24px auto 0;
}
.company-hero__label {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: clamp(11px,3.2rem,44px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.96rem;
margin: 6rem 0 0 0;
} */
/* ===================== Voice Page (転職者の声) - Content Section ===================== */
/* -- Outer and inner containers -- */
.voice-content-section {
height: auto;
flex-shrink: 0;
background: var(--dark-01131-c-2-e, #131C2E);
padding-bottom: 12rem;
}
.voice-content-inner {
position: relative;
height: auto;
}
.voice-background {
position: absolute;
top: 38.5rem;
left: 21rem;
width: 168rem;
height: 268rem;
background: #20293F;
display: block;
}
/* 内側のダークブロック
.voice-content-inner::before {
content: "";
position: absolute;
top: 38.5rem;
left: 24rem;
width: 168rem;
height: 416rem;
background: #20293F;
display: block;
} */
/* -- First visual block (image + overlay + text) -- */
.voice-image-block {
display: grid;
position: relative;
overflow: hidden;
}
.voice-image {
margin-top: 8rem;
width: 168rem;
height: 64rem;
object-fit: cover;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
grid-area: 1 / 1;
}
.voice-image-overlay {
grid-area: 1 / 1;
background: linear-gradient(89deg, #0D355C 0%, #1A2459 100%);
opacity: 0.4;
mix-blend-mode: multiply;
pointer-events: none;
}
.voice-image-text {
margin-top: 10rem;
color: #FFF;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
font-family: "Noto Serif JP";
font-size: clamp(11px,3.2rem,440px);
font-style: normal;
font-weight: 900;
line-height: 4.8rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 51;
grid-area: 1 / 1;
}
/* -- Photos grid (absolute positions based on outer frame) -- */
.voice-photos {
margin: 12rem auto 24rem;
}
.voice-photo {
/* position: absolute; */
display: block;
width: 128rem;
position: relative;
z-index: 1;
margin: 0 auto;
}
/* 指定座標 (top, left) */
/* .voice-photo.koe-1 { top: 779px; left: 250px; }
.voice-photo.koe-2 { top: 779px; left: 1056px; }
.voice-photo.koe-3 { top: 1357px; left: 257px; }
.voice-photo.koe-4 { top: 1458px; left: 809px; }
.voice-photo.koe-5 { top: 1775px; left: 535px; }
.voice-photo.koe-6 { top: 2155px; left: 693px; }
.voice-photo.koe-7 { top: 2517px; left: 296px; }
.voice-photo.koe-8 { top: 2517px; left: 1022px; }
.voice-photo.koe-9 { top: 2795px; left: 452px; }
.voice-photo.koe-10 { top: 3133px; left: 320px; }
.voice-photo.koe-11 { top: 3133px; left: 1020px; }
.voice-photo.koe-12 { top: 3407px; left: 1015px; }
.voice-photo.koe-13 { top: 3555px; left: 1035px; }
.voice-photo.koe-14 { top: 3810px; left: 341px; }
.voice-photo.koe-15 { top: 4222px; left: 341px; }
.voice-photo.koe-16 { top: 4210px; left: 1137px; }
.voice-photo.koe-17 { top: 4408px; left: 341px; } */
/* ===================== Voice Page (転職者の声) - Content Section End ===================== */
/* ===================== Recruit Page (採用情報) ================================================ */
/* -- Hero section -- */
/* .recruit-hero {
height: 40rem;
flex-shrink: 0;
background-image: url('images/hero_pc.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
}
.recruit-hero__inner {
width: 192rem;
text-align: center;
}
.recruit-hero__title {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP", serif;
font-size: clamp(11px,6.4rem,92px);
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.512rem;
margin: 0;
padding-top: 18.8rem;
}
.recruit-hero__label {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: clamp(11px,3.2rem,44px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.96rem;
margin: 5.1rem 0 0 0;
} */
/* -- Message section -- */
.recruit-message {
background: var(--dark-01131-c-2-e, #131C2E);
overflow: hidden;
display: flex;
flex-direction: column;
}
.recruit-message__bgtext {
margin-top: -7.2rem;
color: var(--link-black-2-a-3-b-62, #0D355C);
text-align: right;
font-family: "Noto Serif JP";
font-size: clamp(11px,20rem,2600px);
font-style: normal;
font-weight: 900;
line-height: normal;
pointer-events: none;
z-index: 0;
}
.recruit-message .section-title {
margin: -8.7rem auto 0;
}
.recruit-message .section-title h2 {
margin: 0;
color: var(--white-ffffff, #FFF);
font-family: "Gill Sans", sans-serif;
font-size: clamp(40px, 6.4rem, 800px);
font-style: normal;
font-weight: 300;
line-height: normal;
}
.recruit-message .section-title h2::after {
content: '';
display: block;
width: 8rem;
height: 0.4rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin: 4rem auto 0;
}
.recruit-message__text-block {
margin-top: 6.4rem;
margin-bottom: 24rem;
display: flex;
flex-direction: column;
gap: 6.4rem;
z-index: 1;
}
.recruit-message__text {
margin: 0;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(11px,2.4rem,320px);
font-style: normal;
font-weight: 900;
line-height: 200%;
}
/* -- Essence section -- */
.recruit-essence {
height: auto;
background: var(--dark-01131-c-2-e, #131C2E);
display: flex;
flex-direction: column;
overflow: hidden;
}
.recruit-essence__bgtext {
margin-top: -7.2rem;
color: var(--link-black-2-a-3-b-62, #0D355C);
text-align: right;
font-family: "Noto Serif JP";
font-size: clamp(11px,20rem,2800px);
font-style: normal;
font-weight: 900;
line-height: normal;
pointer-events: none;
z-index: 0;
}
.recruit-essence .section-title {
margin: -8.7rem auto 0;
z-index: 1;
}
.recruit-essence .section-title h2 {
margin: 0;
color: var(--white-ffffff, #FFF);
font-family: "Gill Sans", sans-serif;
font-size: clamp(40px, 6.4rem, 800px);
font-style: normal;
font-weight: 300;
line-height: normal;
}
.recruit-essence .section-title h2::after {
content: '';
display: block;
width: 8rem;
height: 0.4rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin: 4rem auto 0;
}
.recruit-essence__cards {
display: grid;
grid-template-columns: 1fr 1fr; /* 2列に設定 */
gap: 4.8rem;
z-index: 1;
margin: 16rem auto 16rem;
justify-items: center;
}
.essence-card {
width: 61.6rem;
height: 48.1rem;
min-width: 306px;
min-height: 260px;
flex-shrink: 0;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
position: relative;
}
/* 7個目のカードだけ中央揃え */
.essence-card.essence-7 {
grid-column: 1 / -1; /* 1列目から最後の列まで */
justify-self: center; /* 中央揃え */
}
.essence-card__bg {
/* width: 100%; */
height: 100%;
margin-top: 0;
position: absolute;
top: 0;
right: 0;
}
.essence-card__border {
width: 58.4rem;
height: 44.9rem;
min-width: 290px;
min-height: 240px;
border: 1px solid var(--white-02-d-8-dae-2, #D8DAE2);
margin: 1.6rem auto ;
z-index: 1;
display: flex;
/* justify-content: center; */
align-items: center;
flex-direction: column;
}
.essence-card__img {
width: auto;
height: auto;
width: auto;
height: auto;
object-fit: cover;
max-width: 20rem;
object-fit: initial;
z-index: 1; /* テキストより前面に表示 */
}
/* 1個目と7個目のカードの数字画像だけ幅を変更 */
.essence-card.essence-1 .essence-card__img,
.essence-card.essence-7 .essence-card__img {
max-width: 14rem;
}
.essence-card__title {
width: 52rem;
height: 14.3rem;
min-width: 255px;
min-height: 70px;
margin: 0;
margin-top: 4.0rem;
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: clamp(16px,3.2rem,440px);
font-style: normal;
font-weight: 900;
line-height: 150%;
text-align: left; /* 左寄せに変更 */
display: flex;
align-items: center; /* 上下中央揃え */
}
.essence-card__text {
width: 52rem;
height: 16.2rem;
min-width: 270px;
min-height: 84px;
margin: 0;
margin-top: 6.4rem;
color: #FFF;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.8rem,240px);
font-style: normal;
font-weight: 400;
line-height: 170%;
text-align: left; /* 左寄せに変更 */
display: flex;
align-items: center; /* 上下中央揃え */
}
/* -- Requirement section -- */
.recruit-requirement {
height: auto;
background: var(--dark-01131-c-2-e, #131C2E);
overflow: hidden;
display: flex;
flex-direction: column;
padding-bottom: 24rem;
}
.recruit-requirement__bgtext {
margin-top: -7.2rem;
color: var(--link-black-2-a-3-b-62, #0D355C);
text-align: right;
font-family: "Noto Serif JP";
font-size: clamp(11px,20rem,2800px);
font-style: normal;
font-weight: 900;
line-height: normal;
pointer-events: none;
z-index: 0;
}
.recruit-requirement .section-title {
margin: -8.7rem auto 0;
z-index: 1;
}
.recruit-requirement .section-title h2 {
margin: 0;
color: var(--white-ffffff, #FFF);
font-family: "Gill Sans", sans-serif;
font-size: clamp(40px, 6.4rem, 800px);
font-style: normal;
font-weight: 300;
line-height: normal;
}
.recruit-requirement .section-title h2::after {
content: '';
display: block;
width: 8rem;
height: 0.4rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin: 4rem auto 0;
}
.recruit-requirement__content {
/* margin: 12.5rem 32rem 24.4rem 32rem; */
display: flex;
flex-direction: column;
gap: 12.8rem;
z-index: 1;
align-items: center;
}
.requirement-text-wrap {
display: flex;
padding: 9.6rem 12.8rem 16rem 12.8rem;
margin-top: 8.1rem;
flex-direction: column;
align-items: center;
gap: 3.2rem;
background-color: #ffffff;
}
.requirement-item {
}
.requirement-title {
margin: 0;
width: 74.4rem;
color: var(--black-000000, #000000);
font-family: "Noto Serif JP";
font-size: clamp(11px,2rem,260px);
font-style: normal;
font-weight: 700;
line-height: 170%;
margin-bottom: 8px;
z-index: 1;
}
.requirement-line {
width: 23.2rem;
height: 0.2rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin-bottom: 1.6rem;
z-index: 1;
}
.requirement-line::after {
content: '';
display: block;
width: 74.4rem;
height: 0.2rem;
background: var(--white-02-d-8-dae-2, #D8DAE2);
margin-left: 23.2rem;
}
.requirement-text {
margin: 0;
width: 102.4rem;
color: var(--black-000000, #000000);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.4rem,180px);
font-style: normal;
font-weight: 400;
line-height: 170%;
z-index: 1;
}
.requirement-button {
display: flex;
width: 80rem;
height: 15rem;
justify-content: center;
align-items: center;
flex-shrink: 0;
margin-top: 9.4rem;
border-radius: 1.6rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
}
.requirement-btn-link {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(11px,3.2rem,440px);
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 0.32rem;
text-decoration: none;
}
/* -- Employees section -- */
.recruit-employees {
background: var(--white-01-f-1-eff-0, #F1EFF0);
display: flex;
flex-direction: column;
overflow: hidden;
}
.recruit-employees__bgtext {
margin-top: -7.2rem;
color: #D8DAE2;
text-align: right;
font-family: "Noto Serif JP";
font-size: clamp(11px,20rem,2800px);
font-style: normal;
font-weight: 900;
line-height: normal;
pointer-events: none;
z-index: 0;
white-space: nowrap;
}
.recruit-employees .section-title {
margin-top: -8.7rem;
margin-left: 32.2rem;
z-index: 1;
}
.recruit-employees .section-title h2 {
margin: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Gill Sans", sans-serif;
font-size: clamp(40px, 6.4rem, 800px);
font-style: normal;
font-weight: 300;
line-height: normal;
}
.recruit-employees .section-title h2::after {
content: '';
display: block;
width: 8rem;
height: 0.4rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin-top: 4rem;
}
.employees-slider {
/* margin-left: 36.1rem;
margin-right: 36.1rem; */
margin: 8rem auto 0;
z-index: 1;
overflow: hidden;
}
/* --- Recruit Page Slider --- */
.employees-slider__container {
display: flex;
transition: transform 0.5s ease-in-out;
gap: 2rem;
}
.employees-slider {
overflow: hidden;
position: relative;
}
.employee-card {
width: calc((100% - 4rem) / 3);
flex-shrink: 0;
margin: 0;
background: white;
}
.employee-card__image {
width: 31.1rem;
height: 17.2rem;
min-width: 240px;
min-height: 150px;
flex-shrink: 0;
border-radius: 0.8rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
position: relative;
margin: auto;
}
.employee-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.employee-card__content {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2.4rem;
}
.employee-card__title {
margin: 0;
display: flex;
width: 31.2rem;
height: 6rem;
min-width: 220px;
min-height: 47px;
flex-direction: column;
flex-shrink: 0;
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: clamp(11px,1.8rem,260px);
font-weight: 700;
line-height: 1.4;
margin-bottom: 1.6rem;
overflow: hidden;
}
.employee-card__title a {
text-decoration: none;
}
.employee-card__excerpt {
margin: 0;
width: 31.2rem;
height: 2rem;
min-width: 220px;
color: var(--white-02-d-8-dae-2, #666666);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,160px);
font-style: normal;
font-weight: 400;
line-height: 150%;
margin-bottom: 50px;
flex-grow: 1;
}
.employee-card__footer {
width: 31.2rem;
height: 3.6rem;
min-width: 220px;
min-height: 28px;
flex-shrink: 0;
border-radius: 0.4rem;
background: var(--dark-02333844, #333844);
display: flex;
justify-content: center;
align-items: center;
gap: 12.2rem;
}
.employee-card__category {
display: flex;
gap: 0.4rem;
}
.employee-card__category img {
width: 1.6rem;
height: 1.6rem;
min-width: 16px;
min-height: 16px;
}
.employee-card__category-text {
color: var(--white-01-f-1-eff-0, #F1EFF0);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,106px);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.employee-card__date {
color: var(--white-02-d-8-dae-2, #D8DAE2);
text-align: right;
font-feature-settings: 'palt' on;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: clamp(11px,1.4rem,200px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.07rem;
}
.employees-slider__controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
margin-bottom: 24rem;
}
.slider-arrow {
width: 48px;
height: 48px;
border: 2px solid var(--dark-01131-c-2-e, #131C2E);
background: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--dark-01131-c-2-e, #131C2E);
transition: all 0.3s ease;
}
.slider-arrow:hover {
background: var(--dark-01131-c-2-e, #131C2E);
color: #FFF;
}
.employees-list-btn {
display: flex;
padding:
clamp(9.3px, 1.2rem, 9999px) /* 上下 */
clamp(18.7px, 2.4rem, 9999px); /* 左右 */
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
color: #FFF;
text-decoration: none;
border-radius: 2.4rem;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.4rem,180px);
font-weight: 700;
transition: opacity 0.3s ease;
}
.employees-list-btn:hover {
opacity: 0.8;
}
/* ===================== Footer ===================== */
/* --- フッターCTAセクション --- */
.footer-cta-section {
background: var(--white-01-f-1-eff-0, #F1EFF0);
justify-content: center;
}
.footer-cta-section__inner {
display: flex;
border-radius: 256px 0 0 0;
background: var(--grad01alt, linear-gradient(89deg, #1A2459 0%, #0D355C 100%));
flex-direction: column;
align-items: center;
}
/* PC版テキスト */
.footer-cta-section__text {
margin: 0;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(11px, 3.2rem, 80px);
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 0.16rem;
margin-top: 6.4rem;
}
.footer-cta-section__btn {
display: flex;
width: 80rem;
height: 12rem;
min-width: 380px;
min-height: 60px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 1.6rem;
border: 1px solid var(--grad02, #FF7B00);
background: var(--grad02alt, linear-gradient(90deg, #FF4E00 0%, #FF7B00 100%));
margin-top: 12.4rem;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(18px, 3rem, 80px);
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration: none;
margin-top: 0.4rem;
}
.footer-cta-section__btn:last-of-type {
margin-top: 6rem;
margin-bottom: 6.4rem;
}
/* ----フッターメイン---- */
.site-footer {
/* width: 100%; */
/* height: 29.17vw; */
padding-top: 8rem;
padding-bottom: 2.7rem;
background: var(--dark-01131-c-2-e, #131C2E);
/* display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative; */
}
.footer-wrapper {
/* width: 1200px; */
/* height: 17vw; */
display: flex;
align-items: flex-start;
justify-content: center;
gap: 10.42vw;
}
/* -- Info Wrap -- */
.footer-info-wrap {
display: flex;
flex-direction: column;
gap: 1.67vw;
}
.footer-logo {
width: 100%;
height: auto;
max-width: 200px;
}
.footer-info-text-wrap {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.footer-info-item {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.footer-info-line {
width: 120px;
height: 1px;
background: var(--dark-02333844, #333844);
/* margin-bottom: 0.278vw; */
}
.footer-info-text {
display: flex;
gap: 1.6rem;
}
.footer-info-label {
display: flex;
/* width: 38px;
height: 32px; */
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: var(--white-ffffff, #FFF);
text-align: right;
font-family: "Noto Sans JP";
font-size: clamp(11px,0.625vw,500px);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.footer-info-value {
display: flex;
/* width: 306px; */
/* height: 32px; */
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: var(--white-ffffff, #FFF);
font-family: "Noto Sans JP";
font-size: clamp(11px,0.625vw,500px);
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* -- Navi Wrap -- */
.footer-navi-wrap {
/* width: 360px;
height: 325px; */
display: flex;
flex-direction: column;
}
.footer-navi-title {
color: var(--white-ffffff, #FFF);
font-feature-settings: 'palt' on;
font-family: "Noto Serif JP";
font-size: clamp(11px,1.389vw,120px);
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 2.4px;
margin-bottom: 2.44vw;
}
.footer-navi-line {
width: 6.25vw;
height: 1px;
background: var(--dark-02333844, #333844);
margin-bottom: 1.6rem;
}
.footer-navi-links {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.footer-navi-link {
display: flex;
/* width: 356px; */
/* width: 50%; */
/* height: 32px; */
/* margin-top: 0.463vw; */
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: var(--white-ffffff, #FFF);
font-family: "Noto Sans JP";
font-size: clamp(11px,0.625vw,500px);
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration: none;
transition: opacity 0.3s ease;
position: relative;
}
.footer-navi-link::after {
content: '';
/* position: absolute;
bottom: -2px;
left: 0; */
margin-top: 1.6rem;
width: 6.25vw;
height: 1px;
background: var(--dark-02333844, #333844);
}
.footer-navi-link:hover {
opacity: 0.7;
}
/* -- Footer Bottom -- */
.footer-bottom {
display: flex;
margin-top: 8rem;
/* margin-right :36rem; */
margin-left: 128.4rem;
margin-bottom: 2.7rem;
z-index: 20;
gap: 7.4rem;
}
.footer-privacy {
color: var(--white-01-f-1-eff-0, #F1EFF0);
font-feature-settings: 'palt' on;
font-family: "Noto Sans JP";
font-size: clamp(11px,0.625vw,500px);
font-style: normal;
font-weight: 500;
line-height: normal;
z-index: 10;
}
.footer-copyright {
color: var(--white-01-f-1-eff-0, #F1EFF0);
text-align: right;
font-family: "Noto Sans JP";
font-size: clamp(11px,0.625vw,500px);
font-style: normal;
font-weight: 700;
line-height: normal;
z-index: 10;
}
/* ===================== Common ===================== */
/* -- Breadcrumb -- */
.breadcrumb__inner {
/* width: 100%; */
/* max-width: 1920px; */
display: flex;
align-items: flex-start; /* 上からの指定に合わせて上寄せ */
align-items: center;
margin-left: 32rem;
height: 4rem; /* セクション高と合わせる */
box-sizing: border-box;
}
.breadcrumb__link,
.breadcrumb__current {
color: var(--white-01-f-1-eff-0, #F1EFF0);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,160px);
font-style: normal;
font-weight: 400;
line-height: 15px; /* テキスト行高をアイコン高さと一致 */
text-decoration: none;
}
.breadcrumb__sep {
height: 1.1rem; /* テキストのline-height=11pxと揃える */
width: auto;
margin-left: 0.8rem;
margin-right: 0.8rem;
position: relative;
fill: var(--dark-03535-a-6-b, #ffffff);
top: 0; /* テキストと同一ベースライン上に */
}
/* 投稿ページ用のパンくずリストスタイル */
.single-knowhow .breadcrumb,
.single-column .breadcrumb,
.single-consultant .breadcrumb,
.single-company_analysis .breadcrumb {
width: 85rem;
height: 5rem;
flex-shrink: 0;
background: var(--white-01-f-1-eff-0, #F1EFF0);
display: flex;
margin-bottom: 4.8rem;
overflow: hidden;
}
.single-knowhow .breadcrumb__inner,
.single-column .breadcrumb__inner,
.single-consultant .breadcrumb__inner,
.single-company_analysis .breadcrumb__inner {
margin-left: 0;
}
.single-knowhow .breadcrumb__link,
.single-column .breadcrumb__link,
.single-consultant .breadcrumb__link,
.single-company_analysis .breadcrumb__link {
color: var(--dark-03535-a-6-b, #535A6B);
font-size: clamp(9px, 1.1rem, 180px);
white-space: nowrap;
}
.single-knowhow .breadcrumb__current,
.single-column .breadcrumb__current,
.single-consultant .breadcrumb__current,
.single-company_analysis .breadcrumb__current {
color: var(--dark-03535-a-6-b, #535A6B);
font-size: clamp(9px, 1.1rem, 180px);
white-space: nowrap;
}
.single-knowhow .breadcrumb__sep,
.single-column .breadcrumb__sep,
.single-consultant .breadcrumb__sep,
.single-company_analysis .breadcrumb__sep {
fill: var(--dark-03535-a-6-b, #535A6B);
}
/* フッター背景の統一 */
body.page-id-6 .footer-cta-section,
body.page-id-25 .footer-cta-section,
body.page-id-62 .footer-cta-section,
body.page-id-64 .footer-cta-section,
body.page-id-66 .footer-cta-section,
body.page-id-68 .footer-cta-section,
body.page-id-70 .footer-cta-section,
body.page-id-3 .footer-cta-section,
body.page-id-29 .footer-cta-section,
body.page-id-185 .footer-cta-section {
background: var(--dark-01131-c-2-e, #131C2E);
}
body.page-id-8 .footer-cta-section {
background: var(--white-02-d-8-dae-2, #D8DAE2);
}
/* ===================== Post Content ===================== */
/* 投稿ページの基本スタイル */
body.post-type-archive-consultant .footer-cta-section,
body.post-type-archive-company_analysis .footer-cta-section,
body.post-type-archive-knowhow .footer-cta-section,
body.post-type-archive-column .footer-cta-section {
background: var(--dark-01131-c-2-e, #131C2E);
}
/*
* 各カスタム投稿タイプの「詳細ページ」に限定して、
* フッターCTAセクションのスタイルを指定する
*/
body.single-consultant .footer-cta-section,
body.single-company_analysis .footer-cta-section,
body.single-column .footer-cta-section,
body.single-knowhow .footer-cta-section {
/* ここに背景などを変更するスタイルを記述します */
background: #131C2E; /* 例 */
}
.post-content {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
line-height: 1.8;
color: #333;
}
/* --------------------------企業分析一覧カードセクション---------------------------------- */
/* 全体要素 */
.analysis-cards-section {
background: var(--dark-01131-c-2-e, #131C2E);
display: flex;
justify-content: center;
/* align-items: flex-start; */
padding: 12rem 0rem 24rem;
}
.analysis-cards-inner {
/* width: 100%; */
/* max-width: 1200px; */
/* position: relative; */
margin: 0.4rem;
}
/* --- アーカイブページの検索フォーム --- */
/* フォーム全体のラッパー */
.archive-search-form {
display: flex; /* 入力欄とボタンを横並びに */
width: 30%;
margin-bottom: 1.5rem; /* カテゴリーとの間に余白 */
border: 1px solid #E0E0E0; /* フォーム全体を枠線で囲む */
border-radius: 4px; /* 角を少し丸める */
overflow: hidden; /* 角丸を内側の要素にも適用 */
margin-left: auto;
}
/* 検索キーワード入力欄 */
.archive-search-input {
flex-grow: 1; /* 横幅を可能な限り広げる */
border: none; /* 個別の枠線は不要 */
font-family: "Noto Sans JP";
padding: 0.75rem 1rem;
font-size: clamp(11px,1.4rem,400px);
font-weight: 700;
outline: none; /* クリック時の青い枠線を消す */
background-color: #fff;
}
.archive-search-input::placeholder {
color: #BDBDBD; /* プレースホルダーの文字色 */
}
/* 検索ボタン */
.archive-search-submit {
border: none;
background-color: #0D355C; /* サイトのキーカラー */
color: #fff;
padding: 0.75rem 1.5rem;
font-size: clamp(11px,1.4rem,400px);
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
}
.archive-search-submit:hover {
background-color: #1A4A7A; /* ホバー時の色を少し明るく */
}
/* --- アーカイブページのカテゴリー選択ドロップダウン --- */
.category-select {
width: 25%; /* 親要素の幅いっぱいに広げる */
padding: 0.75rem 1rem;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.4rem,400px);
font-weight: 450;
border: 1px solid #E0E0E0;
border-radius: 4px;
background-color: #fff;
/* 右側の矢印をカスタムする場合に備えて appearance を無効化 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 矢印のスペースを確保 */
padding-right: 2.5rem;
/* 矢印の背景画像（簡易的なもの） */
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230D355C%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-13%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2013l128%20127.9c3.6%203.6%207.8%205.4%2013%205.4s9.4-1.8%2013-5.4L287%2095.2c3.6-3.6%205.4-7.8%205.4-13%200-5-1.8-9.4-5.4-13z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: .65em auto;
cursor: pointer;
}
.category-select:focus {
outline: none;
border-color: #0D355C;
box-shadow: 0 0 0 2px rgba(13, 53, 92, 0.2);
}
/* ソートカテゴリー */
.sort-categories {
/* position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%); */
display: flex;
flex-direction: row;
gap: 3.2rem;
/* width: 120rem; */
justify-content: flex-start;
margin-left: 1.6rem;
}
.sort-category-link {
color: var(--white-ffffff, #FFF);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,400px);
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration: none;
transition: color 0.3s ease;
display: inline-block;
}
.sort-category-link:hover,
.sort-category-link.active {
color: var(--secondary-ff-4-e-00, #FF7500);
}
/* ソートカテゴリーとカードの間のライン */
.sort-categories-line {
width: 120rem;
height: 0.1rem;
min-width: 680px;
flex-shrink: 0;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin-top: 2.4rem;
}
/* カードグリッド */
.analysis-cards-grid {
display: grid;
/* width: 1200px; */
/* height: 1487px; */
row-gap: 4rem;
column-gap: 4rem;
grid-template-rows: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 4rem;
/* margin-left: auto;
margin-right: auto; */
min-width: 762px;
min-height: 930px;
}
/* カード要素 */
.analysis-card-item {
background: var(--white-02-d-8-dae-2, #D8DAE2);
border-radius: 1.2rem;
overflow: hidden;
width: 36rem;
height: 40rem;
min-width: 244px;
min-height: 300px;
}
/* カード全体のリンク */
.analysis-card-link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
/* カード画像 */
.analysis-card-image {
width: 36rem;
height: 19rem;
min-width: 240px;
min-height: 140px;
overflow: hidden;
}
.analysis-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #f5f5f5;
}
/* カードコンテンツ */
.analysis-card-content {
padding: 2.4rem;
}
/* カードタイトル */
.analysis-card-title {
margin: 0;
margin-bottom: clamp(9.5px, 1.5rem, 200px);
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-size: clamp(12px,1.8rem,400px);
font-weight: 700;
line-height: 1.4;
width: 31.1rem;
height: 5rem;
min-width: 210px;
min-height: 34px;
overflow: hidden;
}
/* カードカテゴリー */
.analysis-card-categories {
margin-bottom: 0;
}
.analysis-category-tag {
display: inline-block;
padding: 0.4rem 1.2rem;
background: var(--dark-02333844, #333844);
color: #fff;
font-family: "Noto Sans JP";
font-size: clamp(9px,1.2rem,400px);
font-weight: 500;
border-radius: 1.2rem;
margin-right: 0.8rem;
margin-bottom: 0.8rem;
}
/* カードメタ情報 */
.analysis-card-meta {
margin-bottom: 0;
}
.analysis-card-date,
.analysis-company-name {
color: #666;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.2rem,40px);
font-weight: 400;
margin-right: 1.5rem;
}
/* カード抜粋 */
.analysis-card-excerpt {
margin: 0;
color: #666;
font-family: "Noto Sans JP";
font-size: clamp(12px,1.4rem,400px);
line-height: 1.6;
margin-bottom: clamp(6.3px, 1rem, 200px);
width: 31.1rem;
height: 5rem;
min-width: 210px;
min-height: 34px;
overflow: hidden;
}
.analysis-card-excerpt p{
margin: 0;
width: 31.7rem;
height: 9rem;
min-width: 220px;
min-height: 50px;
color: #666;
font-family: "Noto Sans JP";
font-size: clamp(12px,1.4rem,400px);
}
/* カードフッター */
.analysis-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: clamp(20px, 4.5rem, 10px);
}
.analysis-card-category {
display: flex;
align-items: center;
gap: 0.8rem;
}
.analysis-card-category img {
width: 1.6rem;
height: 1.6rem;
min-width: 9px;
min-height: 9px;
}
.analysis-card-category-text {
color: #666;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.2rem,160px);
font-weight: 400;
}
/* カードボタン */
.analysis-card-btn {
display: inline-block;
padding: 1rem 2rem;
background: var(--dark-01131-c-2-e, #131C2E);
color: #fff;
text-decoration: none;
border-radius: 0.6rem;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.4rem,500px);
font-weight: 500;
transition: background 0.3s ease;
}
.analysis-card-btn:hover {
background: var(--secondary-ff-4-e-00, #FF7500);
}
/* 記事が見つからない場合 */
.no-posts {
text-align: center;
padding: 8rem 2rem;
color: var(--white-ffffff, #FFF);
}
.no-posts h2 {
font-family: "Noto Serif JP";
font-size: clamp(11px,2.4rem,400px);
font-weight: 700;
margin-bottom: 2rem;
}
.no-posts p {
font-family: "Noto Sans JP";
font-size: clamp(11px,1.6rem,400px);
line-height: 1.6;
}
/* ページネーション */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 6rem;
}
.pagination .page-numbers {
display: inline-block;
padding: 1rem 1.5rem;
background: #f8f9fa;
color: #666;
text-decoration: none;
border-radius: 6px;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.4rem,400px);
font-weight: 500;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
background: var(--secondary-ff-4-e-00, #FF7500);
color: #fff;
border-color: var(--secondary-ff-4-e-00, #FF7500);
}
.slider-prev-btn:hover,
.slider-next-btn:hover {
opacity: 0.8;
}
.prev-icon,
.next-icon {
width: 2.4rem;
height: 2.4rem;
min-width: 18.7px;
min-height: 18.7px;
}
.prev-text,
.next-text {
color: #FFF;
text-align: center;
font-family: "Gill Sans";
font-size: clamp(11px,1.4rem,400px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.42rem;
}
.slider-next-btn {
width: 12.8rem;
height: 4.8rem;
min-width: 100px;
min-height: 37px;
flex-shrink: 0;
border-radius: 0.4rem;
background: var(--grad01alt, linear-gradient(89deg, #1A2459 0%, #0D355C 100%));
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
transition: opacity 0.3s ease;
}
.slider-prev-btn {
width: 12.8rem;
height: 4.8rem;
min-width: 100px;
min-height: 37px;
flex-shrink: 0;
border-radius: 0.4rem;
background: var(--grad01alt, linear-gradient(89deg, #1A2459 0%, #0D355C 100%));
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
transition: opacity 0.3s ease;
}
/* 企業分析一覧ページネーション */
.analysis-pagination {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: 90%;
max-width: 1200px;
margin: 0 auto;
margin-top: 120px;
}
.analysis-prev-btn,
.analysis-next-btn {
width: 12.8rem;
height: 4.8rem;
flex-shrink: 0;
border-radius: 0.4rem;
background: var(--grad01alt, linear-gradient(89deg, #1A2459 0%, #0D355C 100%));
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
transition: opacity 0.3s ease;
min-width: 78px;
min-height: 30px;
}
.analysis-prev-btn:hover,
.analysis-next-btn:hover {
opacity: 0.8;
}
.analysis-prev-btn:disabled,
.analysis-next-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.page-numbers {
display: flex;
align-items: center;
gap: 1.6rem;
}
.page-numbers .dots {
color: white;
}
.page-number {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 0.4rem;
background: transparent;
border: 1px solid var(--white-ffffff, #FFF);
color: var(--white-ffffff, #FFF);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.4rem,400px);
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.page-number:hover {
background: var(--white-ffffff, #FFF);
color: var(--dark-01131-c-2-e, #131C2E);
}
.page-number.active {
background: var(--white-ffffff, #FFF);
color: var(--dark-01131-c-2-e, #131C2E);
}
.page-dots {
color: var(--white-ffffff, #FFF);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.4rem,400px);
font-weight: 500;
}
/* コンサルタントカードセクション */
.consultant-cards-section {
display: flex;
/* width: 100%; */
/* padding: 120px 320px 240px 320px; */
flex-direction: column;
align-items: center;
background: var(--dark-01131-c-2-e, #131C2E);
}
.consultant-cards-wrap {
display: grid;
/* width: 128rem; */
height: 218.8rem;
min-height: 1354px;
align-items: flex-start;
align-content: flex-start;
gap: 3.2rem;
grid-template-columns: 1fr 1fr;
justify-items: center;
justify-content: initial;
margin: 12rem auto 24rem;
}
.consultant-card {
width: 62rem;
height: 70.6rem;
min-width: 350px;
min-height: 420px;
border-radius: 4rem 1.6rem;
background: var(--white-01-f-1-eff-0, #F1EFF0);
display: flex;
flex-direction: column;
align-items: flex-start; /* 左右中央 */
overflow: hidden;
cursor: pointer;
}
.consultant-image {
border-radius: 3.2rem 1rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
width: 60.4rem;
height: 34rem;
min-width: 337px;
min-height: 186px;
flex-shrink: 0;
margin-top: 0.8rem;
margin-left: 0.8rem;
}
.consultant-card__image {
border-radius: 3.2rem 1rem;
width: 100%;
height: 100%;
object-fit: cover;
}
.consultant-content {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: -2.8rem;
margin-left: 0.8rem;
}
.consultant-card-name {
margin: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-size: clamp(40px,6.4rem,920px);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 64px */
text-align: left;
background: rgba(191, 196, 213, 0.50);
}
.consultant-card-position {
margin: 0;
flex-shrink: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-size: clamp(11px,1.4rem,500px);
font-style: normal;
font-weight: 900;
line-height: 100%; /* 14px */
text-align: left;
margin-top: 2rem;
}
.consultant-lineview-card {
display: flex;
gap: 34rem;
/* 垂直方向の中央揃えを追加すると、見た目が良くなります */
align-items: flex-end;
}
.consultant-card-line {
height: 2px;
width: 8rem;
flex-shrink: 0;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin-top: 2.4rem;
}
.viewmore-card {
position: relative;
border: none;
border-bottom: 1px solid #666;
width: 14rem;
min-width: 100px;
color: #333; /* 文字色を推奨 */
text-decoration: none; /* aタグのデフォルト下線を消去 */
padding-bottom: 0.5rem; /* 下線との間に余白を追加 */
max-width: 90%;
}
.viewmore-card a {
color: #333;
font-size: clamp(11px, 1.8rem, 400px);
text-decoration: none;
}
.viewmore-card a::before {
content: "";
display: block;
width: 3rem;
height: 0.1rem;
background: #666;
rotate: 40deg;
position: absolute;
right: -0.3rem;
bottom: 0.9rem;
}
.consultant-description {
width: 95%;
margin: 0;
min-height: 65px;
min-width: 334px;
flex-shrink: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.4rem,500px);
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
text-align: left;
margin-top: 2.4rem;
margin-left: 0.8rem;
margin-right: 0.8rem;
}
.consultant-btn {
display: flex;
padding:
clamp(7.5px, 1.1rem, 9999px) /* 上 */
clamp(11px, 1.6rem, 9999px) /* 右 */
clamp(8.9px, 1.3rem, 9999px) /* 下 */
clamp(32.7px, 4.8rem, 9999px);/* 左 */
justify-content: center;
align-items: center;
align-self: flex-end;
border-radius: 6rem;
border: 1px solid var(--grad01alt, #1A2459);
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,500px);
font-style: normal;
font-weight: 900;
line-height: 2.1rem; /* 190.909% */
text-decoration: none;
margin-top: 2.6rem;
margin-left: auto;
margin-right: 0.8rem;
margin-bottom: 4rem;
}
/* display: inline-flex;
height: 64px;
padding: 11px 16px 13px 48px;
justify-content: center;
align-items: center;
gap: 16px;
flex-shrink: 0;
border-radius: 60px;
background: var(--primary-0-d-355-c, #0D355C);
text-decoration: none;
transition: all 0.3s ease;
position: absolute;
bottom: 16px;
right: 16px; */
.consultant-btn:hover {
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
transform: translateY(-2px);
}
.btn-text {
color: var(--white-ffffff, #FFF);
text-align: center;
font-feature-settings: 'pwid' on, 'palt' on;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.8rem,500px);
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 0.18rem;
}
.btn-icon2 {
width: 4rem;
height: 4rem;
}
/* Contact Form 7 カスタムスタイル */
.wpcf7 {
max-width: 800px;
margin-left: 8rem;
margin-right: 45.6rem;
padding: 40px 20px;
}
.wpcf7-form {
display: flex;
flex-direction: column;
gap: 2.4rem;
}
.wpcf7-form p {
margin: 0;
}
.contact-target-company {
display: block;
margin-bottom: 0.8rem;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.6rem,200px);
font-weight: 500;
color: var(--dark-01131-c-2-e, #131C2E);
margin-left: 10rem;
}
.wpcf7-form label {
display: block;
margin-bottom: 0.8rem;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.6rem,200px);
font-weight: 500;
color: var(--dark-01131-c-2-e, #131C2E);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
width: 74.4rem;
padding: 1rem 2rem;
margin-top: 1rem;
border: 2px solid #E5E7EB;
border-radius: 0.8rem;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.6rem,200px);
background: #FFFFFF;
transition: border-color 0.3s ease;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
outline: none;
border-color: var(--primary-0-d-355-c, #0D355C);
box-shadow: 0 0 0 0.3rem rgba(13, 53, 92, 0.1);
}
.wpcf7-form textarea {
min-height: 12rem;
resize: vertical;
}
.wpcf7-form input[type="submit"] {
display: flex;
width: 24rem;
height: 6.4rem;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 0.8rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
color: var(--white-ffffff, #FFF);
border: none;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.8rem,260px);
font-weight: 900;
letter-spacing: 0.18rem;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1.6rem;
}
.wpcf7-form input[type="submit"]:hover {
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
transform: translateY(-2px);
}
.wpcf7-form input[type="submit"]:disabled {
background: #9CA3AF;
cursor: not-allowed;
transform: none;
}
/* ラジオボタンとチェックボックス */
.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"] {
margin-right: 1.8rem;
width: 1.8rem;
height: 1.8rem;
accent-color: var(--primary-0-d-355-c, #0D355C);
}
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.wpcf7-form .wpcf7-radio .wpcf7-list-item,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
display: flex;
align-items: center;
margin: 0;
}
/* ファイルアップロード */
.wpcf7-form input[type="file"] {
padding: 1.2rem;
border: 2px dashed #D1D5DB;
border-radius: 0.8rem;
background: #F9FAFB;
cursor: pointer;
font-size: 1.4rem;
}
.wpcf7-form input[type="file"]:hover {
border-color: var(--primary-0-d-355-c, #0D355C);
background: #F0F9FF;
}
/* 必須項目のマーク */
.wpcf7-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
color: #DC2626;
font-size: clamp(11px,1.4rem,180px);
margin-top: 0.4rem;
}
/* 必須マーク（※）のスタイル */
.wpcf7-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip::before,
.wpcf7-form label .wpcf7-form-control-wrap .wpcf7-not-valid-tip::before,
.wpcf7-form .wpcf7-form-control-wrap.required .wpcf7-not-valid-tip::before {
content: "※";
color: var(--error-ae-2-e-25, #AE2E25);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,160px);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 11px */
margin-right: 0.4rem;
}
/* ラベル内の必須マーク */
.wpcf7-form label .wpcf7-form-control-wrap.required::before,
.wpcf7-form label.required::before {
content: "※";
color: var(--error-ae-2-e-25, #AE2E25);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,160px);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 11px */
margin-right: 0.4rem;
}
/* 通常のHTMLフォーム用の必須マーク（既存の*をスタイリング） */
.contact-form label {
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.6rem,20px);
font-weight: 500;
}
/* 必須マーク（*）のスタイル */
.contact-form label:contains("*") {
position: relative;
}
/* 必須マークを赤色に変更 */
.contact-form label[for="name"],
.contact-form label[for="email"],
.contact-form label[for="inquiry_type"],
.contact-form label[for="message"] {
color: var(--dark-01131-c-2-e, #131C2E);
}
/* 必須マーク（*）のみを赤色にする */
.contact-form label[for="name"]::after,
.contact-form label[for="email"]::after,
.contact-form label[for="inquiry_type"]::after,
.contact-form label[for="message"]::after {
content: "※";
color: #AE2E25;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,160px);
font-weight: 700;
margin-left: 0.4rem;
position: relative;
top: -1px;
}
/* 必須マークのスタイル */
.required-mark {
color: #AE2E25;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,160px);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 11px */
margin-left: 0.4rem;
}
/* Contact Form 7の必須マーク（※）のスタイル */
.wpcf7-form .wpcf7-form-control-wrap.required label::after,
.wpcf7-form label.required::after {
content: "※";
color: #AE2E25;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,160px);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 11px */
margin-left: 0.4rem;
}
/* Contact Form 7の必須項目のラベルに※を追加 */
.wpcf7-form .wpcf7-form-control-wrap.required label,
.wpcf7-form label.required {
position: relative;
}
/* Contact Form 7の必須マーク（*）のみを赤色にする */
.wpcf7-form label[for="name"]::after,
.wpcf7-form label[for="email"]::after,
.wpcf7-form label[for="inquiry_type"]::after,
.wpcf7-form label[for="message"]::after {
content: "※";
color: #AE2E25;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,160px);
font-weight: 700;
margin-left: 0.4rem;
position: relative;
top: -1px;
}
/* Contact Form 7の必須マークのスタイル */
.wpcf7-form .required-mark {
color: #AE2E25;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,160px);
font-style: normal;
font-weight: 700;
line-height: 100%; /* 11px */
margin-left: 0.4rem;
}
.wpcf7-form .wpcf7-response-output {
margin: 2rem 0 0 0;
padding: 1.6rem;
border-radius: 0.8rem;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.6rem,200px);
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
background: #D1FAE5;
border: 1px solid #10B981;
color: #065F46;
}
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
background: #FEE2E2;
border: 1px solid #EF4444;
color: #991B1B;
}
.wpcf7-form .wpcf7-response-output.wpcf7-spam-blocked {
background: #FEF3C7;
border: 1px solid #F59E0B;
color: #92400E;
}
/* Contact Form 7セクションのスタイル */
.contact-form-wrapper {
position: relative; /* 背景用のスタッキングコンテキスト */
display: flex;
padding: 8rem 32rem 16rem 32rem;
justify-content: center;
align-items: center;
background: transparent; /* 背景は擬似要素に移動 */
background: var(--dark-01131-c-2-e, #131C2E);
}
.contact-form-container {
position: relative;
z-index: 1; /* フォームを前面へ */
width: 128rem;
max-width: 128rem;
height: auto;
min-height: 130.5rem;
flex-shrink: 0;
margin: 0 auto;
padding: 4rem 2rem;
background: #ffffff;
}
/* ===================== Company Analysis Single Page ===================== */
/* 企業分析記事ページ全体 */
.company-analysis-single {
height: auto;
background: var(--dark-01131-c-2-e, #131C2E);
padding-bottom: 16rem;
}
/* 背景要素 */
/* .company-analysis-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
} */
.background-image {
width: 192rem;
height: 30.5rem;
}
.content-wrapper {
display: flex;
margin-top: 0;
margin-left: 24rem;
margin-right: 24rem;
}
/* テキストワラップ */
.text-wrapper {
height: auto;
margin-right: 9.7rem;
}
/* サムネセクション */
.thumbnail-section {
height: 44.2rem;
}
.thumbnail-section .thumbnail-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0.8rem;
}
/* タイトル挿入 */
.article-title {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: #000;
font-family: "Noto Serif JP";
font-size: clamp(24px,3.6rem,780px);
font-style: normal;
font-weight: 700;
line-height: normal;
text-align: left;
margin-bottom: 4.8rem;
}
.article-title {
margin: 0;
}
/* --- 投稿情報 --- */
.post-info-wrap {
display: flex;
align-items: center;
gap: 3.2rem;
margin-top: 1.6rem;
margin-bottom: 4rem;
}
.date-info {
display: flex;
padding: 0.8rem 1.6rem;
align-items: center;
gap: 0.4rem;
min-width: 80px;
min-height: 20px;
border-radius: 4px;
background: var(--primary-0-d-355-c, #0D355C);
}
.date-info svg, .category-info svg {
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
flex-shrink: 0;
}
.post-date-text {
color: var(--white-02-d-8-dae-2, #D8DAE2);
font-family: "Gill Sans", sans-serif;
font-size: clamp(11px, 1.3rem, 200px);
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.07em;
}
.category-info {
display: flex;
padding: 0.8rem 1.6rem;
align-items: center;
gap: 0.4rem;
min-width: 80px;
min-height: 20px;
border-radius: 4px;
}
.post-category-link {
color: var(--primary-0-d-355-c, #0D355C);
font-family: "Noto Sans JP", sans-serif;
font-size: clamp(11px,1.1rem,160px);
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration: none;
}
.post-category-link:hover {
text-decoration: underline;
}
.content-section {
margin-top: 4.8rem;
padding-left: 8rem;
}
/* 本文セクション */
.content-section {
background: var(--white-01-f-1-eff-0, #F1EFF0);
padding: 6rem 4rem;
border-radius: 0.8rem;
margin-bottom: 4rem;
margin-top: 0;
min-height: auto;
}
.content-section .entry-content {
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.6rem,200px);
line-height: 1.8;
}
/* 見出しスタイル */
.content-section .entry-content h1 {
font-family: "Noto Serif JP";
color: var(--dark-01131-c-2-e, #131C2E);
font-weight: 700;
font-size: clamp(11px,3.2rem,440px);
line-height: 1.4;
margin-top: 4rem;
margin-bottom: 2rem;
}
.content-section .entry-content h2 {
font-family: "Noto Serif JP";
color: var(--dark-01131-c-2-e, #131C2E);
font-weight: 700;
font-size: clamp(11px,2.8rem,380px);
line-height: 1.4;
margin-top: 3.5rem;
margin-bottom: 1.5rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
padding-left: 1.6rem;
position: relative;
display: block;
border-left: 8px solid;
border-image: linear-gradient(89deg, #0D355C 0%, #1A2459 100%) 1;
background: #E7E9F2;
}
/* .content-section .entry-content h2::after {
content: '';
display: block;
width: 72rem;
height: 0.2rem;
background: linear-gradient(
to right,
#0D355C 0%,
#1A2459 40%,
#D8DAE2 40%,
#D8DAE2 100%
);
margin-top: 0.8rem;
} */
.content-section .entry-content h3 {
font-family: "Noto Serif JP";
color: var(--dark-01131-c-2-e, #131C2E);
font-weight: 700;
font-size: clamp(11px,2.4rem,320px);
line-height: 1.4;
margin-top: 3rem;
margin-bottom: 1.2rem;
padding-bottom: 0.8rem;
position: relative;
display: block;
}
.content-section .entry-content h3::after {
content: '';
display: block;
width: 72rem;
height: 0.2rem;
background: linear-gradient(
to right,
#0D355C 0%,
#1A2459 40%,
#D8DAE2 40%,
#D8DAE2 100%
);
margin-top: 0.8rem;
}
.content-section .entry-content h4 {
font-family: "Noto Serif JP";
color: var(--dark-01131-c-2-e, #131C2E);
font-weight: 700;
font-size: clamp(11px,2rem,280px);
line-height: 1.4;
margin-top: 2.5rem;
margin-bottom: 1rem;
padding-bottom: 0.8rem;
position: relative;
display: block;
}
.content-section .entry-content h4::after {
content: '';
display: block;
width: 72rem;
height: 0.2rem;
background: linear-gradient(
to right,
#0D355C 0%,
#1A2459 40%,
#D8DAE2 40%,
#D8DAE2 100%
);
margin-top: 0.8rem;
}
.content-section .entry-content h5 {
font-family: "Noto Serif JP";
color: var(--dark-01131-c-2-e, #131C2E);
font-weight: 700;
font-size: clamp(11px,1.8rem,260px);
line-height: 1.4;
margin-top: 2rem;
margin-bottom: 0.8rem;
padding-bottom: 0.8rem;
position: relative;
display: block;
}
.content-section .entry-content h5::after {
content: '';
display: block;
width: 72rem;
height: 0.2rem;
background: linear-gradient(
to right,
#0D355C 0%,
#1A2459 40%,
#D8DAE2 40%,
#D8DAE2 100%
);
margin-top: 0.8rem;
}
.content-section .entry-content h6 {
font-family: "Noto Serif JP";
color: var(--dark-01131-c-2-e, #131C2E);
font-weight: 700;
font-size: clamp(11px,1.6rem,220px);
line-height: 1.4;
margin-top: 1.5rem;
margin-bottom: 0.6rem;
padding-bottom: 0.8rem;
position: relative;
display: block;
}
.content-section .entry-content h6::after {
content: '';
display: block;
width: 72rem;
height: 0.2rem;
background: linear-gradient(
to right,
#0D355C 0%,
#1A2459 40%,
#D8DAE2 40%,
#D8DAE2 100%
);
margin-top: 0.8rem;
}
/* 企業別問い合わせボタン */
@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.btn,
a.btn,
button.btn {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
.btn-wrap {
margin: 3rem auto;
display: flex;
justify-content: center;
}
a.btn-c {
font-size: clamp(14px,2.2rem,280px);
display: flex;
justify-content: center;
position: relative;
width: 30rem;
min-width: 240px;
padding: 0.25rem 2rem 1.5rem 3.5rem;
color: #fff;
background: var(--dark-01131-c-2-e, #131C2E);
-webkit-box-shadow: 0 0.5rem 0 var(--dark-01131-c-2-e, #131C2E);
box-shadow: 0 0.5rem 0 var(--dark-01131-c-2-e, #131C2E);
}
a.btn-c span {
font-size: clamp(11px,1.5rem,220px);
position: absolute;
top: -1rem;
right: 0;
display: block;
width: 30rem;
min-width: 240px;
padding: 0.2rem 0;
color: var(--dark-01131-c-2-e, #131C2E);
border: 2px solid var(--dark-01131-c-2-e, #131C2E);
border-radius: 0.5rem;
background: #fff;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
a.btn-c:hover {
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);
color: #fff;
background: var(--dark-01131-c-2-e, #131C2E);
-webkit-box-shadow: 0 2px 0 var(--dark-01131-c-2-e, #131C2E);
box-shadow: 0 2px 0 var(--dark-01131-c-2-e, #131C2E);
}
a.btn-c:hover:before {
left: 2rem;
}
/* プライバシーポリシーページ */
.privacy-policy-content {
padding: 6.4rem 32rem 12rem 32rem;
background: var(--dark-01131-c-2-e, #131C2E);
}
.privacy-policy-content__inner {
padding: 6.4rem 8rem 12rem 8rem;
background: var(--white-01-f-1-eff-0, #F1EFF0);
}
.privacy-policy-text {
color: var(--dark-01131-c-2-e, #131C2E);
background: var(--white-01-f-1-eff-0, #F1EFF0);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.4rem,190px);
font-style: normal;
font-weight: 400;
line-height: 4rem;
z-index: 1;
}
.privacy-policy-text ol {
margin: 0;
padding-left: 1.4rem;
}
.privacy-policy-text p {
margin: 0;
}
.privacy-policy-text p:last-child {
margin-bottom: 0;
}
/* フッタープライバシーリンクの下線削除 */
.footer-privacy {
text-decoration: none;
}
/* 一覧に戻るボタン */
.back-button-wrapper {
display: flex;
justify-content: center;
margin-top: 12rem;
margin-bottom: 20rem;
}
.back-button {
display: flex;
width: 24rem;
height: 6.4rem;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 0.8rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
color: #FFF;
text-align: center;
font-feature-settings: 'pwid' on, 'palt' on;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.8rem,260px);
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 0.18rem;
text-decoration: none;
transition: opacity 0.3s ease;
}
.back-button:hover {
opacity: 0.8;
}
/* サイドバーセクション */
.sidebar-section {/* autoから2800pxに変更 */
background: var(--white-01-f-1-eff-0, #F1EFF0);
padding: 4rem 2rem;
border-radius: 0.8rem;
z-index: 2;
align-self: flex-start
}
/* セクションヘッダー */
.section-header {
display: flex;
align-items: center;
gap: 1.2rem;
margin-bottom: 3.2rem;
}
.section-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
aspect-ratio: 1/1;
fill: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
}
.page-section-title {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-feature-settings: 'palt' on;
font-family: "Noto Serif JP";
font-size: clamp(11px,2rem,280px);
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.2rem;
}
/* 最新投稿記事 */
.latest-posts {
/* margin-bottom: 80px; を削除 */
}
.latest-posts-cards {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, 1fr);
gap: 4rem;
flex-direction: column;
align-items: center;
}
/* おすすめ記事 */
.recommended-posts {
margin-top: 8rem;
}
.recommended-posts-cards {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, 1fr);
gap: 4rem;
flex-direction: column;
align-items: center;
}
/* サイドバーカード */
.sidebar-card {
display: flex;
flex-direction: column;
justify-content: flex-start; /* centerからflex-startに変更 */
align-items: flex-start;
background: #fff;
border-radius: 0.8rem;
padding: 1.6rem;
box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.sidebar-card:hover {
transform: translateY(-2px);
}
/* カードサムネイル */
.card-thumbnail {
width: 34.3rem;
height: 19.3rem;
background: #ffe6e6;
border-radius: 0.8rem;
overflow: hidden;
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
.sidebar-section .card-thumbnail .thumbnail-image {
contain: size;
transform: translateZ(0);
width: 34.3rem;
height: 19.3rem;
object-fit: cover;
}
.thumbnail-placeholder {
/* width: 100%;
height: 100%; */
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
}
/* カテゴリーバッジ */
.category-badge {
position: absolute;
top: 0;
right: 0;
border-radius: 0.4rem;
background: var(--dark-02333844, #333844);
display: flex;
height: 3.6rem;
padding: 0.8rem 1.6rem 0.8rem 1.2rem;
align-items: center;
gap: 0.4rem;
align-self: stretch;
text-decoration: none; /* リンクの下線を削除 */
/* transition: background-color 0.3s ease; ホバー効果 */
}
.category-badge:hover {
background: var(--secondary-ff-4-e-00, #FF7500); /* ホバー時の色変更 */
}
.category-badge svg {
width: 1.6rem;
height: 1.6rem;
}
.category-text {
color: var(--white-01-f-1-eff-0, #F1EFF0);
font-family: "Noto Sans JP";
font-size: clamp(9px,1.1rem,160px);
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* カードタイトル */
.card-title {
margin: 0;
margin-top: 0.8rem;
width: 34.3rem;
color: var(--dark-01131-c-2-e, #131C2E);
font-feature-settings: 'palt' on;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.4rem,180px);
font-style: normal;
font-weight: 700;
line-height: 170%;
letter-spacing: 0.07rem;
}
.card-title a {
text-decoration: none;
}
/* カード全体のリンク */
.card-link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
transition: transform 0.3s ease;
}
.card-link:hover {
transform: translateY(-2px);
}
/* ===================== タブレット版（1200px-720pxで適用） ===================== */
@media screen and (max-width: 820px) and (min-width: 769px) {
/* ===================== タブレット版でのPCヘッダー非表示管理 ===================== */
/* タブレット版（1200px-720px）では、PC版ヘッダーのみ非表示にする */
.header-wrapper,
.logo-container,
.header-div {
display: none;
}
/* ===================== タブレット版でのSPヘッダー表示管理 ===================== */
/* タブレット版（1200px-720px）では、SP版ヘッダーのみ表示する */
.sp-header,
.sp-header-btn,
.sp-header-menu,
.sp-menu-btn,
.sp-menu-text,
.sp-menu-overlay,
.sp-menu-content,
.sp-overlay-header,
.sp-overlay-header-btn,
.sp-overlay-close-btn,
.sp-overlay-close-text,
.sp-menu-items,
.sp-company-analysis-btn,
.sp-company-analysis-btn a,
.sp-consultation-btn,
.sp-consultation-btn a {
display: block;
}
/* 特殊な表示設定 */
.sp-menu-overlay {
display: block;
opacity: 0;
visibility: hidden;
}
/* ===================== タブレット版SPヘッダー ===================== */
.sp-header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
}
/* ヘッダーボタン */
.sp-header-btn {
width: 200px;
height: 100px;
flex-shrink: 0;
border-radius: 0 0 32px 0;
background: linear-gradient(89deg, #0D355C 0%, #1A2459 100%);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1002;
}
.sp-header-btn img {
width: 128px;
height: 30px;
margin-top: 16px;
}
/* ヘッダーメニュー */
.sp-header-menu {
display: flex;
width: 36rem;
height: 12rem;
justify-content: center;
align-items: center;
gap: 0.8rem;
flex-shrink: 0;
border-radius: 0.8rem;
background: linear-gradient(89deg, #0D355C 0%, #1A2459 100%);
margin-top: 1.6rem;
margin-right: 1.6rem;
}
.sp-menu-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0;
}
.sp-menu-text {
color: #FFF;
text-align: center;
font-family: "Gill Sans", sans-serif;
font-size: clamp(11px,4.5rem,300px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.22rem;
}
.sp-header-menu img {
width: 5.2rem;
height: 5.2rem;
}
/* SPメニューオーバーレイ */
.sp-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #131C2E;
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.sp-menu-overlay.active {
opacity: 1;
visibility: visible;
height: auto;
}
/* メニューコンテンツ */
.sp-menu-content {
padding: 80px 16px 0 16px;
height: 100%;
/* overflow-y: auto; */
position: relative;
z-index: 1000;
box-sizing: border-box;
}
.sp-menu-overlay.active .sp-menu-content {
overflow-y: auto;
}
/* オーバーレイ内のヘッダーボタン */
.sp-overlay-header-btn {
position: absolute;
top: 0;
left: 0;
width: 144px;
height: 64px;
border-radius: 0 0 32px 0;
background: linear-gradient(89deg, #0D355C 0%, #1A2459 100%);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
z-index: 1002;
margin-right: auto;
}
.sp-overlay-header-btn a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
}
.sp-overlay-header-btn img {
max-width: 80%;
height: auto;
}
/* オーバーレイ内のCLOSEボタン */
.sp-overlay-close-btn {
position: absolute;
top: 16px;
right: 16px;
display: flex;
width: 96px;
height: 32px;
padding: 4px 8px 4px 16px;
justify-content: flex-end;
align-items: center;
gap: 6px;
border-radius: 4px;
background: #333844;
border: none;
cursor: pointer;
z-index: 1002;
}
.sp-overlay-close-text {
color: #FFF;
text-align: center;
font-family: "Gill Sans", sans-serif;
font-size: 9px;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 1.8px;
}
/* メニュー項目 */
.sp-menu-items {
display: flex;
width: 343px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
margin-bottom: 64px;
}
.sp-menu-items a {
color: #FFF;
font-feature-settings: 'palt' on;
font-family: "Noto Serif JP", serif;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 2.4px;
text-decoration: none;
transition: opacity 0.3s;
}
.sp-menu-items a:hover {
opacity: 0.7;
}
/* 企業分析記事一覧へのボタン */
.sp-company-analysis-btn {
margin-top: 64px;
display: flex;
width: 343px;
height: 96px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 12px;
border: 1px solid #FF4E00;
background: linear-gradient(90deg, #FF7B00 0%, #FF4E00 100%);
margin-bottom: 80px;
}
.sp-company-analysis-btn a {
width: 270px;
flex-shrink: 0;
color: #FFF;
text-align: center;
font-family: "Noto Sans JP", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 900;
line-height: normal;
text-decoration: none;
}
/* 転職相談ボタン */
.sp-consultation-btn {
margin-top: 64px;
display: flex;
width: 343px;
height: 96px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 12px;
border: 1px solid #FF4E00;
background: linear-gradient(90deg, #FF7B00 0%, #FF4E00 100%);
margin-bottom: 80px;
}
.sp-consultation-btn a {
width: 251px;
flex-shrink: 0;
color: #FFF;
text-align: center;
font-family: "Noto Sans JP", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 900;
line-height: normal;
text-decoration: none;
}
/* ナビラップ */
.sp-nav-wrap {
margin-top: 80px;
display: inline-flex;
padding: 27px 14px 34px 14px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.sp-nav-title {
color: #FFF;
font-feature-settings: 'palt' on;
font-family: "Noto Serif JP", serif;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 2px;
margin: 0;
}
.sp-nav-items {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.sp-nav-line {
width: 160px;
height: 1px;
background: #333844;
}
.sp-nav-link {
display: flex;
width: 330px;
height: 48px;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: #FFF;
font-family: "Noto Sans JP", sans-serif;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration: none;
transition: opacity 0.3s;
}
.sp-nav-link:hover {
opacity: 0.7;
}
}
/* ===================== SP版全体（720px以下で適用） ===================== */
@media screen and (max-width: 768px) {
/* ===================== SP版でのPC要素非表示管理 ===================== */
/* SP版（720px以下）では、すべてのPC版要素を非表示にする */
.header-wrapper,
.logo-container,
.header-div,
.hero-section,
.scroll-section,
.about-section,
.consultant-name,
.voice-background,
.voice-image,
.voice-photos,
.voice-photo,
.company-about__photo,
.company-about__text,
.feature-card__headline,
.feature-card__body,
.company-features__contact-text,
.recruit-message__text,
.essence-card__bg,
.essence-card__title,
.essence-card__text,
.essence-card__img,
.sidebar-section,
.post-info-wrap,
.footer-cta-section__text,
.footer-cta-section__btn-text,
.consultant-photo__image,
.consultant-card__image,
.voice-image-text,
.consultant-section .consultant-item-right .consultant-info .consultant-button,
.consultant-section .consultant-item-left .consultant-info .consultant-button,
.prev-text,
.next-text,
.top-message-img
{
display: none;
}
html {
font-size: 2.66vw;
}
/* 特殊な表示設定 */
.sp-menu-overlay {
display: block;
opacity: 0;
visibility: hidden;
}
/* ===================== SP版ヘッダー ===================== */
.sp-header {
position: fixed;
top: 0;
left: 0;
gap: 9rem;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
}
/* ヘッダーボタン */
.sp-header-btn {
width: 14.4rem;
height: 6.4rem;
flex-shrink: 0;
border-radius: 0 0 32px 0;
background: linear-gradient(89deg, #0D355C 0%, #1A2459 100%);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1002;
}
.sp-header-btn img {
width: 9.4rem;
height: 2.4rem;
}
/* ヘッダーメニュー */
.sp-header-menu {
display: flex;
width: 9.6rem;
height: 3.2rem;
padding: 0.4rem 0.8rem 0.4rem 1.9rem;
justify-content: center;
align-items: center;
gap: 0.8rem;
flex-shrink: 0;
border-radius: 0.4rem;
background: linear-gradient(89deg, #0D355C 0%, #1A2459 100%);
margin-right: 1.6rem;
margin-top: 1.6rem;
}
.sp-menu-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 0;
}
.sp-menu-text {
color: #FFF;
text-align: center;
font-family: "Gill Sans", sans-serif;
font-size: clamp(11px, 1.1rem, 500px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.22rem;
}
.sp-header-menu img {
width: clamp(16px, 1.6rem, 50px);
height: clamp(16px, 1.6rem, 50px);
}
/* SPメニューオーバーレイ */
.sp-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #131C2E;
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.sp-menu-overlay.active {
opacity: 1;
visibility: visible;
}
/* メニューコンテンツ */
.sp-menu-content {
padding: 80px 16px 0 16px;
height: 100%;
/* overflow-y: auto; */
position: relative;
z-index: 1000;
box-sizing: border-box;
}
.sp-menu-overlay.active .sp-menu-content {
overflow-y: auto;
}
/* オーバーレイ内のヘッダーボタン */
.sp-overlay-header-btn {
position: absolute;
top: 0;
left: 0;
width: 144px;
height: 64px;
border-radius: 0 0 32px 0;
background: linear-gradient(89deg, #0D355C 0%, #1A2459 100%);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
z-index: 1002;
margin-right: auto;
}
.sp-overlay-header-btn a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
}
.sp-overlay-header-btn img {
max-width: 65%;
height: auto;
}
/* オーバーレイ内のCLOSEボタン */
.sp-overlay-close-btn {
position: absolute;
top: 16px;
right: 16px;
display: flex;
width: 96px;
height: 32px;
padding: 4px 8px 4px 16px;
justify-content: flex-end;
align-items: center;
gap: 6px;
border-radius: 4px;
background: #333844;
border: none;
cursor: pointer;
z-index: 1002;
}
.sp-overlay-close-text {
color: #FFF;
text-align: center;
font-family: "Gill Sans", sans-serif;
font-size: 9px;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 1.8px;
}
/* メニュー項目 */
.sp-menu-items {
display: flex;
width: 343px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
margin-bottom: 64px;
}
.sp-menu-items a {
color: #FFF;
font-feature-settings: 'palt' on;
font-family: "Noto Serif JP", serif;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 2.4px;
text-decoration: none;
transition: opacity 0.3s;
}
.sp-menu-items a:hover {
opacity: 0.7;
}
/* 企業分析記事一覧へのボタン */
.sp-company-analysis-btn {
margin-top: 1.4rem;
display: flex;
width: 34.3rem;
height: 9.6rem;
max-width: 343px;
max-height: 96px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 1.2rem;
border: 1px solid #FF4E00;
background: linear-gradient(90deg, #FF7B00 0%, #FF4E00 100%);
margin-bottom: 1.4rem;
}
.sp-company-analysis-btn a {
width: 28.6rem;
flex-shrink: 0;
color: #FFF;
text-align: center;
font-family: "Noto Sans JP", sans-serif;
font-size: clamp(12px, 1.8rem, 18px);
font-style: normal;
font-weight: 900;
line-height: normal;
text-decoration: none;
}
/* 転職相談ボタン */
.sp-consultation-btn {
margin-top: 1.4rem;
display: flex;
width: 34.3rem;
height: 9.6rem;
max-width: 343px;
max-height: 96px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 1.2rem;
border: 1px solid #FF4E00;
background: linear-gradient(90deg, #FF7B00 0%, #FF4E00 100%);
margin-bottom: 2rem;
}
.sp-consultation-btn a {
width: 25.1rem;
flex-shrink: 0;
color: #FFF;
text-align: center;
font-family: "Noto Sans JP", sans-serif;
font-size: clamp(12px, 1.8rem, 18px);
font-style: normal;
font-weight: 900;
line-height: normal;
text-decoration: none;
}
/* ナビラップ */
.sp-nav-wrap {
margin-top: 2rem;
display: inline-flex;
padding: 27px 16px 34px 16px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.sp-nav-title {
color: #FFF;
font-feature-settings: 'palt' on;
font-family: "Noto Serif JP", serif;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 2px;
margin: 0;
}
.sp-nav-items {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.sp-nav-line {
width: 160px;
height: 1px;
background: #333844;
}
.sp-nav-link {
display: flex;
width: 343px;
height: 48px;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: #FFF;
font-family: "Noto Sans JP", sans-serif;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration: none;
transition: opacity 0.3s;
}
.sp-nav-link:hover {
opacity: 0.7;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝SP版パンくずリスト ===================== */
.breadcrumb__inner {
display: flex;
align-items: flex-start;
align-items: center;
margin-left: 1.6rem;
height: auto;
box-sizing: border-box;
}
.breadcrumb__link {
color: var(--white-01-f-1-eff-0, #F1EFF0);
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration: none;
white-space: nowrap;
}
.breadcrumb__current {
color: var(--white-01-f-1-eff-0, #F1EFF0);
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration: none;
width: 18.36rem;
/* height: 1.4rem; */
white-space: nowrap;
}
.breadcrumb__sep {
height: 1rem;
width: 1rem;
margin-left: 0.8rem;
margin-right: 0.8rem;
position: relative;
top: 0;
}
/* 投稿ページ用のパンくずリストスタイル */
.single-knowhow .breadcrumb,
.single-column .breadcrumb,
.single-consultant .breadcrumb,
.single-company_analysis .breadcrumb {
width: 34.3rem;
height: 4rem;
flex-shrink: 0;
background: var(--white-01-f-1-eff-0, #F1EFF0);
display: flex;
margin-bottom: 1.8rem;
overflow: hidden;
}
.single-knowhow .breadcrumb__inner,
.single-column .breadcrumb__inner,
.single-consultant .breadcrumb__inner,
.single-company_analysis .breadcrumb__inner {
margin-left: 0;
}
.single-knowhow .breadcrumb__link,
.single-column .breadcrumb__link,
.single-consultant .breadcrumb__link,
.single-company_analysis .breadcrumb__link {
color: var(--dark-03535-a-6-b, #535A6B);
font-size: clamp(9px, 1.1rem, 18px);
overflow: hidden;
white-space: nowrap;
}
.single-knowhow .breadcrumb__current,
.single-column .breadcrumb__current,
.single-consultant .breadcrumb__current,
.single-company_analysis .breadcrumb__current {
color: var(--dark-03535-a-6-b, #535A6B);
font-size: clamp(9px, 1.1rem, 18px);
white-space: nowrap;
}
.single-knowhow .breadcrumb__sep,
.single-column .breadcrumb__sep,
.single-consultant .breadcrumb__sep,
.single-company_analysis .breadcrumb__sep {
fill: var(--dark-03535-a-6-b, #535A6B);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ヒーロセクションの共通部分 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.hero {
height: auto;
background-image: url('images/ttl_bg_sp.png');
background-color: transparent;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
padding: 1.2rem 1.6rem;
}
.hero__inner {
max-width: 192rem;
text-align: center;
margin: 6.8rem auto 4rem auto;
}
.hero__title {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP", serif;
font-size: clamp(12px, 3.2rem, 64px);
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.256rem;
margin: 0;
}
.hero__title::after {
content: "";
display: block;
width: 8rem;
height: 0.2rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 2.4rem auto;
}
.hero__label {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: clamp(12px, 1.8rem, 36px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.54rem;
margin: 0;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ SP版フッター ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* フッター背景の統一 */
body.page-id-25 .footer-cta-section,
body.page-id-62 .footer-cta-section,
body.page-id-64 .footer-cta-section,
body.page-id-66 .footer-cta-section,
body.page-id-68 .footer-cta-section,
body.page-id-70 .footer-cta-section,
body.page-id-185 .footer-cta-section {
background: #ffffff;
}
.footer-cta-section__inner {
border-radius: 8rem 0 0 0;
background: var(--grad01alt, linear-gradient(89deg, #1A2459 0%, #0D355C 100%));
}
.footer-cta-section__text-sp {
margin: 0;
width: 34.3rem;
height: 3.4rem;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(11px, 1.4rem, 24px);
font-style: normal;
font-weight: 900;
line-height: 1.4; /* テキストが2行になるため調整 */
letter-spacing: 0.07rem;
margin-top: 5.9rem;
}
.footer-cta-section__btn {
display: flex;
width: 34.3rem;
height: 9.6rem;
min-width: 1px;
min-height: 1px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 1.2rem;
border: 1px solid var(--grad02, #FF7B00);
background: var(--grad02alt, linear-gradient(90deg, #FF4E00 0%, #FF7B00 100%));
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(14px, 1.8rem, 50px);
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration: none;
margin-top: 1.8rem;
}
.footer-cta-section__btn:last-of-type {
margin-top: 4.8rem;
margin-bottom: 5.6rem;
}
.site-footer {
padding-top: 0;
padding-bottom: 0;
background: var(--dark-01131-c-2-e, #131C2E);
}
.footer-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0;
}
.footer-info-wrap {
display: flex;
flex-direction: column;
gap: 4rem;
margin: 4.8rem 1.6rem 4rem 1.6rem;
justify-content: center;
align-items: center;
}
.footer-info-text-wrap {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.footer-info-item {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-info-line {
width: 8rem;
height: 1px;
background: var(--dark-02333844, #333844);
margin-bottom: 0.4rem;
}
.footer-info-text {
display: flex;
margin-left: 3.3rem;
margin-bottom: 0.4rem;
gap: 1.6rem;
}
.footer-info-label {
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: var(--white-ffffff, #FFF);
text-align: right;
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.footer-info-value {
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: var(--white-ffffff, #FFF);
text-align: right;
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.footer-navi-wrap {
display: flex;
flex-direction: column;
padding-left: 3.2rem;
padding-bottom: 3.2rem;
}
.footer-navi-title {
margin: 0;
color: var(--white-ffffff, #FFF);
font-feature-settings: 'palt' on;
font-family: "Noto Serif JP";
font-size: 2.4rem;
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 0.24rem;
margin-bottom: 1.8rem;
}
.footer-navi-line {
width: 16rem;
height: 1px;
background: var(--dark-02333844, #333844);
margin-bottom: 2rem;
}
.footer-navi-links {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.footer-navi-link {
width: 32.8rem;
height: auto;
flex-direction: column;
justify-content: center;
text-align: left;
flex-shrink: 0;
color: var(--white-ffffff, #FFF);
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration: none;
transition: opacity 0.3s ease;
position: relative;
}
.footer-navi-link::after {
content: '';
margin-top: 2rem;
margin-bottom: 2rem;
width: 16rem;
height: 1px;
background: var(--dark-02333844, #333844);
}
.footer-bottom {
display: flex;
margin-top: 0;
/* margin-right: 36rem; */
margin-left: 0;
margin-bottom: 0;
border-top: 0.1rem solid var(--dark-02333844, #333844);
z-index: 20;
gap: 14.2rem;
padding: 1.6rem 1.6rem 4.3rem 1.6rem;
}
.footer-privacy {
color: var(--white-01-f-1-eff-0, #F1EFF0);
font-feature-settings: 'palt' on;
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 500;
line-height: normal;
z-index: 10;
text-decoration: none;
}
.footer-copyright {
color: var(--white-01-f-1-eff-0, #F1EFF0);
text-align: right;
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 700;
line-height: normal;
z-index: 10;
}
/* ===================== SP版フロントページ ============================ */
[data-href] {
cursor: pointer;
}
/* SP版ヒーローセクション */
.hero-section-sp {
background: var(--dark-01131-c-2-e, #131C2E);
}
.hero-img-sp {
width: 100%;
aspect-ratio: 45/68;
margin-top: 4.8rem;
}
/* SP版スクロールセクション */
.scroll-section-sp {
display: flex;
padding: 4rem 0;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1.6rem;
background: var(--dark-01131-c-2-e, #131C2E);
}
.scroll-text-sp {
color: var(--dark-03666, #535A6B);
text-align: center;
font-family: "Gill Sans";
font-size: 1.4rem;
font-style: normal;
font-weight: 300;
line-height: 100%;
letter-spacing: 0.42rem;
}
.scroll-icon-sp {
width: 1.6rem;
height: 3rem;
fill: var(--dark-03666, #535A6B);
}
/* SP版アバウトセクション */
.about-section-sp {
display: flex;
padding: 4rem 1.6rem 8rem 1.6rem;
flex-direction: column;
align-items: center;
gap: 6.4rem;
background: var(--dark-01131-c-2-e, #131C2E);
position: relative;
z-index: 10;
}
.about-text-sp {
width: 100%;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: 1.4rem;
font-style: normal;
font-weight: 900;
line-height: 2.8rem;
}
.about-text-highlight {
color: var(--secondary-ff-4-e-00, #FF7500);
font-family: "Noto Serif JP";
font-size: 1.8rem;
font-style: normal;
font-weight: 900;
line-height: 2.8rem;
white-space: nowrap;
display: inline;
}
.about-button-sp {
display: flex;
width: 34.3rem;
height: 9.6rem;
justify-content: center;
align-items: center;
border-radius: 1.2rem;
border: 1px solid var(--grad01alt, #1A2459);
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
}
.consultation-btn-link-sp {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: 1.8rem;
font-style: normal;
font-weight: 900;
line-height: normal;
text-decoration: none;
}
/* SP版コンサルタントセクション */
.consultant-section {
width: 100%;
}
.consultant-bg-text {
color: var(--white-02-d-8-dae-2, #D8DAE2);
text-align: right;
margin-top: -2.1rem;
/* margin-right: -1.5rem; */
font-family: "Noto Serif JP";
font-size: 4.8rem;
font-style: normal;
font-weight: 900;
line-height: normal;
z-index: 1;
}
.consultant-section .section-title h2 {
margin: 0;
margin-left: -4.2rem;
display: flex;
flex-direction: column;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Gill Sans";
font-size: 4rem;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.consultant-section .section-title h2::after {
width: 4rem;
height: 0.2rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin: 1.6rem 0 5.6rem 0;
}
.consultant-item {
margin: 0 1.6rem 10rem 1.6rem;
gap: 3rem;
}
.consultant-item-right {
display: flex;
flex-direction: column;
height: auto;
gap: 0;
align-items: flex-start;
position: relative;
margin-top: 0;
}
/* SP版 .consultant-item-left の表示順序制御 */
.consultant-item-left {
display: flex;
flex-direction: column; /* 子要素を縦に並べる */
}
.consultant-item-left {
width: 34.3rem;
display: flex;
flex-direction: column;
height: auto;
gap: 0;
align-items: flex-start;
position: relative;
margin-top: 0;
}
/* 表示順序の指定 */
.consultant-item-left .consultant-name,
.consultant-item-left .consultant-name-sp {
order: 0; /* 1番目 (デフォルト) */
}
.consultant-item-left .consultant-photo,
.consultant-item-left .consultant-photo-2 {
order: 1; /* 2番目 */
}
.consultant-item-left .consultant-info {
order: 2; /* 3番目 */
}
.consultant-item-right .consultant-photo {
margin-left: auto;
position: static;
width: 24rem;
height: 18rem;
min-width: 2rem;
min-height: 1rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
z-index: 1;
}
.consultant-item-right .consultant-photo__image-sp {
width: 100%;
height: 100%;
object-fit: cover;
}
.consultant-item-left .consultant-photo {
margin-right: auto;
position: static;
width: 24rem;
height: 18rem;
min-width: 2rem;
min-height: 1rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
z-index: 1;
}
.consultant-item-left .consultant-photo__image-sp {
width: 100%;
height: 100%;
object-fit: cover;
}
.consultant-section .consultant-item-right .consultant-info {
display: contents;
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 35.42vw;
height: 18.75vw;
min-width: 42px;
min-height: 22px;
z-index: 10;
}
.consultant-section .consultant-item-left .consultant-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 100%;
height: 100%;
min-width: 42px;
min-height: 22px;
z-index: 10;
}
.consultant-section .consultant-item-right .consultant-name-sp {
transform: rotate(90deg);
color: var(--white-02-d-8-dae-2, #D8DAE2);
font-family: "Noto Serif JP";
font-size: 7rem;
font-style: normal;
font-weight: 700;
line-height: 100%;
position: absolute;
left: -6rem;
top: 5rem;
z-index: 0;
text-align: left;
}
.consultant-section .consultant-item-left .consultant-name-sp {
writing-mode: vertical-lr ; /* テキストを縦書き（右から左へ）にする */
text-orientation: mixed;
color: var(--white-02-d-8-dae-2, #D8DAE2);
font-family: "Noto Serif JP";
font-size: 6rem;
font-style: normal;
font-weight: 700;
line-height: 100%;
position: absolute;
right: -1.5rem;
top: 0;
z-index: 0;
text-align: left;
}
/* style.css */
.consultant-section .consultant-item-right .kishida-name-sp {
/* ここにKishidaさん専用のスタイルを記述します */
transform: rotate(90deg);
color: var(--white-02-d-8-dae-2, #D8DAE2);
font-family: "Noto Serif JP";
font-size: 7rem;
font-style: normal;
font-weight: 700;
line-height: 100%;
position: absolute;
left: -11rem;
top: 11rem;
z-index: 0;
text-align: left;
}
.consultant-position {
margin: 0;
margin-top: clamp(-120px,-8.6rem,1000px);
position: static;
font-size: clamp(12px, 1.4rem, 16px);
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-weight: 900;
line-height: 1;
text-align: left;
z-index: 10;
background: rgba(191, 196, 213, 0.50);
}
.consultant-section .consultant-item-left .consultant-position {
margin-left: auto;
}
.consultant-section .consultant-item-right .consultant-japanese-name {
position: static;
font-size: clamp(12px, 6.4rem, 80px);
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-weight: 700;
line-height: 1;
text-align: left;
margin: 0;
margin-top: -4.6rem;
z-index: 10;
background: rgba(191, 196, 213, 0.50);
}
.consultant-section .consultant-item-left .consultant-japanese-name {
position: static;
font-size: clamp(12px, 6.4rem, 80px);
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-weight: 700;
line-height: 1;
margin: 0;
margin-left: auto;
margin-top: -4.6rem;
z-index: 10;
background: rgba(191, 196, 213, 0.50);
}
.consultant-lineview-card {
display: flex;
gap: 9rem;
align-items: center;
margin-top: 0.8rem;
}
.consultant-lineview {
display: flex;
gap: 20rem;
align-items: flex-end;
margin-top: 8rem;
}
.consultant-card-line {
position: static;
width: 4rem;
height: 0.2rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin-top: 0;
z-index: 10;
text-align: left;
}
.viewmore-card {
position: relative;
border: none;
border-bottom: 1px solid #666;
width: 10rem;
min-width: 100px;
color: #333;
text-decoration: none;
padding-bottom: 0.1rem;
max-width: 90%;
}
.viewmore-card a {
color: #333;
font-size: clamp(11px, 1.2rem, 40px);
text-decoration: none;
}
.viewmore-card a::before {
content: "";
display: block;
width: 3rem;
height: 0.05rem;
background: #666;
rotate: 40deg;
position: absolute;
right: -0.3rem;
bottom: 0.9rem;
}
.consultant-section .consultant-item-right .consultant-position-line {
width: 3rem;
margin-left: auto;
}
.consultant-section .consultant-item-left .consultant-position-line {
width: 3rem;
margin-left: auto;
}
.consultant-profile {
position: static;
width: 34.3rem;
height: auto;
min-width: 0;
margin: 0;
margin-top: 1.6rem;
font-size: clamp(9px, 1.1rem, 14px);
line-height: 1.5;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Sans JP";
text-align: left;
}
.consultant-section .consultant-item-right .consultant-button {
margin: 0;
position: absolute;
left: 0;
bottom: -6rem;
width: 22rem;
height: 4.4rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 2.4rem;
background: var(--primary-0-d-355-c, #0D355C);
margin: 0;
align-self: flex-end;
z-index: 10;
}
.consultant-section .consultant-item-left .consultant-button {
margin: 0;
position: absolute;
right: 0;
left: auto;
bottom: -6rem;
width: 21rem;
height: 4.4rem;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 2.4rem;
background: var(--primary-0-d-355-c, #0D355C);
margin: 0;
align-self: flex-end;
z-index: 10;
}
.consultant-button a {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 900;
line-height: 2.1rem;
text-decoration: none;
}
.btn-icon {
width: 2.4rem;
height: 2.4rem;
aspect-ratio: 1/1;
position: absolute;
right: 0.8rem;
top: 1rem;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝SP版転職者の声ページ ============================ */
/* .voice-hero {
height: auto;
background-image: url(images/hero_bg.png);
background-color: transparent;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
}
.voice-hero__title {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP", serif;
font-size: 3.2rem;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.26rem;
margin: 0;
padding-top: 8.4rem;
}
.voice-hero__title::after {
content: "";
display: block;
width: 8rem;
height: 0.2rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 2.4rem auto 0;
}
.voice-hero__about {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: 1.8rem;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.54rem;
margin-top: 2.4rem;
margin-bottom: 5.3rem;
} */
.voice-content-section {
height: auto;
background: var(--dark-01131-c-2-e, #131C2E);
padding-bottom: 0;
}
.voice-content-inner {
position: relative;
width: 37.5rem;
height: 100%;
}
.voice-image-block {
display: grid;
position: relative;
overflow: hidden;
}
.voice-image-sp {
grid-area: 1 / 1;
width: 37.5rem;
height: 29.6rem;
object-fit: cover;
object-position: center;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
z-index: 1;
margin-top: 4rem;
}
.voice-image-overlay {
grid-area: 1 / 1;
background: linear-gradient(89deg, #0D355C 0%, #1A2459 100%);
opacity: 0.4;
mix-blend-mode: multiply;
pointer-events: none;
margin-top: 4rem;
z-index: 10;
}
.voice-image-text-sp {
width: 34.3rem;
height: 21.6rem;
margin: auto;
color: #FFF;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
font-family: "Noto Serif JP";
font-size: 1.8rem;
font-style: normal;
font-weight: 900;
line-height: 150%; /* 27px */
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
z-index: 51;
grid-area: 1 / 1;
gap: 3.2rem;
}
.voice-image-text p {
margin: 0;
}
.voice-photos-sp {
display: grid;
grid-template-columns: 1fr; /* 2列グリッド */
gap: 1rem;
margin-top: 4rem;
padding-bottom: 12rem;
/* padding: 0 1.6rem; */
}
.voice-photos-sp img {
width: 100%; /* 画像をコンテナの幅に合わせる */
height: auto;
}
/* .company-hero {
height: auto;
background-image: url(images/hero_bg.png);
background-color: transparent;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
}
.company-hero__title {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP", serif;
font-size: 3.2rem;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.26rem;
margin: 0;
padding-top: 8.4rem;
}
.company-hero__title::after {
content: "";
display: block;
width: 8rem;
height: 0.2rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 2.4rem auto 0;
}
.company-hero__label {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: 1.8rem;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.54rem;
margin-top: 2.4rem;
margin-bottom: 5.3rem;
}
.company-about {
display: block;
height: 62rem;
background: var(--dark-01131-c-2-e, #131C2E);
overflow: hidden;
} */
.company-about {
height: auto;
display: flex;
flex-direction: column;
background: var(--dark-01131-c-2-e, #131C2E);
z-index: 1;
overflow: hidden;
padding-bottom: 11.6rem;
}
.company-about__bgtext {
display: block;
color: var(--link-black-2-a-3-b-62, #0D355C);
text-align: right;
font-family: "Noto Serif JP";
font-size: 4.8rem;
font-style: normal;
font-weight: 900;
line-height: 100%;
margin-top: -0.6rem;
margin-right: -0.4rem;
}
.company-about .section-title h2 {
margin: 0;
color: var(--white-ffffff, #FFF);
font-family: "Gill Sans", sans-serif;
font-size: clamp(16px, 4rem, 80px);
font-style: normal;
font-weight: 300;
line-height: 100%;
margin-top: -2rem;
margin-left: 1.6rem;
}
.company-about .section-title h2::after {
content: '';
display: block;
width: 4rem;
height: 0.2rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin-top: 1.6rem;
margin-bottom: 7.2rem;
}
.company-about__photo-sp {
width: 31.9rem;
height: 45rem;
margin-left: 5.7rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
}
.company-about__panel {
width: 34.3rem;
height: 32.8rem;
background: #212D49;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
margin-top: -41.6rem;
margin-left: 1.6rem;
}
.company-about__text-sp {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: 1.4rem;
font-style: normal;
font-weight: 900;
line-height: 200%;
margin: 8rem 1.6rem;
}
.company-features {
position: relative;
height: auto;
background: var(--white-02-d-8-dae-2, #D8DAE2);
z-index: 0;
overflow: hidden;
}
.company-features__bg {
position: absolute;
top: -20.6rem;
left: -3rem;
width: 71.2rem;
height: 71.2rem;
margin-top: 0;
margin-left: 0;
}
.company-features__bg img{
display: block;
width: 71.2rem;
height: 71.2rem;
}
.company-features__title {
margin: 0;
margin-top: 6.4rem;
color: var(--dark-01131-c-2-e, #131C2E);
text-align: center;
font-family: "Noto Sans JP";
font-size: 3.6rem;
font-style: normal;
font-weight: 300;
line-height: 40px;
}
.company-features__line {
width: 4rem;
height: 0.2rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 1.6rem auto 0;
}
.company-features__cards {
margin-top: 3.2rem;
display: grid;
grid-template-rows: repeat(7, 40.5rem);
grid-template-columns: 1fr;
gap: 2.4rem;
justify-items: center;
}
.feature-card {
position: relative;
width: 34.3rem;
height: 40.5rem;
background: #20293F;
overflow: hidden;
}
.feature-card__img {
position: absolute;
right: 0;
top: 0;
width: auto;
height: auto;
object-fit: cover;
max-width: 15.6rem;
z-index: 10;
}
.feature-card__headline-sp {
margin: 0;
margin-top: 5.4rem;
margin-left: 1.2rem;
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: 3.2rem;
font-style: normal;
font-weight: 900;
line-height: 120%;
position: relative;
z-index: 11;
}
.feature-card__headline-sp .hl-orange {
margin: 0;
margin-top: 5.4rem;
margin-left: 0;
color: var(--secondary-ff-4-e-00, #FF7500);
font-family: "Noto Serif JP";
font-size: 3.2rem;
font-style: normal;
font-weight: 900;
line-height: 120%;
}
.feature-card__body-sp {
margin: 0;
margin-top: 6.4rem;
margin-left: 2.4rem;
width: 29.5rem;
height: 13.3rem;
color: #FFF;
display: flex;
height: auto;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
font-family: "Noto Sans JP";
font-size: 1.2rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.feature-card__body-sp p {
margin: 0;
}
.company-features__contact {
margin-top: 8.2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.company-features__contact-text-sp {
margin: 0;
color: var(--dark-01131-c-2-e, #131C2E);
text-align: center;
font-family: "Noto Serif JP";
font-size: 1.8rem;
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 0.09rem;
}
.company-features__contact-box {
margin-top: 3.8rem;
width: 34.3rem;
height: 8.5rem;
flex-shrink: 0;
border: 1px solid var(--grad03, #1C5B9C);
background: var(--white-01-f-1-eff-0, #F1EFF0);
display: flex;
align-items: center;
justify-content: center;
}
.company-features__contact-email {
color: var(--primary-0-d-355-c, #0D355C);
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: 2.4rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.12rem;
}
.company-features__contact-note {
margin: 0;
margin-top: 1.6rem;
margin-bottom: 8rem;
color: var(--dark-02333844, #333844);
text-align: center;
font-family: "Noto Sans JP";
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.07rem;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝SP版 採用情報ページ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* .recruit-hero {
height: auto;
background-image: url(images/hero_bg.png);
background-color: transparent;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
}
.recruit-hero__title {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP", serif;
font-size: 3.2rem;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.26rem;
margin: 0;
padding-top: 8.4rem;
}
.recruit-hero__title h1 {
margin: 0;
}
.recruit-hero__title::after {
content: "";
display: block;
width: 8rem;
height: 0.2rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 2.4rem auto 0;
}
.recruit-hero__label {
margin: 0;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: 1.8rem;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.54rem;
margin-top: 2.4rem;
margin-bottom: 5.3rem;
}
.recruit-hero__label a {
margin: 0;
} */
.recruit-message {
background: var(--dark-01131-c-2-e, #131C2E);
overflow: hidden;
display: flex;
flex-direction: column;
}
.recruit-message__bgtext {
margin-top: -1.6rem;
margin-right: -0.4rem;
color: var(--link-black-2-a-3-b-62, #0D355C);
text-align: right;
font-family: "Noto Serif JP";
font-size: 4.8rem;
font-style: normal;
font-weight: 900;
line-height: normal;
pointer-events: none;
z-index: 0;
}
.recruit-message .section-title {
margin: -2rem auto 0;
}
.recruit-message .section-title h2 {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: 3.6rem;
font-style: normal;
font-weight: 300;
line-height: 4rem; /* 111.111% */
}
.recruit-message .section-title h2::after {
content: '';
display: block;
width: 4rem;
height: 0.2rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin: 1.6rem auto 0;
}
.recruit-message__text-block {
margin-top: 4rem;
margin-bottom: 12rem;
display: flex;
flex-direction: column;
gap: 4rem;
z-index: 1;
}
.recruit-message__text-sp {
margin: 0;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: 1.4rem;
font-style: normal;
font-weight: 900;
line-height: 200%;
}
/* エッセエッセンスセクションエッセンスセクション*/
.recruit-essence {
height: auto;
background: var(--dark-01131-c-2-e, #131C2E);
display: flex;
flex-direction: column;
overflow: hidden;
}
.recruit-essence__bgtext {
margin-top: -1.7rem;
margin-right: -0.4rem;
color: var(--link-black-2-a-3-b-62, #0D355C);
text-align: right;
font-family: "Noto Serif JP";
font-size: 4.8rem;
font-style: normal;
font-weight: 900;
line-height: normal;
pointer-events: none;
z-index: 0;
}
.recruit-essence .section-title {
margin: -2rem auto 0;
z-index: 1;
}
.recruit-essence .section-title h2 {
margin: 0;
color: var(--white-ffffff, #FFF);
font-family: "Gill Sans", sans-serif;
font-size: 3.6rem;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.recruit-essence .section-title h2::after {
content: '';
display: block;
width: 4rem;
height: 0.2rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin: 1.6rem auto 0;
}
.recruit-essence__cards {
display: grid;
grid-template-columns: 1fr;
gap: 1.6rem;
width: 34.3rem;
z-index: 1;
margin: 4rem auto 8rem;
justify-items: center;
}
.essence-card {
width: 34.3rem;
height: 43.7rem;
min-width: 30px;
min-height: 23px;
flex-shrink: 0;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
position: relative;
}
.essence-card__bg-sp {
height: 100%;
margin-top: 0;
position: absolute;
top: 0;
right: 0;
}
.essence-card__border {
width: 32.7rem;
height: 42.1rem;
min-width: 29px;
min-height: 22px;
border: 1px solid var(--white-02-d-8-dae-2, #D8DAE2);
margin: 0.8rem auto;
z-index: 1;
display: flex;
/* justify-content: center; */
align-items: center;
flex-direction: column;
position: relative;
z-index: 0;
}
.essence-card__title-sp {
width: 29.7rem;
height: 14.3rem;
margin: 0;
margin-top: 3.2rem;
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: 2.8rem;
font-style: normal;
font-weight: 900;
line-height: 150%;
text-align: left;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.essence-card__text-sp {
width: 29.5rem;
height: 19rem;
margin: 0;
margin-top: 2.4rem;
color: #FFF;
font-family: "Noto Sans JP";
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 170%;
text-align: left;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.recruit-requirement {
height: auto;
background: var(--dark-01131-c-2-e, #131C2E);
overflow: hidden;
display: flex;
flex-direction: column;
padding-bottom: 8rem;
}
.recruit-requirement__bgtext {
margin-top: -1.7rem;
margin-right: -0.4rem;
color: var(--link-black-2-a-3-b-62, #0D355C);
text-align: right;
font-family: "Noto Serif JP";
font-size: 4.8rem;
font-style: normal;
font-weight: 900;
line-height: normal;
pointer-events: none;
z-index: 0;
}
.recruit-requirement .section-title {
margin: -2rem auto 0;
z-index: 1;
}
.recruit-requirement .section-title h2 {
margin: 0;
color: var(--white-ffffff, #FFF);
font-family: "Gill Sans", sans-serif;
font-size: 3.6rem;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.recruit-requirement .section-title h2::after {
content: '';
display: block;
width: 4rem;
height: 0.2rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin: 1.6rem auto 0;
}
.recruit-requirement__content {
display: flex;
flex-direction: column;
gap: 12.8rem;
z-index: 1;
align-items: center;
}
.requirement-text-wrap {
display: flex;
padding: 6.4rem 1.6rem 6.4rem 1.6rem;
margin-top: 0;
flex-direction: column;
align-items: center;
gap: 3.2rem;
background-color: #ffffff;
}
.requirement-title {
margin: 0;
width: 34.3rem;
color: var(--black-000000, #000000);
font-family: "Noto Serif JP";
font-size: 1.8rem;
font-style: normal;
font-weight: 700;
line-height: 170%;
margin-bottom: 0.4rem;
}
.requirement-line {
width: 10.7rem;
height: 0.1rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin-bottom: 1.6rem;
}
.requirement-line::after {
content: '';
display: block;
width: 23.4rem;
height: 0.1rem;
background: var(--white-02-d-8-dae-2, #D8DAE2);
margin-left: 10.7rem;
}
.requirement-text {
margin: 0;
width: 33.7rem;
color: var(--black-000000, #000000);
font-family: "Noto Sans JP";
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 170%;
}
.requirement-button {
display: flex;
width: 34.3rem;
height: 6.4rem;
justify-content: center;
align-items: center;
flex-shrink: 0;
margin-top: 4rem;
border-radius: 1.6rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
}
.requirement-btn-link {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: 1.8rem;
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 0;
text-decoration: none;
}
.recruit-employees {
background: var(--white-01-f-1-eff-0, #F1EFF0);
display: flex;
flex-direction: column;
overflow: hidden;
}
.recruit-employees__bgtext {
margin-top: -1.7rem;
color: #D8DAE2;
text-align: right;
font-family: "Noto Serif JP";
font-size: 4.8rem;
font-style: normal;
font-weight: 900;
line-height: normal;
pointer-events: none;
z-index: 0;
white-space: nowrap;
}
.recruit-employees .section-title {
margin-top: -2.8rem;
margin-left: 3rem;
z-index: 1;
}
.recruit-employees .section-title h2 {
margin: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Gill Sans", sans-serif;
font-size: 4rem;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.recruit-employees .section-title h2::after {
content: '';
display: block;
width: 4rem;
height: 0.2rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin-top: 1.6rem;
margin-bottom: 1.2rem;
}
.employees-slider {
margin-top: 4rem;
margin-left: 1.6rem;
margin-right: auto;
z-index: 1;
}
.employees-slider__controls {
display: flex;
width: 37.5rem;
justify-content: flex-start;
align-items: center;
gap: 1.6rem;
}
.employee-card {
margin: 0 0.5rem; /* カード間の余白 */
padding-top: 0.5rem;
}
.employee-card__image {
width: 30rem;
height: 16.8rem;
min-width: 1px;
min-height: 1px;
flex-shrink: 0;
border-radius: 0.8rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
position: relative;
}
.employee-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0.8rem;
}
.employee-card__content {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0.8rem;
}
.employee-card__title {
margin: 0;
display: flex;
width: 26.8rem;
height: 8.4rem;
flex-direction: column;
flex-shrink: 0;
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: clamp(11px,1.4rem,24rem);
font-weight: 700;
line-height: 1.4;
margin-bottom: 1.6rem;
}
.employee-card__excerpt {
margin: 0;
width: 26.8rem;
height: 6.8rem;
color: var(--white-02-d-8-dae-2, #666666);
font-family: "Noto Sans JP";
font-size: clamp(11px,1.1rem,18px);
font-style: normal;
font-weight: 400;
line-height: 150%;
margin-bottom: 1.6rem;
flex-grow: 1;
}
.employee-card__footer {
width: 26.8rem;
height: 3.6rem;
flex-shrink: 0;
border-radius: 0.4rem;
background: var(--dark-02333844, #333844);
display: flex;
justify-content: center;
align-items: center;
gap: 7.8rem;
}
.employee-card__category {
display: flex;
gap: 0.4rem;
}
.employee-card__category img {
width: 1.6rem;
height: 1.6rem;
}
.employee-card__category-text {
color: var(--white-01-f-1-eff-0, #F1EFF0);
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.employee-card__date {
color: var(--white-02-d-8-dae-2, #D8DAE2);
text-align: right;
font-feature-settings: 'palt' on;
font-family: "Gill Sans", "Gill Sans MT", "Segoe UI", "Helvetica Neue", Arial, Calibri, "Trebuchet MS", sans-serif;
font-size: 1.4rem;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.07rem;
}
.slider-prev-btn {
width: 9.6rem;
height: 4rem;
flex-shrink: 0;
border-radius: 0.4rem;
background: var(--grad01alt, linear-gradient(89deg, #1A2459 0%, #0D355C 100%));
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
transition: opacity 0.3s ease;
}
.prev-icon,
.next-icon {
width: 2.4rem;
height: 2.4rem;
}
.prev-text, .next-text {
color: #FFF;
text-align: center;
font-family: "Gill Sans";
font-size: 1.2rem;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.42rem;
}
.employees-list-btn {
display: flex;
padding: 1rem 2rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
color: #FFF;
text-decoration: none;
border-radius: 2.4rem;
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-weight: 700;
transition: opacity 0.3s ease;
}
.slider-next-btn {
width: 9.6rem;
height: 4rem;
min-width: 10px;
min-height: 3px;
flex-shrink: 0;
border-radius: 0.4rem;
background: var(--grad01alt, linear-gradient(89deg, #1A2459 0%, #0D355C 100%));
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
transition: opacity 0.3s ease;
}
.slider-prev-btn {
width: 9.6rem;
height: 4rem;
min-width: 10px;
min-height: 3px;
flex-shrink: 0;
border-radius: 0.4rem;
background: var(--grad01alt, linear-gradient(89deg, #1A2459 0%, #0D355C 100%));
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
transition: opacity 0.3s ease;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ SP版コンサルタント紹介 一覧ページ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* .company-hero__title::after {
margin-left: 10.5rem;
} */
.consultant-cards-section {
display: flex;
justify-content: center;
background: var(--dark-01131-c-2-e, #131C2E);
}
.consultant-cards-wrap {
display: grid;
width: 37.5rem;
height: auto;
align-items: center;
align-content: center;
justify-items: center;
gap: 4.8rem;
margin: 4rem 1.6rem 16rem 1.6rem;
grid-template-columns: repeat(1, 55.6rem);
justify-content: center;
}
.consultant-card {
width: 34.3rem;
height: 55.6rem;
min-width: 2rem;
min-height: 1rem;
border-radius: 4rem 1.6rem;
background: var(--white-01-f-1-eff-0, #F1EFF0);
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
cursor: pointer;
}
.consultant-image {
border-radius: 3.2rem 1rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
width: 32.7rem;
height: 25.1rem;
min-width: 2rem;
min-height: 1rem;
flex-shrink: 0;
margin-top: 0.8rem;
margin-left: 0.4rem;
}
.consultant-card__image-sp {
border-radius: 3.2rem 1rem;
width: 100%;
height: 100%;
object-fit: cover;
}
.consultant-content {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: -2.4rem;
margin-left: 0.8rem;
}
.consultant-card-name {
margin: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-size: 4.8rem;
font-style: normal;
font-weight: 700;
line-height: 100%;
text-align: left;
background: rgba(191, 196, 213, 0.50);
}
.consultant-card-position {
margin: 0;
flex-shrink: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-size: 1.4rem;
font-style: normal;
font-weight: 900;
line-height: 100%;
text-align: left;
margin-top: 1.6rem;
}
.consultant-card-line {
height: 0.2rem;
width: 8rem;
flex-shrink: 0;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin-top: 1.6rem;
}
.viewmore {
position: relative;
border: none;
border-bottom: 1px solid #666;
width: 10rem;
min-width: 40px;
color: #333;
text-decoration: none;
padding-bottom: 0.1rem;
max-width: 90%;
}
.viewmore a {
color: #333;
font-size: clamp(11px, 1.2rem, 40px);
text-decoration: none;
}
.viewmore a::before {
content: "";
display: block;
width: 3rem;
height: 0.05rem;
background: #666;
rotate: 40deg;
position: absolute;
right: -0.3rem;
bottom: 0.9rem;
}
.consultant-description {
width: 95%;
min-width: 5rem;
min-height: 10rem;
margin: 0;
flex-shrink: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Sans JP";
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 150%;
text-align: left;
margin-top: 1.6rem;
margin-left: 0.8rem;
margin-right: 0.8rem;
height: 12.8rem;
}
.consultant-btn {
display: flex;
padding: 1rem 0.8rem 1rem 1.65rem;
justify-content: center;
align-items: center;
border-radius: 2.4rem;
border: 1px solid var(--grad01alt, #1A2459);
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 900;
line-height: 2.1rem;
text-decoration: none;
/* margin-top: 6.1rem; */
margin-left: 10rem;
margin-bottom: 1.6rem;
margin-right: 0.8rem;
margin-top: 0.4rem;
}
.btn-text {
color: var(--white-ffffff, #FFF);
text-align: center;
font-feature-settings: 'pwid' on, 'palt' on;
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 900;
line-height: 2.1rem;
letter-spacing: 0;
}
.btn-icon2 {
width: 2.4rem;
height: 2.4rem;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝記事一覧ページ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.analysis-cards-section {
background: var(--dark-01131-c-2-e, #131C2E);
display: flex;
justify-content: center;
/* align-items: flex-start; */
padding-top: 4rem;
padding-left: 1.6rem;
padding-right: 1.6rem;
}
/* --- アーカイブページの検索フォーム --- */
/* フォーム全体のラッパー */
.archive-search-form {
display: flex; /* 入力欄とボタンを横並びに */
width: 60%;
margin-right: auto;
margin-left: 2.4rem;
margin-bottom: 1.5rem; /* カテゴリーとの間に余白 */
border: 1px solid #E0E0E0; /* フォーム全体を枠線で囲む */
border-radius: 4px; /* 角を少し丸める */
overflow: hidden; /* 角丸を内側の要素にも適用 */
}
/* 検索キーワード入力欄 */
.archive-search-input {
flex-grow: 1; /* 横幅を可能な限り広げる */
border: none; /* 個別の枠線は不要 */
padding: 0.75rem 1rem;
font-size: clamp(11px,1.4rem,24px);
outline: none; /* クリック時の青い枠線を消す */
background-color: #fff;
}
.archive-search-input::placeholder {
color: #BDBDBD; /* プレースホルダーの文字色 */
}
/* 検索ボタン */
.archive-search-submit {
border: none;
background-color: #0D355C; /* サイトのキーカラー */
color: #fff;
padding: 0.75rem 1.5rem;
font-size: clamp(11px,1.4rem,24px);
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
}
.archive-search-submit:hover {
background-color: #1A4A7A; /* ホバー時の色を少し明るく */
}
/* --- アーカイブページのカテゴリー選択ドロップダウン --- */
.category-select {
width: 60%; /* 親要素の幅いっぱいに広げる */
padding: 0.75rem 1rem;
font-family: "Noto Sans JP";
font-size: clamp(11px,1.2rem,18px);
font-weight: 450;
border: 1px solid #E0E0E0;
border-radius: 4px;
background-color: #fff;
/* 右側の矢印をカスタムする場合に備えて appearance を無効化 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 矢印のスペースを確保 */
padding-right: 2.5rem;
/* 矢印の背景画像（簡易的なもの） */
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230D355C%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-13%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2013l128%20127.9c3.6%203.6%207.8%205.4%2013%205.4s9.4-1.8%2013-5.4L287%2095.2c3.6-3.6%205.4-7.8%205.4-13%200-5-1.8-9.4-5.4-13z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: .65em auto;
cursor: pointer;
}
.category-select:focus {
outline: none;
border-color: #0D355C;
box-shadow: 0 0 0 2px rgba(13, 53, 92, 0.2);
}
.sort-categories {
display: flex;
flex-direction: row;
gap: 1.2rem;
/* width: 120rem; */
justify-content: flex-start;
margin-left: 2.4rem;
}
.sort-category-link:hover, .sort-category-link.active {
color: var(--secondary-ff-4-e-00, #FF7500);
}
.sort-category-link {
color: var(--white-ffffff, #FFF);
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration: none;
transition: color 0.3s ease;
display: inline-block;
}
.sort-categories-line {
width: 90%;
height: 0.1rem;
min-width: 1px;
flex-shrink: 0;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 0.8rem 2.4rem 0;
}
.analysis-cards-grid {
display: grid;
/* width: 1200px; */
/* height: 1487px; */
row-gap: 3.2rem;
column-gap: 0;
grid-template-rows: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(1, minmax(0, 1fr));
margin: 2.4rem;
min-width: 63px;
min-height: 74px;
}
.analysis-card-item {
background: var(--white-02-d-8-dae-2, #D8DAE2);
border-radius: 1.2rem;
overflow: hidden;
width: auto;
height: 36rem;
min-width: 1px;
min-height: 1px;
}
.analysis-card-link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.analysis-card-image {
width: 28rem;
height: 18rem;
min-width: 1px;
min-height: 1px;
overflow: hidden;
margin: auto;
}
.analysis-card-image img {
width: 28rem;
height: 18rem;
min-width: 1px;
min-height: 1px;
object-fit: contain;
background-color: #f5f5f5;
margin: 0 auto;
}
.analysis-card-content {
padding: 1.4rem;
margin-top: 0;
}
.analysis-card-title {
margin: 0;
width: 26rem;
height: 4.1rem;
min-width: 1px;
min-height: 1px;
margin-bottom: 1.5rem;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-size: 1.4rem;
font-weight: 700;
line-height: 150%;
}
.analysis-category-tag {
display: inline-block;
padding: 0.4rem 1.2rem;
background: var(--dark-02333844, #333844);
color: #fff;
font-family: "Noto Sans JP";
font-size: clamp(9px,1.1rem,16px);
font-weight: 500;
border-radius: 1.2rem;
margin-right: 0.8rem;
margin-bottom: 0.8rem;
}
.analysis-card-excerpt {
margin: 0;
width: 26rem;
height: 4.1rem;
min-width: 1px;
min-height: 1px;
color: #666;
font-family: "Noto Sans JP";
font-size: clamp(12px, 1.1rem, 18px);
line-height: 150%;
margin-bottom: 0;
min-width: 42px;
min-height: 30px;
overflow: hidden;
}
.analysis-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1.5rem;
}
.analysis-card-category {
display: flex;
align-items: center;
gap: 0.4rem;
}
.analysis-card-category img {
width: 1.6rem;
height: 1.6rem;
}
.analysis-card-category-text {
color: #666;
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-weight: 400;
}
.analysis-card-date {
color: #666;
font-family: "Noto Sans JP";
font-size: 1.1rem;
font-weight: 400;
margin-right: 1.5rem;
}
.analysis-pagination {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: 90%;
max-width: 1200px;
margin: 0 auto;
margin-top: 1.6rem;
padding-right: 0;
}
.analysis-pagination .analysis-prev-btn, .analysis-pagination .analysis-next-btn {
width: 4rem;
height: 6rem;
flex-shrink: 0;
border-radius: 0.4rem;
background: var(--grad01alt, linear-gradient(89deg, #1A2459 0%, #0D355C 100%));
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
transition: opacity 0.3s ease;
min-width: 7px;
min-height: 3px;
}
.analysis-pagination .prev-icon, .analysis-pagination .next-icon {
width: 1.4rem;
height: 1.4rem;
}
.analysis-pagination .prev-text, .analysis-pagination .next-text {
color: #FFF;
text-align: center;
font-family: "Gill Sans";
font-size: clamp(11px, 1.2rem, 18px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.42rem;
}
.page-number {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 3rem;
border-radius: 0.4rem;
background: transparent;
border: 1px solid var(--white-ffffff, #FFF);
color: var(--white-ffffff, #FFF);
font-family: "Noto Sans JP";
font-size: clamp(11px, 1.4rem, 18px);
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝ 問い合わせページ ＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.contact-form-wrapper {
position: relative;
display: flex;
padding: 0 1.6rem;
justify-content: center;
align-items: center;
background: transparent;
background: var(--dark-01131-c-2-e, #131C2E);
}
.contact-form-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
height: auto;
min-height: 100%;
flex-shrink: 0;
margin: 0 ;
padding: 4rem 1.6rem ;
background: #ffffff;
}
.wpcf7 {
max-width: 800px;
margin-left: 0;
margin-right: 0;
padding: 0;
}
.wpcf7-form {
display: flex;
flex-direction: column;
gap: 4.8rem;
}
.contact-target-company {
display: block;
margin-bottom: 0;
font-family: "Noto Sans JP";
font-size: 1.4rem;
font-weight: 500;
color: var(--dark-01131-c-2-e, #131C2E);
margin-left: 0;
margin-bottom: 2.4rem;
}
.wpcf7-form label {
display: block;
margin-bottom: 0;
font-family: "Noto Sans JP";
font-size: 1.4rem;
font-weight: 500;
color: var(--dark-01131-c-2-e, #131C2E);
}
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea, .wpcf7-form select {
width: 31rem;
padding: 0.6rem 1.4rem;
margin-top: 1rem;
border: 2px solid #E5E7EB;
border-radius: 0.8rem;
font-family: "Noto Sans JP";
font-size: 1.4rem;
background: #FFFFFF;
transition: border-color 0.3s ease;
}
.wpcf7-form input[type="submit"] {
display: flex;
width: 16rem;
height: 6.4rem;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 0.8rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
color: var(--white-ffffff, #FFF);
border: none;
font-family: "Noto Sans JP";
font-size: 1.4rem;
font-weight: 900;
letter-spacing: 0.18rem;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 0;
margin-left: 9.15rem;
}
.wpcf7-form input[type="radio"], .wpcf7-form input[type="checkbox"] {
margin-right: 1rem;
width: 1rem;
height: 1rem;
accent-color: var(--primary-0-d-355-c, #0D355C);
}
/*＝＝＝＝＝＝＝＝＝＝＝ SP版 投稿ページ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.company-analysis-single {
height: auto;
background: var(--dark-01131-c-2-e, #131C2E);
padding-bottom: 0;
}
.background-image {
width: 37.5rem;
height: 8.8rem;
}
.content-wrapper {
display: flex;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.text-wrapper {
height: auto;
margin: 0;
}
.thumbnail-section {
display: grid;
grid-area: 1 / 1;
height: 19.7rem;
width: 37.5rem;
}
.thumbnail-section .thumbnail-image {
width: 37.5rem;
height: 19.7rem;
grid-area: 1 / 1;
object-fit: cover;
border-radius: 0.8rem;
}
.article-title {
margin: 0;
width: 34.3rem;
grid-area: 1 / 1;
display: flex;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
color: #000;
font-family: "Noto Serif JP";
font-size: clamp(18px,2.8rem,780px);
font-style: normal;
font-weight: 700;
line-height: normal;
text-align: left;
margin-bottom: 3.2rem;
}
.post-info-wrap-sp {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
align-items: end; /* 左寄せ */
justify-content: flex-end;
gap: 1.6rem;
margin: 2.4rem 1.6rem;
}
.category-info {
border-radius: 4px;
background: var(--white-01-f-1-eff-0, #F1EFF0);
}
.content-section {
width: auto;
background: var(--white-01-f-1-eff-0, #F1EFF0);
padding: 1.4rem 1.6rem;
border-radius: 0.8rem;
margin-bottom: 4rem;
margin-top: 0;
min-height: auto;
}
.content-section .entry-content {
width: 33.7rem;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Sans JP";
font-size: clamp(11px, 1.3rem, 20px);
line-height: 1.8;
}
.content-section .entry-content h2 {
font-family: "Noto Serif JP";
color: var(--dark-01131-c-2-e, #131C2E);
font-weight: 700;
font-size: clamp(14px, 2.2rem, 78px);
line-height: 1.4;
margin-top: 1.6rem;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 1.6rem;
position: relative;
display: block;
border-left: 0.8rem solid;
border-image: linear-gradient(89deg, #0D355C 0%, #1A2459 100%) 1;
background: #E7E9F2;
}
.content-section .entry-content h2::after {
}
.content-section .entry-content h3 {
font-family: "Noto Serif JP";
color: var(--dark-01131-c-2-e, #131C2E);
font-weight: 700;
font-size: 1.8rem;
line-height: 1.4;
margin-top: 3rem;
margin-bottom: 1.2rem;
padding-bottom: 0.8rem;
position: relative;
display: block;
}
.content-section .entry-content h3::after {
content: '';
display: block;
width: 34.3rem;
height: 0.2rem;
background: linear-gradient(
to right,
#0D355C 0%,
#1A2459 40%,
#D8DAE2 40%,
#D8DAE2 100%
);
margin-top: 0.8rem;
}
.content-section .entry-content h4 {
font-family: "Noto Serif JP";
color: var(--dark-01131-c-2-e, #131C2E);
font-weight: 700;
font-size: 1.8rem;
line-height: 1.4;
margin-top: 2.5rem;
margin-bottom: 1rem;
padding-bottom: 0.8rem;
position: relative;
display: block;
}
.content-section .entry-content h4::after {
content: '';
display: block;
width: 34.3rem;
height: 0.2rem;
background: linear-gradient(
to right,
#0D355C 0%,
#1A2459 40%,
#D8DAE2 40%,
#D8DAE2 100%
);
margin-top: 0.8rem;
}
.content-section .entry-content h5 {
font-family: "Noto Serif JP";
color: var(--dark-01131-c-2-e, #131C2E);
font-weight: 700;
font-size: 1.6rem;
line-height: 1.4;
margin-top: 2rem;
margin-bottom: 0.8rem;
padding-bottom: 0.8rem;
position: relative;
display: block;
}
.content-section .entry-content h5::after {
content: '';
display: block;
width: 34.3rem;
height: 0.2rem;
background: linear-gradient(
to right,
#0D355C 0%,
#1A2459 40%,
#D8DAE2 40%,
#D8DAE2 100%
);
margin-top: 0.8rem;
}
.content-section .entry-content h6 {
font-family: "Noto Serif JP";
color: var(--dark-01131-c-2-e, #131C2E);
font-weight: 700;
font-size: 1.4rem;
line-height: 1.4;
margin-top: 1.5rem;
margin-bottom: 0.6rem;
padding-bottom: 0.8rem;
position: relative;
display: block;
}
.content-section .entry-content h6::after {
content: '';
display: block;
width: 34.3rem;
height: 0.2rem;
background: linear-gradient(
to right,
#0D355C 0%,
#1A2459 40%,
#D8DAE2 40%,
#D8DAE2 100%
);
margin-top: 0.8rem;
}
.back-button-wrapper {
display: flex;
justify-content: center;
margin-top: 7rem;
margin-bottom: 14rem;
}
.back-button {
display: flex;
width: 16rem;
height: 4.2rem;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 0.8rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
color: #FFF;
text-align: center;
font-feature-settings: 'pwid' on, 'palt' on;
font-family: "Noto Sans JP";
font-size: 1.4rem;
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 0;
text-decoration: none;
transition: opacity 0.3s ease;
}
/* 企業別問い合わせボタン */
@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.btn,
a.btn,
button.btn {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
.btn-wrap {
margin: 3rem auto;
}
a.btn-c {
font-size: clamp(11px,1.2rem,200px);
width: 18rem;
min-width: 180px;
position: relative;
padding: 0.25rem 2rem 1rem 2rem;
color: #fff;
background: var(--dark-01131-c-2-e, #131C2E);
-webkit-box-shadow: 0 0.5rem 0 var(--dark-01131-c-2-e, #131C2E);
box-shadow: 0 0.5rem 0 var(--dark-01131-c-2-e, #131C2E);
}
a.btn-c span {
font-size:clamp(9px,1rem,200px);
position: absolute;
top: -1rem;
right: 0;
display: block;
width: 18rem;
min-width: 180px;
padding: 0.2rem 0;
color: var(--dark-01131-c-2-e, #131C2E);
border: 2px solid var(--dark-01131-c-2-e, #131C2E);
border-radius: 0.5rem;
background: #fff;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
a.btn-c:hover {
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);
color: #fff;
background: var(--dark-01131-c-2-e, #131C2E);
-webkit-box-shadow: 0 2px 0 var(--dark-01131-c-2-e, #131C2E);
box-shadow: 0 2px 0 var(--dark-01131-c-2-e, #131C2E);
}
a.btn-c:hover:before {
left: 2rem;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝SP版プライバシーポリシー ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.privacy-policy-content {
padding: 0;
background: var(--white-01-f-1-eff-0, #F1EFF0);
}
.privacy-policy-content__inner {
padding: 6.4rem 1.6rem 16rem 1.6rem;
background: var(--white-01-f-1-eff-0, #F1EFF0);
}
.privacy-policy-text {
color: var(--dark-01131-c-2-e, #131C2E);
background: var(--white-01-f-1-eff-0, #F1EFF0);
font-family: "Noto Sans JP";
font-size: clamp(11px, 1.4rem, 24px);
font-style: normal;
font-weight: 400;
line-height: 170%;
z-index: 1;
}
.privacy-policy-text p {
margin: 0;
}
.privacy-policy-text ol {
margin: 0;
padding-left: 1.4rem;
}
}
/* ===＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Additional styling by collaborator =＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝== */
/* ページ全体のコンテナ */
.page-about-content,
.page-candidate-content {
background: var(--dark-01131-c-2-e, #131C2E);
overflow: hidden;
width: 100%;
}
/* ===================================================================
2. 共通コンポーネント
================================================================= */
/* セクションタイトル */
.section-title-1 {
margin-left: 32rem;
padding-top: 12rem;
}
.section-title-1 h2 {
margin-top: 0;
margin-bottom: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Gill Sans", sans-serif;
font-size: clamp(40px, 8rem, 900px);
font-style: normal;
font-weight: 300;
line-height: normal;
}
.section-title-1 h2::after {
content: '';
display: block;
width: 8rem;
min-width: 40px;
height: 0.4rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin-top: 3.2rem;
}
/* セクション背景テキスト */
.section-title-bg-text {
position: absolute;
top: -7.2rem;
right: -2.2rem;
color: var(--link-black-2-a-3-b-62, #0D355C);
text-align: right;
font-family: "Noto Serif JP";
font-size: 20rem;
font-style: normal;
font-weight: 900;
line-height: normal;
}
/* タイトルのみヘッダー */
.title-only-header {
display: flex;
justify-content: center;
padding-top: 12rem;
}
.title-only-header h2 {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(12px, 6.4rem, 1280px);
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.32rem;
}
.title-only-header h2::after {
content: '';
display: block;
width: 8rem;
height: 0.4rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 4rem auto 0;
}
/* SP版改行用 - PC版では非表示 */
.sp-br {
display: none;
}
/* PC版改行用 - SP版では非表示 */
.pc-br {
display: inline;
}
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ page-about.php + page-candidate.php ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
/* ===================================================================
3. 会社ページ - Wayセクション
================================================================= */
body.page-id-43 .footer-cta-section {
background: var(--dark-01131-c-2-e, #131C2E);
}
.way {
position: relative;
overflow: hidden;
background: var(--dark-01131-c-2-e, #131C2E);
color: #FFFFFF;
}
.way h2 {
color: #FFFFFF;
margin-top: 0;
}
.way .section-title-1 {
padding-top: 6vw;
}
.way .way-item:nth-child(6) {
padding-bottom: 24rem;
}
.way-list {
list-style-type: none;
padding-left: 0;
}
.way-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
margin-top: 24px;
margin-left: 16.7vw;
}
.way-item {
display: flex;
align-items: flex-start;
}
.way-number {
color: var(--dark-02333844, #333844);
font-family: "Noto Serif JP";
font-size: clamp(60px, 18rem, 999px);
font-style: normal;
font-weight: 900;
line-height: normal;
width: 11rem;
text-align: center;
}
.way-content {
flex: 1;
margin-left: -4.6rem;
}
.way-catchphrase {
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: clamp(28px, 7.2rem, 720px);
font-style: normal;
font-weight: 900;
line-height: 8rem;
margin-top: 0;
margin-bottom: 6.4rem;
}
.way-catchphrase .way-catchphrase-em {
color: var(--secondary-ff-4-e-00, #FF7500);
}
.way-description {
color: #FFF;
font-family: "Noto Sans JP";
font-size: clamp(12px, 1.6rem, 320px);
font-style: normal;
font-weight: 400;
line-height: 200%;
margin: 0;
}
/* Way Item個別スタイル */
.way-item-1 .way-catchphrase,
.way-item-2 .way-catchphrase,
.way-item-3 .way-catchphrase,
.way-item-6 .way-catchphrase {
margin-top: 9.6rem;
}
.way-item-4 .way-catchphrase,
.way-item-5 .way-catchphrase {
margin-top: 5.6rem;
}
/* ===================================================================
4. 会社ページ - Visionセクション
================================================================= */
.vision {
position: relative;
overflow: hidden;
background: url('images/vsion-bg-pc.png') top / cover no-repeat;
background-blend-mode: soft-light;
height: auto;
width: 100%;
}
.vision .section-title-bg-text {
color: #D8DAE2;
top: -9.5rem;
right: -4.1rem;
}
.vision h2 {
margin-top: 0;
}
.vision-catchphrase {
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(32px, 8.8rem, 1500px);
font-style: normal;
font-weight: 900;
line-height: normal;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 15.6rem auto 16rem auto;
}
.vision-description {
width: 80rem;
color: var(--dark-01131-c-2-e, #131C2E);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(12px, 2rem, 1000px);
font-style: normal;
font-weight: 400;
line-height: 200%;
margin: 0 auto;
padding-bottom: 18.4rem;
}
/* ===================================================================
5. 会社ページ - Missionセクション
================================================================= */
.mission {
position: relative;
overflow: hidden;
background: url('images/mission-bg-pc.png') top / 100.012% 100% no-repeat;
width: 100%;
height: auto;
flex-shrink: 0;
}
.mission .section-title-bg-text {
top: -9.5rem;
right: -4.1rem;
}
.mission h2 {
color: #FFFFFF;
margin-top: 0;
}
.mission-catchphrase {
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(32px, 8.8rem, 1500px);
font-style: normal;
font-weight: 900;
line-height: normal;
background: var(--wtite_grad, linear-gradient(90deg, #FFF 0%, #F1EFF0 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 15.6rem;
margin-bottom: 10.2rem;
}
.mission-description {
width: 100%;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-style: normal;
font-weight: 500;
line-height: 2.5;
font-size: clamp(10px, 2rem, 400px);
margin: 0 auto;
padding-bottom: 15.2rem;
}
/* ===================================================================
6. 会社ページ - Top Messageセクション
================================================================= */
.top-message {
position: relative;
overflow: hidden;
width: 100%;
height: auto;
flex-shrink: 0;
background: var(--dark-01131-c-2-e, #131C2E);
padding-bottom: 12rem;
}
.top-message .section-title-bg-text {
right: -3.2rem;
}
.top-message h2 {
position: relative;
z-index: 2;
margin-top: 0;
color: #FFFFFF;
}
.top-message .section-title-1 {
margin-bottom: 12.4rem;
}
.message-group {
display: flex;
align-items: flex-start;
gap: 4rem;
padding: 12rem 8.5rem 10.2rem 8rem;
background: var(--white-01-f-1-eff-0, #F1EFF0);
border-radius: 12.8rem;
margin: 0 24rem 0 24rem;
}
.message-left {
text-align: center;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.message-left img {
width: 36rem;
height: 48rem;
object-fit: cover;
border-radius: 6.4rem 0 0 6.4rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
}
.message-left .representative-name {
font-weight: bold;
margin: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-size: clamp(12px, 6.4rem, 1280px);
font-style: normal;
font-weight: 700;
line-height: 100%;
}
.message-left .representative-title {
color: #666;
margin: 0;
color: var(--dark-01131-c-2-e, #131C2E);
text-align: right;
font-family: "Noto Serif JP";
font-size: clamp(12px, 3.2rem, 640px);
font-style: normal;
font-weight: 900;
line-height: 100%;
}
.message-left .representative-name,
.message-left .representative-title {
display: inline-block;
vertical-align: top;
}
.message-right p {
flex: 1;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-size: clamp(10px, 1.8rem, 360px);
font-style: normal;
font-weight: 700;
line-height: 1.5;
margin-top: 2rem;
}
.name-row {
display: flex;
align-items: flex-end;
gap: 5.5rem;
margin-top: -2.6rem;
background: rgba(191, 196, 213, 0.50);
}
/* ===================================================================
7. 会社ページ - Outlineセクション
================================================================= */
.outline {
background: var(--dark-01131-c-2-e, #131C2E);
}
.outline h2 {
margin-top: 0;
color: #FFFFFF;
}
.outline .section-title-1 {
padding-top: 6.2vw;
}
.outline-list {
margin: 4rem auto;
width: 80rem;
border-top: 1px solid #333844;
padding-bottom: 24rem;
min-width: 425px;
}
.outline-item {
display: flex;
border-bottom: 1px solid #333844;
color: #FFFFFF;
align-items: center;
}
.outline-item dt {
width: 25.6rem;
padding: 2em 64px 2em 0px;
color: var(--white-ffffff, #FFF);
background-color: transparent;
flex-shrink: 0;
font-family: "Noto Sans JP";
font-size: clamp(12px, 1.6rem, 320px);
font-style: normal;
font-weight: 900;
line-height: normal;
text-align: right;
}
.outline-item dd {
width: 25vw;
flex: 1;
padding: 1.7vw 0px 1.7vw 0px;
margin: 0;
font-family: "Noto Sans JP";
color: var(--white-ffffff, #FFF);
font-size: clamp(12px, 1.6rem, 320px);
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* ===================================================================
8. 採用ページ - About Usセクション
================================================================= */
body.page-id-45 .footer-cta-section {
background: var(--dark-01131-c-2-e, #131C2E);
}
.about-us {
position: relative;
width: 100%;
height: auto;
flex-shrink: 0;
background: var(--dark-01131-c-2-e, #131C2E);
padding: 0 20px 29.4rem 20px;
overflow: hidden;
}
.about-us h2 {
color: #FFFFFF;
margin-top: 0;
}
.about-us .section-title-1 h2,
.about-us .section-title-1 p {
color: #FFFFFF;
}
.about-us-content {
position: relative;
background: url('images/aboutus-bg-PC.png') 5.047px 0px / 100% 100% no-repeat;
margin: 7.6rem 0 0 63.8rem;
width: 128.2rem;
height: 120rem;
}
.about-us-layer-middle,
.about-us-layer-front {
position: absolute;
}
.about-us-layer-middle {
top: 8rem;
right: 57.6rem;
width: 102.4rem;
min-width: 472px;
height: 65.6rem;
background: #212D49;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(12px, 2.4rem, 480px);
font-style: normal;
font-weight: 900;
line-height: 200%;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.about-us-layer-front {
top: 65.8rem;
right: 32.3rem;
width: 102.4rem;
min-width: 472px;
height: 65.6rem;
background: #20293F;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(12px, 2.4rem, 480px);
font-style: normal;
font-weight: 900;
line-height: 200%;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
/* ===================================================================
9. 採用ページ - Client Commentsセクション
================================================================= */
.client-comments {
width: 100%;
height: auto;
flex-shrink: 0;
background: var(--dark-01131-c-2-e, #131C2E);
}
.comments-container {
padding-top: 10.3rem;
padding-bottom: 24rem;
}
.comment-bubble {
display: flex;
padding: 6.4rem 9.6rem;
justify-content: center;
align-items: center;
border-radius: 8rem;
background: var(--white-01-f-1-eff-0, #F1EFF0);
margin-bottom: 4rem;
position: relative;
width: 80%;
}
.bubble-right {
margin-left: 30.7rem;
margin-right: 58.1rem;
width: auto;
}
.bubble-right::before {
content: '';
background-image: url('images/balloon_tail.svg');
background-size: contain;
background-repeat: no-repeat;
width: 5.6rem;
height: 4.8rem;
position: absolute;
bottom: 7.6rem;
right: -4.7rem;
z-index: 1;
}
.bubble-left {
margin-left: 64.3rem;
margin-right: 32rem;
width: auto;
}
.bubble-left::before {
content: '';
background-image: url('images/balloon_tail.svg');
background-size: contain;
background-repeat: no-repeat;
width: 5.6rem;
height: 4.8rem;
position: absolute;
bottom: 7.6rem;
left: -4.7rem;
z-index: 1;
transform: scaleX(-1);
}
.comment-bubble p {
color: var(--primary-0-d-355-c, #0D355C);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(12px, 1.6rem, 480px);
font-style: normal;
font-weight: 400;
line-height: 200%;
margin: 0;
}
/* ===================================================================
10. 採用ページ - Strengthセクション
================================================================= */
.strength {
position: relative;
background: var(--dark-01131-c-2-e, #131C2E);
padding-bottom: 24rem;
overflow: hidden;
}
.strength .section-title-1 h2 {
color: #FFFFFF;
margin-top: 0;
}
.strength-container {
margin-top: 4.5rem;
}
.strength-item {
position: relative;
background-size: cover;
background-position: center;
padding: 0 0;
color: #fff;
aspect-ratio: 8/3;
margin-left: 32rem;
padding: 12.2rem 9.6rem 8.1rem 9.6rem;
margin-right: 0;
}
.strength-item-1 {
background: url('images/strength1-bg-PC.png') 0px / 131.942% 263.845% no-repeat;
background-size: cover;
}
.strength-item-2 {
background: url('images/strength2-bg-PC.png') 0px / 116.318% 195% no-repeat;
background-size: cover;
}
.strength-item-3 {
background: url('images/strength3-bg-PC.png') 0px / 130.79% 256% no-repeat;
background-size: cover;
}
.strength-number {
color: var(--white-02-d-8-dae-2, #D8DAE2);
font-family: "Noto Serif JP";
font-size: 18rem;
font-style: normal;
font-weight: 900;
line-height: normal;
position: absolute;
top: -6.7rem;
left: 0;
z-index: 3;
}
.strength-catchphrase {
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: clamp(22px, 4.8rem, 960px);
font-style: normal;
font-weight: 700;
line-height: 150%;
margin-top: 0;
margin-bottom: 6.4rem;
}
.strength-description {
color: var(--white-ffffff, #FFF);
font-family: "Noto Sans JP";
font-size: clamp(12px, 1.4rem, 280px);
font-style: normal;
font-weight: 400;
line-height: 150%;
}
/* ===================================================================
11. 採用ページ - NGセクション
================================================================= */
.ng-section {
background: url('images/ng-bg.png') center/cover no-repeat;
padding: 12rem 30px;
}
.ng-title {
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: clamp(12px, 4.8rem, 960px);
font-style: normal;
font-weight: 900;
line-height: normal;
text-align: center;
margin-bottom: 8rem;
margin-top: 0;
}
.page-content .ng-title::after {
content: none;
}
.ng-grid {
display: grid;
grid-template-columns: repeat(3, max(360px, 36rem));
gap: 6rem;
justify-content: center;
}
@media (max-width: 1200px) {
.ng-grid {
grid-template-columns: repeat(2, 360px);
}
.ng-section .ng-grid .ng-box:nth-child(n+4) {
transform: none;
}
.ng-section .ng-grid .ng-box {
transform: none;
}
}
.ng-grid .ng-box:nth-child(n+4) {
transform: translateX(4rem);
}
.ng-box {
display: flex;
justify-content: space-around;
height: max(316px, 31.6rem);
gap: 2.8rem;
flex-direction: column;
flex-shrink: 0;
background: var(--white-01-f-1-eff-0, #F1EFF0);
padding: 2.4rem 1.6rem 6.1rem 1.6rem;
box-sizing: border-box;
transform: translateX(-4rem);
aspect-ratio: 360/316;
}
.ng-catchphrase {
height: 102px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(12px, 24px, 480px);
font-style: normal;
font-weight: 900;
line-height: normal;
background: linear-gradient(90deg, #420D0D 0%, #6F2525 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 2.3rem auto 0 auto;
}
.ng-description-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
.ng-description {
color: var(--dark-01131-c-2-e, #131C2E);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(12px, 1.2rem, 240px);
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0;
}
/* ===================================================================
12. 採用ページ - Flowセクション
================================================================= */
.flow {
position: relative;
height: auto;
flex-shrink: 0;
background: var(--dark-01131-c-2-e, #131C2E);
padding-bottom: 24rem;
overflow: hidden;
}
.flow .section-title-1 h2 {
color: #fff;
margin-top: 0;
}
.flow .section-title-1 {
margin-bottom: 8rem;
z-index: 2;
}
.flow-container {
display: flex;
position: relative;
flex-direction: column;
gap: 4rem;
padding-left: clamp(20px, calc(-135.5px + 23.5vw), 31.6rem);
padding-right: clamp(20px, calc(-135.5px + 23.5vw), 31.6rem);
}
.flow-container::before {
content: '';
position: absolute;
top: -4rem;
bottom: -5.8rem;
left: 50%;
transform: translateX(-50%);
width: 3.15rem;
height: auto;
background-image: url('images/allow-flow-PC.svg');
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
z-index: 3;
}
.flow-step {
height: 16rem;
min-height: 125px;
border-radius: 9999px;
background: var(--white-01-f-1-eff-0, #F1EFF0);
display: flex;
align-items: center;
padding-right: 7.2rem;
z-index: 4;
}
.flow-step-icon {
width: 16rem;
height: 16rem;
min-width: 125px;
min-height: 125px;
border-radius: 9999px;
background: var(--white-02-d-8-dae-2, #D8DAE2);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
color: var(--dark-01131-c-2-e, #131C2E);
padding-left: 0;
box-sizing: border-box;
flex-shrink: 0;
}
.flow-step-label {
text-align: right;
font-family: "Gill Sans";
font-size: clamp(18px, 2.4rem, 480px);
font-style: normal;
font-weight: 300;
line-height: 100%;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.flow-step-number {
text-align: center;
font-family: "Gill Sans";
font-size: clamp(100px, 12.8rem, 2560px);
font-style: normal;
font-weight: 700;
line-height: 100%;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.flow-step-content {
display: flex;
align-items: center;
margin-left: clamp(12px, 4rem, 80px);
}
.flow-step-title {
width: 36rem;
color: var(--primary-0-d-355-c, #0D355C);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(12px, 4rem, 960px);
font-style: normal;
font-weight: 700;
line-height: 100%;
margin-right: 4rem;
flex-shrink: 0;
}
.flow-step-description {
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Sans JP";
font-size: clamp(12px, 1.4rem, 280px);
font-style: normal;
font-weight: 400;
line-height: 150%;
padding-right: 4rem;
}
/* ===================================================================
13. 採用ページ - Interviewセクション
================================================================= */
.interview {
background: var(--dark-01131-c-2-e, #131C2E);
padding-top: 12rem;
padding-bottom: 13.7rem;
}
.interview .section-title-1 {
margin-bottom: 14rem;
padding-top: 0;
}
.interview .section-title-1 h2 {
color: #fff;
margin-top: 0;
}
.interview-button {
display: flex;
margin: 0 auto;
width: 64rem;
height: 12rem;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 1.6rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(12px, 3.2rem, 640px);
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: 0.32rem;
text-decoration: none;
transition: background-color 0.3s ease;
}
.interview-button:hover {
background: var(--grad01alt, linear-gradient(89deg, #1A2459 0%, #0D355C 100%));
}
/* ===================================================================
SP版対応 - メディアクエリ
================================================================= */
@media (max-width: 768px) {
/* ===================================================================
SP版: ベーススタイル
================================================================= */
/* ページ全体のコンテナ - SP版 */
.page-about-content,
.page-candidate-content {
background: var(--dark-01131-c-2-e, #131C2E);
overflow: hidden;
width: 100%;
}
/* ===================================================================
SP版: 共通コンポーネント
================================================================= */
/* セクションタイトル - SP版 */
.section-title-1 {
margin-left: 1.6rem;
padding-top: 0;
}
.section-title-1 h2 {
margin-top: 0;
margin-bottom: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Gill Sans", sans-serif;
font-size: clamp(20px, 4rem, 800px);
font-style: normal;
font-weight: 300;
line-height: normal;
}
.section-title-1 h2::after {
content: '';
display: block;
width: 4rem;
min-width: 20px;
height: 0.2rem;
background: var(--grad03, linear-gradient(89deg, #1C5B9C 0%, #0E355C 100%));
margin-top: 1.6rem;
}
/* セクション背景テキスト */
.section-title-bg-text {
position: absolute;
top: -1.7rem;
right: -0.4rem;
color: var(--link-black-2-a-3-b-62, #0D355C);
text-align: right;
font-family: "Noto Serif JP";
font-size: 4.8rem;
font-style: normal;
font-weight: 900;
line-height: normal;
}
/* タイトルのみヘッダー - SP版 */
.title-only-header {
display: flex;
justify-content: center;
padding: 0 0 0 0;
}
.title-only-header h2 {
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(18px, 3.6rem, 720px);
font-style: normal;
font-weight: 300;
line-height: 1.11;
letter-spacing: 0.2rem;
margin: 0;
}
.title-only-header h2::after {
content: '';
display: block;
width: 4rem;
height: 0.2rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
margin: 1.6rem auto 0;
}
/* SP版改行用 - SP版では表示 */
.sp-br {
display: inline;
}
/* SP版改行用 - PC版では表示 */
.pc-br {
display: none;
}
/* ===================================================================
SP版: Wayセクション
================================================================= */
.way {
position: relative;
overflow: hidden;
background: var(--dark-01131-c-2-e, #131C2E);
color: #FFFFFF;
padding: 2.4rem 1.6rem 12rem 1.6rem;
}
.way h2 {
color: #FFFFFF;
margin-top: 0;
}
.way .section-title-1 {
padding-top: 0;
}
.way .way-item:nth-child(6) {
padding-bottom: 0;
}
.way-list {
list-style-type: none;
/* padding-left: 0; */
}
.way-container {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4.8rem;
margin-top: 3rem;
margin-left: 0;
margin-right: 0;
}
.way-item {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: left;
width: 100%;
max-width: 32rem;
}
.way-number {
position: absolute;
top: -3.7rem;
right: -2.7rem;
color: var(--dark-02333844, #333844);
font-family: "Noto Serif JP";
font-size: clamp(90px, 18rem, 360px);
font-style: normal;
font-weight: 900;
line-height: 1;
z-index: 1;
}
.way-content {
position: relative;
z-index: 2;
margin-left: 0;
width: 100%;
padding-right: 0;
}
.way-catchphrase {
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: clamp(18px, 3.6rem, 720px);
font-style: normal;
font-weight: 900;
line-height: 1.1;
margin-top: 0;
margin-bottom: 2.4rem;
text-align: left;
}
.way-catchphrase .way-catchphrase-em {
color: var(--secondary-ff-4-e-00, #FF7500);
}
.way-description {
color: #FFF;
font-family: "Noto Sans JP";
font-size: clamp(10px, 1.1rem, 18px);
font-style: normal;
font-weight: 400;
line-height: 2;
margin: 0;
text-align: left;
}
/* Way Item個別スタイル - SP版では統一 */
.way-item-1 .way-catchphrase,
.way-item-2 .way-catchphrase,
.way-item-3 .way-catchphrase,
.way-item-4 .way-catchphrase,
.way-item-5 .way-catchphrase,
.way-item-6 .way-catchphrase {
margin-top: 0;
}
/* ===================================================================
SP版: Visionセクション
================================================================= */
.vision {
position: relative;
overflow: hidden;
background: url('images/vision-bg-SP.png') left top / cover no-repeat;
background-blend-mode: soft-light;
height: auto;
width: auto;
padding: 2.4rem 1.6rem 12rem 1.6rem;
}
.vision .section-title-bg-text {
color: #D8DAE2;
top: -2.1rem;
right: -1.2rem;
}
.vision h2 {
margin-top: 0;
color: var(--dark-01131-c-2-e, #131C2E);
}
.vision .section-title-1 {
margin-left: 0;
}
.vision-content {
margin: 3.2rem 0 0 0;
}
.vision-catchphrase {
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(24px, 4.8rem, 900px);
font-style: normal;
font-weight: 900;
line-height: normal;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
padding: 0;
}
.vision-description {
width: 100%;
max-width: 100%;
color: var(--dark-01131-c-2-e, #131C2E);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(10px, 1.2rem, 24px);
font-style: normal;
font-weight: 400;
line-height: 2;
margin: 8rem auto 0 auto;
padding: 0;
}
/* ===================================================================
SP版: Missionセクション
================================================================= */
.mission {
position: relative;
overflow: hidden;
background: url('images/mission-bg-SP.png') lightgray left top / cover no-repeat;
width: auto;
height: auto;
padding: 2.4rem 1.6rem 12rem 1.6rem;
}
.mission .section-title-bg-text {
top: -1.7rem;
right: -0.4rem;
}
.mission h2 {
color: #FFFFFF;
margin-top: 0;
}
.mission .section-title-1 {
margin-left: 0;
}
.mission-content {
margin: 3.2rem 0 0 0;
}
.mission-catchphrase {
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(24px, 4.8rem, 900px);
font-style: normal;
font-weight: 900;
line-height: normal;
background: var(--wtite_grad, linear-gradient(90deg, #FFF 0%, #F1EFF0 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
padding: 0;
}
.mission-description {
width: 100%;
max-width: 60rem;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-style: normal;
font-weight: 500;
line-height: 2;
font-size: clamp(10px, 1.2rem, 24px);
margin: 8rem auto 0 auto;
padding: 0;
}
/* ===================================================================
SP版: Top Messageセクション
================================================================= */
.top-message {
position: relative;
overflow: hidden;
width: auto;
height: auto;
flex-shrink: 0;
background: var(--dark-01131-c-2-e, #131C2E);
padding: 2.4rem 0 4rem 0;
}
.top-message .section-title-bg-text {
top: -1.8rem;
right: -0.6rem;
white-space: nowrap;
}
.top-message h2 {
position: relative;
z-index: 2;
margin-top: 0;
color: #FFFFFF;
}
.top-message .section-title-1 {
margin-left: 0;
margin-bottom: 3.2rem;
padding: 0 1.6rem;
}
.message-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
padding: 3.2rem 1.6rem 8rem 1.6rem;
background: var(--white-01-f-1-eff-0, #F1EFF0);
border-radius: 3.2rem;
margin: 0;
}
.message-left {
text-align: center;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.message-left img {
width: 100%;
height: 25.7rem;
object-fit: cover;
border-radius: 3.2rem 3.2rem 0 0;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
}
.name-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 100%;
gap: 1rem;
margin-top: -1.4rem;
}
.message-left .representative-name {
margin: 0;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-size: clamp(32px, 6.4rem, 1280px);
font-style: normal;
font-weight: 700;
line-height: 100%;
text-align: center;
}
.message-left .representative-title {
margin: 0;
color: var(--dark-01131-c-2-e, #131C2E);
text-align: right;
font-family: "Noto Serif JP";
font-size: clamp(12px, 2.4rem, 48px);
font-style: normal;
font-weight: 900;
line-height: 100%;
}
.message-right {
width: 100%;
}
.message-right p {
width: 100%;
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-size: clamp(11px, 1.2rem, 24px);
font-style: normal;
font-weight: 700;
line-height: 1.8;
margin: 0;
text-align: left;
}
/* ===================================================================
SP版: 会社ページ - Outlineセクション
================================================================= */
.outline {
position: relative;
overflow: hidden;
width: auto;
height: auto;
flex-shrink: 0;
background: var(--dark-01131-c-2-e, #131C2E);
padding: 2.4rem 1.6rem 8rem 1.6rem;
}
.outline h2 {
position: relative;
z-index: 2;
margin-top: 0;
color: #FFFFFF;
}
.outline .section-title-1 {
margin: 0 0 3.2rem 0;
padding: 0;
}
.outline-list {
margin: 0;
width: 100%;
min-width: 0px;
border-top: none;
padding-bottom: 0;
position: relative;
}
.outline-list::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 35%;
height: 1px;
background-color: #333844;
}
.outline-item {
display: flex;
height: 100%;
min-height: 46px;
border-bottom: none;
color: #FFFFFF;
align-items: center;
padding: 0.9rem 0;
position: relative;
}
.outline-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 35%;
height: 1px;
background-color: #333844;
}
.outline-item dt {
width: 23.3%;
min-width: 77.5px;
margin: 0 1.6rem;
padding: 0;
color: var(--white-ffffff, #FFF);
background-color: transparent;
flex-shrink: 0;
font-family: "Noto Sans JP";
font-size: clamp(11px, 1.1rem, 28px);
font-style: normal;
font-weight: 900;
line-height: normal;
text-align: right;
}
.outline-item dd {
width: 70%;
flex: 1;
padding: 0;
margin: 0;
font-family: "Noto Sans JP";
color: var(--white-ffffff, #FFF);
font-size: clamp(11px, 1.1rem, 28px);
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* ===================================================================
SP版: 採用ページ - About Usセクション
================================================================= */
.about-us {
position: relative;
width: 100%;
height: auto;
background: var(--dark-01131-c-2-e, #131C2E);
padding: 2.4rem 0 12rem 0;
overflow: hidden;
}
.about-us h2 {
color: #FFFFFF;
margin-top: 0;
}
.about-us .section-title-1 {
margin-left: 0;
padding: 0 1.6rem 0 1.6rem;
position: relative;
z-index: 2;
}
.about-us .section-title-bg-text {
top: -1.7rem;
right: -0.4rem;
}
.about-us-content {
position: static;
background: none;
margin: 3.2rem 0 0 0;
width: 100%;
height: auto;
padding: 0;
}
.about-us-layer-middle,
.about-us-layer-front {
position: relative;
width: auto;
height: auto;
padding: 7.2rem 1.6rem;
box-sizing: border-box;
min-height: 15rem;
top: auto;
right: auto;
min-width: 0px;
}
.about-us-layer-middle {
background: #212D49;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(12px, 1.4rem, 24px);
font-style: normal;
font-weight: 900;
line-height: 2;
margin: 0 5.5rem 0 0;
}
.about-us-layer-front {
background: #20293F;
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(12px, 1.4rem, 24px);
font-style: normal;
font-weight: 900;
line-height: 2;
margin: -2.4rem 0 0 5.5rem;
}
/* ===================================================================
SP版: 採用ページ - Client Commentsセクション
================================================================= */
.client-comments {
width: auto;
height: auto;
flex-shrink: 0;
background: var(--dark-01131-c-2-e, #131C2E);
padding: 4rem 1.6rem 8rem 1.6rem;
}
.comments-container {
padding: 4.2rem 0 0 0;
}
.comment-bubble {
display: flex;
padding: 4.8rem 2.4rem;
justify-content: center;
align-items: center;
border-radius: 4rem;
background: var(--white-01-f-1-eff-0, #F1EFF0);
margin-bottom: 1.6rem;
position: relative;
width: 32rem;
box-sizing: border-box;
}
.bubble-right {
margin-left: 0;
margin-right: 2.4rem;
}
.bubble-right::before {
content: '';
background-image: url('images/balloon_tail.svg');
background-size: contain;
background-repeat: no-repeat;
width: 2.4rem;
height: 2.1rem;
aspect-ratio: 8/7;
position: absolute;
bottom: clamp(3rem, 6vw, 7.6rem);
right: clamp(-2.2rem, -3vw, -4.7rem);
z-index: 1;
}
.bubble-left {
margin-left: 2.4rem;
margin-right: 0;
}
.bubble-left::before {
content: '';
background-image: url('images/balloon_tail.svg');
background-size: contain;
background-repeat: no-repeat;
width: 2.4rem;
height: 2.1rem;
aspect-ratio: 8/7;
position: absolute;
bottom: clamp(3rem, 6vw, 7.6rem);
left: clamp(-2.2rem, -3vw, -4.7rem);
z-index: 1;
transform: scaleX(-1);
}
.comment-bubble p {
color: var(--primary-0-d-355-c, #0D355C);
text-align: left;
font-family: "Noto Sans JP";
font-size: clamp(11px, 1.2rem, 18px);
font-style: normal;
font-weight: 400;
line-height: 1.7;
margin: 0;
}
/* ===================================================================
SP版: 採用ページ - Strengthセクション
================================================================= */
.strength {
position: relative;
background: var(--dark-01131-c-2-e, #131C2E);
padding: 2.4rem 0 8rem 1.6rem;
overflow: hidden;
}
.strength .section-title-1 {
margin-left: 0;
position: relative;
z-index: 2;
}
.strength .section-title-1 h2 {
color: #FFFFFF;
margin-top: 0;
}
.strength .section-title-bg-text {
top: -1.7rem;
right: -0.4rem;
white-space: nowrap;
}
.strength-container {
margin-top: 3.2rem;
display: flex;
flex-direction: column;
gap: 0;
}
.strength-item {
position: relative;
background-size: cover;
background-position: center;
padding: 5.6rem 2.4rem;
color: #fff;
margin: 0;
box-sizing: border-box;
overflow: hidden;
aspect-ratio: 360/520;
}
.strength-item-1 {
background: url('images/strength1-bg-SP.png') lightgray center / cover no-repeat;
}
.strength-item-2 {
background: url('images/strength2-bg-SP.png') lightgray center / cover no-repeat;
}
.strength-item-3 {
background: url('images/strength3-bg-SP.png') lightgray center / cover no-repeat;
}
.strength-content {
position: relative;
z-index: 2;
}
.strength-number {
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Serif JP";
font-size: clamp(90px, 18rem, 3000px);
font-style: normal;
font-weight: 900;
line-height: normal;
position: absolute;
top: max(-12.4rem, -206.925px);
left: max(-3.2rem, -53.4px);
z-index: 1;
}
.strength-catchphrase {
width: 31.1rem;
height: 14.4rem;
display: flex;
align-items: center;
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: clamp(12px, 2.4rem, 480px);
font-style: normal;
font-weight: 700;
line-height: 1.5;
margin-top: 0;
margin-bottom: 2.4rem;
position: relative;
z-index: 2;
}
.strength-description {
color: var(--white-ffffff, #FFF);
font-family: "Noto Sans JP";
font-size: clamp(11px, 1.2rem, 18px);
font-style: normal;
font-weight: 400;
line-height: 1.5;
position: relative;
z-index: 2;
}
/* ===================================================================
SP版: 採用ページ - NGセクション
================================================================= */
.ng-section {
background: #211212;
padding: 4rem 1.6rem 10.7rem 1.6rem;
}
.ng-title {
color: var(--white-ffffff, #FFF);
font-family: "Noto Serif JP";
font-size: clamp(14px, 2.8rem, 960px);
font-style: normal;
font-weight: 900;
line-height: normal;
text-align: center;
margin-bottom: 3.2rem;
margin-top: 0;
}
.page-content .ng-title::after {
content: none;
}
.ng-grid {
grid-template-columns: repeat(1, 1fr);
gap: 16px;
}
.ng-section .ng-grid .ng-box:nth-child(n+4) {
transform: none;
}
.ng-section .ng-grid .ng-box {
transform: none;
}
.ng-box {
display: flex;
justify-content: space-around;
height: max(270px, 31.6rem);
gap: 2.8rem;
flex-direction: column;
flex-shrink: 0;
background: var(--white-01-f-1-eff-0, #F1EFF0);
padding: 2.4rem 1.6rem 6.1rem 1.6rem;
box-sizing: border-box;
transform: translateX(-4rem);
aspect-ratio: 343/316;
}
.ng-catchphrase {
height: auto;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: "Noto Serif JP";
font-size: clamp(12px, 2.4rem, 480px);
font-style: normal;
font-weight: 900;
line-height: normal;
background: linear-gradient(90deg, #420D0D 0%, #6F2525 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 23px auto 0 auto;
}
.ng-description-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
.ng-description {
color: var(--dark-01131-c-2-e, #131C2E);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(12px, 1.2rem, 240px);
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0;
}
/* ===================================================================
SP版: 採用ページ - Flowセクション
================================================================= */
.flow {
position: relative;
height: auto;
flex-shrink: 0;
background: var(--dark-01131-c-2-e, #131C2E);
padding: 2.4rem 1.6rem 8rem 1.6rem;
overflow: hidden;
}
.flow .section-title-1 {
margin-left: 0;
position: relative;
z-index: 2;
}
.flow .section-title-1 h2 {
color: #fff;
margin-top: 0;
}
.flow .section-title-bg-text {
top: -1.7rem;
right: -0.4rem;
}
.flow .section-title-1 {
margin-bottom: 3.2rem;
}
.flow-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
padding: 0;
position: relative;
}
.flow-container::before {
content: '';
position: absolute;
top: -2.4rem;
bottom: -3.7rem;
left: 50%;
transform: translateX(-50%);
width: 3.15rem;
height: auto;
background-image: url('images/allow-flow-SP.svg');
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
z-index: 3;
}
.flow-step {
position: relative;
height: 30.7rem;
min-height: auto;
border-radius: 4.8rem;
background: var(--white-01-f-1-eff-0, #F1EFF0);
display: block;
padding: 0 2.4rem 3rem 2.4rem;
box-sizing: border-box;
z-index: 4;
}
.flow-step-icon {
display: inline-flex;
position: absolute;
top: 0rem;
left: 0rem;
width: 9.6rem;
height: 9.6rem;
min-width: auto;
min-height: auto;
z-index: 4;
}
.flow-step-label {
text-align: center;
font-family: "Gill Sans";
font-size: clamp(10px, 1.6rem, 320px);
font-style: normal;
font-weight: 300;
line-height: 1;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.4rem;
}
.flow-step-number {
text-align: center;
font-family: "Gill Sans";
font-size: clamp(12px, 9.6rem, 2000px);
font-style: normal;
font-weight: 700;
line-height: 1;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.flow-step-content {
display: flex;
flex-direction: column;
margin-left: 0;
padding-left: 0;
}
.flow-step-title {
position: relative;
width: 24.6rem;
height: 9.6rem;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: var(--primary-0-d-355-c, #0D355C);
font-family: "Noto Serif JP";
font-size: clamp(12px, 3.2rem, 640px);
font-style: normal;
font-weight: 700;
line-height: 1;
margin: 0 0 3.4rem 6rem;
z-index: 5;
}
.flow-step-description {
color: var(--dark-01131-c-2-e, #131C2E);
font-family: "Noto Sans JP";
font-size: clamp(11px, 1.4rem, 280px);
font-style: normal;
font-weight: 400;
line-height: 1.5;
margin: 0;
padding: 0;
}
/* ===================================================================
SP版: 採用ページ - Interviewセクション
================================================================= */
.interview {
background: var(--dark-01131-c-2-e, #131C2E);
padding: 2.4rem 1.6rem 9.6rem 1.6rem;
}
.interview .section-title-1 {
margin-left: 0;
margin-bottom: 3.2rem;
padding-top: 0;
position: relative;
z-index: 2;
}
.interview .section-title-1 h2 {
color: #fff;
margin-top: 0;
}
.interview .section-title-bg-text {
top: -1.7rem;
right: -0.4rem;
}
.interview-container {
display: flex;
justify-content: center;
}
.interview-button {
display: flex;
margin: 0 auto;
width: 100%;
/* max-width: 32rem; */
height: 6.4rem;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 1.2rem;
background: var(--grad01, linear-gradient(89deg, #0D355C 0%, #1A2459 100%));
color: var(--white-ffffff, #FFF);
text-align: center;
font-family: "Noto Sans JP";
font-size: clamp(12px, 1.8rem, 360px);
font-style: normal;
font-weight: 900;
line-height: normal;
letter-spacing: normal;
text-decoration: none;
transition: background-color 0.3s ease;
box-sizing: border-box;
}
.interview-button:hover {
background: var(--grad01alt, linear-gradient(89deg, #1A2459 0%, #0D355C 100%));
}
}
/* /* ===================================== Additional styling by collaborator end ============================================ */