コンポーネント | 株式会社FPEC

c-sectionTitle

Business

Project

Achievements

Contact

inquiry

<!-- デフォルト -->
<hgroup class="c-sectionTitle">
  <h2 class="c-sectionTitle__main"></h2>
  <p class="c-sectionTitle__sub"></p>
</hgroup>
<!-- 背景が暗いエリア向け -->
<hgroup class="c-sectionTitle c-sectionTitle--white">
  <h2 class="c-sectionTitle__main"></h2>
  <p class="c-sectionTitle__sub"></p>
</hgroup>
<!-- 背景が暗いエリア向け（下線白） -->
<hgroup class="c-sectionTitle c-sectionTitle--white c-sectionTitle--lineWhite">
  <h2 class="c-sectionTitle__main"></h2>
  <p class="c-sectionTitle__sub"></p>
</hgroup>

c-sectionLowerTitle

Greeting

Greetings

Strengths

Strengths and Value Proposition

Strengths

Strengths and Value Proposition

<hgroup class="c-sectionLowerTitle">
  <h2 class="c-sectionLowerTitle__main"></h2>
  <p class="c-sectionLowerTitle__sub"><span class="c-sectionLowerTitle__sub-line"></span></p>
</hgroup>
<hgroup class="c-sectionLowerTitle c-sectionLowerTitle--white">
  <h2 class="c-sectionLowerTitle__main"></h2>
  <p class="c-sectionLowerTitle__sub"><span class="c-sectionLowerTitle__sub-line"></span></p>
</hgroup>
<hgroup class="c-sectionLowerTitle c-sectionLowerTitle--white c-sectionLowerTitle--lineWhite">
  <h2 class="c-sectionLowerTitle__main"></h2>
  <p class="c-sectionLowerTitle__sub"><span class="c-sectionLowerTitle__sub-line"></span></p>
</hgroup>

c-sectionSubTitle

Comparison of scope of work

<h3 class="c-sectionSubTitle"></h3>
<h3 class="c-sectionSubTitle c-sectionSubTitle--alignCenter"></h3>
<h3 class="c-sectionSubTitle c-sectionSubTitle--alignRight"></h3>
<h3 class="c-sectionSubTitle c-sectionSubTitle--white"></h3>

c-lowerPageTitle

下層ページ見出し（大）

下層ページ見出し（小）

<h2 class="c-lowerPageTitle"></h2>
<h3 class="c-lowerPageTitle c-lowerPageTitle--small"></h3>

c-mediumTitle

中見出し（下線付き）

<h3 class="c-mediumTitle"></h3>

c-titleSideLineBlue

左線ブルーの見出し

<h3 class="c-titleSideLineBlue"></h3>

c-btnBlank

Plant disaster simulation

<a href="#" class="c-btnBlank">
  <span class="c-btnBlank__text"></span>
  <span class="c-btnBlank__icon"></span>
</a>

c-btnBack

Return to Top Page

<a href="#" class="c-btnBack">
  <span class="c-btnBack__icon">
    <img src="" alt="" width="12.32" height="13.33" loading="lazy">
  </span>
  <span class="c-btnBack__text"></span>
</a>
<a href="#" class="c-btnBack c-btnBack--alginCenter">
  <span class="c-btnBack__icon">
    <img src="" alt="" width="12.32" height="13.33" loading="lazy">
  </span>
  <span class="c-btnBack__text"></span>
</a>
<a href="#" class="c-btnBack c-btnBack--alginRight">
  <span class="c-btnBack__icon">
    <img src="" alt="" width="12.32" height="13.33" loading="lazy">
  </span>
  <span class="c-btnBack__text"></span>
</a>

c-btnMore

もっと見る（黒）

もっと見る（白）

<a href="#" class="c-btnMore c-btnMore--black">
  <span class="c-btnMore__text"></span>
  <span class="c-btnMore__icon">
    <img src="" alt="" aria-hidden="true" width="23" height="23" loading="lazy">
  </span>
