@charset "UTF-8"; /* ============================================================ IRON BASE / lower pages 下層ページ（about / service / voice / news / contact / 記事詳細 / 404）をトップページと同じデザイン言語に揃える。旧 style.css がレイアウト（グリッド・余白）を持っているので、ここで触るのは色・タイポ・罫線・装飾だけにする。位置指定はどうしても必要なところ以外は上書きしない。読み込み順: style.css → iron-shell.css → iron-pages.css ============================================================ */ /* ---------- base ---------- */ /* 旧CSS側に詳細度の高い body 背景指定があり、`body { background }` だけでは負けてキャンバスが白のまま残る（voice アーカイブでヘッダー下に白帯が出た）。 html にも敷いて、キャンバスの塗り元を確実に押さえる。 */ html { background: var(--ink); } html body { background: var(--ink); color: var(--chalk); font-family: var(--f-body); font-feature-settings: "palt" 1; } body:not(.home) main { background: var(--ink); } /* 旧CSSのリンク色（暗い前提の色）を無効化する。ここを body 直下に効かせると、詳細度でボタン側の色指定を食って ember ボタンの文字が chalk になり 2.69:1 まで落ちる。本文だけに限定する。 */ body:not(.home) main a { color: inherit; } /* 上の一括指定より強く、ボタン類の文字色を明示し直す */ body:not(.home) .skip-link, body:not(.home) .btn--ember, body:not(.home) .btn--ember:hover { color: var(--ink); } /* ember 上で 8.0:1 */ body:not(.home) .btn--ghost { color: var(--chalk); } body:not(.home) h1, body:not(.home) h2, body:not(.home) h3, body:not(.home) h4, body:not(.home) dt, body:not(.home) th { color: var(--chalk); font-family: var(--f-jp); } body:not(.home) p, body:not(.home) li, body:not(.home) dd, body:not(.home) td { color: rgba(244, 242, 237, .74); } /* 旧CSSは白パネルを background-color ではなく linear-gradient(#f8f8f8 …) で敷いている。background-color だけ潰しても白いままなので image ごと消す。 */ .about-philosophy__bg, .service-block__bg { background-image: none !important; background-color: var(--steel) !important; } /* about スライダーに乗っていた rgba(0,180,255,.12) のシアン被せ。パレット外の色なので ember に置き換える。 */ .about-swiper__swiper-slide::before { background: rgba(224, 122, 40, .10) !important; } /* 旧CSSが白背景を敷いているブロックを黒側に寄せる。 .archive / .page-contact / .post-page などはにも付くクラスなので、子孫セレクタにして body 自身に当たらないようにする（当たると上の html body 指定を詳細度で食い、キャンバスが白のまま残る）。 */ body :is( .layout-main, .inner, .inner-sm, .inner-xs, .about-company-profile, .about-access, .about-swiper, .about-fv, .about-subpage-hero, .service-list, .service-block, .service-fv, .service-subpage-hero, .works-archive, .works-fv, .news-archive, .news-archive-fv, .page-contact, .contact-fv, .subpage-hero, .post-page, .post-root, .archive ) { background-color: transparent; } /* ============================================================ page-fv （全下層共通のページヘッダー） ============================================================ */ .page-fv { position: relative; background: var(--ink); } .page-fv__media { position: relative; isolation: isolate; } .page-fv__pic img, .page-fv__media img { filter: saturate(.72) brightness(.78) contrast(1.08); } .page-fv__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(11,12,14,.88) 0%, rgba(11,12,14,.45) 55%, rgba(11,12,14,.20) 100%); pointer-events: none; } .page-fv__pickup { z-index: 2; background: transparent !important; padding: 0; } .page-fv__title { font-family: var(--f-display); font-variation-settings: "wdth" 118, "wght" 900; font-weight: 900; font-size: clamp(2.8rem, 7vw, 6.5rem); line-height: .86; letter-spacing: -.03em; color: var(--chalk); } .page-fv__title::after { content: ""; display: block; width: min(100%, 260px); height: 3px; margin-top: clamp(14px, 1.6vw, 20px); background: var(--ember); } .page-fv__subtitle { font-family: var(--f-body); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: rgba(244, 242, 237, .8) !important; margin-top: 14px; } /* ---------- breadcrumb ---------- */ .page-fv__breadcrumb { background: var(--ink); } .breadcrumb { font-size: 12px; letter-spacing: .04em; color: var(--mute); } .breadcrumb a { color: var(--mute); transition: color .28s var(--ease); } .breadcrumb a:hover { color: var(--ember); } .breadcrumb .current-item { color: var(--chalk); } .breadcrumb__between { color: var(--mute); } /* ============================================================ subpage-hero （about / service の導入ブロック） ============================================================ */ .subpage-hero { background: var(--ink); } .subpage-hero__title, .subpage-hero__title-line { font-family: var(--f-jp); font-weight: 900; color: var(--chalk); letter-spacing: .01em; } .subpage-hero__lead { color: rgba(244, 242, 237, .74) !important; } .subpage-hero__nav-list { border-color: var(--line); } .subpage-hero__nav-item, .subpage-hero__nav-item a { color: rgba(244, 242, 237, .82); border-color: var(--line); transition: color .28s var(--ease), border-color .28s var(--ease); } .subpage-hero__nav-item:hover, .subpage-hero__nav-item a:hover { color: var(--ember); border-color: var(--ember); } .subpage-hero__nav-icon { color: var(--ember); } .subpage-hero__nav-text { color: inherit; } /* ---------- section-heading （en + ja のペア） ---------- */ .section-heading__en { font-family: var(--f-display); font-variation-settings: "wdth" 115, "wght" 900; font-weight: 900; font-size: clamp(2rem, 4vw, 3.4rem); line-height: .9; letter-spacing: -.02em; color: var(--chalk); } .section-heading__ja { font-family: var(--f-body); font-weight: 700; font-size: 12px; letter-spacing: .18em; color: var(--ember) !important; } .section-heading::after, .section-heading__en::after { background: var(--ember) !important; border-color: var(--ember) !important; } /* ============================================================ about ============================================================ */ .about-philosophy { background: var(--steel); } .about-philosophy__text { color: rgba(244, 242, 237, .78) !important; } .about-philosophy__sign-name { color: var(--chalk) !important; font-family: var(--f-jp); font-weight: 700; } .about-philosophy__sign-role { color: var(--ember) !important; font-size: 12px; letter-spacing: .14em; } .about-philosophy__media img { filter: saturate(.8) brightness(.95); } .about-company-profile__table, .about-company-profile__tableWrap { border-color: var(--line); } .about-company-profile__row { border-bottom: 1px solid var(--line-soft); } .about-company-profile__head, .about-company-profile__item { color: var(--chalk) !important; font-family: var(--f-body); font-weight: 700; font-size: 13px; letter-spacing: .06em; background: transparent !important; border-color: var(--line-soft) !important; } .about-company-profile__data, .about-company-profile__list li { color: rgba(244, 242, 237, .74) !important; border-color: var(--line-soft) !important; } .about-access__heading { color: var(--chalk) !important; } .about-access__postal, .about-access__address, .about-access__addr { color: rgba(244, 242, 237, .74) !important; } .about-access__map { border: 1px solid var(--line); filter: grayscale(.3) brightness(.9); } .about-swiper__swiper-slide img { filter: saturate(.8) brightness(.92); } /* ============================================================ service ============================================================ */ .service-block { border-top: 1px solid var(--line-soft); } .service-block__bg { background-color: var(--steel); } .service-block__num { font-family: var(--f-display); font-variation-settings: "wdth" 115, "wght" 900; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ember) !important; letter-spacing: -.02em; } .service-block__bar { background: var(--ember) !important; } .service-block__kicker { color: var(--ember) !important; letter-spacing: .16em; font-weight: 700; } .service-block__title { color: var(--chalk) !important; font-family: var(--f-jp); font-weight: 900; } .service-block__lead, .service-block__text { color: rgba(244, 242, 237, .76) !important; } .service-block__features { border-top: 1px solid var(--line-soft); background: transparent !important; } .service-block__featuresEn { font-family: var(--f-display); font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700; letter-spacing: .16em; color: var(--ember) !important; } .service-block__featuresJa { color: var(--chalk) !important; } .service-block__featuresBody { color: rgba(244, 242, 237, .74) !important; } .service-block__img img, .service-block__picture img { filter: saturate(.82) brightness(.92); } /* ============================================================ voice / works archive ============================================================ */ .works-archive__navLink, .news__navLink { color: var(--mute) !important; border-left: 2px solid transparent; transition: color .28s var(--ease), border-color .28s var(--ease); } .works-archive__navLink:hover, .news__navLink:hover { color: var(--chalk) !important; } .works-archive__navLink.is-active, .news__navLink.is-active { color: var(--chalk) !important; font-weight: 700; border-left-color: var(--ember); } .works-archive__navMarker, .news__navMarker { background: var(--ember) !important; } .works-archive__nav-title, .news__nav-title { color: var(--chalk) !important; } .works-list__card { border-bottom: 1px solid var(--line-soft); background: transparent; } .works-list__heading { color: var(--chalk) !important; font-family: var(--f-jp); font-weight: 700; } .works-list__body, .works-list__text { color: rgba(244, 242, 237, .7) !important; } .works-list__media img, .works-list__img { filter: saturate(.82) brightness(.94); } .works-list__date, .c-date { font-family: var(--f-display); font-variation-settings: "wdth" 100, "wght" 500; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .1em; color: var(--ember) !important; } /* ============================================================ news archive ============================================================ */ .news__item { border-bottom: 1px solid var(--line-soft); } .news__headline { color: var(--chalk) !important; font-family: var(--f-jp); font-weight: 700; } .news__link:hover { opacity: .62; } .tag, .tag--bg { color: var(--mute) !important; background: transparent !important; border: 1px solid var(--line); font-size: 11px; letter-spacing: .06em; padding: 2px 9px; } .under-line-hover:hover .under-line { background-image: linear-gradient(var(--ember), var(--ember)); } /* ============================================================ pagination ============================================================ */ .pagination .page-numbers, .wp-pagenavi .page-numbers, .nav-links .page-numbers { color: var(--mute) !important; background: transparent !important; border: 1px solid var(--line) !important; border-radius: 0 !important; transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); } .pagination .page-numbers:hover, .nav-links .page-numbers:hover { color: var(--chalk) !important; border-color: var(--chalk) !important; } .pagination .page-numbers.current, .nav-links .page-numbers.current { color: var(--ink) !important; background: var(--ember) !important; border-color: var(--ember) !important; font-weight: 700; } .page-numbers.is-disabled { opacity: .3; } /* ============================================================ contact form （CF7） ============================================================ */ .contact-form__head, .form__label { color: var(--chalk) !important; } .form__note { color: rgba(244, 242, 237, .66) !important; font-size: 12.5px; } .form__required { background: var(--ember) !important; color: var(--ink) !important; border: 0 !important; font-weight: 700; font-size: 11px; letter-spacing: .08em; } .form__input, .form__textarea, .form__select, .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select { background: var(--steel) !important; color: var(--chalk) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; font-family: var(--f-body); transition: border-color .25s var(--ease); } .form__input::placeholder, .form__textarea::placeholder, .wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: #7C838C !important; /* --steel 上で 4.6:1 */ opacity: 1; } .form__input:focus, .form__textarea:focus, .form__select:focus, .wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus { border-color: var(--ember) !important; outline: 2px solid var(--ember); outline-offset: 1px; } select.is-placeholder { color: #7C838C !important; } .form__acceptance-text, .form__acceptance { color: rgba(244, 242, 237, .74) !important; } .form__acceptance a, .form__acceptance-text a { color: var(--ember) !important; text-decoration: underline; } /* 送信ボタン: 旧デザインの紺色をやめて ember に統一 */ .form__submit-button, .form__submit-input, .wpcf7-submit, .wpcf7 input[type="submit"] { background: var(--ember) !important; color: var(--ink) !important; /* 8.0:1 */ border: 0 !important; border-radius: 0 !important; font-family: var(--f-body); font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background-color .25s var(--ease), transform .25s var(--ease); } .form__submit-button:hover, .wpcf7-submit:hover, .wpcf7 input[type="submit"]:hover { background: var(--ember-hot) !important; transform: translateY(-2px); } .form__submit-button:active, .wpcf7-submit:active { transform: translateY(0) scale(.985); } .wpcf7-response-output { border-color: var(--ember) !important; color: var(--chalk) !important; background: var(--steel); } .wpcf7-not-valid-tip { color: #FF8A6B !important; font-size: 12.5px; } /* ============================================================ 共通CTA（template-parts/contact.php） ============================================================ */ .contact__box, .contact__panel { background: var(--steel) !important; } .contact__panelInner { background: transparent !important; } .contact__lead { color: var(--chalk) !important; font-family: var(--f-jp); font-weight: 900; } .contact__note { color: var(--mute) !important; } .contact__pic img, .contact__media img { filter: saturate(.78) brightness(.9); } .contact__btn, .slide-btn { background: var(--ember) !important; color: var(--ink) !important; border: 0 !important; border-radius: 0 !important; font-weight: 700; transition: background-color .25s var(--ease), transform .25s var(--ease); } .contact__btn:hover, .slide-btn:hover { background: var(--ember-hot) !important; transform: translateY(-2px); } .contact__btnText { color: var(--ink) !important; } /* スライドホバーの塗りが白のままだと ember が消えるので合わせる */ .contact__btn::after, .slide-btn::after { background: var(--ember-hot) !important; } /* ============================================================ 記事詳細 / 404 ============================================================ */ .news-detail__body, .post-root p, .post-root li { color: rgba(244, 242, 237, .8) !important; } .news-detail__body a, .post-root a { color: var(--ember) !important; } .news-detail__body blockquote, .post-root blockquote { border-left: 3px solid var(--ember); background: var(--steel); color: rgba(244, 242, 237, .8); } .back-btn, .big-btn { background: transparent !important; color: var(--chalk) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; transition: border-color .25s var(--ease), color .25s var(--ease); } .back-btn:hover, .big-btn:hover { border-color: var(--ember) !important; color: var(--ember) !important; } .sticky-pane { background: transparent; } @media (prefers-reduced-motion: reduce) { body:not(.home) * { transition-duration: .001ms !important; animation-duration: .001ms !important; } } /* ============================================================ Service ページ（作り直し）旧版は同型ブロック3連続だった。ここでは3ブロックに別々の型を与える。ブロック用の画像は 5000px の明るい素材そのままなので、トーンは filter で、切り抜きは object-fit / object-position で合わせる。 ============================================================ */ /* ---------- 導入 ---------- */ .svc-intro { padding-block: clamp(64px, 9vw, 130px); } .svc-intro__title { font-family: var(--f-jp); font-weight: 900; font-size: clamp(1.5rem, 3.1vw, 2.7rem); line-height: 1.6; letter-spacing: .01em; color: var(--chalk); } .svc-intro__bar { display: block; height: 4px; width: min(100%, 340px); background: var(--ember); margin: clamp(20px, 2.4vw, 30px) 0 clamp(22px, 2.6vw, 32px); } .svc-intro__lead { max-width: 46em; color: rgba(244, 242, 237, .74) !important; line-height: 2; } .svc-index { margin-top: clamp(36px, 5vw, 60px); } .svc-index ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px); list-style: none; margin: 0; padding: 0; } .svc-index a { display: flex; align-items: baseline; gap: 14px; padding: 20px 22px; border: 1px solid var(--line); color: var(--chalk); text-decoration: none; transition: border-color .28s var(--ease), background-color .28s var(--ease); } .svc-index a:hover { border-color: var(--ember); background: rgba(224, 122, 40, .06); } .svc-index__num { font-family: var(--f-display); font-variation-settings: "wdth" 115, "wght" 900; font-weight: 900; font-variant-numeric: tabular-nums; font-size: 22px; line-height: 1; color: var(--ember); } .svc-index__label { font-size: 13.5px; line-height: 1.7; font-weight: 700; } /* ---------- ブロック共通 ---------- */ .svc { position: relative; } .svc + .svc { margin-top: clamp(72px, 10vw, 150px); } .svc__num { font-family: var(--f-display); font-variation-settings: "wdth" 118, "wght" 900; font-weight: 900; font-variant-numeric: tabular-nums; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: .8; letter-spacing: -.03em; color: var(--ember) !important; margin-bottom: clamp(16px, 2vw, 24px); } .svc__title { font-family: var(--f-jp); font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 2.3rem); line-height: 1.45; color: var(--chalk); margin-bottom: clamp(16px, 2vw, 22px); } .svc__title--lg { font-size: clamp(1.7rem, 3.6vw, 3.2rem); } .svc__lead { font-family: var(--f-jp); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.85; color: var(--chalk) !important; margin-bottom: clamp(16px, 2vw, 22px); } .svc__text { font-size: 14.5px; line-height: 2.05; color: rgba(244, 242, 237, .74) !important; max-width: 40em; } .svc__media { margin: 0; overflow: hidden; } .svc__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.52) brightness(.70) contrast(1.16); } /* ---------- 01: 左端まで抜ける画像 + 右テキスト ---------- */ .svc--split { display: grid; grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); align-items: center; gap: clamp(28px, 5vw, 80px); max-width: calc(var(--wrap) + var(--gutter)); margin-inline: auto; padding-right: var(--gutter); } .svc--split .svc__media { aspect-ratio: 4 / 3; } .svc--split .svc__media img { object-position: 60% center; } .svc--split .svc__body { max-width: 40rem; } /* ---------- 02: 全幅バンド + 下に2カラム ---------- */ .svc--band .svc__band { position: relative; min-height: clamp(360px, 46vw, 560px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .svc__band-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; /* 素材が緑・ピンクの強い写真なので、彩度を落としてパレットに寄せる */ filter: saturate(.28) brightness(.58) contrast(1.2); } .svc__band-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11,12,14,.94) 0%, rgba(11,12,14,.70) 34%, rgba(11,12,14,.22) 100%); } .svc__band-inner { padding-block: clamp(32px, 4vw, 56px); } .svc--band .svc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); padding-top: clamp(32px, 4vw, 52px); } .svc--band .svc__text { max-width: none; } /* ---------- 03: タイポ主体 + 右に縦長画像 ---------- */ .svc__type-grid { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(28px, 5vw, 80px); align-items: center; } .svc--type .svc__media--tall { aspect-ratio: 3 / 4; } .svc--type .svc__media--tall img { object-position: 55% center; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .svc-index ul { grid-template-columns: 1fr; } .svc--split { grid-template-columns: 1fr; padding-right: 0; gap: clamp(24px, 6vw, 40px); } .svc--split .svc__media { aspect-ratio: 16 / 10; } .svc--split .svc__body { padding-inline: var(--gutter); max-width: none; } .svc--band .svc__cols { grid-template-columns: 1fr; } .svc__type-grid { grid-template-columns: 1fr; } .svc--type .svc__media--tall { aspect-ratio: 16 / 10; order: -1; } }