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

c-sectionTitle

Business

Latest Information

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

Subpage headings (large)

Subpage headings (small)

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

c-mediumTitle

Subheadings (underlined)

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

c-titleSideLineBlue

Headline with blue line on the left

<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

See more (black)

See more (white)

<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

Dummy in-page links

<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

Dummy bullet point 1
Dummy bullet points 2
Dummy bullet points 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, blue header)

Block heading dummy

Dummy bullet point 1
Dummy bullet points 2
Dummy bullet points 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

This is dummy text for a list with a check icon.

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

c-lowerBox

Bordered box heading

List item dummy 1
List item dummy 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 Accordion Headline Dummy

This is dummy text for the main body. You can check the opening and closing motion.

<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)

"light", "rightPc" => false]); ?>

Root 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

View simulation results in the 3D viewer.

This is dummy text for the FM viewer description.

Services offered: Tank fire extinguishing / Radiant heat calculation

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

This is a dummy description for the catalog block.

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

Information Box Heading

List item dummy 1
emphasisAttached items
Line break example
Second line

<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

Slim version item A
Slim version item 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

Caption for the left image

Caption for the image on the right

<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

Go to related pages

<div class="p-lowerPage__accordion-btn">
  <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="14" height="13" loading="lazy">
    </span>
  </a>
</div>

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

title

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

Subpage headings (large)

Subpage headings (small)

c-mediumTitle

Subheadings (underlined)

c-titleSideLineBlue

Headline with blue line on the left

Buttons and links

c-btnBlank

c-btnBack

c-btnMore

c-btnDownload

c-btnScale

c-categoryBtn

c-btnLinkInPage

c-btnReturnTop

list

l-newsList / c-newsList

[Dummy] Plant Disaster and Disaster Prevention Simulation

News list preview

c-bulletList

c-bullet (c-accordion__subBox + c-bulletList, blue header)

Block heading dummy

c-listItemCheckbox

Panel block

c-lowerBox

Bordered box heading

Accordion Modal

c-accordion

c-modal / c-modalScale__btn

Layout (lower navigation)

l-lowerSideBar/c-btnLinkInLower

Template parts

breadcrumb (Breadcrumb NavXT)

Root List

FAQ

Process

Company

footer-link

Contact

Recruit

Common to all lower-level pages (p-lowerPage)

p-lowerPage__fmBox

p-lowerPage__catalog

catalog

p-lowerPage__infoBox

Information Box Heading

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