</a>
<a href="#" class="c-btnMore c-btnMore--white">
  <span class="c-btnMore__text"></span>
  <span class="c-btnMore__icon">
    <img src="" alt="" aria-hidden="true" width="23" height="23" loading="lazy">
  </span>
</a>

c-btnDownload

download

<a href="#" class="c-btnDownload">
  <span class="c-btnDownload__text"></span>
  <span class="c-btnDownload__icon" aria-hidden="true"></span>
</a>

c-btnScale

Click to enlarge

<span class="c-btnScale">
  <span class="c-btnScale__icon"></span>
  <span class="c-btnScale__text"></span>
</span>

c-categoryBtn

<button type="button" class="c-categoryBtn is-active">
  <span class="c-categoryBtn-icon"></span>
  <span class="c-categoryBtn-text"></span>
</button>

c-btnLinkInPage

ページ内リンクのダミー

<li class="c-btnLinkInPage">
  <a href="#" class="c-btnLinkInPage__link"></a>
</li>

c-btnReturnTop

Return to list

<a href="#" class="c-btnReturnTop">
  <span class="c-btnReturnTop__icon">
    <img src="" alt="" aria-hidden="true" width="12.32" height="13.33" loading="lazy">
  </span>
  <span class="c-btnReturnTop__text"></span>
</a>

l-newsList / c-newsList

<ul class="l-newsList">
  <li class="l-newsList-item">
    <a href="" class="c-newsList">
      <data value="" class="c-newsList-data"></data>
      <span class="c-newsList-cate"></span>
      <h3 class="c-newsList-title"></h3>
      <span class="c-newsList-arrow"></span>
    </a>
  </li>
</ul>

c-bulletList

箇条書きダミー1
箇条書きダミー2
箇条書きダミー3

<ul class="c-bulletList">
  <li class="c-bulletList__item"><span class="c-bulletList__item-bullet"></span></li>
  <li class="c-bulletList__item"><span class="c-bulletList__item-bullet"></span></li>
</ul>

c-bullet（c-accordion__subBox + c-bulletList・青ヘッダー）

ブロック見出しダミー

箇条書きダミー1
箇条書きダミー2
箇条書きダミー3

<div class="c-accordion__subBox c-accordion__subBox--gray">
  <h4 class="c-accordion__subBox-header"></h4>
  <div class="c-accordion__subBox-body">
    <ul class="c-bulletList">
      <li class="c-bulletList__item"><span class="c-bulletList__item-bullet"></span></li>
      <li class="c-bulletList__item"><span class="c-bulletList__item-bullet"></span></li>
    </ul>
  </div>
</div>

c-listItemCheckbox

チェックアイコン付きリストのダミー文言です。

<li class="c-listItemCheckbox">
  <span class="c-listItemCheckbox__icon"></span>
  <p class="c-listItemCheckbox__text"></p>
</li>

c-lowerBox

枠付きボックス見出し

リスト項目ダミー1
リスト項目ダミー2

<div class="c-lowerBox">
  <h3 class="c-lowerBox__title"></h3>
  <ul class="c-lowerBox__list">
    <li class="c-lowerBox__list-item"></li>
  </ul>
</div>

c-accordion

01 アコーディオン見出しダミー

本文のダミーテキストです。開閉の動きを確認できます。

<details class="c-accordion">
  <summary class="c-accordion__summary">
    <span class="c-accordion__heading">
      <span class="c-accordion__number"></span>
      <span class="c-accordion__label"></span>
    </span>
    <span class="c-accordion__icon" aria-hidden="true"></span>
  </summary>
  <div class="c-accordion__body">
    <div class="c-accordion__body-inner">
      <p class="c-accordion__text"></p>
    </div>
  </div>
</details>

c-modal / c-modalScale__btn

