/* ============================================================
半田工業 コーポレートサイト スタイルシート
WordPress「外観 > カスタマイズ > 追加CSS」、または
テーマの style.css に、このファイルの内容をそのまま追加してください。
※ Google Fonts を使う場合は、テーマの header.php 等で下記を読み込むか、
「Insert Headers and Footers」等のプラグインで に追加してください。
============================================================= */
/* ---- ベースリセット（.handa-site 配下のみに適用） ---- */
.handa-site,
.handa-site * {
box-sizing: border-box;
}
.handa-site {
--paper: #FAF9F5;
--panel: #FFFFFF;
--ink: #1D2024;
--steel: #6B7178;
--line: #E1DED4;
--accent: #D97706;
background: var(--paper);
color: var(--ink);
font-family: 'Noto Sans JP', sans-serif;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
}
.handa-site a {
color: inherit;
text-decoration: none;
}
.handa-site img {
max-width: 100%;
height: auto;
display: block;
}
/* ============================================================
HEADER
============================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(250, 249, 245, 0.94);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--line);
}
.site-header__wrap {
max-width: 1040px;
margin: 0 auto;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.site-header__brand {
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 15px;
letter-spacing: 0.1em;
}
.site-header__brand-dot {
color: var(--accent);
}
.site-header__nav {
display: none;
gap: 24px;
font-size: 13px;
color: var(--steel);
}
.site-header__nav-link:hover {
color: var(--ink);
}
.site-header__cta {
font-family: 'Oswald', sans-serif;
font-size: 11px;
letter-spacing: 0.06em;
color: var(--paper);
padding: 8px 14px;
white-space: nowrap;
}
/* ============================================================
HERO
============================================================= */
.hero {
padding: 56px 0 48px;
border-bottom: 1px solid var(--line);
}
.hero__wrap {
max-width: 1040px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 32px;
}
.hero__kicker {
font-family: 'Oswald', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--accent);
margin-bottom: 16px;
display: block;
}
.hero__title {
font-family: 'Zen Kaku Gothic New', sans-serif;
font-weight: 900;
font-size: 28px;
line-height: 1.55;
margin-bottom: 20px;
}
.hero__lead {
color: var(--steel);
font-size: 14.5px;
margin-bottom: 28px;
}
.hero__cta-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.hero__cta-btn {
display: inline-flex;
align-items: center;
padding: 13px 20px;
font-weight: 700;
font-size: 13.5px;
border: 1px solid var(--ink);
}
.hero__cta-btn--primary {
color: var(--paper);
}
.hero__cta-btn--secondary {
background: transparent;
color: var(--ink);
}
.hero__stats {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
border-top: 1px solid var(--line);
padding-top: 20px;
}
.hero__stat {
display: flex;
flex-direction: column-reverse;
}
.hero__stat-num {
font-family: 'Oswald', sans-serif;
font-size: 22px;
font-weight: 600;
color: var(--accent);
margin: 0;
}
.hero__stat-label {
font-size: 11px;
color: var(--steel);
margin-top: 4px;
}
.hero__image {
width: 100%;
border: 1px solid var(--line);
}
/* ============================================================
共通セクションシェル
============================================================= */
.business,
.strength,
.process,
.daily,
.recruit,
.company,
.contact {
padding: 56px 0;
border-bottom: 1px solid var(--line);
}
.business__wrap,
.strength__wrap,
.process__wrap,
.daily__wrap,
.recruit__wrap,
.company__wrap,
.contact__wrap {
max-width: 1040px;
margin: 0 auto;
padding: 0 20px;
}
.business__eyebrow,
.strength__eyebrow,
.process__eyebrow,
.daily__eyebrow,
.recruit__eyebrow,
.company__eyebrow,
.contact__eyebrow {
font-family: 'Oswald', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--accent);
margin-bottom: 10px;
display: block;
}
.business__title,
.strength__title,
.process__title,
.daily__title,
.recruit__title,
.company__title,
.contact__title {
font-family: 'Zen Kaku Gothic New', sans-serif;
font-weight: 900;
font-size: 22px;
margin-bottom: 32px;
}
/* ============================================================
BUSINESS
============================================================= */
.business__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
list-style: none;
padding: 0;
}
.business__item {
background: var(--panel);
padding: 24px 22px;
}
.business__item-no {
font-family: 'Oswald', sans-serif;
font-size: 12px;
color: var(--steel);
margin-bottom: 8px;
display: block;
}
.business__item-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
}
.business__item-text {
font-size: 13px;
color: var(--steel);
}
/* ============================================================
STRENGTH
============================================================= */
.strength__list {
border-top: 1px solid var(--line);
list-style: none;
padding: 0;
}
.strength__item {
display: flex;
gap: 16px;
padding: 22px 0;
border-bottom: 1px solid var(--line);
}
.strength__item-no {
font-family: 'Oswald', sans-serif;
font-size: 18px;
color: var(--accent);
flex-shrink: 0;
width: 40px;
}
.strength__item-title {
font-size: 14.5px;
font-weight: 700;
margin-bottom: 6px;
}
.strength__item-text {
font-size: 13px;
color: var(--steel);
}
/* ============================================================
PROCESS
============================================================= */
.process__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
list-style: none;
padding: 0;
}
.process__step {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 20px 18px;
}
.process__step-no {
font-family: 'Oswald', sans-serif;
font-size: 11px;
color: var(--steel);
}
.process__step-title {
font-size: 13.5px;
font-weight: 700;
margin: 8px 0;
}
.process__step-text {
font-size: 12px;
color: var(--steel);
}
/* ============================================================
DAILY
============================================================= */
.daily__grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
list-style: none;
padding: 0;
}
.daily__item {
border: 1px solid var(--line);
background: var(--panel);
overflow: hidden;
}
.daily__item-image {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.daily__item-caption {
padding: 16px 18px;
font-size: 13px;
color: var(--steel);
}
/* ============================================================
RECRUIT
============================================================= */
.recruit__box {
background: var(--ink);
color: var(--paper);
padding: 32px 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.recruit__box-kicker {
font-family: 'Oswald', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--accent);
display: block;
margin-bottom: 10px;
}
.recruit__box-heading {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.recruit__box-lead {
font-size: 13px;
color: #B7BBC0;
}
.recruit__box-wage {
font-family: 'Oswald', sans-serif;
font-size: 26px;
color: var(--accent);
margin-bottom: 12px;
}
.recruit__box-btn {
display: inline-flex;
padding: 13px 20px;
font-weight: 700;
font-size: 13.5px;
background: var(--accent);
color: var(--ink);
border: 1px solid var(--accent);
}
/* ============================================================
COMPANY
============================================================= */
.company__table {
border-top: 1px solid var(--line);
}
.company__row {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 0;
border-bottom: 1px solid var(--line);
}
.company__key {
font-family: 'Oswald', sans-serif;
font-size: 11px;
letter-spacing: 0.08em;
color: var(--steel);
}
.company__key--placeholder {
color: var(--steel);
}
.company__value {
font-size: 13.5px;
margin: 0;
}
.company__value--placeholder {
color: var(--steel);
}
.company__note {
font-size: 11.5px;
color: var(--steel);
margin-top: 14px;
}
/* ============================================================
CONTACT
============================================================= */
.contact__grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.contact__item {
border: 1px solid var(--line);
padding: 22px;
}
.contact__item-label {
font-family: 'Oswald', sans-serif;
font-size: 11px;
color: var(--steel);
letter-spacing: 0.08em;
margin-bottom: 8px;
display: block;
}
.contact__item-value {
font-size: 15px;
font-weight: 700;
margin-bottom: 10px;
}
.contact__item-text {
font-size: 12px;
color: var(--steel);
margin-bottom: 16px;
}
.contact__item-btn {
display: inline-flex;
padding: 12px 18px;
font-weight: 700;
font-size: 13px;
border: 1px solid var(--ink);
}
.contact__item-btn--primary {
color: var(--paper);
}
.contact__item-btn--secondary {
background: transparent;
color: var(--ink);
}
.contact__note {
font-size: 11.5px;
color: var(--steel);
margin-top: 20px;
}
/* ============================================================
FOOTER
============================================================= */
.site-footer {
padding: 26px 0;
}
.site-footer__wrap {
max-width: 1040px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 6px;
font-family: 'Oswald', sans-serif;
font-size: 10.5px;
letter-spacing: 0.06em;
color: var(--steel);
}
/* ============================================================
タブレット以上 (min-width: 640px)
============================================================= */
@media (min-width: 640px) {
.hero__title {
font-size: 34px;
}
.hero__cta-row {
gap: 12px;
}
.business__grid {
grid-template-columns: repeat(2, 1fr);
}
.daily__grid {
grid-template-columns: repeat(2, 1fr);
}
.contact__grid {
grid-template-columns: 1fr 1fr;
}
.recruit__box {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 40px 32px;
}
.recruit__box-cta {
text-align: right;
}
}
/* ============================================================
デスクトップ以上 (min-width: 960px)
============================================================= */
@media (min-width: 960px) {
.site-header__nav {
display: flex;
}
.hero__wrap {
flex-direction: row;
align-items: center;
padding-top: 32px;
}
.hero__text {
flex: 1;
}
.hero__image {
flex: 0 0 420px;
}
.hero__title {
font-size: 42px;
max-width: 16ch;
}
.business,
.strength,
.process,
.daily,
.recruit,
.company,
.contact {
padding: 76px 0;
}
.business__title,
.strength__title,
.process__title,
.daily__title,
.recruit__title,
.company__title,
.contact__title {
font-size: 28px;
}
.daily__grid {
grid-template-columns: repeat(3, 1fr);
}
.process__row {
grid-template-columns: repeat(4, 1fr);
}
.company__row {
flex-direction: row;
gap: 24px;
}
.company__key {
width: 160px;
flex-shrink: 0;
}
}