<div class="c-modal">
  <button type="button" class="c-modal__trigger" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-modal-open="">
    <span class="c-modal__img">
      <img src="" alt="" width="1660" height="843" loading="lazy">
    </span>
    <span class="c-modalScale__btn">
      <span class="c-btnScale">
        <span class="c-btnScale__icon"></span>
        <span class="c-btnScale__text"></span>
      </span>
    </span>
  </button>
  <dialog id="" class="c-modal__dialog" aria-labelledby="">
    <div class="c-modal__dialogSurface">
      <div class="c-modal__dialogInner">
        <h2 id="" class="u-sr-only"></h2>
        <div class="c-modal__dialogToolbar">
          <button type="button" class="c-modal__close" aria-label="close">×</button>
        </div>
        <div class="c-modal__dialogBody">
          <img src="" alt="" width="1660" height="843" loading="lazy">
        </div>
      </div>
    </div>
  </dialog>
</div>

l-lowerSideBar / c-btnLinkInLower

<div class="l-lowerSideBar">
  <a href="#" class="c-btnLinkInLower__header l-lowerSideBar__heder">
    <span class="c-btnLinkInLower__header-icon"></span>
    <span class="c-btnLinkInLower__header-text"></span>
  </a>
  <ul class="l-lowerSideBar__list">
    <li class="l-lowerSideBar__item">
      <a href="#" class="c-btnLinkInLower">
        <span class="c-btnLinkInLower__text"></span>
        <span class="c-btnLinkInLower__link-arrow"></span>
      </a>
    </li>
  </ul>
</div>

breadcrumb（Breadcrumb NavXT）

<?php get_template_part("template-parts/breadcrumb", null, ["variant" => "light", "rightPc" => false]); ?>

link-list

<?php get_template_part("template-parts/link-list"); ?>

footer-link

Contact

inquiry

We offer free consultations.
Please feel free to contact us via the form or by phone.

Contact Form

Please contact us by phone.

045-222-8870

9:00 AM to 5:00 PM(Closed on Saturdays, Sundays, and public holidays)

Recruit

Recruitment Information

Plant and factory safety
Won't you join us in protecting it?
We look forward to receiving your application.

Recruitment Information

<?php get_template_part("template-parts/footer-link"); ?>

p-lowerPage__fmBox

3Dビューワーでシミュレーション結果を確認

FMビューワー説明のダミーテキストです。

対応：タンク火災消火 / 輻射熱計算

FM Viewer

<div class="p-lowerPage__fmBox">
  <div class="p-lowerPage__fmContent">
    <div class="p-lowerPage__fmTitle">
      <span class="p-lowerPage__fmTitle-bar"></span>
      <span class="p-lowerPage__fmTitle-text"></span>
    </div>
    <div class="p-lowerPage__fmTexts">
      <p></p>
      <p></p>
    </div>
  </div>
  <a href="#" class="c-btnMore c-btnMore--black">
    <span class="c-btnMore__text"></span>
    <span class="c-btnMore__icon">
      <img src="" alt="" aria-hidden="true" width="23" height="23" loading="lazy">
    </span>
  </a>
</div>

p-lowerPage__catalog

catalog

カタログブロックの説明文ダミーです。

download Catalog List

<div class="p-lowerPage__catalog">
  <h3 class="c-lowerPageTitle c-lowerPageTitle--small"></h3>
  <div class="p-lowerPage__catalogContent">
    <div class="p-lowerPage__catalogLeft">
      <p class="p-lowerPage__catalogText"></p>
      <div class="p-lowerPage__catalogBtns">
        <a href="#" class="c-btnDownload">
          <span class="c-btnDownload__text"></span>
          <span class="c-btnDownload__icon" aria-hidden="true"></span>
        </a>
        <a href="#" class="c-btnMore c-btnMore--black">
          <span class="c-btnMore__text"></span>
          <span class="c-btnMore__icon">
            <img src="" alt="" aria-hidden="true" width="23" height="23" loading="lazy">
          </span>
        </a>
      </div>
    </div>
    <div class="p-lowerPage__catalogImg">
      <img src="" alt="" width="1660" height="843" loading="lazy">
    </div>
  </div>
</div>

p-lowerPage__infoBox

情報ボックス見出し

リスト項目ダミー1
強調付き項目
改行例
2行目

<div class="p-lowerPage__infoBox">
  <h4 class="p-lowerPage__infoBox-title"></h4>
  <div class="p-lowerPage__infoBox-body">
    <ul class="p-lowerPage__infoList">
      <li class="p-lowerPage__infoItem"></li>
      <li class="p-lowerPage__infoItem"></li>
      <li class="p-lowerPage__infoItem"></li>
    </ul>
  </div>
</div>

p-lowerPage__infoBox--slim

スリム版項目A
スリム版項目B

<div class="p-lowerPage__infoBox p-lowerPage__infoBox--slim">
  <ul class="p-lowerPage__infoList">
    <li class="p-lowerPage__infoItem"></li>
    <li class="p-lowerPage__infoItem"></li>
  </ul>
</div>

p-lowerPagefigure-img / p-lowerPagefigureCaption

<figure class="l-lowerPage__blockGap20">
  <div class="p-lowerPage__figure-img">
    <img src="" alt="" width="1660" height="843" loading="lazy">
  </div>
  <figcaption class="p-lowerPage__figureCaption p-lowerPage__figureCaption--alignCenter"></figcaption>
</figure>

<figure class="l-lowerPage__blockGap20">
  <div class="p-lowerPage__figure-img">
    <img src="" alt="" width="1660" height="843" loading="lazy">
  </div>
  <figcaption class="p-lowerPage__figureCaption"></figcaption>
</figure>

p-lowerPage__imgPair

左図キャプション

右図キャプション

<div class="p-lowerPage__imgPair">
  <div class="l-lowerPage__blockGap12">
    <p class="p-lowerPage__figureCaption"></p>
    <img src="" alt="" width="734" height="417" loading="lazy">
  </div>
  <div class="l-lowerPage__blockGap12">
    <p class="p-lowerPage__figureCaption"></p>
    <img src="" alt="" width="734" height="417" loading="lazy">
  </div>
</div>

p-lowerPage__accordion-btn

l-lowerPage__btn

Return to Top Page

<div class="l-lowerPage__btn">
  <a href="#" class="c-btnBack c-btnBack--alginCenter">
    <span class="c-btnBack__icon">
      <img src="" alt="" width="14" height="13" loading="lazy">
    </span>
    <span class="c-btnBack__text"></span>
  </a>
</div>

Components

タイトル

c-sectionTitle

Business

Project

Contact

c-sectionLowerTitle

Greeting

Strengths

Strengths

c-sectionSubTitle

Comparison of scope of work

Comparison of scope of work

Comparison of scope of work

Comparison of scope of work

c-lowerPageTitle

下層ページ見出し（大）

下層ページ見出し（小）

c-mediumTitle

中見出し（下線付き）

c-titleSideLineBlue

左線ブルーの見出し

ボタン・リンク

c-btnBlank

c-btnBack

c-btnMore

c-btnDownload

c-btnScale

c-categoryBtn

c-btnLinkInPage

c-btnReturnTop

リスト

l-newsList / c-newsList

【ダミー】プラント災害・防災シミュレーション

ニュースリストのプレビュー

c-bulletList

c-bullet（c-accordion__subBox + c-bulletList・青ヘッダー）

ブロック見出しダミー

c-listItemCheckbox

パネル・ブロック

c-lowerBox

枠付きボックス見出し

アコーディオン・モーダル

c-accordion

c-modal / c-modalScale__btn

レイアウト（下層ナビ）

l-lowerSideBar / c-btnLinkInLower

テンプレートパーツ

breadcrumb（Breadcrumb NavXT）

link-list

FAQ

Process

Company

footer-link

Contact

Recruit

下層ページ共通（p-lowerPage）

p-lowerPage__fmBox

p-lowerPage__catalog

catalog

p-lowerPage__infoBox

情報ボックス見出し

p-lowerPage__infoBox--slim

p-lowerPage__figure-img / p-lowerPage__figureCaption

p-lowerPage__imgPair

p-lowerPage__accordion-btn

l-lowerPage__btn

p-lowerPagefigure-img / p-lowerPagefigureCaption