/**
 * @license
 *
 * gulp_project_template:
 *   author: ings Co,.Ltd.
 *   version: 1.0.0
 */
@charset "utf-8";
/*
mod-icon

アイコンのスタイル

Weight: -1100

Style guide: icon
*/
.mod-icon {
  display: block;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: middle;
  text-align: center;
  text-indent: -100%;
  line-height: 0;
  letter-spacing: 0;
  color: #fff;
  background-color: transparent;
  background-repeat: no-repeat;
  font-weight: normal;
  font-size: 0;
  border: 0;
}
/*
Default

ModIcon のデフォルトスタイル。タイプ指定が必須。タイプ指定がなければ何も表示されない

Weight: -100

Markup: <i class="{{modifier_class}}"></i>

mod-icon - デフォルトスタイル

Style guide: icon.option.default
*/
/*
Option: Types

ModIcon のオプション（タイプ）

Markup: <i class="mod-icon  {{modifier_class}}"></i>

mod-icon--type-a-a--a - アイコンタイプ a-a--a
mod-icon--type-a-a--b - アイコンタイプ a-a--b
mod-icon--type-a-b--a - アイコンタイプ a-b--a
mod-icon--type-a-b--b - アイコンタイプ a-b--b

Style guide: icon.option.type
*/
.mod-icon--type-a-a--a,
.mod-icon--type-a-a--b,
.mod-icon--type-a-b--a,
.mod-icon--type-a-b--b {
  background-image: url("../images/common/sprite_icon.png");
}
.mod-icon--type-a-a--a {
  width: 30px;
  height: 24px;
  background-position: 0px -32px;
}
.mod-icon--type-a-a--b {
  width: 15px;
  height: 12px;
  background-position: -16px -16px;
  -webkit-background-size: 31px 28px;
          background-size: 31px 28px;
}
.mod-icon--type-a-b--a {
  width: 30px;
  height: 30px;
  background-position: 0px 0px;
}
.mod-icon--type-a-b--b {
  width: 15px;
  height: 15px;
  background-position: -16px 0px;
  -webkit-background-size: 31px 28px;
          background-size: 31px 28px;
}
/*
mod-text

デバイステキストのスタイル

Weight: -1090

Style guide: text
*/
.mod-text {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  word-break: break-all;
  word-wrap: break-word;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.04em;
  background-color: transparent;
  font-size: 0.87em;
  font-style: normal;
  font-weight: normal;
  border: 0;
}
.mod-text__link {
  display: inline;
  text-decoration: underline;
  color: #006cb8;
}
.mod-text__link:hover {
  text-decoration: none;
}
.mod-text__label {
  overflow: hidden;
  display: block;
  padding: 0;
  line-height: 0;
  text-indent: -100%;
  white-space: nowrap;
  color: transparent;
  background-repeat: no-repeat;
  font-size: 0;
}
.mod-text__icon {
  display: inline-block;
  top: 0;
  margin-right: 5px;
  vertical-align: baseline;
  *display: inline;
  *text-indent: 0;
  *font-size: 0;
  *zoom: 1;
}
/*
Default

ModText のデフォルトスタイル

Weight: -100

Markup: <h1 class="{{modifier_class}}">h1 text. h1 text. h1 text. h1 text. </h1>
<h2 class="{{modifier_class}}">h2 text. h2 text. h2 text. h2 text. h2 text.</h2>
<p class="{{modifier_class}}">text. text. text. text. text. text. text. text. text. text. text. text. text. </p>
<p class="{{modifier_class}}"><a class="{{modifier_class}}__link" href="javascript:void(0);">link text. link text. link text.</a> text. text. text. text. text. </p>
<p class="{{modifier_class}}"><b>b text. b text. b text. b text. b text. b text. b text. b text.</b> text. text. text. text. text. </p>
<p class="{{modifier_class}}"><strong>strong text. strong text. strong text. strong text. strong text.</strong> text. text. text. text. text. </p>
<p class="{{modifier_class}}"><span class="{{modifier_class}}__label">label text.</span></p>
<p class="{{modifier_class}}"><i class="{{modifier_class}}__icon mod-icon mod-icon--type-a-a--a">icon txt</i>icon with text. icon with text. icon with text.</p>
<span class="{{modifier_class}}">span text. span text. span text. span text. span text.</span>

mod-text - デフォルトスタイル

Style guide: text.option.default
*/
/*
Option: Themes

Weight: -100

ModText のオプション（テーマ）

Markup: <h1 class="mod-text {{modifier_class}}">h1 text. h1 text. h1 text. h1 text. h1 text.</h1>
<h1 class="mod-text {{modifier_class}}"><span class="mod-text__label mod-text__label--type-a-a--a">h1 text. h1 text. h1 text. h1 text. h1 text.</span></h1>

mod-text--theme-default - デフォルト
mod-text--theme-a-a - テーマ a-a
mod-text--theme-a-b - テーマ a-b
mod-text--theme-a-c - テーマ a-c
mod-text--theme-a-d - テーマ a-d
mod-text--theme-a-e - テーマ a-e
mod-text--theme-a-f - テーマ a-f
mod-text--theme-a-g - テーマ a-g
mod-text--theme-a-h - テーマ a-h
mod-text--theme-a-i - テーマ a-i

Style guide: text.option.theme
*/
.mod-text--theme-a-a,
.mod-text--theme-a-b,
.mod-text--theme-a-c,
.mod-text--theme-a-d,
.mod-text--theme-a-e,
.mod-text--theme-a-f,
.mod-text--theme-a-g,
.mod-text--theme-a-h,
.mod-text--theme-a-i {
  padding: 5px 5px;
  color: #fff;
}
.mod-text--theme-a-a {
  background-color: #000;
}
.mod-text--theme-a-b {
  color: #e85298;
  font-size: 24px;
}
.mod-text--theme-a-c {
  font-size: 16px;
  color: #444;
}
.mod-text--theme-a-d {
  font-size: 16px !important;
  padding: 0;
}
.mod-text--theme-a-e {
  text-align: center !important;
}
.mod-text--theme-a-f {
  font-size: 16px !important;
  padding: 0;
}
.mod-text--theme-a-g {
  font-size: 12px;
  padding: 0;
  color: #444;
}
.mod-text--theme-a-h {
  font-size: 14px;
  padding: 0;
  color: #444;
}
.mod-text--theme-a-i {
  font-size: 16px;
  padding: 0;
  color: #444;
  margin-bottom: 5px;
}
/*
Option: text-indent

ModText のオプション（インデント調整）

Markup: <h1 class="mod-text {{modifier_class}}">h1 text. h1 text. h1 text. h1 text. h1 text.</h1>
<h2 class="mod-text {{modifier_class}}">h2 text. h2 text. h2 text. h2 text. h2 text.</h2>
<p class="mod-text {{modifier_class}}">text. text. text. text. text. text. text. text. text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><a class="mod-text__link" href="javascript:void(0);">link text. link text. link text.</a> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><b>b text. b text. b text. b text. b text. b text. b text. b text.</b> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><strong>strong text. strong text. strong text. strong text. strong text.</strong> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><span class="mod-text__label">label text.</span></p>
<p class="mod-text {{modifier_class}}"><i class="mod-text__icon mod-icon mod-icon--type-a-a--a">icon txt</i>icon with text. icon with text. icon with text.</p>
<span class="mod-text {{modifier_class}}">span text. span text. span text. span text. span text.</span>

mod-text--text-indent - text-indent 1em

Style guide: text.option.text-indent
*/
.mod-text--text-indent {
  text-indent: -1em;
  padding-left: 1em;
}
/*
Option: Aligns

ModText のオプション（整列）

Markup: <h1 class="mod-text {{modifier_class}}">h1 text. h1 text. h1 text. h1 text. h1 text.</h1>
<h2 class="mod-text {{modifier_class}}">h2 text. h2 text. h2 text. h2 text. h2 text.</h2>
<p class="mod-text {{modifier_class}}">text. text. text. text. text. text. text. text. text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><a class="mod-text__link" href="javascript:void(0);">link text. link text. link text.</a> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><b>b text. b text. b text. b text. b text. b text. b text. b text.</b> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><strong>strong text. strong text. strong text. strong text. strong text.</strong> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><span class="mod-text__label">label text.</span></p>
<p class="mod-text {{modifier_class}}"><i class="mod-text__icon mod-icon mod-icon--type-a-a--a">icon txt</i>icon with text. icon with text. icon with text.</p>
<span class="mod-text {{modifier_class}}">span text. span text. span text. span text. span text.</span>

mod-text--align-left - 左寄せ（デフォルト）
mod-text--align-center - 中央寄せ
mod-text--align-right - 右寄せ
mod-text--align-justify - 均等割り付け

Style guide: text.option.align
*/
.mod-text--align-left {
  text-align: left !important;
}
.mod-text--align-center {
  text-align: center;
}
.mod-text--align-right {
  text-align: right;
}
.mod-text--align-justify {
  text-align: justify;
}
/*
Option: letter-spacing

ModText のオプション（カーニング）

Markup: <h1 class="mod-text {{modifier_class}}">h1 text. h1 text. h1 text. h1 text. h1 text.</h1>
<h2 class="mod-text {{modifier_class}}">h2 text. h2 text. h2 text. h2 text. h2 text.</h2>
<p class="mod-text {{modifier_class}}">text. text. text. text. text. text. text. text. text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><a class="mod-text__link" href="javascript:void(0);">link text. link text. link text.</a> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><b>b text. b text. b text. b text. b text. b text. b text. b text.</b> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><strong>strong text. strong text. strong text. strong text. strong text.</strong> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><span class="mod-text__label">label text.</span></p>
<p class="mod-text {{modifier_class}}"><i class="mod-text__icon mod-icon mod-icon--type-a-a--a">icon txt</i>icon with text. icon with text. icon with text.</p>
<span class="mod-text {{modifier_class}}">span text. span text. span text. span text. span text.</span>

mod-text--letter-spacing-14 - -0.14em
mod-text--letter-spacing-11 - -0.11em
mod-text--letter-spacing-10 - -0.1em
mod-text--letter-spacing-9 - -0.09em
mod-text--letter-spacing-8 - -0.08em
mod-text--letter-spacing-7 - -0.07em
mod-text--letter-spacing-6 - -0.06em
mod-text--letter-spacing-5 - -0.05em
mod-text--letter-spacing-4 - -0.04em
mod-text--letter-spacing-3 - -0.03em
mod-text--letter-spacing-2 - -0.02em
mod-text--letter-spacing-1 - -0.01em
mod-text--letter-spacing--2 - +2px

Style guide: text.option.align
*/
.mod-text--letter-spacing-14 {
  letter-spacing: -0.14em !important;
}
.mod-text--letter-spacing-11 {
  letter-spacing: -0.11em !important;
}
.mod-text--letter-spacing-10 {
  letter-spacing: -0.1em !important;
}
.mod-text--letter-spacing-9 {
  letter-spacing: -0.09em !important;
}
.mod-text--letter-spacing-8 {
  letter-spacing: -0.08em !important;
}
.mod-text--letter-spacing-7 {
  letter-spacing: -0.07em !important;
}
.mod-text--letter-spacing-6 {
  letter-spacing: -0.06em !important;
}
.mod-text--letter-spacing-5 {
  letter-spacing: -0.05em !important;
}
.mod-text--letter-spacing-4 {
  letter-spacing: -0.04em !important;
}
.mod-text--letter-spacing-3 {
  letter-spacing: -0.03em !important;
}
.mod-text--letter-spacing-2 {
  letter-spacing: -0.02em !important;
}
.mod-text--letter-spacing-1 {
  letter-spacing: -0.01em !important;
}
.mod-text--letter-spacing--2 {
  letter-spacing: 2px !important;
}
/*
Option: Ellipsis

ModText のオプション（省略）

Markup: <h1 class="mod-text {{modifier_class}}">h1 text. h1 text. h1 text. h1 text. h1 text.</h1>
<h2 class="mod-text {{modifier_class}}">h2 text. h2 text. h2 text. h2 text. h2 text.</h2>
<p class="mod-text {{modifier_class}}">text. text. text. text. text. text. text. text. text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><a class="mod-text__link" href="javascript:void(0);">link text. link text. link text.</a> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><b>b text. b text. b text. b text. b text. b text. b text. b text.</b> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><strong>strong text. strong text. strong text. strong text. strong text.</strong> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><span class="mod-text__label">label text.</span></p>
<p class="mod-text {{modifier_class}}"><i class="mod-text__icon mod-icon mod-icon--type-a-a--a">icon txt</i>icon with text. icon with text. icon with text.</p>
<span class="mod-text {{modifier_class}}">span text. span text. span text. span text. span text.</span>

mod-text--ellipsis-false - 省略しない（デフォルト）
mod-text--ellipsis-true - 省略する

Style guide: text.option.ellipsis
*/
.mod-text--ellipsis-true {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  word-break: normal;
  word-wrap: normal;
  text-overflow: ellipsis;
}
/*
Option: Link Underlines

ModText のオプション（リンクのアンダーライン）

Markup: <h1 class="mod-text {{modifier_class}}">h1 text. h1 text. h1 text. h1 text. h1 text.</h1>
<h2 class="mod-text {{modifier_class}}">h2 text. h2 text. h2 text. h2 text. h2 text.</h2>
<p class="mod-text {{modifier_class}}">text. text. text. text. text. text. text. text. text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><a class="mod-text__link" href="javascript:void(0);">link text. link text. link text.</a> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><b>b text. b text. b text. b text. b text. b text. b text. b text.</b> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><strong>strong text. strong text. strong text. strong text. strong text.</strong> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><span class="mod-text__label">label text.</span></p>
<p class="mod-text {{modifier_class}}"><i class="mod-text__icon mod-icon mod-icon--type-a-a--a">icon txt</i>icon with text. icon with text. icon with text.</p>
<span class="mod-text {{modifier_class}}">span text. span text. span text. span text. span text.</span>

mod-text--underline-false - アンダーラインなし（デフォルト）
mod-text--underline-true - アンダーラインあり

Style guide: text.option.underline
*/
.mod-text--underline-true {
  text-decoration: underline;
}
/*
Option: Inline

ModText のオプション（インライン）

Markup: <h1 class="mod-text {{modifier_class}}">h1 text. h1 text. h1 text. h1 text. h1 text.</h1>
<h2 class="mod-text {{modifier_class}}">h2 text. h2 text. h2 text. h2 text. h2 text.</h2>
<p class="mod-text {{modifier_class}}">text. text. text. text. text. text. text. text. text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><a class="mod-text__link" href="javascript:void(0);">link text. link text. link text.</a> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><b>b text. b text. b text. b text. b text. b text. b text. b text.</b> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><strong>strong text. strong text. strong text. strong text. strong text.</strong> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><span class="mod-text__label">label text.</span></p>
<p class="mod-text {{modifier_class}}"><i class="mod-text__icon mod-icon mod-icon--type-a-a--a">icon txt</i>icon with text. icon with text. icon with text.</p>
<span class="mod-text {{modifier_class}}">span text. span text. span text. span text. span text.</span>

mod-text--inline-false - ブロック表示（デフォルト）
mod-text--inline-true - インライン表示

Style guide: text.option.inline
*/
.mod-text--inline-true {
  display: inline;
}
/*
Option: Size

ModText のオプション（文字サイズ）

Markup: <h1 class="mod-text {{modifier_class}}">h1 text. h1 text. h1 text. h1 text. h1 text.</h1>
<h2 class="mod-text {{modifier_class}}">h2 text. h2 text. h2 text. h2 text. h2 text.</h2>
<p class="mod-text {{modifier_class}}">text. text. text. text. text. text. text. text. text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><a class="mod-text__link" href="javascript:void(0);">link text. link text. link text.</a> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><b>b text. b text. b text. b text. b text. b text. b text. b text.</b> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><strong>strong text. strong text. strong text. strong text. strong text.</strong> text. text. text. text. text. </p>
<p class="mod-text {{modifier_class}}"><span class="mod-text__label">label text.</span></p>
<p class="mod-text {{modifier_class}}"><i class="mod-text__icon mod-icon mod-icon--type-a-a--a">icon txt</i>icon with text. icon with text. icon with text.</p>
<span class="mod-text {{modifier_class}}">span text. span text. span text. span text. span text.</span>

mod-text--size-10 - 10px 相当
mod-text--size-11 - 11px 相当
mod-text--size-12 - 12px 相当
mod-text--size-13 - 13px 相当
mod-text--size-14 - 14px 相当（デフォルト）
mod-text--size-16 - 16px 相当
mod-text--size-17 - 17px 相当
mod-text--size-15 - 15px 相当
mod-text--size-18 - 18px 相当
mod-text--size-20 - 20px 相当
mod-text--size-22 - 22px 相当
mod-text--size-23 - 23px 相当
mod-text--size-24 - 24px 相当

Style guide: text.option.size
*/
.mod-text--size-10 {
  font-size: 10px;
}
.mod-text--size-11 {
  font-size: 11px;
}
.mod-text--size-12 {
  font-size: 12px;
}
.mod-text--size-13 {
  font-size: 13px;
}
.mod-text--size-14 {
  font-size: 14px !important;
}
.mod-text--size-16 {
  font-size: 16px !important;
}
.mod-text--size-15 {
  font-size: 15px;
}
.mod-text--size-17 {
  font-size: 17px;
}
.mod-text--size-18 {
  font-size: 18px;
}
.mod-text--size-20 {
  font-size: 20px;
}
.mod-text--size-22 {
  font-size: 22px;
}
.mod-text--size-23 {
  font-size: 23px;
}
.mod-text--size-24 {
  font-size: 24px;
}
/*
mod-text__label

デバイステキストの内部要素（ラベル）のスタイル

Weight: 100

Style guide: text.label
*/
/*
Option: Label Types

ModText のオプション（ラベルタイプ）

Markup: <h1 class="mod-text"><span class="mod-text__label {{modifier_class}}">h1 text. h1 text. h1 text. h1 text. h1 text.</span></h1>
<h2 class="mod-text"><span class="mod-text__label {{modifier_class}}">h2 text. h2 text. h2 text. h2 text. h2 text.</span></h2>

mod-text__label--type-a-a--a - ラベルタイプ a-a--a
mod-text__label--type-a-a--b - ラベルタイプ a-a--b

Style guide: text.label.type
*/
.mod-text__label--type-a-a--a,
.mod-text__label--type-a-a--b {
  overflow: hidden;
  padding: 0;
  line-height: 0;
  text-indent: -100%;
  white-space: nowrap;
  color: transparent;
  background-repeat: no-repeat;
  font-size: 0;
}
.mod-text__label--type-a-a--a,
.mod-text__label--type-a-a--b {
  background-image: url("../images/common/sprite_text.png");
}
.mod-text__label--type-a-a--a {
  width: 94px;
  height: 14px;
  background-position: 0px 0px;
}
.mod-text__label--type-a-a--b {
  width: 47px;
  height: 7px;
  background-position: 0px -8px;
  -webkit-background-size: 47px 15px;
          background-size: 47px 15px;
}
/*
mod-text__link

デバイステキストの内部要素（リンク）のスタイル

Weight: 200

Style guide: text.link
*/
/*
Option: Themes

Weight: -100

ModText のオプション（リンクのテーマ）

Markup: <p class="mod-text"><a class="mod-text__link  {{modifier_class}}" href="javascript:void(0);">h1 text. h1 text. h1 text.</a> h1 text. h1 text.</p>

mod-text__link--theme-default - デフォルト
mod-text__link--theme-default--a - デフォルト
mod-text__link--theme-a-a--a - サンプルテーマ a-a--a
mod-text__link--theme-a-a--a-underline - サンプルテーマ a-a--a-underline

Style guide: text.link.theme
*/
.mod-text__link--theme-default--a {
  color: #444;
}
.mod-text__link--theme-a-a--a:link,
.mod-text__link--theme-a-a--a:visited {
  text-decoration: none;
}
.mod-text__link--theme-a-a--a:hover,
.mod-text__link--theme-a-a--a:focus {
  text-decoration: underline;
}
.mod-text__link--theme-a-a--a-underline:link,
.mod-text__link--theme-a-a--a-underline:visited {
  text-decoration: underline;
}
.mod-text__link--theme-a-a--a-underline:hover,
.mod-text__link--theme-a-a--a-underline:focus {
  text-decoration: none;
}
.mod-text__link--theme-a-a--a {
  color: #000;
}
.mod-text__link--theme-a-a--a-underline {
  color: #006cb8;
}
/*
mod-textgroup

デバイステキストグループのスタイル

Weight: 300

Style guide: text.group
*/
.mod-textgroup {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mod-textgroup__item__bullet {
  position: absolute;
  top: 0;
  left: 0;
  vertical-align: middle;
  text-align: center;
}
/*
Default

ModTextgroup のデフォルトスタイル

Markup: <ul class="{{modifier_class}}">
  <li class="{{modifier_class}}__item mod-text"><span class="{{modifier_class}}__item__bullet">・</span>textgroup item. textgroup item. textgroup item. textgroup item. </li>
  <li class="{{modifier_class}}__item mod-text">
    <ul class="{{modifier_class}}">
      <li class="{{modifier_class}}__item mod-text"><span class="{{modifier_class}}__item__bullet">・</span>nested textgroup item. nested textgroup item. nested textgroup item. </li>
      <li class="{{modifier_class}}__item mod-text"><span class="{{modifier_class}}__item__bullet">・</span>nested textgroup item. nested textgroup item. nested textgroup item. </li>
    </ul>
  </li>
</ul>
<!-- ordered list -->
<ol class="{{modifier_class}}">
  <li class="{{modifier_class}}__item mod-text"><span class="{{modifier_class}}__item__bullet">1.</span>textgroup item. textgroup item. textgroup item. textgroup item. </li>
  <li class="{{modifier_class}}__item mod-text">
    <ol class="{{modifier_class}}">
      <li class="{{modifier_class}}__item mod-text"><span class="{{modifier_class}}__item__bullet">1.</span>nested textgroup item. nested textgroup item. nested textgroup item. </li>
      <li class="{{modifier_class}}__item mod-text"><span class="{{modifier_class}}__item__bullet">2.</span>nested textgroup item. nested textgroup item. nested textgroup item. </li>
    </ol>
  </li>
</ol>
<!-- description list -->
<dl class="{{modifier_class}}">
  <dt class="{{modifier_class}}__title mod-text">textgroup item. textgroup item. textgroup item. textgroup item. </dt>
  <dd class="{{modifier_class}}__description mod-text">
    <dl class="{{modifier_class}}">
      <dt class="{{modifier_class}}__title mod-text">nested textgroup item. nested textgroup item. nested textgroup item. </dt>
      <dd class="{{modifier_class}}__description mod-text">nested textgroup item. nested textgroup item. nested textgroup item. </dd>
    </dl>
  </dd>
</dl>

mod-textgroup - デフォルトスタイル

Style guide: text.group.default
*/
.mod-textgroup__item {
  padding-left: 1.6em;
  *zoom: 1;
}
.mod-textgroup__item__bullet {
  width: 1.5em;
}
/*
mod-btn

ボタンのスタイル

Weight: -1080

Style guide: btn
*/
.mod-btn {
  display: block;
  overflow: hidden;
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: middle;
  text-align: center;
  line-height: 1;
  letter-spacing: 0;
  background-color: transparent;
  font-weight: normal;
  border: 0;
  *font-size: 0;
}
.mod-btn__label {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 5px 0;
  text-decoration: none;
  vertical-align: middle;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0;
  background-color: transparent;
  font-weight: normal;
  font-size: 0.87em;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
/*
Default

ModBtn のデフォルトスタイル

Weight: -100

Markup: <a class="{{modifier_class}}" href="javascript:void(0);">
  <span class="{{modifier_class}}__label">label</span>
</a>
<form action="javascript:void(0);" method="get">
  <label class="{{modifier_class}}">
    <input class="{{modifier_class}}__label" type="submit" value="label" />
  </label>
</form>

mod-btn - デフォルトスタイル

Style guide: btn.option.default
*/
.mod-btn {
  display: block;
}
.mod-btn__label {
  display: block;
}
/*
Option: Themes

ModBtn のオプション（テーマ）

Weight: -100

Markup: <a class="mod-btn  {{modifier_class}}" href="javascript:void(0);">
  <span class="mod-btn__label  mod-btn__label--type-a-a--b">label</span>
</a>
<a class="mod-btn  {{modifier_class}}  {{modifier_class}}--current" href="javascript:void(0);">
  <span class="mod-btn__label  mod-btn__label--type-a-a--b">label</span>
</a>
<form action="javascript:void(0);" method="get">
  <label class="mod-btn  {{modifier_class}}">
    <input class="mod-btn__label  mod-btn__label--type-a-a--b" type="submit" value="label" />
  </label>
</form>
<form action="javascript:void(0);" method="get">
  <label class="mod-btn  {{modifier_class}}  {{modifier_class}}--current">
    <input class="mod-btn__label  mod-btn__label--type-a-a--b" type="submit" value="label" />
  </label>
</form>

mod-btn--theme-default - デフォルト
mod-btn--theme-a-a--a - サンプルテーマ a-a--a
mod-btn--theme-a-a--b - サンプルテーマ a-a--b
mod-btn--theme-a-a--c - サンプルテーマ a-a--c

Style guide: btn.option.theme
*/
.mod-btn--theme-a-a--a,
.mod-btn--theme-a-a--b,
.mod-btn--theme-a-a--c {
  padding: 10px;
}
.mod-btn--theme-a-a--a {
  background-color: #000;
}
.mod-btn--theme-a-a--b {
  background-color: #333;
}
.mod-btn--theme-a-a--c {
  color: #fff;
  background-color: #666;
  border-radius: 5px;
  -webkit-box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
          box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
}
/*
mod-btn__label

ボタンの内部要素（ラベル）のスタイル

Weight: 100

Style guide: btn.label
*/
/*
Option: Label Types

ModBtn のオプション（ラベルタイプ）

Markup: <a class="mod-btn" href="javascript:void(0);">
  <span class="mod-btn__label  {{modifier_class}}">label</span>
</a>
<a class="mod-btn" href="javascript:void(0);">
  <span class="mod-btn__label  {{modifier_class}}  {{modifier_class}}--current">label</span>
</a>
<form action="javascript:void(0);" method="get">
  <label class="mod-btn">
    <input class="mod-btn__label  {{modifier_class}}" type="submit" value="label" />
  </label>
  <label class="mod-btn">
    <input class="mod-btn__label  {{modifier_class}}  {{modifier_class}}--current" type="submit" value="label" />
  </label>
</form>

Weight: -100

mod-btn__label--type-a-a--a - ラベルタイプ a-a--a
mod-btn__label--type-a-a--b - ラベルタイプ a-a--b

Style guide: btn.label.type
*/
.mod-btn__label--type-a-a--a,
.mod-btn__label--type-a-a--b {
  overflow: hidden;
  padding: 0;
  line-height: 0;
  text-indent: -100%;
  white-space: nowrap;
  color: transparent;
  background-repeat: no-repeat;
  font-size: 0;
}
.mod-btn__label--type-a-a--a,
.mod-btn__label--type-a-a--b {
  background-image: url("../images/common/sprite_btn.png");
}
.mod-btn__label--type-a-a--a {
  width: 84px;
  height: 14px;
  background-position: 0px -32px;
}
.mod-btn__label--type-a-a--a:hover,
.mod-btn__label--type-a-a--a:focus {
  background-position: 0px -16px;
}
.mod-btn__label--type-a-a--a--current {
  cursor: default;
  background-position: 0px 0px;
}
.mod-btn__label--type-a-a--a--current:hover,
.mod-btn__label--type-a-a--a--current:focus {
  background-position: 0px 0px;
}
.mod-btn__label--type-a-a--b {
  width: 42px;
  height: 7px;
  background-position: -43px 0px;
  -webkit-background-size: 85px 39px;
          background-size: 85px 39px;
}
.mod-btn__label--type-a-a--b:hover,
.mod-btn__label--type-a-a--b:focus {
  background-position: 0px -32px;
}
.mod-btn__label--type-a-a--b--current {
  cursor: default;
  background-position: 0px -24px;
}
.mod-btn__label--type-a-a--b--current:hover,
.mod-btn__label--type-a-a--b--current:focus {
  background-position: 0px -24px;
}
/*
Option: Label Position

ModBtn のオプション（ラベルの位置）

Markup: <a class="mod-btn" href="javascript:void(0);">
  <span class="mod-btn__label  {{modifier_class}}">label</span>
</a>
<form action="javascript:void(0);" method="get">
  <label class="mod-btn">
    <input class="mod-btn__label  {{modifier_class}}" type="submit" value="label" />
  </label>
</form>

mod-btn__label--inline-false - インライン、無効
mod-btn__label--inline-true - インライン、有効
mod-btn__label--absolute-center - 絶対配置、上下左右中央
mod-btn__label--absolute-left - 絶対配置、上下中央、左寄せ
mod-btn__label--absolute-right - 絶対配置、上下中央、右寄せ

Style guide: btn.label.position
*/
.mod-btn__label--inline-true {
  display: inline-block;
  width: auto;
}
.mod-btn__label--absolute-center,
.mod-btn__label--absolute-left,
.mod-btn__label--absolute-right {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
.mod-btn__label--absolute-center {
  right: 0;
  left: 0;
  margin: auto;
}
.mod-btn__label--absolute-left {
  left: 0;
}
.mod-btn__label--absolute-right {
  right: 0;
}
/*
mod-btn__icon

ボタンの内部要素（アイコン）のスタイル

Weight: 200

Style guide: btn.icon
*/
/*
Option: Icon Position

ModBtn のオプション（アイコンの位置）

Markup: <a class="mod-btn" href="javascript:void(0);">
  <i class="mod-btn__icon  {{modifier_class}}  mod-icon  mod-icon--type-a-a--a"></i>
  <span class="mod-btn__label  mod-btn__label--inline-true">label</span>
  <i class="mod-btn__icon  {{modifier_class}}  mod-icon  mod-icon--type-a-b--a"></i>
</a>
<form action="javascript:void(0);" method="get">
  <label class="mod-btn">
    <i class="mod-btn__icon  {{modifier_class}}  mod-icon  mod-icon--type-a-a--a"></i>
      <input class="mod-btn__label  mod-btn__label--inline-true" type="submit" value="label" />
    <i class="mod-btn__icon  {{modifier_class}}  mod-icon  mod-icon--type-a-b--a"></i>
  </label>
</form>

mod-btn__icon--inline-left - インライン、左
mod-btn__icon--inline-right - インライン、右
mod-btn__icon--block-top - ブロック、上
mod-btn__icon--block-bottom - ブロック、下
mod-btn__icon--absolute-left - 絶対配置、左
mod-btn__icon--absolute-right - 絶対配置、右
mod-btn__icon--absolute-center - 絶対配置、上下左右中央

Style guide: btn.icon.position
*/
.mod-btn__icon--inline-left,
.mod-btn__icon--inline-right {
  display: inline-block;
}
.mod-btn__icon--inline-left {
  margin-right: 5px;
}
.mod-btn__icon--inline-right {
  margin-left: 5px;
}
.mod-btn__icon--block-top {
  margin: 0 auto 5px;
}
.mod-btn__icon--block-bottom {
  margin: 5px auto 0;
}
.mod-btn__icon--absolute-left,
.mod-btn__icon--absolute-right,
.mod-btn__icon--absolute-center {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.mod-btn__icon--absolute-left {
  left: 0;
}
.mod-btn__icon--absolute-right {
  right: 0;
}
.mod-btn__icon--absolute-center {
  left: 0;
  right: 0;
}
/*
mod-pict

画像やそれに準ずる要素のスタイル

Weight: -1070

Style guide: pict
*/
.mod-pict {
  display: block;
  position: relative;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  line-height: 0;
  letter-spacing: 0;
  background-color: transparent;
  font-size: 0;
  font-weight: normal;
  border: 0;
}
.mod-pict__src {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 0;
  border: 0;
  *display: inline;
  *zoom: 1;
}
/*
Default

ModPict のデフォルトスタイル

Markup: <figure class="{{modifier_class}}">
  <img class="{{modifier_class}}__src" src="http://placehold.it/400x300.png" alt="" width="400" height="300" />
</figure>
<figure class="{{modifier_class}}">
  <img class="{{modifier_class}}__src" src="http://placehold.it/300x400.png" alt="" width="300" height="400" />
</figure>
<figure class="{{modifier_class}}">
  <iframe class="{{modifier_class}}__src" width="400" height="300" src="//www.youtube.com/embed/Xp697DqsbUU?rel=0" frameborder="0" allowfullscreen></iframe>
</figure>

Weight: -100

mod-pict - デフォルトスタイル

Style guide: pict.option.default
*/
/*
Option: Aligns

ModPict のオプション（整列）

Markup: <figure class="mod-pict {{modifier_class}}">
  <img class="mod-pict__src" src="http://placehold.it/400x300.png" alt="" width="400" height="300" />
</figure>
<figure class="mod-pict {{modifier_class}}">
  <img class="mod-pict__src" src="http://placehold.it/300x400.png" alt="" width="300" height="400" />
</figure>
<figure class="mod-pict {{modifier_class}}">
  <iframe class="mod-pict__src" width="400" height="300" src="//www.youtube.com/embed/Xp697DqsbUU?rel=0" frameborder="0" allowfullscreen></iframe>
</figure>

mod-pict--align-left - 左寄せ（デフォルト）
mod-pict--align-center - 中央寄せ
mod-pict--align-right - 右寄せ

Style guide: pict.option.align
*/
.mod-pict--align-left {
  text-align: left;
}
.mod-pict--align-center {
  text-align: center;
}
.mod-pict--align-right {
  text-align: right;
}
/*
Option: Fitting

ModPict のオプション（サイズのフィット）

Markup: <figure class="mod-pict">
  <img class="mod-pict__src {{modifier_class}}" src="http://placehold.it/400x300.png" alt="" width="400" height="300" />
</figure>
<figure class="mod-pict {{modifier_class}}">
  <img class="mod-pict__src {{modifier_class}}" src="http://placehold.it/300x400.png" alt="" width="300" height="400" />
</figure>
<figure class="mod-pict">
  <iframe class="mod-pict__src {{modifier_class}}" width="400" height="300" src="//www.youtube.com/embed/Xp697DqsbUU?rel=0" frameborder="0" allowfullscreen></iframe>
</figure>

mod-pict__src--fit-none - フィットしない（デフォルト）
mod-pict__src--fit-width - 幅にフィット
mod-pict__src--fit-height - 高さにフィット

Style guide: pict.option.fit
*/
.mod-pict__src--fit-width {
  width: 100%;
  height: auto;
}
.mod-pict__src--fit-height {
  width: auto;
  height: 100%;
}
/*
mod-grid

グリッドのスタイル

Weight: -1060

Style guide: grid
*/
.mod-grid,
.mod-grid-a-a,
.mod-grid-b-a,
.mod-grid-c-a {
  display: block;
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  vertical-align: top;
  background-color: transparent;
  border: 0;
  *zoom: 1;
}
.mod-grid:before,
.mod-grid-a-a:before,
.mod-grid-b-a:before,
.mod-grid-c-a:before,
.mod-grid:after,
.mod-grid-a-a:after,
.mod-grid-b-a:after,
.mod-grid-c-a:after {
  content: "";
  display: table;
}
.mod-grid:after,
.mod-grid-a-a:after,
.mod-grid-b-a:after,
.mod-grid-c-a:after {
  clear: both;
}
.mod-grid__cell,
.mod-grid-a-a__cell--a,
.mod-grid-a-a__cell--b,
.mod-grid-b-a__cell--a,
.mod-grid-b-a__cell--b,
.mod-grid-b-a__cell--c,
.mod-grid-c-a__cell--a,
.mod-grid-c-a__cell--b,
.mod-grid-c-a__cell--c,
.mod-grid-c-a__cell--d {
  display: block;
  overflow: hidden;
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
  border: 0;
  *zoom: 1;
}
.mod-grid__cell:before,
.mod-grid-a-a__cell--a:before,
.mod-grid-a-a__cell--b:before,
.mod-grid-b-a__cell--a:before,
.mod-grid-b-a__cell--b:before,
.mod-grid-b-a__cell--c:before,
.mod-grid-c-a__cell--a:before,
.mod-grid-c-a__cell--b:before,
.mod-grid-c-a__cell--c:before,
.mod-grid-c-a__cell--d:before,
.mod-grid__cell:after,
.mod-grid-a-a__cell--a:after,
.mod-grid-a-a__cell--b:after,
.mod-grid-b-a__cell--a:after,
.mod-grid-b-a__cell--b:after,
.mod-grid-b-a__cell--c:after,
.mod-grid-c-a__cell--a:after,
.mod-grid-c-a__cell--b:after,
.mod-grid-c-a__cell--c:after,
.mod-grid-c-a__cell--d:after {
  content: "";
  display: table;
}
.mod-grid__cell:after,
.mod-grid-a-a__cell--a:after,
.mod-grid-a-a__cell--b:after,
.mod-grid-b-a__cell--a:after,
.mod-grid-b-a__cell--b:after,
.mod-grid-b-a__cell--c:after,
.mod-grid-c-a__cell--a:after,
.mod-grid-c-a__cell--b:after,
.mod-grid-c-a__cell--c:after,
.mod-grid-c-a__cell--d:after {
  clear: both;
}
/*
Default

ModGrid のデフォルトスタイル（カラムの設定がないので使用する際に都度設定する必要がある）

Weight: -100

Markup: <div class="{{modifier_class}}">
  <div class="{{modifier_class}}__cell">
    <div class="mod-box">
      <div class="mod-box__container">
        <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell">
    <div class="mod-box">
      <div class="mod-box__container">
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      </div>
    </div>
  </div>
</div>

mod-grid - デフォルトスタイル

Style guide: grid.option.default
*/
/*
Variations

ModGrid の二分割スタイル

Markup: <div class="{{modifier_class}}">
  <div class="{{modifier_class}}__cell--a">
    <div class="mod-box">
      <div class="mod-box__container">
        <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell--b">
    <div class="mod-box">
      <div class="mod-box__container">
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      </div>
    </div>
  </div>
</div>

mod-grid-a-a - 均等二分割スタイル

Style guide: grid.option.a.a
*/
.mod-grid-a-a__cell--a {
  float: left;
  width: 49.9%;
}
.mod-grid-a-a__cell--b {
  float: right;
  width: 49.9%;
}
/*
Variations

ModGrid の三分割スタイル

Markup: <div class="{{modifier_class}}">
  <div class="{{modifier_class}}__cell--a">
    <div class="mod-box">
      <div class="mod-box__container">
        <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell--b">
    <div class="mod-box">
      <div class="mod-box__container">
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell--c">
    <div class="mod-box">
      <div class="mod-box__container">
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
      </div>
    </div>
  </div>
</div>

mod-grid-b-a - 均等三分割スタイル

Style guide: grid.option.b.a
*/
.mod-grid-b-a__cell--a {
  float: left;
  width: 33.3%;
}
.mod-grid-b-a__cell--b {
  float: left;
  width: 33.3%;
}
.mod-grid-b-a__cell--c {
  float: right;
  width: 33.3%;
}
/*
Variations

ModGrid の四分割スタイル

Markup: <div class="{{modifier_class}}">
  <div class="{{modifier_class}}__cell--a">
    <div class="mod-box">
      <div class="mod-box__container">
        <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell--b">
    <div class="mod-box">
      <div class="mod-box__container">
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell--c">
    <div class="mod-box">
      <div class="mod-box__container">
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell--d">
    <div class="mod-box">
      <div class="mod-box__container">
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
      </div>
    </div>
  </div>
</div>

mod-grid-c-a - 均等四分割スタイル

Style guide: grid.option.c.a
*/
.mod-grid-c-a__cell--a {
  float: left;
  width: 18.9%;
}
.mod-grid-c-a__cell--b {
  float: left;
  width: 36%;
}
.mod-grid-c-a__cell--c {
  float: left;
  width: 24.9%;
}
.mod-grid-c-a__cell--d {
  float: right;
  width: 20%;
}
/*
mod-grid2

グリッドのスタイル（`display: table-cell;` 版）

Weight: 100

Style guide: grid.ver2
*/
.mod-grid2 {
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  vertical-align: top;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.mod-grid2__cell {
  display: table-cell;
  position: relative;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: inherit;
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/*
Default

ModGrid2 のデフォルトスタイル。内包するグリッドの各カラム幅はコンテンツに応じて自動調整される。
グリッドのセルに内包されている要素の高さを揃えたい場合は `height:100%` を設定し、
`box-sizing:border-box;` を指定している要素の場合は、更に `padding` の設定を解除する（Webkit、Blink 対策）。

Markup: <!-- 2カラム -->
<div class="{{modifier_class}}">
  <div class="{{modifier_class}}__cell">
    <div class="mod-box">
      <div class="mod-box__container">
        <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell">
    <div class="mod-box">
      <div class="mod-box__container">
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      </div>
    </div>
  </div>
</div>
<!-- 3カラム -->
<div class="{{modifier_class}}">
  <div class="{{modifier_class}}__cell">
    <div class="mod-box">
      <div class="mod-box__container">
        <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell">
    <div class="mod-box">
      <div class="mod-box__container">
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell">
    <div class="mod-box">
      <div class="mod-box__container">
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
      </div>
    </div>
  </div>
</div>
<!-- 4カラム -->
<div class="{{modifier_class}}">
  <div class="{{modifier_class}}__cell">
    <div class="mod-box">
      <div class="mod-box__container">
        <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell">
    <div class="mod-box">
      <div class="mod-box__container">
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell">
    <div class="mod-box">
      <div class="mod-box__container">
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
      </div>
    </div>
  </div>
  <div class="{{modifier_class}}__cell">
    <div class="mod-box">
      <div class="mod-box__container">
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        <p class="mod-btn">
          <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
        </p>
      </div>
    </div>
  </div>
</div>

mod-grid2 - デフォルトスタイル

Weight: -100

Style guide: grid.ver2.option.default
*/
.mod-grid2__w25 {
  width: 25%;
}
.mod-grid2__w25__border {
  border-right: 1px solid #e1e9f2;
}
.mod-grid2__w25__border:first-child {
  border-left: 1px solid #e1e9f2;
}
.mod-grid2__sp__block {
  border-collapse: separate;
  border-spacing: 40px 0;
}
.mod-grid2__w33 {
  width: 33%;
}
.mod-grid2__w20 {
  width: 20%;
  border-right: 1px dashed #eaf2f6;
}
.mod-grid2__w20:last-child {
  border-right: none;
}
/*
mod-responsive-grid

レスポンシブグリッドのスタイル

Weight: -1055

Style guide: responsive-grid
*/
.mod-responsive-grid {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  vertical-align: top;
  background-color: transparent;
  border: 0;
  *zoom: 1;
}
.mod-responsive-grid:before,
.mod-responsive-grid:after {
  content: "";
  display: table;
}
.mod-responsive-grid:after {
  clear: both;
}
.mod-responsive-grid__cell {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
  border: 0;
  *zoom: 1;
}
.mod-responsive-grid__cell:before,
.mod-responsive-grid__cell:after {
  content: "";
  display: table;
}
.mod-responsive-grid__cell:after {
  clear: both;
}
/*
Default

ModResponsiveGrid のデフォルトスタイル（カラムの設定がないので使用する際に都度設定する必要がある）

Weight: -100

Markup:
<div class="{{modifier_class}}">
  <div class="{{modifier_class}}__cell">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>
{{!-- カラム落ち --}}
<div class="{{modifier_class}}">
  <div class="{{modifier_class}}__cell {{modifier_class}}__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell {{modifier_class}}__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-responsive-grid - デフォルトスタイル

Style guide: responsive-grid.option.default
*/
/*
Variations

ModResponsiveGridA の 2列 カラム落ち スタイル

Markup:
<div class="{{modifier_class}}  mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-responsive-grid-a - デフォルトスタイル

Style guide: responsive-grid.option.a
*/
.mod-responsive-grid-a__cell--a {
  width: 50%;
  float: left;
}
.mod-responsive-grid-a__cell--b {
  width: 50%;
  float: left;
}
/*
Variations

ModResponsiveGrid の 3列 カラム落ち スタイル

Markup:
<div class="{{modifier_class}}  mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--c  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-responsive-grid-b - デフォルトスタイル

Style guide: responsive-grid.option.b
*/
.mod-responsive-grid-b__cell--a {
  width: 33.3%;
  float: left;
}
.mod-responsive-grid-b__cell--b {
  width: 33.3%;
  float: left;
}
.mod-responsive-grid-b__cell--c {
  width: 33.3%;
  float: left;
}
/*
Variations

ModResponsiveGrid の 4列 カラム落ち スタイル

Markup:
<div class="{{modifier_class}} mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--c  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--d  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-responsive-grid-c - デフォルトスタイル

Style guide: responsive-grid.option.c
*/
.mod-responsive-grid-c__cell--a {
  width: 25%;
  float: left;
}
.mod-responsive-grid-c__cell--b {
  width: 25%;
  float: left;
}
.mod-responsive-grid-c__cell--c {
  width: 25%;
  float: left;
}
.mod-responsive-grid-c__cell--d {
  width: 25%;
  float: left;
}
/*
Variations

ModResponsiveGridA の 4列 → 2列 スタイル

Markup: <div class="{{modifier_class}} mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a  mod-responsive-grid__cell">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b  mod-responsive-grid__cell">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--c  mod-responsive-grid__cell">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--d  mod-responsive-grid__cell">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-responsive-grid-d - デフォルトスタイル

Style guide: responsive-grid.option.d
*/
.mod-responsive-grid-d__cell--a {
  width: 25%;
  float: left;
}
.mod-responsive-grid-d__cell--b {
  width: 25%;
  float: left;
}
.mod-responsive-grid-d__cell--c {
  width: 25%;
  float: left;
}
.mod-responsive-grid-d__cell--d {
  width: 25%;
  float: left;
}
/*
mod-responsive-grid2

レスポンシブグリッドのスタイル（`display: table-cell;` 版）

Weight: 100

Style guide: responsive-grid.ver2
*/
.mod-responsive-grid2 {
  display: table;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  vertical-align: top;
  border: 0;
}
.mod-responsive-grid2__cell {
  display: table-cell;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: inherit;
  border: 0;
}
/*
Default

ModResponsive Grid2 デフォルトスタイル

Weight: -100

Markup: <div class="{{modifier_class}}">
  <div class="{{modifier_class}}__cell">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>
{{!-- カラム落ち --}}
<div class="{{modifier_class}}">
  <div class="{{modifier_class}}__cell {{modifier_class}}__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell {{modifier_class}}__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-responsive-grid2 - デフォルトスタイル

Style guide: responsive-grid.ver2.options.default
*/
/*
Variations

ModResponsiveGrid2 の 2列 カラム落ち スタイル

Markup:
<div class="{{modifier_class}} mod-responsive-grid2">
  <div class="{{modifier_class}}__cell--a  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-responsive-grid2-a - デフォルトスタイル

Style guide: responsive-grid.ver2.options.a
*/
.mod-responsive-grid2-a__cell--a {
  width: 50%;
}
.mod-responsive-grid2-a__cell--b {
  width: 50%;
}
/*
Variations

ModResponsiveGrid2 の 3列 カラム落ち スタイル

Markup:
<div class="{{modifier_class}} mod-responsive-grid2">
  <div class="{{modifier_class}}__cell--a  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--c  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-responsive-grid2-b - デフォルトスタイル

Style guide: responsive-grid.ver2.options.b
*/
.mod-responsive-grid2-b__cell--a {
  width: 33.3%;
}
.mod-responsive-grid2-b__cell--b {
  width: 33.3%;
}
.mod-responsive-grid2-b__cell--c {
  width: 33.3%;
}
/*
Variations

ModResponsiveGrid2 の 4列 カラム落ち スタイル

Markup:
<div class="{{modifier_class}}  mod-responsive-grid2">
  <div class="{{modifier_class}}__cell--a  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--c  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--d  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

Style guide: responsive-grid.ver2.options.c
*/
.mod-responsive-grid2-c__cell--a {
  width: 25%;
}
.mod-responsive-grid2-c__cell--b {
  width: 25%;
}
.mod-responsive-grid2-c__cell--c {
  width: 25%;
}
.mod-responsive-grid2-c__cell--d {
  width: 25%;
}
/*
mod-box

ボックスのスタイル

Weight: -1050

Style guide: box
*/
.mod-box {
  display: block;
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  background-color: transparent;
  border: 0;
  *zoom: 1;
}
.mod-box:before,
.mod-box:after {
  content: "";
  display: table;
}
.mod-box:after {
  clear: both;
}
.mod-box__container {
  display: block;
  position: relative;
  margin: 0;
  text-align: left;
  *zoom: 1;
}
.mod-box__container:before,
.mod-box__container:after {
  content: "";
  display: table;
}
.mod-box__container:after {
  clear: both;
}
/*
Default

ModBox のデフォルトスタイル

Weight: -100

Markup: <div class="{{modifier_class}}">
  <div class="{{modifier_class}}__container">
    <h1 class="mod-text mod-text--weight-bold mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict helper--float-left helper--padding-right10 helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-box - デフォルトスタイル

Style guide: box.option.default
*/
/*
Option: Themes

ModBox のオプション（テーマ）

Weight: -100

Markup: <div class="mod-box {{modifier_class}}">
  <div class="mod-box__container">
    <h1 class="mod-text mod-text--weight-bold mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict helper--float-left helper--padding-right10 helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-box--theme-default - デフォルト
mod-box--theme-a-a - テーマ a-a
mod-box--theme-a-b - テーマ a-b
mod-box--theme-a-c - テーマ a-c
mod-box--theme-a-d - テーマ a-d
mod-box--theme-a-e - テーマ a-e
mod-box--theme-a-f - テーマ a-f
mod-box--theme-a-g - テーマ a-g
mod-box--theme-a-h - テーマ a-h
mod-box--theme-a-i - テーマ a-i
mod-box--theme-a-j - テーマ a-j
mod-box--theme-a-k - テーマ a-k
mod-box--theme-a-l - テーマ a-l
mod-box--theme-a-m - テーマ a-m
mod-box--theme-a-n - テーマ a-n
mod-box--theme-a-o - テーマ a-o
mod-box--theme-a-p - テーマ a-p
mod-box--theme-a-q - テーマ a-q
mod-box--theme-a-r - テーマ a-r
mod-box--theme-a-s - テーマ a-s
mod-box--theme-a-t - テーマ a-t
mod-box--theme-a-u - テーマ a-u
mod-box--theme-a-v - テーマ a-v
mod-box--theme-a-w - テーマ a-w
mod-box--theme-a-x - テーマ a-x
mod-box--theme-a-y - テーマ a-y
mod-box--theme-a-z - テーマ a-z
mod-box--theme-b-a - テーマ b-a
mod-box--theme-b-b - テーマ b-b
mod-box--theme-b-c - テーマ b-c
mod-box--theme-b-d - テーマ b-d
mod-box--theme-b-e - テーマ b-e
mod-box--theme-b-f - テーマ b-f
mod-box--theme-b-g - テーマ b-g
mod-box--theme-b-h - テーマ b-h
mod-box--theme-b-i - テーマ b-i
mod-box--theme-b-j - テーマ b-j
mod-box--theme-b-k - テーマ b-k
mod-box--theme-b-l - テーマ b-l
mod-box--theme-b-m - テーマ b-m
mod-box--theme-b-n - テーマ b-n
mod-box--theme-b-o - テーマ b-o
mod-box--theme-b-p - テーマ b-p
mod-box--theme-b-q - テーマ b-q

Style guide: box.option.theme
*/
.mod-box--theme-a-a {
  color: #fff;
  background-color: #000;
}
.mod-box--theme-a-b {
  background-color: #f9f8f4;
}
.mod-box--theme-a-c {
  background-color: #3c5a88;
}
.mod-box--theme-a-d {
  background-color: #fff;
}
.mod-box--theme-a-e {
  background-color: #e1e9f2;
}
.mod-box--theme-a-f {
  padding-top: 57px;
  padding-bottom: 70px;
}
.mod-box--theme-a-g {
  padding-top: 35px;
  padding-bottom: 55px;
}
.mod-box--theme-a-h {
  padding-bottom: 30px;
}
.mod-box--theme-a-i {
  padding-top: 60px;
  padding-bottom: 70px;
}
.mod-box--theme-a-j {
  padding-bottom: 40px;
}
.mod-box--theme-a-k {
  padding-top: 60px;
}
.mod-box--theme-a-l {
  padding-top: 77px;
  padding-bottom: 70px;
}
.mod-box--theme-a-m {
  padding-bottom: 40px;
}
.mod-box--theme-a-n {
  margin-top: 30px;
}
.mod-box--theme-a-o {
  padding-top: 70px;
  padding-bottom: 67px;
}
.mod-box--theme-a-p {
  padding-top: 70px;
  padding-bottom: 70px;
}
.mod-box--theme-a-q {
  padding-bottom: 30px;
}
.mod-box--theme-a-r {
  background-color: #fff;
  -webkit-box-shadow: 2px 2px 2px rgba(199,199,199,0.5);
          box-shadow: 2px 2px 2px rgba(199,199,199,0.5);
  padding: 30px;
}
.mod-box--theme-a-s {
  padding-top: 65px;
  padding-bottom: 65px;
}
.mod-box--theme-a-t {
  padding-bottom: 95px;
}
.mod-box--theme-a-u {
  padding-top: 75px;
  padding-bottom: 70px;
}
.mod-box--theme-a-w {
  padding-top: 25px;
}
.mod-box--theme-a-x {
  padding-top: 30px;
  padding-bottom: 20px;
}
.mod-box--theme-a-y {
  padding-top: 70px;
  padding-bottom: 76px;
}
.mod-box--theme-a-z {
  padding-top: 66px;
  padding-bottom: 68px;
}
.mod-box--theme-b-a {
  margin-top: 17px;
  margin-bottom: 20px !important;
}
.mod-box--theme-b-b {
  margin-top: 80px;
}
.mod-box--theme-b-c {
  margin-bottom: 60px;
}
.mod-box--theme-b-d {
  padding-top: 30px;
  padding-bottom: 10px;
}
.mod-box--theme-b-e {
  margin-bottom: 15px;
}
.mod-box--theme-b-f {
  margin-bottom: 40px;
}
.mod-box--theme-b-g {
  margin-bottom: 20px;
}
.mod-box--theme-b-h {
  margin-top: 40px;
  margin-bottom: 50px;
}
.mod-box--theme-b-i {
  margin-bottom: 30px;
}
.mod-box--theme-b-j {
  margin-bottom: 60px;
}
.mod-box--theme-b-k {
  margin-bottom: 45px;
}
.mod-box--theme-b-l {
  margin-bottom: 40px;
}
.mod-box--theme-b-m {
  margin-bottom: 35px;
}
.mod-box--theme-b-n {
  margin-top: 40px;
  margin-bottom: 32px;
}
.mod-box--theme-b-o {
  margin-bottom: 30px;
}
.mod-box--theme-b-p {
  background-color: #fff;
  -webkit-box-shadow: 4px 4px 4px rgba(199,199,199,0.9);
          box-shadow: 4px 4px 4px rgba(199,199,199,0.9);
}
.mod-box--theme-b-q {
  margin-top: 30px;
}
/*
Option: Texture

ModBox のオプション（テクスチャの指定）

Markup: <div class="mod-box {{modifier_class}}">
  <div class="mod-box__container">
    <h1 class="mod-text mod-text--weight-bold mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict helper--float-left helper--padding-right10 helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-box--texture-none - デフォルト
mod-box--texture-a-a - テクスチャタイプ a-a

Style guide: box.option.texture
*/
.mod-box--texture-a-a {
  background-image: url("data:image/png;base64,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");
  background-repeat: repeat;
  background-position: 0 0;
}
/*
mod-box__container

ボックスの内部要素（コンテナ）のスタイル

Weight: 100

Style guide: box.container
*/
/*
Option: Container Width

ModBox のオプション（コンテナの幅指定）

Markup: <div class="mod-box">
  <div class="mod-box__container {{modifier_class}}">
    <h1 class="mod-text mod-text--weight-bold mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict helper--float-left helper--padding-right10 helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

mod-box__container--width-auto - デフォルト
mod-box__container--width-a-a - タイプ a-a
mod-box__container--width-a-b - タイプ a-b
mod-box__container--width-a-c - タイプ a-c
mod-box__container--width-a-d - タイプ a-d
mod-box__container--width-a-e - タイプ a-e
mod-box__container--width-a-f - タイプ a-f
mod-box__container--width-a-g - タイプ a-g
mod-box__container--width-a-h - タイプ a-h
mod-box__container--width-a-k - タイプ a-k
mod-box__container--width-a-l - タイプ a-l
mod-box__container--width-a-m - タイプ a-m
mod-box__container--width-a-n - タイプ a-n
mod-box__container--width-table-center - タイプ 端末の幅可変しても真ん中　バナーなど
mod-box__container--width-center - タイプ 端末の幅可変しても真ん中 tableタグなし
mod-box__container--width-table-center-sp - タイプ sp 端末の幅可変しても真ん中　バナーなど

Style guide: box.container.width
*/
.mod-box__container--width-a-a {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.mod-box__container--width-a-b {
  width: 1200px;
  margin: 0 auto;
}
.mod-box__container--width-a-c {
  max-width: 1240px;
  margin: 0 auto;
}
.mod-box__container--width-a-d {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.mod-box__container--width-a-f {
  width: 580px;
  margin: 0 auto;
}
.mod-box__container--width-a-m {
  width: 950px;
  margin-left: auto;
  margin-right: auto;
}
.mod-box__container--width-a-e {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.mod-box__container--width-a-g {
  width: 1260px;
  margin-left: auto;
  margin-right: auto;
}
.mod-box__container--width-a-h {
  width: 1250px;
  margin-left: auto;
  margin-right: auto;
}
.mod-box__container--width-table-center {
  margin-left: auto;
  margin-right: auto;
  display: table;
}
.mod-box__container--width-center {
  margin-left: auto;
  margin-right: auto;
}
/*
mod-table

テーブルのスタイル

Weight: -1040

Style guide: table
*/
.mod-table-a-a,
.mod-table-a-b,
.mod-table-a-c,
.mod-table-a-d,
.mod-table-a-e,
.mod-table-a-f,
.mod-table-a-g,
.mod-table-a-h,
.mod-table-a-i {
  display: table;
  width: auto;
  background-color: transparent;
  border-collapse: collapse;
  border-style: solid;
  border-width: 1px;
}
.mod-table-a-a__cell--a,
.mod-table-a-a__cell--b,
.mod-table-a-b__cell--a,
.mod-table-a-b__cell--b,
.mod-table-a-b__cell--c,
.mod-table-a-b__cell--d,
.mod-table-a-b__cell--e,
.mod-table-a-b__cell--f,
.mod-table-a-c__cell--a,
.mod-table-a-c__cell--b,
.mod-table-a-c__cell--c,
.mod-table-a-c__cell--d,
.mod-table-a-c__cell--e,
.mod-table-a-c__cell--f,
.mod-table-a-c__cell--g,
.mod-table-a-d__cell--a,
.mod-table-a-d__cell--b,
.mod-table-a-e__cell--a,
.mod-table-a-e__cell--b,
.mod-table-a-e__cell--c,
.mod-table-a-e__cell--d,
.mod-table-a-e__cell--e,
.mod-table-a-e__cell--f,
.mod-table-a-e__cell--g,
.mod-table-a-e__cell--h,
.mod-table-a-e__cell--i,
.mod-table-a-f__cell--a,
.mod-table-a-f__cell--b,
.mod-table-a-f__cell--c,
.mod-table-a-f__cell--d,
.mod-table-a-f__cell--f,
.mod-table-a-f__cell--e,
.mod-table-a-f__cell--g,
.mod-table-a-f__cell--h,
.mod-table-a-f__cell--i,
.mod-table-a-f__cell--j,
.mod-table-a-f__cell--k,
.mod-table-a-f__cell--l,
.mod-table-a-f__cell--m,
.mod-table-a-g__cell--c,
.mod-table-a-g__cell--d,
.mod-table-a-h__cell--c,
.mod-table-a-h__cell--d,
.mod-table-a-h__cell--e,
.mod-table-a-h__cell--f,
.mod-table-a-h__cell--g,
.mod-table-a-h__cell--h,
.mod-table-a-i__cell--c,
.mod-table-a-i__cell--d,
.mod-table-a-i__cell--e,
.mod-table-a-i__cell--f,
.mod-table-a-i__cell--g,
.mod-table-a-i__cell--h {
  display: table-cell;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: left;
  word-break: break-all;
  word-wrap: break-word;
  background-color: transparent;
  font-size: 15px;
  font-weight: normal;
  border-style: solid;
  border-width: 1px;
}
/*
Variations

ModTable のスタイル

Markup: <table class="{{modifier_class}}">
  <tr>
    <th class="{{modifier_class}}__cell--a" scope="row">Table Heading</th>
    <td class="{{modifier_class}}__cell--b">Table Description</td>
  </tr>
  <tr>
    <th class="{{modifier_class}}__cell--a" scope="row">Table Heading</th>
    <td class="{{modifier_class}}__cell--b">Table Description<br />Table Description<br />Table Description</td>
  </tr>
</table>

mod-table-a-a - スタイル a-a

Style guide: table.a.a
*/
.mod-table-a-a__cell--a,
.mod-table-a-a__cell--b,
.mod-table-a-b__cell--a,
.mod-table-a-b__cell--b,
.mod-table-a-b__cell--c,
.mod-table-a-b__cell--d,
.mod-table-a-b__cell--e,
.mod-table-a-b__cell--f,
.mod-table-a-c__cell--a,
.mod-table-a-c__cell--b,
.mod-table-a-c__cell--c,
.mod-table-a-c__cell--d,
.mod-table-a-c__cell--e,
.mod-table-a-c__cell--f,
.mod-table-a-c__cell--g,
.mod-table-a-d__cell--a,
.mod-table-a-d__cell--b,
.mod-table-a-e__cell--a,
.mod-table-a-e__cell--b,
.mod-table-a-e__cell--c,
.mod-table-a-e__cell--d,
.mod-table-a-e__cell--e,
.mod-table-a-e__cell--f,
.mod-table-a-e__cell--g,
.mod-table-a-e__cell--h,
.mod-table-a-e__cell--i,
.mod-table-a-f__cell--a,
.mod-table-a-f__cell--b,
.mod-table-a-f__cell--c,
.mod-table-a-f__cell--d,
.mod-table-a-f__cell--f,
.mod-table-a-f__cell--e,
.mod-table-a-f__cell--g,
.mod-table-a-f__cell--h,
.mod-table-a-f__cell--i,
.mod-table-a-f__cell--j,
.mod-table-a-f__cell--k,
.mod-table-a-f__cell--l,
.mod-table-a-f__cell--m,
.mod-table-a-g__cell--c,
.mod-table-a-g__cell--d,
.mod-table-a-h__cell--c,
.mod-table-a-h__cell--d,
.mod-table-a-h__cell--e,
.mod-table-a-h__cell--f,
.mod-table-a-h__cell--g,
.mod-table-a-h__cell--h,
.mod-table-a-i__cell--c,
.mod-table-a-i__cell--d,
.mod-table-a-i__cell--e,
.mod-table-a-i__cell--f,
.mod-table-a-i__cell--g,
.mod-table-a-i__cell--h {
  padding: 13px 0 10px;
  vertical-align: top;
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
}
.mod-table-a-a {
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
}
.mod-table-a-a__cell--a {
  color: #333;
}
/*
Variations

ModTable のスタイル

Markup: <table class="{{modifier_class}}">
  <tr>
    <th class="{{modifier_class}}__cell--a">Table Heading01</th>
    <td class="{{modifier_class}}__cell--b">Table Description01</td>
  </tr>
  <tr>
    <th class="{{modifier_class}}__cell--c">Table Heading02</th>
    <td class="{{modifier_class}}__cell--d">Table Description02</td>
  </tr>
  <tr>
    <th class="{{modifier_class}}__cell--e">Table Heading02</th>
    <td class="{{modifier_class}}__cell--f">Table Description02</td>
  </tr>
</table>

mod-table-a-b - スタイル a-b

Style guide: table.a.b
*/
.mod-table-a-b__cell--a,
.mod-table-a-b__cell--b,
.mod-table-a-b__cell--c,
.mod-table-a-b__cell--d,
.mod-table-a-b__cell--e,
.mod-table-a-b__cell--f,
.mod-table-a-c__cell--a,
.mod-table-a-c__cell--b,
.mod-table-a-c__cell--c,
.mod-table-a-c__cell--d,
.mod-table-a-c__cell--e,
.mod-table-a-c__cell--f,
.mod-table-a-c__cell--g,
.mod-table-a-d__cell--a,
.mod-table-a-d__cell--b,
.mod-table-a-e__cell--a,
.mod-table-a-e__cell--b,
.mod-table-a-e__cell--c,
.mod-table-a-e__cell--d,
.mod-table-a-e__cell--e,
.mod-table-a-e__cell--f,
.mod-table-a-e__cell--g,
.mod-table-a-e__cell--h,
.mod-table-a-e__cell--i,
.mod-table-a-f__cell--a,
.mod-table-a-f__cell--b,
.mod-table-a-f__cell--c,
.mod-table-a-f__cell--d,
.mod-table-a-f__cell--f,
.mod-table-a-f__cell--e,
.mod-table-a-f__cell--g,
.mod-table-a-f__cell--h,
.mod-table-a-f__cell--i,
.mod-table-a-f__cell--j,
.mod-table-a-f__cell--k,
.mod-table-a-f__cell--l,
.mod-table-a-f__cell--m,
.mod-table-a-g__cell--c,
.mod-table-a-g__cell--d,
.mod-table-a-h__cell--c,
.mod-table-a-h__cell--d,
.mod-table-a-h__cell--e,
.mod-table-a-h__cell--f,
.mod-table-a-h__cell--g,
.mod-table-a-h__cell--h,
.mod-table-a-i__cell--c,
.mod-table-a-i__cell--d,
.mod-table-a-i__cell--e,
.mod-table-a-i__cell--f,
.mod-table-a-i__cell--g,
.mod-table-a-i__cell--h {
  padding: 13px 0 10px;
  vertical-align: top;
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
}
.mod-table-a-b {
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
  width: 100%;
}
.mod-table-a-b__cell--a {
  color: #333;
  background-color: #eaf6fd;
  border-bottom: 1px solid #fff;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  border-top: 1px solid #006cb8;
  width: 20%;
  font-weight: bold;
}
.mod-table-a-b__cell--b {
  color: #333;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  border-top: 1px solid #006cb8;
  width: 80%;
}
.mod-table-a-b__cell--c {
  color: #333;
  background-color: #eaf6fd;
  border-bottom: 1px solid #fff;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  width: 20%;
  font-weight: bold;
}
.mod-table-a-b__cell--d {
  color: #333;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  width: 80%;
}
.mod-table-a-b__cell--e {
  color: #333;
  background-color: #eaf6fd;
  border-bottom: 1px solid #006cb8;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  width: 20%;
  font-weight: bold;
}
.mod-table-a-b__cell--f {
  color: #333;
  background-color: #fff;
  border-bottom: 1px solid #006cb8;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  width: 80%;
}
/*
Variations

ModTable のスタイル

Markup: <table class="{{modifier_class}}">
  <tr>
    <th class="{{modifier_class}}__cell--a">Table Heading(1)</th>
    <td class="{{modifier_class}}__cell--b">3月</td>
    <td class="{{modifier_class}}__cell--c">Table Description02</td>
  </tr>
  <tr>
    <th class="{{modifier_class}}__cell--a">Table Heading01</th>
    <td class="{{modifier_class}}__cell--b">3月</td>
    <td class="{{modifier_class}}__cell--c">Table Description02</td>
  </tr>
  <tr>
    <th class="{{modifier_class}}__cell--a" rowspan="2">Table Heading(2)</th>
    <td class="{{modifier_class}}__cell--d">3月</td>
    <td class="{{modifier_class}}__cell--e">Table Description02</td>
  </tr>
  <tr>
    <td class="{{modifier_class}}__cell--f">3月</td>
    <td class="{{modifier_class}}__cell--g">Table Description02</td>
  </tr>
</table>

mod-table-a-c - スタイル a-c

Style guide: table.a.c
*/
.mod-table-a-c__cell--a,
.mod-table-a-c__cell--b,
.mod-table-a-c__cell--c,
.mod-table-a-c__cell--d,
.mod-table-a-c__cell--e,
.mod-table-a-c__cell--f,
.mod-table-a-c__cell--g,
.mod-table-a-d__cell--a,
.mod-table-a-d__cell--b,
.mod-table-a-e__cell--a,
.mod-table-a-e__cell--b,
.mod-table-a-e__cell--c,
.mod-table-a-e__cell--d,
.mod-table-a-e__cell--e,
.mod-table-a-e__cell--f,
.mod-table-a-e__cell--g,
.mod-table-a-e__cell--h,
.mod-table-a-e__cell--i,
.mod-table-a-f__cell--a,
.mod-table-a-f__cell--b,
.mod-table-a-f__cell--c,
.mod-table-a-f__cell--d,
.mod-table-a-f__cell--f,
.mod-table-a-f__cell--e,
.mod-table-a-f__cell--g,
.mod-table-a-f__cell--h,
.mod-table-a-f__cell--i,
.mod-table-a-f__cell--j,
.mod-table-a-f__cell--k,
.mod-table-a-f__cell--l,
.mod-table-a-f__cell--m,
.mod-table-a-g__cell--c,
.mod-table-a-g__cell--d,
.mod-table-a-h__cell--c,
.mod-table-a-h__cell--d,
.mod-table-a-h__cell--e,
.mod-table-a-h__cell--f,
.mod-table-a-h__cell--g,
.mod-table-a-h__cell--h,
.mod-table-a-i__cell--c,
.mod-table-a-i__cell--d,
.mod-table-a-i__cell--e,
.mod-table-a-i__cell--f,
.mod-table-a-i__cell--g,
.mod-table-a-i__cell--h {
  padding: 13px 0 10px;
  vertical-align: top;
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
}
.mod-table-a-c {
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
  width: 100%;
  border-top: 0;
}
.mod-table-a-c__cell--a {
  color: #fff;
  background-color: #006cb8;
  border-bottom: 10px solid #eaf6fd;
  text-align: center;
  padding: 8px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
}
.mod-table-a-c__cell--b {
  color: #333;
  background-color: #fff;
  border-bottom: 10px solid #eaf6fd;
  text-align: right;
  padding: 8px 0;
  font-size: 14px;
  width: 6%;
  border-top: 0;
}
.mod-table-a-c__cell--c {
  color: #333;
  background-color: #fff;
  border-bottom: 10px solid #eaf6fd;
  text-align: left;
  padding: 8px 20px;
  font-size: 14px;
  width: 83%;
  border-top: 0;
}
.mod-table-a-c__cell--d {
  color: #333;
  background-color: #fff;
  text-align: right;
  padding: 8px 0 0 0;
  font-size: 14px;
  width: 6%;
  border-top: 0;
  border-bottom: 0;
}
.mod-table-a-c__cell--e {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 8px 20px 0 20px;
  font-size: 14px;
  width: 83%;
  border-top: 0;
  border-bottom: 0;
}
.mod-table-a-c__cell--f {
  color: #333;
  background-color: #fff;
  border-bottom: 10px solid #eaf6fd;
  text-align: right;
  padding: 0 0 8px 0;
  font-size: 14px;
  width: 6%;
  border-top: 0;
}
.mod-table-a-c__cell--g {
  color: #333;
  background-color: #fff;
  border-bottom: 10px solid #eaf6fd;
  text-align: left;
  padding: 0 20px 8px 20px;
  font-size: 14px;
  width: 83%;
  border-top: 0;
}
/*
Variations

ModTable のスタイル

Markup: <table class="{{modifier_class}}">
  <tr>
    <th class="{{modifier_class}}__cell--a">Table Heading01</th>
    <td class="{{modifier_class}}__cell--b">Table Description01</td>
  </tr>
  <tr>
    <th class="{{modifier_class}}__cell--a">Table Heading01</th>
    <td class="{{modifier_class}}__cell--b">Table Description01</td>
  </tr>
</table>

mod-table-a-d - スタイル a-d

Style guide: table.a.d
*/
.mod-table-a-d__cell--a,
.mod-table-a-d__cell--b,
.mod-table-a-e__cell--a,
.mod-table-a-e__cell--b,
.mod-table-a-e__cell--c,
.mod-table-a-e__cell--d,
.mod-table-a-e__cell--e,
.mod-table-a-e__cell--f,
.mod-table-a-e__cell--g,
.mod-table-a-e__cell--h,
.mod-table-a-e__cell--i,
.mod-table-a-f__cell--a,
.mod-table-a-f__cell--b,
.mod-table-a-f__cell--c,
.mod-table-a-f__cell--d,
.mod-table-a-f__cell--f,
.mod-table-a-f__cell--e,
.mod-table-a-f__cell--g,
.mod-table-a-f__cell--h,
.mod-table-a-f__cell--i,
.mod-table-a-f__cell--j,
.mod-table-a-f__cell--k,
.mod-table-a-f__cell--l,
.mod-table-a-f__cell--m,
.mod-table-a-g__cell--c,
.mod-table-a-g__cell--d,
.mod-table-a-h__cell--c,
.mod-table-a-h__cell--d,
.mod-table-a-h__cell--e,
.mod-table-a-h__cell--f,
.mod-table-a-h__cell--g,
.mod-table-a-h__cell--h,
.mod-table-a-i__cell--c,
.mod-table-a-i__cell--d,
.mod-table-a-i__cell--e,
.mod-table-a-i__cell--f,
.mod-table-a-i__cell--g,
.mod-table-a-i__cell--h {
  padding: 13px 0 10px;
  vertical-align: top;
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
}
.mod-table-a-d {
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
  width: 100%;
  border-top: 0;
  border-bottom: 0;
}
.mod-table-a-d__cell--a {
  color: #333;
  background-color: #fff;
  border-right: 1px solid #006cb8;
  text-align: left;
  padding: 0 20px;
  font-size: 16px;
  width: 17%;
  border-top: 0;
  font-weight: bold;
  border-bottom: 20px solid #fff;
}
.mod-table-a-d__cell--b {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 0 20px;
  font-size: 16px;
  width: 80%;
  border-top: 0;
  border-bottom: 20px solid #fff;
}
/*
Variations

ModTable のスタイル

Markup: <table class="{{modifier_class}}">
  <tr>
    <th class="{{modifier_class}}__cell--a" colspan="2">サービス名</th>
    <th class="{{modifier_class}}__cell--b">カスタマイズ</th>
    <th class="{{modifier_class}}__cell--c">提供形態</th>
    <th class="{{modifier_class}}__cell--d">ライセンス形態</th>
  </tr>
  <tr>
    <td class="{{modifier_class}}__cell--e"colspan="2">HarborWrite® Ver.4 Enterprise<br>Export System / Import System</td>
    <td class="{{modifier_class}}__cell--e">○</td>
    <td class="{{modifier_class}}__cell--e">オンプレミス</td>
    <td class="{{modifier_class}}__cell--i">ライセンス<br>買取方式</td>
  </tr>
  <tr>
    <td class="{{modifier_class}}__cell--g"  rowspan="2">HarborWrite® Ver.4 Enterprise<br>Export System / Import System</td>
    <td class="{{modifier_class}}__cell--e">プライベートクラウド</td>
    <td class="{{modifier_class}}__cell--e">○</td>
    <td class="{{modifier_class}}__cell--f"  rowspan="2">クラウド</td>
    <td class="{{modifier_class}}__cell--h"  rowspan="2">月額利用方式</td>
  </tr>
  <tr>
    <th class="{{modifier_class}}__cell--f">パブリッククラウド</th>
    <td class="{{modifier_class}}__cell--f">×</td>
  </tr>
</table>

mod-table-a-e - スタイル a-c

Style guide: table.a.e
*/
.mod-table-a-e__cell--a,
.mod-table-a-e__cell--b,
.mod-table-a-e__cell--c,
.mod-table-a-e__cell--d,
.mod-table-a-e__cell--e,
.mod-table-a-e__cell--f,
.mod-table-a-e__cell--g,
.mod-table-a-e__cell--h,
.mod-table-a-e__cell--i,
.mod-table-a-f__cell--a,
.mod-table-a-f__cell--b,
.mod-table-a-f__cell--c,
.mod-table-a-f__cell--d,
.mod-table-a-f__cell--f,
.mod-table-a-f__cell--e,
.mod-table-a-f__cell--g,
.mod-table-a-f__cell--h,
.mod-table-a-f__cell--i,
.mod-table-a-f__cell--j,
.mod-table-a-f__cell--k,
.mod-table-a-f__cell--l,
.mod-table-a-f__cell--m,
.mod-table-a-g__cell--c,
.mod-table-a-g__cell--d,
.mod-table-a-h__cell--c,
.mod-table-a-h__cell--d,
.mod-table-a-h__cell--e,
.mod-table-a-h__cell--f,
.mod-table-a-h__cell--g,
.mod-table-a-h__cell--h,
.mod-table-a-i__cell--c,
.mod-table-a-i__cell--d,
.mod-table-a-i__cell--e,
.mod-table-a-i__cell--f,
.mod-table-a-i__cell--g,
.mod-table-a-i__cell--h {
  padding: 13px 0 10px;
  vertical-align: top;
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
}
.mod-table-a-e {
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
  width: 100%;
  border-top: 0;
  border: 1px solid #006cb8;
}
.mod-table-a-e__cell--a {
  color: #fff;
  background-color: #00afec;
  border-right: 1px solid #dcdddd;
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 55%;
  vertical-align: middle;
}
.mod-table-a-e__cell--b {
  color: #fff;
  background-color: #00afec;
  border-right: 1px solid #dcdddd;
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 15%;
  vertical-align: middle;
}
.mod-table-a-e__cell--c {
  color: #333;
  color: #fff;
  background-color: #00afec;
  border-right: 1px solid #dcdddd;
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 15%;
  vertical-align: middle;
}
.mod-table-a-e__cell--d {
  color: #fff;
  background-color: #00afec;
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 15%;
  vertical-align: middle;
}
.mod-table-a-e__cell--e {
  color: #333;
  background-color: #fff;
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 1px solid #dcdddd;
  vertical-align: middle;
}
.mod-table-a-e__cell--f {
  color: #333;
  background-color: #fff;
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  border-top: 0;
  border: 1px solid #dcdddd;
  border-bottom: 1px solid #006cb8;
  vertical-align: middle;
}
.mod-table-a-e__cell--g {
  color: #333;
  background-color: #fff;
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 0;
  vertical-align: middle;
}
.mod-table-a-e__cell--h {
  color: #333;
  background-color: #fff;
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #006cb8;
  border-bottom: 0;
  vertical-align: middle;
}
.mod-table-a-e__cell--i {
  color: #333;
  background-color: #fff;
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #006cb8;
  border-bottom: 1px solid #dcdddd;
  vertical-align: middle;
}
/*
Variations

ModTable のスタイル

Markup: <table class="{{modifier_class}}">
  <tr>
    <th class="{{modifier_class}}__cell--a">業種</th>
    <th class="{{modifier_class}}__cell--b">業務名</th>
    <th class="{{modifier_class}}__cell--c">業務概要</th>
    <th class="{{modifier_class}}__cell--d">システム構成言語</th>
    <th class="{{modifier_class}}__cell--f">業務範囲</th>
  </tr>
  <tr>
    <td class="{{modifier_class}}__cell--e">証券</td>
    <td class="{{modifier_class}}__cell--e">リスク管理<br>
    システム開発</td>
    <td class="{{modifier_class}}__cell--e">【パッケージのカスタマイズ】
基幹システムから日々出力される膨大なトランザクションデータのシステムに取り込み、リスクおよび損益を集計管理をする機能を提供。システムで日々累積する膨大な修正データを管理機関すぎたデータをシステムから退避保管する機能を提供。SEとして要件定義工程から参画。ユーザ様の業務効率の向上させるための課題に取り組んだ。</td>
    <td class="{{modifier_class}}__cell--i">Linux<br>WebSphere<br>Oracle<br>Java</td>
    <td class="{{modifier_class}}__cell--j">Linux<br>要件定義～システムテスト</td>
  </tr>
  <tr>
    <td class="{{modifier_class}}__cell--k">証券</td>
    <td class="{{modifier_class}}__cell--l">リスク管理<br>
    システム開発</td>
    <td class="{{modifier_class}}__cell--l">【パッケージのカスタマイズ】
基幹システムから日々出力される膨大なトランザクションデータのシステムに取り込み、リスクおよび損益を集計管理をする機能を提供。システムで日々累積する膨大な修正データを管理機関すぎたデータをシステムから退避保管する機能を提供。SEとして要件定義工程から参画。ユーザ様の業務効率の向上させるための課題に取り組んだ。</td>
    <td class="{{modifier_class}}__cell--l">Linux<br>WebSphere<br>Oracle<br>Java</td>
    <td class="{{modifier_class}}__cell--m">Linux<br>要件定義～システムテスト</td>
  </tr>
</table>

mod-table-a-f - スタイル a-f

Style guide: table.a.f
*/
.mod-table-a-f__cell--a,
.mod-table-a-f__cell--b,
.mod-table-a-f__cell--c,
.mod-table-a-f__cell--d,
.mod-table-a-f__cell--f,
.mod-table-a-f__cell--e,
.mod-table-a-f__cell--g,
.mod-table-a-f__cell--h,
.mod-table-a-f__cell--i,
.mod-table-a-f__cell--j,
.mod-table-a-f__cell--k,
.mod-table-a-f__cell--l,
.mod-table-a-f__cell--m,
.mod-table-a-g__cell--c,
.mod-table-a-g__cell--d,
.mod-table-a-h__cell--c,
.mod-table-a-h__cell--d,
.mod-table-a-h__cell--e,
.mod-table-a-h__cell--f,
.mod-table-a-h__cell--g,
.mod-table-a-h__cell--h,
.mod-table-a-i__cell--c,
.mod-table-a-i__cell--d,
.mod-table-a-i__cell--e,
.mod-table-a-i__cell--f,
.mod-table-a-i__cell--g,
.mod-table-a-i__cell--h {
  padding: 13px 0 10px;
  vertical-align: top;
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
}
.mod-table-a-f {
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
  width: 100%;
  border-top: 0;
  border: 1px solid #006cb8;
}
.mod-table-a-f__cell--a {
  color: #fff;
  background-color: #00afec;
  border-right: 1px solid #dcdddd;
  text-align: center;
  padding: 7px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 15%;
}
.mod-table-a-f__cell--b {
  color: #fff;
  background-color: #00afec;
  border-right: 1px solid #dcdddd;
  text-align: center;
  padding: 7px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 15%;
  border-top: 1px solid #006cb8;
}
.mod-table-a-f__cell--c {
  color: #333;
  color: #fff;
  background-color: #00afec;
  border-right: 1px solid #dcdddd;
  text-align: center;
  padding: 7px 0;
  font-size: 16px;
  width: 40%;
  border-top: 0;
  font-weight: bold;
}
.mod-table-a-f__cell--d {
  color: #fff;
  background-color: #00afec;
  text-align: center;
  padding: 7px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 15%;
  border-right: 1px solid #dcdddd;
}
.mod-table-a-f__cell--f {
  color: #fff;
  background-color: #00afec;
  text-align: center;
  padding: 7px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 15%;
}
.mod-table-a-f__cell--e {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 1px solid #dcdddd;
}
.mod-table-a-f__cell--g {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 0;
}
.mod-table-a-f__cell--h {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #006cb8;
  border-bottom: 0;
}
.mod-table-a-f__cell--i {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 1px solid #dcdddd;
}
.mod-table-a-f__cell--j {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #006cb8;
  border-bottom: 1px solid #dcdddd;
}
.mod-table-a-f__cell--k {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 1px solid #006cb8;
}
.mod-table-a-f__cell--l {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 1px solid #006cb8;
}
.mod-table-a-f__cell--m {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #006cb8;
  border-bottom: 1px solid #006cb8;
}
/*
Variations

ModTable のスタイル

Markup: <table class="{{modifier_class}}">
  <tr>
    <th class="{{modifier_class}}__cell--a">業種</th>
    <th class="{{modifier_class}}__cell--b">業務名</th>
    <th class="{{modifier_class}}__cell--c">業務概要</th>
    <th class="{{modifier_class}}__cell--d">システム構成言語</th>
    <th class="{{modifier_class}}__cell--f">業務範囲</th>
  </tr>
  <tr>
    <td class="{{modifier_class}}__cell--e">証券</td>
    <td class="{{modifier_class}}__cell--e">リスク管理<br>
    システム開発</td>
    <td class="{{modifier_class}}__cell--e">【パッケージのカスタマイズ】
基幹システムから日々出力される膨大なトランザクションデータのシステムに取り込み、リスクおよび損益を集計管理をする機能を提供。システムで日々累積する膨大な修正データを管理機関すぎたデータをシステムから退避保管する機能を提供。SEとして要件定義工程から参画。ユーザ様の業務効率の向上させるための課題に取り組んだ。</td>
    <td class="{{modifier_class}}__cell--i">Linux<br>WebSphere<br>Oracle<br>Java</td>
    <td class="{{modifier_class}}__cell--j">Linux<br>要件定義～システムテスト</td>
  </tr>
  <tr>
    <td class="{{modifier_class}}__cell--k">証券</td>
    <td class="{{modifier_class}}__cell--l">リスク管理<br>
    システム開発</td>
    <td class="{{modifier_class}}__cell--l">【パッケージのカスタマイズ】
基幹システムから日々出力される膨大なトランザクションデータのシステムに取り込み、リスクおよび損益を集計管理をする機能を提供。システムで日々累積する膨大な修正データを管理機関すぎたデータをシステムから退避保管する機能を提供。SEとして要件定義工程から参画。ユーザ様の業務効率の向上させるための課題に取り組んだ。</td>
    <td class="{{modifier_class}}__cell--l">Linux<br>WebSphere<br>Oracle<br>Java</td>
    <td class="{{modifier_class}}__cell--m">Linux<br>要件定義～システムテスト</td>
  </tr>
</table>

mod-table-a-f - スタイル a-f

Style guide: table.a.f
*/
.mod-table-a-f__cell--a,
.mod-table-a-f__cell--b,
.mod-table-a-f__cell--c,
.mod-table-a-f__cell--d,
.mod-table-a-f__cell--f,
.mod-table-a-f__cell--e,
.mod-table-a-f__cell--g,
.mod-table-a-f__cell--h,
.mod-table-a-f__cell--i,
.mod-table-a-f__cell--j,
.mod-table-a-f__cell--k,
.mod-table-a-f__cell--l,
.mod-table-a-f__cell--m,
.mod-table-a-g__cell--c,
.mod-table-a-g__cell--d,
.mod-table-a-h__cell--c,
.mod-table-a-h__cell--d,
.mod-table-a-h__cell--e,
.mod-table-a-h__cell--f,
.mod-table-a-h__cell--g,
.mod-table-a-h__cell--h,
.mod-table-a-i__cell--c,
.mod-table-a-i__cell--d,
.mod-table-a-i__cell--e,
.mod-table-a-i__cell--f,
.mod-table-a-i__cell--g,
.mod-table-a-i__cell--h {
  padding: 13px 0 10px;
  vertical-align: top;
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
}
.mod-table-a-f {
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
  width: 100%;
  border-top: 0;
  border: 1px solid #006cb8;
}
.mod-table-a-f__cell--a {
  color: #fff;
  background-color: #00afec;
  border-right: 1px solid #dcdddd;
  text-align: center;
  padding: 7px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 15%;
}
.mod-table-a-f__cell--b {
  color: #fff;
  background-color: #00afec;
  border-right: 1px solid #dcdddd;
  text-align: center;
  padding: 7px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 15%;
  border-top: 1px solid #006cb8;
}
.mod-table-a-f__cell--c {
  color: #333;
  color: #fff;
  background-color: #00afec;
  border-right: 1px solid #dcdddd;
  text-align: center;
  padding: 7px 0;
  font-size: 16px;
  width: 40%;
  border-top: 0;
  font-weight: bold;
}
.mod-table-a-f__cell--d {
  color: #fff;
  background-color: #00afec;
  text-align: center;
  padding: 7px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 15%;
  border-right: 1px solid #dcdddd;
}
.mod-table-a-f__cell--f {
  color: #fff;
  background-color: #00afec;
  text-align: center;
  padding: 7px 0;
  font-size: 16px;
  width: 11%;
  border-top: 0;
  font-weight: bold;
  width: 15%;
}
.mod-table-a-f__cell--e {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 1px solid #dcdddd;
}
.mod-table-a-f__cell--g {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 0;
}
.mod-table-a-f__cell--h {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #006cb8;
  border-bottom: 0;
}
.mod-table-a-f__cell--i {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 1px solid #dcdddd;
}
.mod-table-a-f__cell--j {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #006cb8;
  border-bottom: 1px solid #dcdddd;
}
.mod-table-a-f__cell--k {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 1px solid #006cb8;
}
.mod-table-a-f__cell--l {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #dcdddd;
  border-bottom: 1px solid #006cb8;
}
.mod-table-a-f__cell--m {
  color: #333;
  background-color: #fff;
  text-align: left;
  padding: 20px 10px;
  font-size: 14px;
  border-top: 0;
  border-right: 1px solid #006cb8;
  border-bottom: 1px solid #006cb8;
}
/*
Variations

ModTable のスタイル

Markup: <table class="{{modifier_class}}">
  <tr>
    <th class="{{modifier_class}}__cell--c">Table Heading01</th>
    <td class="{{modifier_class}}__cell--d">Table Description01</td>
  </tr>
  <tr>
    <th class="{{modifier_class}}__cell--c">Table Heading02</th>
    <td class="{{modifier_class}}__cell--d">Table Description02</td>
  </tr>
  <tr>
    <th class="{{modifier_class}}__cell--c">Table Heading02</th>
    <td class="{{modifier_class}}__cell--d">Table Description02</td>
  </tr>
</table>

mod-table-a-g - スタイル a-g

Style guide: table.a.g
*/
.mod-table-a-g__cell--c,
.mod-table-a-g__cell--d,
.mod-table-a-h__cell--c,
.mod-table-a-h__cell--d,
.mod-table-a-h__cell--e,
.mod-table-a-h__cell--f,
.mod-table-a-h__cell--g,
.mod-table-a-h__cell--h,
.mod-table-a-i__cell--c,
.mod-table-a-i__cell--d,
.mod-table-a-i__cell--e,
.mod-table-a-i__cell--f,
.mod-table-a-i__cell--g,
.mod-table-a-i__cell--h {
  padding: 13px 0 10px;
  vertical-align: top;
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
}
.mod-table-a-g {
  border-color: #ddd;
  width: 100%;
}
.mod-table-a-g__cell--c {
  color: #444;
  background-color: #f9f8f4;
  border-bottom: 1px solid #ddd;
  text-align: left;
  padding: 17px 15px;
  font-size: 14px;
  width: 27%;
  font-weight: bold;
  vertical-align: middle;
}
.mod-table-a-g__cell--d {
  color: #444;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  text-align: left;
  padding: 20px;
  font-size: 12px;
  width: 73%;
  vertical-align: middle;
}
/*
Variations

ModTable のスタイル

Markup: <table class="{{modifier_class}}">
  <tr>
    <th class="{{modifier_class}}__cell--c">Table Heading01</th>
    <td class="{{modifier_class}}__cell--d">Table Description01</td>
  </tr>
  <tr>
    <th class="{{modifier_class}}__cell--e">Table Heading02</th>
    <td class="{{modifier_class}}__cell--f">Table Description02</td>
  </tr>
  <tr>
    <th class="{{modifier_class}}__cell--g">Table Heading02</th>
    <td class="{{modifier_class}}__cell--h">Table Description02</td>
  </tr>
</table>

mod-table-a-h - スタイル a-g

Style guide: table.a.h
*/
.mod-table-a-h__cell--c,
.mod-table-a-h__cell--d,
.mod-table-a-h__cell--e,
.mod-table-a-h__cell--f,
.mod-table-a-h__cell--g,
.mod-table-a-h__cell--h,
.mod-table-a-i__cell--c,
.mod-table-a-i__cell--d,
.mod-table-a-i__cell--e,
.mod-table-a-i__cell--f,
.mod-table-a-i__cell--g,
.mod-table-a-i__cell--h {
  padding: 13px 0 10px;
  vertical-align: top;
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
}
.mod-table-a-h {
  border-color: #ddd;
  width: 100%;
}
.mod-table-a-h__cell--c {
  color: #444;
  background-color: #f9f8f4;
  border-bottom: 1px solid #e1e9f2;
  text-align: left;
  padding: 17px 15px;
  font-size: 16px;
  width: 27%;
  vertical-align: top;
  border-top: 1px solid #3c5a88;
  border-left: 1px solid #3c5a88;
}
.mod-table-a-h__cell--d {
  color: #444;
  background-color: #fff;
  border-bottom: 1px solid #e1e9f2;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  width: 73%;
  vertical-align: top;
  border-top: 1px solid #3c5a88;
  border-right: 1px solid #3c5a88;
}
.mod-table-a-h__cell--e {
  color: #444;
  background-color: #f9f8f4;
  border-bottom: 1px solid #e1e9f2;
  text-align: left;
  padding: 17px 15px;
  font-size: 16px;
  width: 27%;
  vertical-align: top;
  border-left: 1px solid #3c5a88;
}
.mod-table-a-h__cell--f {
  color: #444;
  background-color: #fff;
  border-bottom: 1px solid #e1e9f2;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  width: 73%;
  vertical-align: top;
  border-right: 1px solid #3c5a88;
}
.mod-table-a-h__cell--g {
  color: #444;
  background-color: #f9f8f4;
  border-bottom: 1px solid #e1e9f2;
  text-align: left;
  padding: 17px 15px;
  font-size: 16px;
  width: 27%;
  vertical-align: top;
  border-bottom: 1px solid #3c5a88;
  border-left: 1px solid #3c5a88;
}
.mod-table-a-h__cell--h {
  color: #444;
  background-color: #fff;
  border-bottom: 1px solid #e1e9f2;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  width: 73%;
  vertical-align: top;
  border-bottom: 1px solid #3c5a88;
  border-right: 1px solid #3c5a88;
}
/*
Variations

ModTable のスタイル

Markup: <table class="{{modifier_class}}">
  <tr>
    <th class="{{modifier_class}}__cell--c">Table Heading01</th>
    <th class="{{modifier_class}}__cell--d">Table Description01</td>
  </tr>
  <tr>
    <td class="{{modifier_class}}__cell--e">Table Heading0 2</th>
    <td class="{{modifier_class}}__cell--f">Table Description02</td>
  </tr>
  <tr>
    <td class="{{modifier_class}}__cell--g">Table Heading02</th>
    <td class="{{modifier_class}}__cell--h">Table Description02</td>
  </tr>
</table>

mod-table-a-i - スタイル a-g

Style guide: table.a.i
*/
.mod-table-a-i__cell--c,
.mod-table-a-i__cell--d,
.mod-table-a-i__cell--e,
.mod-table-a-i__cell--f,
.mod-table-a-i__cell--g,
.mod-table-a-i__cell--h {
  padding: 13px 0 10px;
  vertical-align: top;
  border-color: #ccc;
  border-left: 0;
  border-right: 0;
}
.mod-table-a-i {
  border-color: #ddd;
  width: 100%;
}
.mod-table-a-i__cell--c {
  color: #444;
  background-color: #e1e9f2;
  border-bottom: 0;
  text-align: center;
  padding: 17px 15px;
  font-size: 16px;
  width: 27%;
  vertical-align: middle;
  border-top: 1px solid #3c5a88;
  border-left: 1px solid #3c5a88;
  border-right: 1px solid #fff;
}
.mod-table-a-i__cell--d {
  color: #444;
  background-color: #e1e9f2;
  border-bottom: 1px solid #e1e9f2;
  text-align: center;
  padding: 20px;
  font-size: 16px;
  width: 73%;
  vertical-align: top;
  border-top: 1px solid #3c5a88;
  border-right: 1px solid #3c5a88;
}
.mod-table-a-i__cell--e {
  color: #444;
  background-color: #f9f8f4;
  border-bottom: 1px solid #e1e9f2;
  text-align: left;
  padding: 17px 15px;
  font-size: 16px;
  width: 27%;
  vertical-align: top;
  border-left: 1px solid #3c5a88;
  border-top: 0;
}
.mod-table-a-i__cell--f {
  color: #444;
  background-color: #fff;
  border-bottom: 1px solid #e1e9f2;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  width: 73%;
  vertical-align: top;
  border-right: 1px solid #3c5a88;
  border-top: 0;
}
.mod-table-a-i__cell--g {
  color: #444;
  background-color: #f9f8f4;
  border-bottom: 1px solid #e1e9f2;
  text-align: left;
  padding: 17px 15px;
  font-size: 16px;
  width: 27%;
  vertical-align: top;
  border-bottom: 1px solid #3c5a88;
  border-left: 1px solid #3c5a88;
  border-top: 0;
}
.mod-table-a-i__cell--h {
  color: #444;
  background-color: #fff;
  border-bottom: 1px solid #e1e9f2;
  text-align: left;
  padding: 20px;
  font-size: 16px;
  width: 73%;
  vertical-align: top;
  border-bottom: 1px solid #3c5a88;
  border-right: 1px solid #3c5a88;
}
/*
mod-field

フィールドのスタイル

Weight: -1030

Style guide: field
*/
/*
mod-textfield

テキストフィールドのスタイル

Weight: 100

Style guide: field.text
*/
.mod-textfield {
  display: block;
  position: relative;
  width: auto;
  height: auto;
  margin: 0;
  padding: 2px 0;
  line-height: 0;
  vertical-align: top;
  font-size: 0;
  border: 0;
  *zoom: 1;
}
.mod-textfield__input,
.mod-textfield__area {
  display: block;
  position: relative;
  margin: 0;
  padding: 10px;
  vertical-align: top;
  letter-spacing: 0.04em;
  background-color: #f1f1f1;
  font-weight: normal;
  font-size: 15px;
  border: 0;
}
.mod-textfield__input:hover,
.mod-textfield__area:hover,
.mod-textfield__input:focus,
.mod-textfield__area:focus {
  top: 2px;
  left: -2px;
  margin-top: -4px;
  border-width: 2px;
  border-style: solid;
  border-radius: 2px;
}
.mod-textfield__input:hover,
.mod-textfield__area:hover,
.mod-textfield__input:focus,
.mod-textfield__area:focus {
  border-color: #16ac60;
}
/*
Default

ModTextfield のデフォルトスタイル

Weight: -100

Markup: <label class="{{modifier_class}}">
  <input class="{{modifier_class}}__input" type="text" name="{{modifier_class}}-fee203b" value="" />
</label>
<label class="{{modifier_class}}">
  <textarea class="{{modifier_class}}__area" name="{{modifier_class}}-6e6653" rows="5" cols="10"></textarea>
</label>
<span class="{{modifier_class}}">
  <input class="{{modifier_class}}__input" type="text" name="{{modifier_class}}-fee203b" value="" />
</span>
<span class="{{modifier_class}}">
  <textarea class="{{modifier_class}}__area" name="{{modifier_class}}-6e6653" rows="5" cols="10"></textarea>
</span>

mod-textfield - デフォルトスタイル

Style guide: field.text.default
*/
.mod-textfield__input {
  line-height: 1;
}
.mod-textfield__area {
  line-height: 1.5;
}
/*
mod-togglefield

トグルフィールド（checkbox、radio）のスタイル

Weight: 200

Style guide: field.toggle
*/
.mod-checkfield,
.mod-radiofield {
  display: inline-block;
  overflow: hidden;
  position: relative;
  line-height: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  cursor: pointer;
  *font-size: 0;
  *display: inline;
  *zoom: 1;
}
.mod-checkfield__field,
.mod-radiofield__field {
  display: block;
  position: absolute;
  top: -100%;
  left: -150%;
  outline: none;
}
/*
Checkbox

ModTogglefield のチェックボックススタイル（JavaScript の実装が必須。`.js-mod-checkfield`、`.js-mod-checkfield__field` を付与する）

Markup: <label class="{{modifier_class}} js-{{modifier_class}}">
  <input class="{{modifier_class}}__field js-{{modifier_class}}__field" type="checkbox" name="{{modifier_class}}-38a17e4" value="{{modifier_class}}-2" />
</label>
<label>
  <span class="{{modifier_class}} js-{{modifier_class}}">
    <input class="{{modifier_class}}__field js-{{modifier_class}}__field" type="checkbox" name="{{modifier_class}}-38a17e4" value="{{modifier_class}}-1" />
  </span>
  <span class="mod-text mod-text--inline-true">text label</span>
</label>

mod-checkfield - デフォルトスタイル

Style guide: field.toggle.check.default
*/
.mod-checkfield {
  width: 18px;
  height: 18px;
  background-position: -20px -20px;
  background-image: url("../images/common/sprite_field.png");
}
.mod-checkfield--js-hover {
  width: 18px;
  height: 18px;
  background-position: 0px -20px;
}
.mod-checkfield--js-checked {
  width: 20px;
  height: 18px;
  background-position: -22px 0px;
}
.mod-checkfield--js-checked-hover {
  width: 20px;
  height: 18px;
  background-position: 0px 0px;
}
/*
Radio

ModTogglefield のラジオボタンスタイル（JavaScript の実装が必須。`.js-mod-radiofield`、`.js-mod-radiofield__field` を付与する）

Markup: <label class="{{modifier_class}} js-{{modifier_class}}">
  <input class="{{modifier_class}}__field js-{{modifier_class}}__field" type="radio" name="{{modifier_class}}-4d0b94c" value="{{modifier_class}}-2" />
</label>
<label>
  <span class="{{modifier_class}} js-{{modifier_class}}">
    <input class="{{modifier_class}}__field js-{{modifier_class}}__field" type="radio" name="{{modifier_class}}-4d0b94c" value="{{modifier_class}}-1" />
  </span>
  <span class="mod-text mod-text--inline-true">text label</span>
</label>

mod-radiofield - デフォルトスタイル

Style guide: field.toggle.radio.default
*/
.mod-radiofield {
  width: 18px;
  height: 18px;
  background-position: -20px -40px;
  background-image: url("../images/common/sprite_field.png");
}
.mod-radiofield--js-hover {
  width: 18px;
  height: 18px;
  background-position: 0px -40px;
}
.mod-radiofield--js-checked {
  width: 18px;
  height: 18px;
  background-position: -44px -20px;
}
.mod-radiofield--js-checked-hover {
  width: 18px;
  height: 18px;
  background-position: -44px 0px;
}
/*
mod-selectfield

セレクトフィールドのスタイル

Weight: 300

Style guide: field.select
*/
.mod-selectfield {
  display: block;
  position: relative;
  line-height: 0;
  background-color: #f1f1f1;
  cursor: pointer;
  *zoom: 1;
}
.mod-selectfield__field {
  display: block;
  position: absolute;
  top: -100px;
  left: -9999%;
}
.mod-selectfield__label {
  display: block;
  position: relative;
  min-height: 1em;
  margin: 0;
  padding: 10px 50px 10px 10px;
  vertical-align: top;
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: normal;
  font-size: 15px;
  border: 0;
}
.mod-selectfield__arrow {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 35px;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #34495e;
  *_height: 35px;
}
.mod-selectfield__arrow__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  *zoom: 1;
}
.mod-selectfield__options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mod-selectfield__options__item {
  display: block;
  margin: 0;
  padding: 10px;
  vertical-align: top;
  line-height: 1;
  letter-spacing: 0.04em;
  background-color: #f1f1f1;
  font-weight: normal;
  font-size: 15px;
  cursor: pointer;
}
/*
Default

ModSelectfield のデフォルトスタイル（JavaScript の実装が必須。`.js-mod-selectfield`、`.js-mod-selectfield__label`、`.js-mod-selectfield__field`、`.js-mod-selectfield__arrow`、`.js-mod-selectfield__arrow__icon` を付与する）

Weight: -100

Markup: <label class="{{modifier_class}} js-{{modifier_class}}">
  <span class="{{modifier_class}}__label js-{{modifier_class}}__label"></span>
  <span class="{{modifier_class}}__arrow js-{{modifier_class}}__arrow"><i class="mod-icon mod-icon--type-b-d {{modifier_class}}__arrow__icon js-{{modifier_class}}__arrow__icon"></i></span>
  <span class="{{modifier_class}}__options js-{{modifier_class}}__options"></span>
  <select class="{{modifier_class}}__field js-{{modifier_class}}__field" name="{{modifier_class}}-07ac805">
    <option value="">label-{{modifier_class}}-option-noselect</option>
    <option value="{{modifier_class}}-option-1">label-{{modifier_class}}-option-1</option>
    <option value="{{modifier_class}}-option-2">label-{{modifier_class}}-option-2</option>
    <option value="{{modifier_class}}-option-3">label-{{modifier_class}}-option-3</option>
  </select>
</label>
<span class="{{modifier_class}} js-{{modifier_class}}">
  <span class="{{modifier_class}}__label js-{{modifier_class}}__label"></span>
  <span class="{{modifier_class}}__arrow js-{{modifier_class}}__arrow"><i class="mod-icon mod-icon--type-b-d {{modifier_class}}__arrow__icon js-{{modifier_class}}__arrow__icon"></i></span>
  <span class="{{modifier_class}}__options js-{{modifier_class}}__options"></span>
  <select class="{{modifier_class}}__field js-{{modifier_class}}__field" name="{{modifier_class}}-df20690">
    <option value="">label-{{modifier_class}}-option-noselect</option>
    <option value="{{modifier_class}}-option-1">label-{{modifier_class}}-option-1</option>
    <option value="{{modifier_class}}-option-2">label-{{modifier_class}}-option-2</option>
    <option value="{{modifier_class}}-option-3">label-{{modifier_class}}-option-3</option>
  </select>
</span>

mod-selectfield - デフォルトスタイル

Style guide: field.select.default
*/
.mod-selectfield__label--js-hover {
  color: #fff;
  background-color: #a9a9a9;
}
.mod-selectfield__options__item--js-hover {
  background-color: #d9d9d9;
}
.mod-selectfield__options__item--js-selected {
  color: #fff;
  background-color: #a9a9a9;
}
/*
Option: Themes

ModSelectfield のオプション（テーマ。例外的に子孫セレクタによって設定する）

Weight: -100

Markup: <label class="mod-selectfield {{modifier_class}} js-mod-selectfield">
  <span class="mod-selectfield__label js-mod-selectfield__label"></span>
  <span class="mod-selectfield__arrow js-mod-selectfield__arrow"><i class="mod-icon mod-icon--type-b-d mod-selectfield__arrow__icon js-mod-selectfield__arrow__icon"></i></span>
  <span class="mod-selectfield__options js-mod-selectfield__options"></span>
  <select class="mod-selectfield__field js-mod-selectfield__field" name="{{modifier_class}}-fd538e">
    <option value="">label-mod-selectfield-option-noselect</option>
    <option value="mod-selectfield-option-1">label-mod-selectfield-option-1</option>
    <option value="mod-selectfield-option-2">label-mod-selectfield-option-2</option>
    <option value="mod-selectfield-option-3">label-mod-selectfield-option-3</option>
  </select>
</label>
<span class="mod-selectfield {{modifier_class}} js-mod-selectfield">
  <span class="mod-selectfield__label js-mod-selectfield__label"></span>
  <span class="mod-selectfield__arrow js-mod-selectfield__arrow"><i class="mod-icon mod-icon--type-b-d mod-selectfield__arrow__icon js-mod-selectfield__arrow__icon"></i></span>
  <span class="mod-selectfield__options js-mod-selectfield__options"></span>
  <select class="mod-selectfield__field js-mod-selectfield__field" name="{{modifier_class}}-1f09dd">
    <option value="">label-mod-selectfield-option-noselect</option>
    <option value="mod-selectfield-option-1">label-mod-selectfield-option-1</option>
    <option value="mod-selectfield-option-2">label-mod-selectfield-option-2</option>
    <option value="mod-selectfield-option-3">label-mod-selectfield-option-3</option>
  </select>
</span>

mod-selectfield--theme-default - デフォルト
mod-selectfield--theme-a-a - テーマ a-a

Style guide: field.select.theme
*/
.mod-selectfield--theme-a-a {
  background-color: #fff;
}
.mod-selectfield--theme-a-a .mod-selectfield__options__item {
  background-color: #fff;
}
.mod-selectfield--theme-a-a .mod-selectfield__options__item--js-hover {
  background-color: #e6e6e6;
}
.mod-selectfield--theme-a-a .mod-selectfield__options__item--js-selected {
  color: #fff;
  background-color: #a9a9a9;
}
/*
block

サイトを構成するレイアウトブロック

Weight: 0

Style guide: block
*/
/*
Variations

ブロック定義　ヘッダー(PC)

Markup:
   <div class="{{modifier_class}}  mod-box helper--hide-landscape-under" id="js-header-bar-pc">
      <div class="{{modifier_class}}__wrapper mod-box">
        <div class="{{modifier_class}}__container  mod-box__container">
          <div class="{{modifier_class}}__logo__container">
            <h1 class="mod-box">
             <a class="{{modifier_class}}__btn mod-btn" href="javascript:;">
               <img class="mod-pict {{modifier_class}}__pict" src="../images/common/logo_pc.png" alt="
            HarborWrite"><span class="{{modifier_class}}__logo__lead mod-text mod-text--size-11">貿易管理システムソフトのトップブランド</span>
              </a>
            </h1>
          </div>
          <div class="{{modifier_class}}__right__container mod-box">
            <nav class="dropdown_container {{modifier_class}}__nav__container">
              <ul class="dropdown {{modifier_class}}__list  mod-box" id="js_menu">
                <li class="dropdown_item {{modifier_class}}__list__item {{modifier_class}}__list__item__first  mod-box__container">
                  <a class="{{modifier_class}}__list__item__btn  mod-btn" href="{{ this.dir.root }}">TOP</a>
                </li>
                <li class="dropdown_item {{modifier_class}}__list__item {{modifier_class}}__list__item__first  mod-box__container">
                  <a class="{{modifier_class}}__list__item__btn  mod-btn" href="{{ this.dir.root }}vision.html">HarborWriteのご案内<div class="{{modifier_class}}__js-sankaku"></div></a>
                   <div class="{{modifier_class}}__dropdown mod-box">
                    <div class="mod-box__container--width-a-a">
                      <ul class="mod-box {{modifier_class}}__dropdown-a">
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn" href="javascript:;">Export System</a></li>
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn" href="javascript:;">Import System</a></li>
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn" href="javascript:;">機能一覧</a></li>
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn" href="javascript:;">提供形態</a></li>
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn {{modifier_class}}__dropdown__btn__last" href="{{ this.dir.root }}abroad.html">ソリューション紹介</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="dropdown_item {{modifier_class}}__list__item {{modifier_class}}__list__item__first  mod-box__container">
                  <a class="{{modifier_class}}__list__item__btn  mod-btn" href="{{ this.dir.root }}message.html">導入のご案内<div class="{{modifier_class}}__js-sankaku"></div></a>
                   <div class="{{modifier_class}}__dropdown {{modifier_class}}__dropdown__c mod-box">
                    <div class="mod-box__container--width-a-a">
                      <ul class="mod-box {{modifier_class}}__dropdown-a">
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn" href="javascript:;">貿易管理システム導入をご検討中のお客様へ</a></li>
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn" href="javascript:;">他社システムを導入済みのお客様へ</a></li>
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn" href="javascript:;">ご利用中のお客様へ</a></li>
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn" href="javascript:;">Slerのお客様へ</a></li>
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn" href="javascript:;">導入の流れ</a></li>
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn" href="javascript:;">よくある質問</a></li>
                        <li class="{{modifier_class}}__dropdown__list mod-text"><a class="{{modifier_class}}__dropdown__btn" href="javascript:;">無料デモ実施のご案内</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="dropdown_item {{modifier_class}}__list__item {{modifier_class}}__list__item__first  mod-box__container">
                  <a class="{{modifier_class}}__list__item__btn  mod-btn" href="javascript:;" target="_blank">ユーザー紹介</a>
                </li>
                <li class="dropdown_item {{modifier_class}}__list__item {{modifier_class}}__list__item__first  mod-box__container">
                  <a class="{{modifier_class}}__list__item__btn  mod-btn" href="javascript:;" target="_blank">お問い合わせ</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>

block-a-a-a - デフォルトスタイル

Style guide: block.a.a.a
*/
.block-a-a-a {
  -webkit-box-shadow: 0 0 9px rgba(0,0,0,0.15);
          box-shadow: 0 0 9px rgba(0,0,0,0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.block-a-a-a__wrapper {
  background-color: #fff;
}
.block-a-a-a__dropdown {
  background-color: #41618d;
  position: absolute;
  width: 100%;
  z-index: 100000;
  display: none;
  left: 0;
}
.block-a-a-a__dropdown__b:before {
  right: 34.2%;
}
.block-a-a-a__dropdown__c:before {
  right: 28.5%;
}
.block-a-a-a__dropdown__list {
  display: inline-block;
}
.block-a-a-a__dropdown__list__m {
  margin: 20px 0 15px 0;
}
.block-a-a-a__dropdown__list__b {
  display: inline-block;
  margin-right: 2%;
}
.block-a-a-a__dropdown__list__b:last-child {
  margin-right: 0;
}
.block-a-a-a__dropdown-b {
  left: 0;
}
.block-a-a-a__dropdown-a-a {
  right: -18%;
}
.block-a-a-a__dropdown-c {
  left: 0;
}
.block-a-a-a__container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: static;
}
.block-a-a-a__logo__container {
  padding: 10px 0;
}
.block-a-a-a__right__container {
  position: static;
}
.block-a-a-a__btn {
  text-align: left;
  display: inline-block;
}
.block-a-a-a__pict {
  display: inline-block;
  text-align: left;
}
.block-a-a-a__list {
  display: table;
  position: static;
  table-layout: fixed;
  width: 100%;
}
.block-a-a-a__list__item {
  display: table-cell;
  position: static;
  width: 25%;
}
.block-a-a-a__list__item__btn {
  color: #3c5a88;
  font-size: 14px;
  height: 40px;
  border-right: 1px solid #efefef;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 12px 0;
  background-color: #fff;
  white-space: nowrap;
  word-break: normal;
  word-wrap: normal;
}
.block-a-a-a__list__item__btn:hover {
  background-color: #e1e9f2;
  border-bottom: 2px solid #3c5a88;
}
.block-a-a-a__list__item__btn__last {
  padding: 21px 0 21px 14px;
}
.block-a-a-a__list__item__first {
  border-left: 1px solid #efefef;
}
.block-a-a-a__head__btn {
  margin-top: -3px;
  margin-left: auto;
}
.block-a-a-a__head__btn {
  width: 47%;
}
.block-a-a-a__head__btn__link {
  background-color: #e85298;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 0 0 3px 3px;
  padding: 10px 0;
  -webkit-box-shadow: 0 4px #ac3d72;
          box-shadow: 0 4px #ac3d72;
  white-space: nowrap;
  word-break: normal;
  word-wrap: normal;
}
.block-a-a-a__dropdown__btn {
  padding: 20px 20px 20px 15px;
  display: block;
  color: #fff;
  font-size: 13px;
  background: url("../images/common/line_pc.png") no-repeat 100% 50%;
}
.block-a-a-a__dropdown__btn:hover {
  color: #6c9bd2;
}
.block-a-a-a__dropdown__btn__b {
  padding: 10px 0 0 0;
  display: inline-block;
  color: #fff;
  font-size: 14px;
}
.block-a-a-a__dropdown__btn__last {
  border-bottom: none;
}
.block-a-a-a__dropdown__list__icon {
  margin-left: 12px;
  position: relative;
  top: 5px;
}
.block-a-a-a .current {
  color: #e85298;
}
.block-a-a-a__logo__lead {
  color: #3c5a88;
  font-size: 12px;
  margin-left: 15px;
  display: inline-block;
  margin-top: 13px;
}
.block-a-a-a__img__link {
  display: block;
}
/*
Variations

ブロック定義　ヘッダー(SP)

Markup:
<div class="{{modifier_class}}  mod-box">
  <div class="{{modifier_class}}__container">
    <div class="{{modifier_class}}__logo__container">
      <h1 class="{{modifier_class}}__logo mod-box">
       <a href="javascript:;" class="{{modifier_class}}__btn mod-btn">
         <img class="mod-pict {{modifier_class}}__pict__logo" src="../images/common/logo_sp.png" alt="HarborWrite">
       </a>
      </h1>
    </div>
    <div class="{{modifier_class}}__right__container mod-box">
      <ul class="{{modifier_class}}__list mod-textgroup">
        <li class="{{modifier_class}}__list__item mod-textgroup__item  mod-text">
          <a href="javascript:;" class="{{modifier_class}}__btn mod-btn">
           <img class="mod-pict {{modifier_class}}__pict" src="../images/common/nav_sp_mail_btn.png" alt="">
         </a>
        </li>
        <li class="{{modifier_class}}__list__item mod-textgroup__item  mod-text">
          <a href="javascript:;" class="{{modifier_class}}__btn mod-btn">
           <img class="mod-pict {{modifier_class}}__pict" src="../images/common/nav_sp_tel_btn.png" alt="">
         </a>
        </li>
        <li class="{{modifier_class}}__list__item mod-textgroup__item  mod-text">
          <a href="javascript:;" class="{{modifier_class}}__btn mod-btn">
           <img class="mod-pict {{modifier_class}}__pict" src="../images/common/nav_sp_open_btn.png" alt="">
         </a>
        </li>
      </ul>
    </div>
</div>

block-a-b - デフォルトスタイル

Style guide: block.a.b
*/
.block-a-b__container {
  background-color: #fff;
  height: 50px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: table;
  width: 100%;
  table-layout: fixed;
}
.block-a-b__logo__container {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
  padding-left: 5px;
}
.block-a-b__right__container {
  display: table-cell;
  text-align: right;
  width: 50%;
  vertical-align: middle;
}
.block-a-b__list__item {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}
.block-a-b__pict {
  max-width: 30px;
  width: 100%;
}
.block-a-b__pict__logo {
  max-width: 142px;
  width: 100%;
  height: auto;
}
/*
Variations

ブロック定義　ヘッダー(SP)

Markup:
<div class="{{modifier_class}}  mod-box">
  <div class="{{modifier_class}}__container">
    <div class="{{modifier_class}}__logo__container">
      <h1 class="{{modifier_class}}__logo mod-box">
       <a href="javascript:;" class="{{modifier_class}}__btn mod-btn">
         <img class="mod-pict {{modifier_class}}__pict__logo" src="../images/common/logo_sp.png" alt="HarborWrite">
       </a>
      </h1>
    </div>
    <div class="{{modifier_class}}__right__container mod-box">
      <ul class="{{modifier_class}}__list mod-textgroup">
        <li class="{{modifier_class}}__list__item mod-textgroup__item  mod-text">
          <a href="javascript:;" class="{{modifier_class}}__btn mod-btn">
           <img class="mod-pict {{modifier_class}}__pict" src="../images/common/nav_sp_close_btn.png" alt="">
         </a>
        </li>
      </ul>
    </div>
</div>

block-a-b-d - デフォルトスタイル

Style guide: block.a.b.d
*/
.block-a-b-d {
  -webkit-box-shadow: 0 0 9px rgba(0,0,0,0.15);
          box-shadow: 0 0 9px rgba(0,0,0,0.15);
}
.block-a-b-d__container {
  background-color: #fff;
  height: 50px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: table;
  width: 100%;
  table-layout: fixed;
}
.block-a-b-d__logo__container {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
  padding-left: 5px;
}
.block-a-b-d__right__container {
  display: table-cell;
  text-align: right;
  width: 50%;
  vertical-align: middle;
}
.block-a-b-d__list__item {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}
.block-a-b-d__pict {
  max-width: 30px;
  width: 100%;
}
.block-a-b-d__pict__logo {
  max-width: 142px;
  width: 100%;
  height: auto;
}
/*
Variations

ブロック定義　ヘッダー(SP)

Markup:
<div class="{{modifier_class}} mod-box">
<div class="layer"></div>
<!-- スライドメニュー部分-->
<nav id="slide_menu">
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
      <li><a href="#">menu4</a></li>
      <li><a href="#">menu5</a></li>
      <li><a href="#">menu6</a></li>
      <li><a href="#">menu7</a></li>
      <li><a href="#">menu8</a></li>
      <li><a href="#">menu9</a></li>
      <li><a href="#">menu10</a></li>
      <li><a href="#">menu11</a></li>
      <li><a href="#">menu12</a></li>
      <li><a href="#">menu13</a></li>
      <li><a href="#">menu14</a></li>
      <li><a href="#">menu15</a></li>
    </ul>
</nav>
<div id="container">
    <!--メニューを出すボタン-->
    <div class="block-a-b  mod-box">
      <div class="block-a-b__container">
        <div class="block-a-b__logo__container">
          <h1 class="block-a-b__logo mod-box">
           <a href="javascript:;" class="block-a-b__btn mod-btn">
             <img class="mod-pict block-a-b__pict__logo" src="../images/common/logo_sp.png" alt="HarborWrite">
           </a>
          </h1>
        </div>
        <div class="block-a-b__right__container mod-box">
          <ul class="block-a-b__list mod-textgroup">
            <li class="block-a-b__list__item mod-textgroup__item  mod-text">
              <a href="javascript:;" class="block-a-b__btn mod-btn">
               <img class="mod-pict block-a-b__pict" src="../images/common/nav_sp_mail_btn.png" alt="">
             </a>
            </li>
            <li class="block-a-b__list__item mod-textgroup__item  mod-text">
              <a href="javascript:;" class="block-a-b__btn mod-btn">
               <img class="mod-pict block-a-b__pict" src="../images/common/nav_sp_tel_btn.png" alt="">
             </a>
            </li>
            <li class="block-a-b__list__item mod-textgroup__item  mod-text" id="button">
              <a href="javascript:;" class="block-a-b__btn mod-btn">
               <img class="mod-pict block-a-b__pict" src="../images/common/nav_sp_open_btn.png" alt="">
             </a>
            </li>
          </ul>
        </div>
    </div>
    <div class="content">
    </div><!-- /.content -->
</div><!-- /.container -->
</div>

block-a-b-c - デフォルトスタイル

Style guide: block.a.b.c
*/
.block-a-b-c #slide_menu {
  position: absolute;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  z-index: 3;
  overflow-y: scroll;
}
.block-a-b-c #container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-box-shadow: 0 0 9px rgba(0,0,0,0.15);
          box-shadow: 0 0 9px rgba(0,0,0,0.15);
}
.block-a-b-c #button {
  cursor: pointer;
  z-index: 2;
}
.block-a-b-c .layer {
  position: fixed;
  top: 0;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
}
/*
Variations

ブロック定義　汎用見出し1

Markup:
<div class="{{modifier_class}}  mod-box">
  <div>
    <h2 class="mod-text {{modifier_class}}__title">これからの10年を見据え全面リニューアル<br>
HarborWrite®は将来の環境や業務内容の変化にも柔軟に対応します</h2>
  </div>
  <div class="{{modifier_class}}__title__b__container mod-box">
    <h2 class="mod-text {{modifier_class}}__title__b">
    <span class="helper--hide-landscape-under"><span class="{{modifier_class}}__title__b__small">長年培った貿易管理システム開発のノウハウにより</span><br>
  御社の貿易管理業務の「効率化」と「品質向上」を実現します</span>
  <span class="helper--hide-landscape-over"><span class="{{modifier_class}}__title__b__small">長年培った貿易管理システム開発のノウハウにより</span><br>
  御社の貿易管理業務の<br>「効率化」と「品質向上」を実現します</span>
  </h2>
  </div>
</div>

block-d-c - デフォルトスタイル

Style guide: block.d.c
*/
.block-d-c__title {
  color: #3c5a88;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
}
.block-d-c__title__b {
  font-size: 34px;
  color: #3c5a88;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}
.block-d-c__title__b__small {
  font-size: 20px;
}
.block-d-c__title__b__container {
  padding: 30px;
  background-color: #e1e9f2;
}
.block-d-c__title__c {
  font-size: 22px;
}
/*
Variations

ブロック定義　汎用見出し2 ご検討中のお客様へ

Markup:
<div class="{{modifier_class}}  mod-box">
  <h3 class="mod-text {{modifier_class}}__title">ご検討・ご導入のための各種情報</h3>
  <h3 class="mod-text {{modifier_class}}__title__a">ご検討・ご導入のための各種情報</h3>
  <h3 class="mod-text {{modifier_class}}__title__b">機能一覧</h3>
  <h3 class="mod-text {{modifier_class}}__title__c">全機能詳細を知りたい方はこちら</h3>
  <h3 class="mod-text {{modifier_class}}__title__e"><span class="{{modifier_class}}__title__e__sub">他システムを</span><br>導入されているお客様へ</h3>
  <h3 class="mod-text {{modifier_class}}__title__f"><span class="{{modifier_class}}__title__f__sub">1</span>20年以上にわたり培った貿易管理システム開発のノウハウ</h3>
</div>

block-d-d - デフォルトスタイル

Style guide: block.d.d
*/
.block-d-d__title {
  color: #3c5a88;
  font-size: 26px;
  font-weight: bold;
  background-image: url("../images/common/title_bg_001_pc.png");
  background-repeat: no-repeat;
  background-position: 0% 0%;
  -webkit-background-size: 4px auto;
          background-size: 4px auto;
  padding-left: 20px;
  line-height: 30px;
}
.block-d-d__title__a {
  color: #3c5a88;
  font-size: 26px;
  font-weight: bold;
  background-image: url("../images/common/title_bg_002_pc.png");
  background-repeat: no-repeat;
  background-position: 0% 0%;
  -webkit-background-size: 26px auto;
          background-size: 26px auto;
  padding-left: 40px;
  line-height: 30px;
}
.block-d-d__title__b {
  background-color: #f9f8f4;
  border-left: 4px solid #3c5a88;
  color: #3c5a88;
  font-size: 28px;
  font-weight: bold;
  background-image: none;
  padding: 9px 0 9px 28px;
}
.block-d-d__title__c {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  background-image: url("../images/common/title_bg_003_pc.png");
  background-repeat: no-repeat;
  background-position: 0% 0%;
  -webkit-background-size: 26px auto;
          background-size: 26px auto;
  padding-left: 40px;
  line-height: 30px;
}
.block-d-d__title__e {
  background-color: #f9f8f4;
  border-left: 4px solid #3c5a88;
  color: #3c5a88;
  font-size: 28px;
  font-weight: bold;
  background-image: none;
  padding: 0px 0 5px 28px;
  line-height: 1.2;
}
.block-d-d__title__e__sub {
  font-size: 15px;
  font-weight: normal;
}
.block-d-d__title__f {
  color: #3c5a88;
  font-size: 26px;
  font-weight: bold;
  padding-left: 50px;
  line-height: 30px;
}
.block-d-d__title__f__sub {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-bottom: 2px solid #9fa0a0;
  color: #fff;
  background-color: #3c5a88;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  margin-right: 18px;
  font-size: 20px;
  font-weight: bold;
  vertical-align: middle;
}
/*
Variations

ブロック定義　汎用見出し3

Markup:
<div class="{{modifier_class}}  mod-box">
  <h3 class="mod-text {{modifier_class}}__title__a">導入のご案内</h3>
  <h3 class="mod-text {{modifier_class}}__title__b">導入のご案内</h3>
  <h3 class="mod-text {{modifier_class}}__title__c">こんな方におすすめします</h3>
  <h4 class="mod-text {{modifier_class}}__title__d">こんな方におすすめします</h4>
</div>

block-d-e - デフォルトスタイル

Style guide: block.d.e
*/
.block-d-e__title__a {
  color: #3c5a88;
  font-size: 28px;
  font-weight: bold;
}
.block-d-e__title__b {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
}
.block-d-e__title__c {
  color: #3c5a88;
  font-size: 20px;
  font-weight: bold;
}
.block-d-e__title__d {
  color: #3c5a88;
  font-size: 24px;
  font-weight: bold;
}
/*
Variations

お知らせ top 

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="mod-box {{modifier_class}}__list">
    <div class="mod-box {{modifier_class}}__lists">
      <div class="mod-box {{modifier_class}}__a">
        <span class="{{modifier_class}}__date">2017.5.1</span>
      </div>
      <div class="mod-box  {{modifier_class}}__b">
        <p class="{{modifier_class}}__b__description mod-text"><a class="mod-text {{modifier_class}}__text__link">Webサイトをリニューアルいたしました。</a></p>
      </div>
    </div>
   </div>
  <div class="mod-box {{modifier_class}}__list">
    <div class="mod-box {{modifier_class}}__lists">
      <div class="mod-box {{modifier_class}}__a">
        <span class="{{modifier_class}}__date">2017.5.1</span>
      </div>
      <div class="mod-box  {{modifier_class}}__b">
        <p class="{{modifier_class}}__b__description mod-text">Webサイトをリニューアルいたしました。</p>
      </div>
    </div>
   </div>
  <div class="mod-box">
    <div class="mod-box {{modifier_class}}__lists">
      <div class="mod-box {{modifier_class}}__a">
        <span class="{{modifier_class}}__date">2017.5.1</span>
      </div>
      <div class="mod-box  {{modifier_class}}__b">
        <p class="{{modifier_class}}__b__description mod-text">Webサイトをリニューアルいたしました。</p>
      </div>
    </div>
   </div>
</div>

block-a-d-d - デフォルトスタイル

style guide: block.a.d.d
*/
.block-a-d-d__text__link {
  color: #444;
  text-decoration: none;
}
.block-a-d-d__text__link:hover {
  color: #3c5a88;
  text-decoration: underline;
}
.block-a-d-d__lists {
  padding-bottom: 20px;
  width: 100%;
}
.block-a-d-d__a {
  display: inline-block;
  margin-right: 20px;
  width: 80px;
}
.block-a-d-d__b {
  display: inline-block;
}
.block-a-d-d__date {
  font-size: 16px;
  display: inline-block;
}
.block-a-d-d__b__description {
  font-size: 16px;
}
/*
Variations

お知らせ一覧

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="mod-box {{modifier_class}}__list">
    <div class="mod-box {{modifier_class}}__lists">
      <div class="mod-box {{modifier_class}}__a">
        <span class="{{modifier_class}}__date">2017.5.1</span>
      </div>
      <div class="mod-box  {{modifier_class}}__b">
        <p class="{{modifier_class}}__b__description mod-text"><a class="mod-text {{modifier_class}}__text__link">Webサイトをリニューアルいたしました。</a></p>
      </div>
    </div>
   </div>
  <div class="mod-box {{modifier_class}}__list">
    <div class="mod-box {{modifier_class}}__lists">
      <div class="mod-box {{modifier_class}}__a">
        <span class="{{modifier_class}}__date">2017.5.1</span>
      </div>
      <div class="mod-box  {{modifier_class}}__b">
        <p class="{{modifier_class}}__b__description mod-text"><a class="mod-text {{modifier_class}}__text__link">Webサイトをリニューアルいたしました。</a></p>
      </div>
    </div>
   </div>
  <div class="mod-box">
    <div class="mod-box {{modifier_class}}__lists">
      <div class="mod-box {{modifier_class}}__a">
        <span class="{{modifier_class}}__date">2017.5.1</span>
      </div>
      <div class="mod-box  {{modifier_class}}__b">
        <p class="{{modifier_class}}__b__description mod-text"><a class="mod-text {{modifier_class}}__text__link">Webサイトをリニューアルいたしました。</a></p>
      </div>
    </div>
   </div>
</div>

block-a-d-d-b - デフォルトスタイル

style guide: block.a.d.d.b
*/
.block-a-d-d-b {
  padding-left: 34px;
}
.block-a-d-d-b__text__link {
  color: #444;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}
.block-a-d-d-b__text__link:hover {
  color: #3c5a88;
  text-decoration: underline;
}
.block-a-d-d-b__lists {
  margin-bottom: 35px;
  width: 100%;
}
.block-a-d-d-b__a {
  margin-bottom: 10px;
}
.block-a-d-d-b__date {
  font-size: 16px;
}
/*
Variations

お知らせ 年度一覧

Markup:
<div class="{{modifier_class}} mod-box">
  <ul class="{{modifier_class}}__list mod-box">
    <li class="{{modifier_class}}__list-item mod-text"><a href="#" class="{{modifier_class}}__link__btn mod-btn">2017</a></li>
    <li class="{{modifier_class}}__list-item mod-text"><a href="#" class="{{modifier_class}}__link__btn mod-btn">2018</a></li>
    <li class="{{modifier_class}}__list-item mod-text"><a href="#" class="{{modifier_class}}__link__btn mod-btn">2019</a></li>
    <li class="{{modifier_class}}__list-item mod-text"><a href="#" class="{{modifier_class}}__link__btn mod-btn">2020</a></li>
    <li class="{{modifier_class}}__list-item mod-text"><a href="#" class="{{modifier_class}}__link__btn mod-btn">2021</a></li>
  </ul>
</div>

block-a-d-d-c - デフォルトスタイル

style guide: block.a.d.d.c
*/
.block-a-d-d-c {
  display: table;
  margin-left: auto;
}
.block-a-d-d-c li {
  display: inline-block;
  margin-right: 35px;
}
.block-a-d-d-c li a {
  font-size: 16px;
  color: #444;
}
.block-a-d-d-c li.current a {
  color: #3c5a88;
}
/*
Variations

top 動くボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="mod-box">
    <a href="#" class="{{modifier_class}}__btn mod-btn">
      <h4 class="{{modifier_class}}__title mod-text">貿易管理システム導入を<br>
    ご検討中のお客様へ</h4>
      <p class="{{modifier_class}}__text mod-text">豊富な実績とお高い信頼性<br>
    優れた機能と既存システムとの連携<br>
    予算規模にあわせたラインナップ</p>
      <p class="mod-pict">
       <img class="{{modifier_class}}__pict helper--hide-landscape-under" src="../images/top/top_img_005_pc.png">
       <img class="{{modifier_class}}__pict helper--hide-landscape-over" src="../images/top/top_img_005_sp.png">
      </p>
    </a>
  </div>
  <div class="mod-box">
    <a href="#" class="{{modifier_class}}__btn mod-btn">
      <h4 class="{{modifier_class}}__title mod-text">他社システムを<br>
    導入済みのお客様へ</h4>
      <p class="{{modifier_class}}__text mod-text">現状のシステムに満足していないお客様は<br>
    HarborWirteを解決策としてご検討ください</p>
      <p class="mod-pict">
       <img class="{{modifier_class}}__pict helper--hide-landscape-under" src="../images/top/top_img_006_pc.png">
       <img class="{{modifier_class}}__pict helper--hide-landscape-over" src="../images/top/top_img_006_sp.png">
      </p>
    </a>
  </div>
</div>

block-a-b-e - デフォルトスタイル

style guide: block.a.b.e
*/
.block-a-b-e {
  margin: 20px 0 0 20px;
  background-color: rgba(208,208,208,0.8);
}
.block-a-b-e__btn {
  background-color: #fff;
}
.block-a-b-e__btn:hover {
  -webkit-transform: translate3d(-8px, -8px, 0);
          transform: translate3d(-8px, -8px, 0);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.block-a-b-e__title {
  color: #3c5a88;
  font-size: 24px;
  font-weight: bold;
  text-align: left;
  padding: 30px 30px 20px 30px;
  height: 110px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.block-a-b-e__text {
  text-align: left;
  color: #444;
  font-size: 15px;
  padding: 0 30px 0 30px;
  height: 90px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/*
Variations

top 動くボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="mod-box">
    <a href="#" class="{{modifier_class}}__btn mod-btn">
      <h4 class="{{modifier_class}}__title mod-text">HarborWrite®を<br>
    ご利用中のお客様へ</h4>
      <p class="{{modifier_class}}__text mod-text">HarborWirte®のサポートやアップデート、機能追加などについてはこちらをご覧ください</p>
    </a>
  </div>
  <div class="mod-box">
    <a href="#" class="{{modifier_class}}__btn mod-btn">
      <h4 class="{{modifier_class}}__title {{modifier_class}}__title__b mod-text">
    SIerのお客様へ</h4>
      <p class="{{modifier_class}}__text mod-text">HarborWirte®は貿易管理システムのパイオニアとして多くのSIer様を通じ導入されています</p>
    </a>
  </div>
</div>

block-a-b-f - デフォルトスタイル

style guide: block.a.b.f
*/
.block-a-b-f {
  margin: 20px 0 0 20px;
  background-color: rgba(208,208,208,0.8);
}
.block-a-b-f__btn {
  background-color: #fff;
}
.block-a-b-f__btn:hover {
  -webkit-transform: translate3d(-8px, -8px, 0);
          transform: translate3d(-8px, -8px, 0);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.block-a-b-f__title {
  color: #3c5a88;
  font-size: 24px;
  font-weight: bold;
  text-align: left;
  padding: 22px 30px 20px 30px;
  height: 98px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.block-a-b-f__title__b {
  padding: 40px 30px 20px 30px;
}
.block-a-b-f__text {
  text-align: left;
  color: #444;
  font-size: 15px;
  padding: 0 30px 0 30px;
  height: 90px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/*
Variations

リンクボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn" href="javascript:;">
      ご発注から導入完了までの流れをご説明します
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn {{modifier_class}}__link__btn--b" href="javascript:;">
      お客様からのよくあるご質問を掲載しています。
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--c" href="javascript:;">
      当社システムをより深く理解していただくため、<br>
ご希望に応じ無料でデモンストレーションを行います。
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--d" href="javascript:;">
輸出業務から三国間業務まで広くサポート
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--e" href="javascript:;">
      発注/仕入/支払/原価管理ならお任せください
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--f" href="javascript:;">
ライセンス買取、月額利用どちらかをお選び頂けます
      </a>
    </h4>
  </div>
</div>

block-a-h - デフォルトスタイル

style guide: block.a.h
*/
.block-a-h {
  z-index: 1000;
  overflow: hidden;
}
.block-a-h__link__btn {
  background-color: #e1e9f2;
  background-image: url("../images/common/icon01_off_pc.png");
  background-repeat: no-repeat;
  background-position: 50% 34%;
  width: 100%;
  padding: 180px 10px 40px 10px;
  text-align: center;
  font-size: 14px;
  color: #444;
  display: inline-block;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  height: 262px;
}
.block-a-h__link__btn:hover {
  background-color: #6c9bd2;
  color: #fff;
  background-image: url("../images/common/icon01_on_pc.png");
}
.block-a-h__link__btn__text {
  display: block;
  color: #444;
}
.block-a-h__link__btn--b {
  background-image: url("../images/common/icon02_off_pc.png");
  background-position: 50% 34%;
}
.block-a-h__link__btn--b:hover {
  background-image: url("../images/common/icon02_on_pc.png");
}
.block-a-h__link__btn--c {
  background-image: url("../images/common/icon03_off_pc.png");
  background-position: 50% 34%;
}
.block-a-h__link__btn--c:hover {
  background-image: url("../images/common/icon03_on_pc.png");
}
.block-a-h__link__btn--d {
  font-size: 14px;
  background-image: url("../images/common/icon22_off_pc.png");
  background-position: 50% 34%;
}
.block-a-h__link__btn--d:hover {
  background-image: url("../images/common/icon22_on_pc.png");
}
.block-a-h__link__btn--e {
  font-size: 14px;
  background-image: url("../images/common/icon23_off_pc.png");
  background-position: 50% 34%;
}
.block-a-h__link__btn--e:hover {
  background-image: url("../images/common/icon23_on_pc.png");
}
.block-a-h__link__btn--f {
  font-size: 14px;
  background-image: url("../images/common/icon24_off_pc.png");
  background-position: 50% 34%;
}
.block-a-h__link__btn--f:hover {
  background-image: url("../images/common/icon24_on_pc.png");
}
/*
Variations

リンクボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <a class="{{modifier_class}}__link__btn" href="javascript:;">
  ああああああ
  </a>
</div>

block-a-h-b - デフォルトスタイル

style guide: block.a.h.b
*/
.block-a-h-b {
  z-index: 1000;
  overflow: hidden;
}
.block-a-h-b__link__btn {
  background-color: #e1e9f2;
  background-image: url("../images/common/nav_pc_off.png");
  background-repeat: no-repeat;
  background-position: 98% 50%;
  width: 100%;
  text-align: center;
  color: #006cb8;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.block-a-h-b__link__btn:hover {
  background-color: #6c9bd2;
  background-image: url("../images/common/nav_pc_on.png");
  color: #fff;
  background-repeat: no-repeat;
  background-position: 98% 50%;
}
/*
Variations

404エラーブロック

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="block-a-d-a mod-box">
    <h3 class="block-a-d-a__label mod-text">
    <span class="block-a-d-a__text">４０４エラー</span>
    </h3>
    <p class="block-a-d-a__lead mod-text {{modifier_class}}__lead">NOT FOUND</p>
    <p class="mod-text {{modifier_class}}__text-a">お探しのページが見つかりませんでした。</p>
    <p class="mod-text {{modifier_class}}__text-b">指定したURLが間違っているか、ページが削除された可能性があります。<br>
恐れ入りますが、以下のボタンからサイトのホームにお戻りください。</p>
    <p class="mod-pict">
     <img class="{{modifier_class}}__yajirushi helper--hide-landscape-under" src="../images/common/yajirushi04_pc.png">
     <img class="{{modifier_class}}__yajirushi helper--hide-landscape-over" src="../images/common/yajirushi04_sp.png">
    </p>
    <div class="mod-box {{modifier_class}}__btn__container">
    <a class="block-a-h-b__link__btn {{modifier_class}}__btn" href="javascript:;">
    ホームに戻る
    </a>
    </div>
  </div>
</div>

block-a-h-c - デフォルトスタイル

style guide: block.a.h.c
*/
.block-a-h-c__lead {
  font-size: 38px;
}
.block-a-h-c__text-a {
  font-size: 24px;
  text-align: center;
  padding-top: 25px;
}
.block-a-h-c__text-b {
  font-size: 14px;
  text-align: center;
  padding: 20px 0 35px 0;
}
.block-a-h-c__yajirushi {
  display: table;
  margin: auto;
}
.block-a-h-c__btn__container {
  margin: 60px auto;
  width: 400px;
}
/*
Variations

top リンクボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn" href="javascript:;">
        <span class="helper--hide-landscape-under">輸出業務から三国間業務まで広くサポート</span>
        <span class="helper--hide-landscape-over">輸出業務から三国間業務まで<br>広くサポート</span>
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--b" href="javascript:;">
      <span class="helper--hide-landscape-under">発注・仕入・輸入原価管理ならお任せください</span>
      <span class="helper--hide-landscape-over">発注・仕入・輸入原価管理なら<br>お任せください</span>
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--c" href="javascript:;">
        <span class="{{modifier_class}}__text">機能一覧</span>
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--d" href="javascript:;">
        <span class="helper--hide-landscape-under">ライセンス買取、月額利用どちらかをお選び頂けます</span>
        <span class="helper--hide-landscape-over">ライセンス買取、月額利用<br>どちらかをお選び頂けます</span>
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--e" href="javascript:;">
        <span class="{{modifier_class}}__text">提供形態</span>
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--f" href="javascript:;">
        <span class="{{modifier_class}}__text">導入の流れ</span>
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--g" href="javascript:;">
        <span class="{{modifier_class}}__text">よくある質問</span>
      </a>
    </h4>
  </div>
</div>

block-a-h-d - デフォルトスタイル

style guide: block.a.h.d
*/
.block-a-h-d {
  z-index: 1000;
  overflow: hidden;
}
.block-a-h-d__text {
  font-size: 0;
}
.block-a-h-d__link__btn {
  background-color: #e1e9f2;
  background-image: url("../images/common/icon15_pc_off.png"), url("../images/common/nav_pc_off.png");
  background-repeat: no-repeat;
  background-position: 32px 50%, 98% 50%;
  width: 100%;
  padding: 83px 25px 0 141px;
  font-size: 14px;
  color: #444;
  display: inline-block;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  height: 160px;
}
.block-a-h-d__link__btn:hover {
  background-color: #6c9bd2;
  color: #fff;
  background-image: url("../images/common/icon15_pc_on.png"), url("../images/common/nav_pc_on.png");
}
.block-a-h-d__link__btn--b {
  background-image: url("../images/common/icon16_pc_off.png"), url("../images/common/nav_pc_off.png");
}
.block-a-h-d__link__btn--b:hover {
  background-image: url("../images/common/icon16_pc_on.png"), url("../images/common/nav_pc_on.png");
}
.block-a-h-d__link__btn--c {
  background-image: url("../images/common/icon17_pc_off.png"), url("../images/common/nav_pc_off.png");
  background-position: 32px 50%, 98% 50%;
  -webkit-background-size: 207px auto, 9px auto;
          background-size: 207px auto, 9px auto;
  height: 110px;
}
.block-a-h-d__link__btn--c:hover {
  background-image: url("../images/common/icon17_pc_on.png"), url("../images/common/nav_pc_on.png");
}
.block-a-h-d__link__btn--d {
  background-image: url("../images/common/icon18_pc_off.png"), url("../images/common/nav_pc_off.png");
  background-position: 32px 50%, 98% 50%;
  -webkit-background-size: 207px auto, 9px auto;
          background-size: 207px auto, 9px auto;
  height: 110px;
  padding: 58px 25px 0 142px;
}
.block-a-h-d__link__btn--d:hover {
  background-image: url("../images/common/icon18_pc_on.png"), url("../images/common/nav_pc_on.png");
}
.block-a-h-d__link__btn--e {
  background-image: url("../images/common/icon19_pc_off.png"), url("../images/common/nav_pc_off.png");
  background-position: 32px 50%, 98% 50%;
  -webkit-background-size: 207px auto, 9px auto;
          background-size: 207px auto, 9px auto;
  height: 110px;
}
.block-a-h-d__link__btn--e:hover {
  background-image: url("../images/common/icon19_pc_on.png"), url("../images/common/nav_pc_on.png");
}
.block-a-h-d__link__btn--f {
  background-image: url("../images/common/icon20_pc_off.png"), url("../images/common/nav_pc_off.png");
  background-position: 32px 50%, 98% 50%;
  -webkit-background-size: 231px auto, 9px auto;
          background-size: 231px auto, 9px auto;
  height: 110px;
}
.block-a-h-d__link__btn--f:hover {
  background-image: url("../images/common/icon20_pc_on.png"), url("../images/common/nav_pc_on.png");
}
.block-a-h-d__link__btn--g {
  background-image: url("../images/common/icon21_pc_off.png"), url("../images/common/nav_pc_off.png");
  background-position: 32px 50%, 98% 50%;
  -webkit-background-size: 244px auto, 9px auto;
          background-size: 244px auto, 9px auto;
  height: 110px;
}
.block-a-h-d__link__btn--g:hover {
  background-image: url("../images/common/icon21_pc_on.png"), url("../images/common/nav_pc_on.png");
}
.block-a-h-d__link__btn--h__cell-a {
  background-image: url("../images/bottom/guidance_img_008_pc_off.png"), url("../images/common/nav_pc_off.png");
  background-position: 32px 50%, 98% 50%;
  -webkit-background-size: 244px auto, 9px auto;
          background-size: 244px auto, 9px auto;
  height: 110px;
}
.block-a-h-d__link__btn--h__cell-a:hover {
  background-image: url("../images/bottom/guidance_img_008_pc_on.png"), url("../images/common/nav_pc_on.png");
}
.block-a-h-d__link__btn--h__cell-b {
  background-image: url("../images/bottom/guidance_img_008_pc_off.png"), url("../images/common/nav_pc_off.png");
  background-position: 32px 50%, 98% 50%;
  -webkit-background-size: 244px auto, 9px auto;
          background-size: 244px auto, 9px auto;
  height: 110px;
}
.block-a-h-d__link__btn--h__cell-b:hover {
  background-image: url("../images/bottom/guidance_img_008_pc_on.png"), url("../images/common/nav_pc_on.png");
}
/*
Variations

リンクボタン（よく使うスタイル）

Markup:
<div class="{{modifier_class}} mod-box">
  <div>
    <a class="{{modifier_class}}__link__btn" href="javascript:;">
    HarborWriteのさらに詳しい情報はこちら
    </a>
  </div>
</div>

block-a-h-b-b - デフォルトスタイル

style guide: block.a.h.b.b
*/
.block-a-h-b-b {
  z-index: 1000;
  overflow: hidden;
  min-width: 380px;
  width: 20%;
  margin-left: auto;
  margin-right: auto;
}
.block-a-h-b-b__link__btn {
  background-color: #e1e9f2;
  background-image: url("../images/common/nav_pc_off.png");
  background-repeat: no-repeat;
  background-position: 98% 50%;
  width: 100%;
  text-align: center;
  color: #3c5a88;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 16px;
  padding: 10px 0;
  background-position: 94% 50% !important;
  cursor: pointer;
}
.block-a-h-b-b__link__btn:before {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  top: 0;
  width: 50%;
  height: 100%;
  right: 0;
}
.block-a-h-b-b__link__btn:after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  top: 0;
  width: 50%;
  height: 100%;
  left: 0;
}
.block-a-h-b-b__link__btn:hover {
  background-color: #6c9bd2;
  background-image: url("../images/common/nav_pc_on.png");
  color: #fff;
  background-repeat: no-repeat;
  background-position: 98% 50%;
}
.block-a-h-b-b__link__btn:hover:before {
  width: 0;
  background-color: #6c9bd2;
}
.block-a-h-b-b__link__btn:hover:after {
  width: 0;
  background-color: #6c9bd2;
}
/*
Variations

リンクボタン（よく使うスタイル）

Markup:
<div class="{{modifier_class}} mod-box">
  <a class="{{modifier_class}}__link__btn" href="javascript:;">
  一覧へ
  </a>
</div>

block-a-h-b-e - デフォルトスタイル

style guide: block.a.h.b.e
*/
.block-a-h-b-e {
  z-index: 1000;
  overflow: hidden;
  min-width: 300px;
  width: 20%;
  margin-left: auto;
  margin-right: auto;
}
.block-a-h-b-e__link__btn {
  background-color: #fff;
  background-image: url("../images/common/icon14_pc_off.png");
  background-repeat: no-repeat;
  background-position: 5% 50%;
  width: 100%;
  text-align: center;
  color: #3c5a88;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 14px;
  padding: 20px 0;
}
.block-a-h-b-e__link__btn:hover {
  background-color: #6c9bd2;
  background-image: url("../images/common/icon14_pc_on.png");
  color: #fff;
}
/*
Variations

リンクボタン（よく使うスタイル）

Markup:
<div class="{{modifier_class}} mod-box">
  <div>
    <a class="{{modifier_class}}__link__btn" href="javascript:;">
    輸出業務の機能をさらに詳しく見る
    </a>
  </div>
</div>

block-a-h-b-f - デフォルトスタイル

style guide: block.a.h.b.f
*/
.block-a-h-b-f {
  z-index: 1000;
  overflow: hidden;
  min-width: 580px;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
}
.block-a-h-b-f__link__btn {
  background-color: #fff;
  background-image: url("../images/common/nav_pc_off.png");
  background-repeat: no-repeat;
  background-position: 98% 50%;
  width: 100%;
  text-align: center;
  color: #3c5a88;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 24px;
  padding: 24px 0;
  background-position: 94% 50% !important;
}
.block-a-h-b-f__link__btn:hover {
  background-color: #6c9bd2;
  background-image: url("../images/common/nav_pc_on.png");
  color: #fff;
  background-repeat: no-repeat;
  background-position: 98% 50%;
}
/*
Variations

リンクボタン（よく使うスタイル）

Markup:
<div class="{{modifier_class}} mod-box">
  <div>
    <a class="{{modifier_class}}__link__btn" href="javascript:;">
    PDFファイルダウンロード
    </a>
  </div>
</div>

block-a-h-b-g - デフォルトスタイル

style guide: block.a.h.b.g
*/
.block-a-h-b-g {
  z-index: 1000;
  overflow: hidden;
  min-width: 400px;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
}
.block-a-h-b-g__link__btn {
  background-color: #e1e9f2;
  background-image: url("../images/common/nav_pc_off.png");
  background-repeat: no-repeat;
  background-position: 98% 50%;
  width: 100%;
  text-align: center;
  color: #3c5a88;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 24px;
  padding: 24px 0;
  background-position: 94% 50% !important;
}
.block-a-h-b-g__link__btn:hover {
  background-color: #6c9bd2;
  background-image: url("../images/common/nav_pc_on.png");
  color: #fff;
  background-repeat: no-repeat;
  background-position: 98% 50%;
}
/*
Variations

リンクボタン＋画像 ソリューション紹介

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="mod-box">
    <p class="mod-pict {{modifier_class}}__pict__container">
     <img class="{{modifier_class}}__pict helper--hide-landscape-under" src="../images/bottom/solution_img_003_pc.png">
     <img class="{{modifier_class}}__pict helper--hide-landscape-over" src="../images/bottom/solution_img_003_sp.png">
    </p>
    <p class="{{modifier_class}}__text mod-text">
    <span class="helper--hide-landscape-under">安全保障貿易管理システムについてのお問い合わせはコチラ</span>
    <span class="helper--hide-landscape-over">安全保障貿易管理システムについての<br>お問い合わせはコチラ</span>
    </p>
    <div class="mod-box {{modifier_class}}__link__btn__container">
      <a class="{{modifier_class}}__link__btn" href="javascript:;">
    日立ソリューションズ
    </a>
    </div>
  </div>
</div>

block-a-h-b-h - デフォルトスタイル

style guide: block.a.h.b.h
*/
.block-a-h-b-h {
  background-color: #fff;
  padding: 30px;
  z-index: 1000;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
.block-a-h-b-h__text {
  font-size: 22px;
  color: #3c5a88;
  margin-bottom: 10px;
  font-weight: bold;
  letter-spacing: -0.03em;
  text-align: center;
  margin-top: 50px;
}
.block-a-h-b-h__pict__container {
  text-align: center;
}
.block-a-h-b-h__link__btn {
  background-color: #fff;
  background-image: url("../images/common/icon25_pc_off.png");
  background-repeat: no-repeat;
  background-position: 98% 50%;
  width: 100%;
  text-align: center;
  color: #000;
  border: 1px solid #e1e9f2;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 24px;
  padding: 24px 0;
  background-position: 94% 50% !important;
  max-width: 580px;
  width: 100%;
}
.block-a-h-b-h__link__btn:hover {
  background-color: #6c9bd2;
  background-image: url("../images/common/icon25_pc_on.png");
  color: #fff;
  background-repeat: no-repeat;
  background-position: 98% 50%;
  border: 1px solid #6c9bd2;
}
.block-a-h-b-h__link__btn__container {
  text-align: center;
}
/*
Variations

ブロック定義 フッター(pc)

Markup:
<footer class="mod-box {{modifier_class}}">
  <div class="{{modifier_class}}__container mod-box mod-box__container--width-a-d">
    <p class="{{modifier_class}}__text__a mod-text helper--hide-landscape-under">Copyright&copy;Arcadia Knowledge Industry Co.,Ltd. All rights reserved</p>
    <p class="{{modifier_class}}__text__a mod-text helper--hide-landscape-over">Copyright&copy; </p>
    <p class="{{modifier_class}}__text__b mod-text helper--hide-landscape-over">Arcadia Knowledge Industry Co.,Ltd. All rights reserved </p>
  </div>
</footer>

block-a-j - デフォルトスタイル

Style guide: block.a.j
*/
.block-a-j {
  padding: 10px 0 8px;
  background-color: #3c5a88;
  color: #fff;
  font-size: 14px;
}
.block-a-j__text__a {
  text-align: center;
}
.block-a-j__text__b {
  text-align: center;
}
/*
Variations

ブロック定義 アコーディオン（複数）

Markup:
<div class="mod-box {{modifier_class}}">
  <dl id="js_acMenu">
    <dt class="mod-text">アコーディオンメニュー1</dt>
    <dd class="mod-text">アコーディオンメニューが開く。</dd>
    <dt class="mod-text">アコーディオンメニュー2</dt>
    <dd class="mod-text">アコーディオンメニューが開く。</dd>
    <dt class="mod-text">アコーディオンメニュー3</dt>
    <dd class="mod-text">アコーディオンメニューが開く。</dd>
  </dl>
</div>

block-a-r - デフォルトスタイル

Style guide: block.a.r
*/
.block-a-r #js_acMenu dt {
  display: block;
  cursor: pointer;
  background-image: url("../images/common/acordion01_open_pc.png");
  background-repeat: no-repeat;
  -webkit-background-size: 18px auto;
          background-size: 18px auto;
  background-position: 100% top;
}
.block-a-r #js_acMenu dd {
  display: none;
}
.block-a-r #js_acMenu dt.close {
  background-image: url("../images/common/acordion01_close_pc.png");
  background-repeat: no-repeat;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}
/*
Variations

ブロック定義 アコーディオン

Markup:
<div class="mod-box {{modifier_class}}">
  <dl id="js_acMenu">
    <dt class="mod-text">アコーディオンメニュー1</dt>
    <dd class="mod-text">アコーディオンメニューが開く。</dd>
    <dt class="mod-text">アコーディオンメニュー2</dt>
    <dd class="mod-text">アコーディオンメニューが開く。</dd>
    <dt class="mod-text">アコーディオンメニュー3</dt>
    <dd class="mod-text">アコーディオンメニューが開く。</dd>
  </dl>
</div>

block-a-r-b - デフォルトスタイル

Style guide: block.a.r.b
*/
.block-a-r-b #js_acMenu dt {
  display: block;
  cursor: pointer;
  background-image: url("../images/common/acordion01_open.png");
  background-repeat: no-repeat;
  -webkit-background-size: 9px auto;
          background-size: 9px auto;
  background-position: 100% top;
}
.block-a-r-b #js_acMenu dd {
  display: none;
}
.block-a-r-b #js_acMenu dt.close {
  background-image: url("../images/common/acordion01_close.png");
  background-repeat: no-repeat;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
  -webkit-background-size: 9px auto;
          background-size: 9px auto;
}
/*
Variations

ブロック定義 フッターとナビSPのアコーディオン

Markup:
<div class="mod-box {{modifier_class}}__container">
  <h3 class="mod-text {{modifier_class}}__label"><a class="{{modifier_class}}__item__btn" href="javascript:;">企業情報</a></h3>
  <div class="{{modifier_class}}__more__btn js-more-btn mod-box"><img class="mod-pict__src {{modifier_class}}__pict__a" src="../images/common/acordion01_open.png" alt="" width="18" height="18"></div>
  <ul class="{{modifier_class}}__list mod-box" style="display: none;">
    <li class="{{modifier_class}}__list__item  mod-box__container">
      <a class="{{modifier_class}}__list__item__btn mod-btn__label" href="javascript:;">サブメニュー<span class="mod-box  {{modifier_class}}__icon"></span></a>
    </li>
    <li class="{{modifier_class}}__list__item  mod-box__container">
      <a class="{{modifier_class}}__list__item__btn mod-btn__label" href="javascript:;">サブメニュー<span class="mod-box  {{modifier_class}}__icon"></a>
    </li>
   <li class="{{modifier_class}}__list__item  mod-box__container">
      <a class="{{modifier_class}}__list__item__btn mod-btn__label" href="javascript:;">サブメニュー<span class="mod-box  {{modifier_class}}__icon"></a>
    </li>
   <li class="{{modifier_class}}__list__item  mod-box__container">
      <a class="{{modifier_class}}__list__item__btn mod-btn__label" href="javascript:;">サブメニュー<span class="mod-box  {{modifier_class}}__icon"></a>
    </li>
   <li class="{{modifier_class}}__list__item  mod-box__container">
      <a class="{{modifier_class}}__list__item__btn mod-btn__label" href="javascript:;">サブメニュー<img class="mod-pict {{modifier_class}}__pict" src="../images/common/icon07_pc.png" alt=""><span class="mod-box  {{modifier_class}}__icon"></a>
    </li>
  </ul>
</div>

block-a-r-c - デフォルトスタイル

Style guide: block.a.r.c
*/
.block-a-r-c__label {
  border-bottom: 1px solid #fff;
  background-color: #e1e9f2;
}
.block-a-r-c__item__btn {
  font-weight: bold;
  color: #3c5a88;
  font-size: 14px;
  text-align: left;
  margin-left: 10px;
  padding: 12px 0;
  display: block;
}
.block-a-r-c__list__item {
  background: #fff;
  border-bottom: 1px solid #e1e9f2;
}
.block-a-r-c__list__item__btn {
  text-align: left;
  padding: 9px 0 9px 10px;
  color: #444;
  font-size: 12px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.block-a-r-c__more__btn {
  position: absolute;
  top: 10px;
  right: 6px;
  width: 9px;
  height: auto;
  padding: 7px 15px;
  cursor: pointer;
}
.block-a-r-c__more__btn__header__nav {
  position: absolute;
  top: 10px;
  right: 3px;
  width: 9px;
  height: auto;
  padding: 10px 15px;
  cursor: pointer;
}
.block-a-r-c__icon {
  position: absolute;
  top: 50%;
  right: 22px;
  background-image: url("../images/common/nav_icon02.png");
  -webkit-background-size: 5px 9px;
          background-size: 5px 9px;
  background-repeat: no-repeat;
  height: 9px;
  width: 5px;
  margin-top: -2.5px;
}
.block-a-r-c__contact__btn {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 5px;
  height: auto;
}
.block-a-r-c__pict {
  display: inline;
  margin-left: 5px;
}
.block-a-r-c__pict__a {
  display: inline;
  margin-left: -3px;
}
.block-a-r-c__no__link {
  pointer-events: none;
}
/*
Variations

コンテンツ内サイトマップ

Markup:
<div class="{{modifier_class}}  mod-box">
  <div class="{{modifier_class}}__container  mod-box__container">
    <ul class="{{modifier_class}}__list  mod-box">
      <li class="{{modifier_class}}__list__item {{modifier_class}}__list__item__c mod-box">
        <a class="{{modifier_class}}__list__item__btn  {{modifier_class}}__list__item__btn__c  mod-btn close" href="javascript:;">
          <span class="{{modifier_class}}__btn__text__c mod-btn__label mod-text--size-16">閉じる<span class="{{modifier_class}}__icon__c"></span></span>
        </a>
      </li>
    </ul>
  </div>
</div>

block-a-u - デフォルトスタイル

Style guide: block.a.u
*/
.block-a-u__label {
  font-weight: bold;
}
.block-a-u__container {
  border-bottom: 1px solid #c4c4c4;
}
.block-a-u__icon {
  position: absolute;
  top: 45%;
  right: 13px;
  background-image: url("../images/common/nav_icon01.png");
  -webkit-background-size: 9px 1px;
          background-size: 9px 1px;
  background-repeat: no-repeat;
  height: 1px;
  width: 9px;
}
.block-a-u__icon__b {
  position: absolute;
  top: 45%;
  right: 13px;
  background-image: url("../images/common/nav_icon02.png");
  -webkit-background-size: 5px 9px;
          background-size: 5px 9px;
  background-repeat: no-repeat;
  height: 9px;
  width: 5px;
}
.block-a-u__icon__c {
  display: inline-block;
  background-image: url("../images/common/nav_icon03.png");
  -webkit-background-size: 12px 12px;
          background-size: 12px 12px;
  background-repeat: no-repeat;
  height: 12px;
  width: 12px;
  margin-left: 5px;
  position: relative;
  top: -1px;
}
.block-a-u__btn__text__a {
  font-weight: bold;
  color: #3c5a88;
  font-size: 14px;
}
.block-a-u__btn__text__b {
  color: #595757;
}
.block-a-u__btn__text__c {
  color: #3c5a88;
  text-align: center !important;
}
.block-a-u__list__item__a {
  background-color: #e1e9f2;
}
.block-a-u__list__item__b {
  background-color: #fff;
}
.block-a-u__list__item__c {
  background-color: #e1e9f2;
  border-bottom: none !important;
}
.block-a-u__list__item__btn__c {
  color: #fff;
}
.block-a-u__list__item {
  border-bottom: 1px dotted #eaf2f6;
}
.block-a-u__list__item__btn {
  padding: 3px 0;
  color: #333;
  font-weight: bold;
  font-size: 15px;
  background-color: #e1e9f2;
}
.block-a-u__list__item .mod-btn__label {
  text-align: left;
}
.block-a-u__ml0 {
  margin-left: 0 !important;
}
/*
Variations

pagetopボタン

Markup:
<div class="{{modifier_class}}  mod-box">
  <a class="{{modifier_class}}__top__btn" href="#top">
    <img class="helper--hide-landscape-under mod-pict {{modifier_class}}__pict " src="../images/common/pagetop_pc.png" alt="">
    <img class="helper--hide-landscape-over mod-pict {{modifier_class}}__pict" src="../images/common/pagetop_sp.png" alt="">
  </a>
</div>

block-a-y - デフォルトスタイル

Style guide: block.a.y
*/
.block-a-y {
  background-color: #f9f8f4;
}
.block-a-y__pict {
  width: 15px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.block-a-y__top__btn {
  padding: 23px;
  display: inline-block;
  width: 100%;
}
/*
Variations

フッター（PC）

Markup:
<div class="{{modifier_class}} mod-box">
  <p class="mod-text {{modifier_class}}__text"><a href="javascript:;" class="{{modifier_class}}__link__btn">企業情報</a></p>
  <ul class="{{modifier_class}}__list mod-box">
    <li class="{{modifier_class}}__list__item mod-text">
      <a href="javascript:;" class="{{modifier_class}}__list__btn mod-text">ああああああああ</a>
    </li>
    <li class="{{modifier_class}}__list__item mod-text">
      <a href="javascript:;" class="{{modifier_class}}__list__btn mod-text">ああああああああ</a>
    </li>
    <li class="{{modifier_class}}__list__item mod-text">
      <a href="javascript:;" class="{{modifier_class}}__list__btn mod-text">ああああああああ</a>
    </li>
    <li class="{{modifier_class}}__list__item mod-text">
      <a href="javascript:;" class="{{modifier_class}}__list__btn mod-text">ああああああああ<img class="mod-pict {{modifier_class}}__pict" src="../images/common/icon07_pc.png" alt=""></a>
    </li>
  </ul>
</div>

block-a-x - デフォルトスタイル

style guide: block.a.x
*/
.block-a-x__link__btn {
  font-size: 14px;
  color: #3c5a88;
  text-decoration: none;
}
.block-a-x__list__btn {
  font-size: 12px;
  color: #444;
  text-decoration: none;
  line-height: 24px;
}
.block-a-x__list {
  margin-top: 3px;
}
.block-a-x__pict {
  display: inline;
  margin-left: 5px;
  top: 5px;
}
.block-a-x__no__link {
  pointer-events: none;
}
/*
Variations

フワットアニメーション

Markup:
<div class="{{modifier_class}} fuwat">
  <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
  <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
  <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
  <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
  <p class="mod-btn">
    <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
  </p>
  <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
  <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
  <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
  <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
  <p class="mod-btn">
    <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
  </p>
  <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
  <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
  <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
  <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
  <p class="mod-btn">
    <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
  </p>
</div>

block-b-d - デフォルトスタイル

style guide: block.b.d
*/
.block-b-d .fuwatAnime {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: fuwatAnime;
  animation-name: fuwatAnime;
  visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-webkit-keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
/*
Variations

SP 画像の中央配置

Markup:
<div class="{{modifier_class}} mod-box">
  <img class="mod-pict {{modifier_class}}__pict__w250" src="../images/common/pagetop_sp.png" alt="">
</div>

block-c-a - デフォルトスタイル

style guide: block.c.a
*/
.block-c-a__pict__w250 {
  width: 250px;
  margin-left: auto;
  margin-right: auto;
}
.block-c-a__pict__w75 {
  width: 75px;
  margin-left: auto;
  margin-right: auto;
}
.block-c-a__pict__w65 {
  width: 65px;
  margin-left: auto;
  margin-right: auto;
}
.block-c-a__pict__w38 {
  width: 38px;
  margin-left: auto;
  margin-right: auto;
}
/*
Variations

構造:float（３カラム落ち：真ん中の左右に余白あり）

Markup:
<div class="{{modifier_class}}　mod-responsive-grid-b  mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a mod-responsive-grid-b__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--a mod-responsive-grid-b__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--a mod-responsive-grid-b__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

block-a-g-a - デフォルトスタイル

style guide: block.a.g.a
*/
.block-a-g-a {
  margin-bottom: 90px;
}
.block-a-g-a__cell--b {
  margin-right: 2.631578947368421%;
  margin-left: 2.631578947368421%;
  width: 31.57894736842105%;
}
.block-a-g-a__cell--a {
  width: 31.57894736842105%;
}
.block-a-g-a__cell--c {
  width: 31.57894736842105%;
}
.block-a-g-a__cell--a:nth-child(2) {
  margin-right: 2.631578947368421%;
  margin-left: 2.631578947368421%;
  width: 31.57894736842105%;
}
/*
Variations

構造:table（３カラム落ち：真ん中の左右に余白あり）

Markup:
<div class="{{modifier_class}}　mod-responsive-grid-b  mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a mod-responsive-grid-b__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b mod-responsive-grid-b__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--c mod-responsive-grid-b__cell--c  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

block-a-g-a-table - デフォルトスタイル

style guide: block.a.g.a.table
*/
.block-a-g-a-table {
  display: table;
  border-collapse: separate;
  border-spacing: 20px 0;
}
.block-a-g-a-table__cell--b {
  display: table-cell;
  width: 33%;
}
.block-a-g-a-table__cell--a {
  display: table-cell;
  width: 33%;
}
.block-a-g-a-table__cell--c {
  display: table-cell;
  width: 33%;
}
.block-a-g-a-table__table__separate {
  border-spacing: 23px 0;
}
/*
Variations

構造（2カラム落ち：右に余白あり:5対5）

Markup:
<div class="{{modifier_class}} mod-responsive-grid-a  mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a mod-responsive-grid-a__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b mod-responsive-grid-a__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

block-a-g-b - デフォルトスタイル

style guide: block.a.g.b
*/
.block-a-g-b__cell--a {
  margin-right: 2.105263157894737%;
  width: 48.94736842105264%;
}
.block-a-g-b__cell--b {
  width: 48.94736842105264%;
}
/*
Variations

構造（2カラム落ち：右に余白あり:5対5 display:tabel）

Markup:
<div class="{{modifier_class}} mod-responsive-grid-a  mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a mod-responsive-grid-a__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b mod-responsive-grid-a__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

block-a-g-b-table - デフォルトスタイル

style guide: block.a.g.b.table
*/
.block-a-g-b-table {
  display: table;
  border-collapse: separate;
  border-spacing: 20px 0;
}
.block-a-g-b-table__cell--a {
  display: table-cell;
  width: 50%;
}
.block-a-g-b-table__cell--b {
  display: table-cell;
  width: 50%;
}
.block-a-g-b-table__mb {
  margin-bottom: 40px;
}
/*
Variations

構造（2カラム落ち：右に余白なし:5対5 display:tabel）

Markup:
<div class="{{modifier_class}} mod-responsive-grid-a  mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a mod-responsive-grid-a__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b mod-responsive-grid-a__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

block-a-g-b-table-b - デフォルトスタイル

style guide: block.a.g.b.table.b
*/
.block-a-g-b-table-b {
  display: table;
  width: 100%;
}
.block-a-g-b-table-b__cell--a {
  display: table-cell;
  width: 50%;
}
.block-a-g-b-table-b__cell--b {
  display: table-cell;
  width: 50%;
}
/*
Variations

構造（2カラム落ち：右に余白あり 3対7）

Markup:
<div class="{{modifier_class}} mod-responsive-grid-a  mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a mod-responsive-grid-a__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b mod-responsive-grid-a__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

block-a-g-c - デフォルトスタイル

style guide: block.a.g.c
*/
.block-a-g-c__cell--a {
  margin-right: 2.105263157894737%;
  width: 24.210526315789473%;
}
.block-a-g-c__cell--b {
  width: 73.68421052631578%;
}
/*
Variations

構造（背景白）

Markup:
<div class="{{modifier_class}}">
  <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
  <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
  <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
  <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
  <p class="mod-btn">
    <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
  </p>
</div>

block-a-g-d - デフォルトスタイル

style guide: block.a.g.d
*/
.block-a-g-d {
  background-color: #fff;
  border-radius: 5px;
}
/*
Variations

構造（背景白2）

Markup:
<div class="{{modifier_class}}">
  <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
  <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
  <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
  <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
  <p class="mod-btn">
    <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
  </p>
</div>

block-a-g-d-b - デフォルトスタイル

style guide: block.a.g.d.b
*/
.block-a-g-d-b {
  background-color: #fff;
  border-radius: 5px;
  padding: 39px 30px;
}
/*
Variations

構造（３カラム落ち：真ん中の左右に余白あり）

Markup:
<div class="{{modifier_class}} mod-responsive-grid2">
  <div class="{{modifier_class}}__cell--a  mod-responsive-grid2__cell">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b mod-responsive-grid2__cell">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--c  mod-responsive-grid2__cell">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

block-a-g-f - デフォルトスタイル

style guide: block.a.g.f
*/
.block-a-g-f__cell--b {
  padding-left: 13px;
  width: 34.73684210526316%;
}
.block-a-g-f__cell--a {
  padding-right: 13px;
  width: 34.73684210526316%;
}
.block-a-g-f__cell--c {
  width: 26.31578947368421%;
}
/*
Variations

構造（4カラム落ち：真ん中の左右に余白あり）

Markup:
<div class="{{modifier_class}}　mod-responsive-grid-b  mod-responsive-grid">
  <div class="{{modifier_class}}__responsive-grid mod-responsive-grid-c mod-responsive-grid">
    <div class="{{modifier_class}}__cell--a mod-responsive-grid-c__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
      <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
      <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
      <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      <p class="mod-btn">
        <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
      </p>
    </div>
    <div class="{{modifier_class}}__cell--b mod-responsive-grid-c__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
      <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
      <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
      <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      <p class="mod-btn">
        <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
      </p>
    </div>
    <div class="{{modifier_class}}__cell--c mod-responsive-grid-c__cell--c  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
      <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
      <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
      <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      <p class="mod-btn">
        <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
      </p>
    </div>
    <div class="{{modifier_class}}__cell--d mod-responsive-grid-c__cell--d  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
      <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
      <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
      <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
      <p class="mod-btn">
        <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
      </p>
    </div>
  </div>
</div>

block-a-g-g - デフォルトスタイル

style guide: block.a.g.g
*/
.block-a-g-g {
  margin-top: 20px;
}
.block-a-g-g__cell--a {
  width: 23.263157894736842%;
  margin-right: 2.315789473684211%;
}
.block-a-g-g__cell--b {
  margin-right: 2.315789473684211%;
  width: 23.263157894736842%;
}
.block-a-g-g__cell--c {
  width: 23.263157894736842%;
  margin-right: 2.315789473684211%;
}
.block-a-g-g__cell--d {
  width: 23.263157894736842%;
}
/*
Variations

構造（2カラム落ち：右に余白あり 4対6 文章上、画像下）

Markup:
<div class="{{modifier_class}} mod-responsive-grid-a  mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a mod-responsive-grid-a__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">ああああああ</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b mod-responsive-grid-a__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">いいいいいいい</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

block-a-g-h - デフォルトスタイル

style guide: block.a.g.h
*/
.block-a-g-h__cell--a {
  float: right;
  width: 58.42105263157895%;
}
.block-a-g-h__cell--b {
  float: left;
  width: 39.473684210526315%;
  margin-right: 2.105263157894737%;
}
/*
Variations

構造（2カラム落ち：右に余白あり 4対6 文章上、画像下）

Markup:
<div class="{{modifier_class}} mod-responsive-grid-a  mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a mod-responsive-grid-a__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">ああああああ</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b mod-responsive-grid-a__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">いいいいいいい</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

block-a-g-h-c - デフォルトスタイル

style guide: block.a.g.h.c
*/
.block-a-g-h-c__cell--a {
  float: right;
  width: 53.68421052631579%;
}
.block-a-g-h-c__cell--b {
  float: left;
  width: 44.21052631578947%;
  margin-right: 2.105263157894737%;
}
/*
Variations

構造（2カラム落ち：右に余白あり 4対6 文章下、画像上）

Markup:
<div class="{{modifier_class}} mod-responsive-grid-a  mod-responsive-grid">
  <div class="{{modifier_class}}__cell--a mod-responsive-grid-a__cell--a  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">ああああああ</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
  <div class="{{modifier_class}}__cell--b mod-responsive-grid-a__cell--b  mod-responsive-grid__cell  mod-responsive-grid__cell--drop">
    <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">いいいいいいい</h1>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
    <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
    <p class="mod-btn">
      <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
    </p>
  </div>
</div>

block-a-g-h-b - デフォルトスタイル

style guide: block.a.g.h.b
*/
.block-a-g-h-b__cell--a {
  width: 37.89473684210527%;
  margin-right: 3.157894736842105%;
}
.block-a-g-h-b__cell--b {
  width: 58.94736842105262%;
}
/*
Variations

構造（３カラム落ちなし：真ん中の左右に余白あり）

Markup:
<div class="{{modifier_class}}">
  <div class="mod-grid-b-a {{modifier_class}}__grid">
    <div class="mod-grid-b-a__cell--a {{modifier_class}}__cell--a">
      <div class="mod-box">
        <div class="mod-box__container">
          <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
          <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
          <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
          <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
          <p class="mod-btn">
            <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
          </p>
        </div>
      </div>
    </div>
    <div class="mod-grid-b-a__cell--b {{modifier_class}}__cell--b">
      <div class="mod-box">
        <div class="mod-box__container">
          <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
          <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
          <p class="mod-btn">
            <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
          </p>
          <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        </div>
      </div>
    </div>
    <div class="mod-grid-b-a__cell--c {{modifier_class}}__cell--c">
      <div class="mod-box">
        <div class="mod-box__container">
          <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
          <p class="mod-btn">
            <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
          </p>
          <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
          <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
        </div>
      </div>
    </div>
  </div>
</div>

block-a-g-i - デフォルトスタイル

style guide: block.a.g.i
*/
.block-a-g-i__cell--b {
  margin-right: 2.105263157894737%;
  margin-left: 2.105263157894737%;
  width: 31.894736842105264%;
}
.block-a-g-i__cell--a {
  width: 31.894736842105264%;
}
.block-a-g-i__cell--c {
  width: 31.894736842105264%;
}
/*
Variations

構造（table 横並び）

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="mod-responsive-grid2 {{modifier_class}}__grid">
    <div class="mod-responsive-grid2__cell {{modifier_class}}__cell--a">
      <div class="mod-box">
        <div class="mod-box__container">
          <h1 class="mod-text  mod-text--weight-bold  mod-text--size-20">Lorem ipsum</h1>
          <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
          <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
          <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
          <p class="mod-btn">
            <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
          </p>
        </div>
      </div>
    </div>
    <div class="mod-responsive-grid2__cell {{modifier_class}}__cell--b">
      <div class="mod-box">
        <div class="mod-box__container">
          <figure class="mod-pict  helper--float-left  helper--padding-right10  helper--padding-bottom10"><img class="mod-pict__src" src="http://placehold.it/320x240.png" width="160" height="120" /></figure>
          <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
          <p class="mod-btn">
            <a class="mod-btn__label  mod-btn__label--type-a-a--a" href="javascript:void(0);">label</a>
          </p>
          <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.</p>
        </div>
      </div>
    </div>
  </div>
</div>

block-a-g-j - デフォルトスタイル

style guide: block.a.g.j
*/
.block-a-g-j__cell--a {
  padding-right: 17px;
}
/*
Variations

ぱんくず効果(pc)

Markup:
<div class="{{modifier_class}} mod-box">
  <ul class="{{modifier_class}}__list mod-box">
    <li class="{{modifier_class}}__list__item  mod-text">
    <a class="{{modifier_class}}__link" href="javascript:void(0);">あああ</a>
    </li>
    <li class="{{modifier_class}}__list__item  mod-text">
    <span class="{{modifier_class}}__icon">&gt;</span><a class="{{modifier_class}}__link" href="javascript:void(0);">あああ</a>
    </li>
    <li class="{{modifier_class}}__list__item current  mod-text">
    <span class="{{modifier_class}}__icon　{{modifier_class}}__icon__current">&gt;</span>あああ
    </li>
  </ul>
</div>

block-d-a-b - デフォルトスタイル

style guide: block.d.a.b
*/
.block-d-a-b {
  background-color: #f9f8f4;
  padding-top: 100px;
}
.block-d-a-b__list {
  line-height: 37px;
}
.block-d-a-b__list__item {
  display: inline-block;
}
.block-d-a-b__link {
  color: #3c5a88;
  margin: 0 5px;
  line-height: 20px;
  font-size: 12px;
}
.block-d-a-b__icon {
  color: #999;
}
.block-d-a-b .current {
  color: #999;
  font-size: 12px;
}
.block-d-a-b__icon__current {
  margin-right: 5px;
}
/*
Variations

会社情報ブロック

Markup:
<div class="{{modifier_class}}  mod-grid2">
  <div class="{{modifier_class}}__cell--a  mod-grid2__cell">
    <div class="block-a-h mod-box">
      <h4 class="block-a-h__label mod-text">
        <a class="block-a-h__link__btn" href="javascript:;">
        わたしたちのビジョン
        </a>
      </h4>
    </div>
  </div>
  <div class="{{modifier_class}}__cell--b  mod-grid2__cell">
  </div>
  <div class="{{modifier_class}}__cell--c  mod-grid2__cell">
    <div class="block-a-h mod-box">
      <h4 class="block-a-h__label mod-text">
        <a class="block-a-h__link__btn block-a-h__link__btn--b" href="javascript:;">
        会社概要
        </a>
      </h4>
    </div>
  </div>
  <div class="{{modifier_class}}__cell--d  mod-grid2__cell">
  </div>
  <div class="{{modifier_class}}__cell--e  mod-grid2__cell">
    <div class="block-a-h mod-box">
      <h4 class="block-a-h__label mod-text">
        <a class="block-a-h__link__btn  block-a-h__link__btn--c" href="javascript:;">
        海外拠点
        </a>
      </h4>
    </div>
  </div>
</div>

block-d-f-h - デフォルトスタイル

style guide: block.d.f.h
*/
.block-d-f-h {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 30px;
}
.block-d-f-h__cell--a {
  width: 32%;
}
.block-d-f-h__cell--b {
  width: 2%;
}
.block-d-f-h__cell--c {
  width: 32%;
}
.block-d-f-h__cell--d {
  width: 2%;
}
.block-d-f-h__cell--e {
  width: 32%;
}
/*
Variations

カンパニーページ ブロック

Markup:
<div class="{{modifier_class}}  mod-grid2">
  <div class="{{modifier_class}}__cell--a  mod-grid2__cell">
    <h4 class="block-d-f-k__label mod-text">
      <span class="block-d-f-k__link__btn--current">
      わたしたちのビジョン
      </span>
    </h4>
  </div>
  <div class="{{modifier_class}}__cell--b  mod-grid2__cell">
  </div>
  <div class="{{modifier_class}}__cell--c  mod-grid2__cell">
    <div class="block-a-h mod-box">
      <h4 class="block-d-f-k__label mod-text">
        <a class="block-d-f-k__link__btn block-d-f-k__link__btn--b" href="javascript:;">
        会社概要
        </a>
      </h4>
    </div>
  </div>
  <div class="{{modifier_class}}__cell--d  mod-grid2__cell">
  </div>
  <div class="{{modifier_class}}__cell--e  mod-grid2__cell">
    <div class="block-a-h mod-box">
      <h4 class="block-d-f-k__label mod-text">
        <a class="block-d-f-k__link__btn  block-d-f-k__link__btn--c" href="javascript:;">
        海外拠点
        </a>
      </h4>
    </div>
  </div>
</div>

block-d-f-l - デフォルトスタイル

style guide: block.d.f.l
*/
.block-d-f-l {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 90px;
}
.block-d-f-l__cell--a {
  width: 32%;
}
.block-d-f-l__cell--b {
  width: 2%;
}
.block-d-f-l__cell--c {
  width: 32%;
}
.block-d-f-l__cell--d {
  width: 2%;
}
.block-d-f-l__cell--e {
  width: 32%;
}
/*
Variations
 
ボトム 区切り線1 導入の流れ

Markup:
<div class="{{modifier_class}}  mod-box">
</div>

block-d-f-p - デフォルトスタイル

style guide: block.d.f.p
*/
.block-d-f-p {
  border-top: 1px solid #3c5a88;
  z-index: 1;
}
.block-d-f-p:after {
  content: " ";
  background-image: url("../images/common/hr_pc.png");
  background-repeat: no-repeat;
  display: block;
  height: 12px;
  width: 45px;
  z-index: 10;
  position: relative;
  top: -2px;
  margin-left: 100px;
}
/*
Variations

bottom ボトムパーツ HarborWrite®のご案内

Markup:
<div class="{{modifier_class}} mod-grid2">
  <div class="mod-grid2__cell {{modifier_class}}__text__container">
    <p class="mod-text {{modifier_class}}__text__a">インターネットの普及や規制緩和により、海外と直接取引する企業が増えています。多くの企業が販売拠点や調達拠点を世界各地に展開しており、物の流れやお金の流れも複雑化しています。それ伴い、お客様が貿易システムに求めるご要望も変化しています。</p>
    <p class="mod-text {{modifier_class}}__text__a">このような背景を踏まえ、当社は最新ブラウザに完全対応した「貿易管理システムHarborWrite Ver4.0」をリリースしました。</p>
    <p class="mod-text {{modifier_class}}__text__a">20年間積み上げてきた貿易管理システムのノウハウを元に、インターフェースを全画面リニューアルしました。現在の貿易管理に必要とされる機能を追加し、使いやすさを高めるだけでなく、将来の業務環境や業務内容の変化にも柔軟に対応できる貿易管理システムとなっています。</p>
  </div>
  <p class="{{modifier_class}}__pic__container mod-grid2__cell">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/bottom/guidance_img_003_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/bottom/guidance_img_003_sp.png">
  </p>
</div>

block-d-m - デフォルトスタイル

style guide: block.d.m
*/
.block-d-m {
  table-layout: fixed;
}
.block-d-m__pic__container {
  width: 49%;
}
.block-d-m__text__container {
  padding-right: 30px;
  width: 51%;
}
.block-d-m__text__a {
  font-size: 16px;
  margin-bottom: 30px;
}
/*
Variations

bottom ボトムパーツ 無料デモ実施のご案内

Markup:
<div class="{{modifier_class}} mod-grid2">
  <p class="{{modifier_class}}__pic__container mod-grid2__cell">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/bottom/guidance_img_003_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/bottom/guidance_img_003_sp.png">
  </p>
  <div class="mod-grid2__cell {{modifier_class}}__text__container">
    <div class="{{modifier_class}}__text mod-box">
      <p class="mod-text {{modifier_class}}__text__a">HarborWrite®の導入を検討するお客様のご質問や課題にお応えするため、弊社担当者が貴社にお伺いし、製品の主な機能と特長をご紹介させていただきます。</p>
      <p class="mod-text {{modifier_class}}__text__a">ご希望の方は、以下のお申込みフォームに希望日時、ご相談内容をご記入ください。</p>
      <p class="mod-text {{modifier_class}}__text__a">日程についてはご希望に添えない可能性がありますことご容赦の程お願い申し上げます。</p>
      <p class="mod-text {{modifier_class}}__text__a">ご用意いただくものプロジェクターもしくはモニターのご用意をお客様にてお願い申し上げます。</p>
    </div>
    <div class="{{modifier_class}}__flow mod-box">
       <ul class="mod-box {{modifier_class}}__flow__list">
        <li class="{{modifier_class}}__flow__list__item__a mod-box">
          <p class="{{modifier_class}}__flow__list__pic__container mod-box">
            <img class="{{modifier_class}}__flow__list__pic mod-pict helper--hide-landscape-under" src="../images/bottom/customer_img_001_pc.png">
            <img class="{{modifier_class}}__flow__list__pic mod-pict helper--hide-landscape-over" src="../images/bottom/customer_img_001_sp.png">
          </p>
          <div class="{{modifier_class}}__flow__list__text__container mod-box">
          <h5 class="{{modifier_class}}__flow__list__title mod-text">1.以下のフォームよりお申し込み</h5>
          <p class="{{modifier_class}}__flow__list__text mod-text">希望日時、ご相談内容をご記入ください</p>
          </div>
        </li>
        <li class="{{modifier_class}}__flow__list__item__b mod-box">
          <p class="{{modifier_class}}__flow__list__pic__container mod-box">
            <img class="{{modifier_class}}__flow__list__pic mod-pict helper--hide-landscape-under" src="../images/bottom/customer_img_002_pc.png">
            <img class="{{modifier_class}}__flow__list__pic mod-pict helper--hide-landscape-over" src="../images/bottom/customer_img_002_sp.png">
          </p>
          <div class="{{modifier_class}}__flow__list__text__container mod-box">
          <h5 class="{{modifier_class}}__flow__list__title mod-text">2.担当よりご連絡</h5>
          <p class="{{modifier_class}}__flow__list__text mod-text">日時について担当者よりご連絡申し上げます。デモ内容のご希望をお伺いします。</p>
          </div>
        </li>
        <li class="{{modifier_class}}__flow__list__item__c mod-box">
          <p class="{{modifier_class}}__flow__list__pic__container mod-box">
            <img class="{{modifier_class}}__flow__list__pic mod-pict helper--hide-landscape-under" src="../images/bottom/customer_img_003_pc.png">
            <img class="{{modifier_class}}__flow__list__pic mod-pict helper--hide-landscape-over" src="../images/bottom/customer_img_003_sp.png">
          </p>
          <div class="{{modifier_class}}__flow__list__text__container mod-box">
          <h5 class="{{modifier_class}}__flow__list__title mod-text">3.訪問デモ実施</h5>
          <p class="{{modifier_class}}__flow__list__text mod-text">豊富な標準機能をご説明いたします。貿易管理に関する課題をお知らせください。</p>
          </div>
        </li>
       </ul>
    </div>
  </div>
</div>

block-d-m-b - デフォルトスタイル

style guide: block.d.m.b
*/
.block-d-m-b {
  table-layout: fixed;
}
.block-d-m-b__pic__container {
  padding-right: 30px;
  width: 49%;
}
.block-d-m-b__text__container {
  width: 51%;
}
.block-d-m-b__text__a {
  font-size: 14px;
  margin-bottom: 10px;
}
.block-d-m-b__flow__list__text {
  font-size: 14px;
  width: 87%;
}
.block-d-m-b__flow__list__text__container {
  width: 91%;
}
.block-d-m-b__flow__list__text__last {
  width: 100%;
}
.block-d-m-b__flow__list__title {
  font-size: 16px;
  font-weight: bold;
  color: #444;
  margin-top: 15px;
  margin-bottom: 5px;
  width: 88%;
  height: 48px;
}
.block-d-m-b__flow__list__item__a {
  float: left;
  width: 34.5%;
  margin-right: 1%;
}
.block-d-m-b__flow__list__item__b {
  float: left;
  width: 34.5%;
  margin-right: 1%;
}
.block-d-m-b__flow__list__item__c {
  float: left;
  width: 29%;
}
/*
Variations

bottom ボトムパーツ HarborWrite®のご案内

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__title__container mod-box">
    <h4 class="{{modifier_class}}__title mod-text">最新WEBアプリケーション</h4>
  </div>
  <div class="{{modifier_class}}__container mod-grid2">
    <p class="{{modifier_class}}__pic__container mod-grid2__cell">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/bottom/guidance_img_004_pc.png">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/bottom/guidance_img_004_sp.png">
    </p>
    <div class="mod-grid2__cell {{modifier_class}}__text__container">
      <p class="mod-text {{modifier_class}}__text__a">WIndows10に対応した最新WEBアプリケーションです。ブラウザはInternet Explorer及びChromeをサポートし（SSL128bit）、ご利用PCへのモジュール類のインストールは一切ありません。</p>
      <p class="mod-text {{modifier_class}}__text__a helper--margin-bottom0">また、ランニングコストを考慮し、WEBサーバーとデータベースはOSS※もサポートしております。</p>
      <div class="block-f-w mod-box">
        <ul class="block-f-w__list mod-textgroup">
          <li class="block-f-w__list__item mod-textgroup__item mod-text"><span class="mod-textgroup__item__bullet">※</span>OSS：Open-source software</li>
        </ul>
      </div>
    </div>
  </div>
</div>

block-d-o - デフォルトスタイル

style guide: block.d.o
*/
.block-d-o__container {
  table-layout: fixed;
}
.block-d-o__title {
  font-size: 24px;
  color: #3c5a88;
  padding-bottom: 20px;
}
.block-d-o__title:after {
  content: "";
  display: block;
  width: 160px;
  height: 2px;
  background-color: #3c5a88;
  position: absolute;
  left: 0;
  bottom: -2px;
}
.block-d-o__title__container {
  border-bottom: 2px solid #e1e9f2;
  margin-bottom: 30px;
}
.block-d-o__pic__container {
  width: 38%;
}
.block-d-o__text__container {
  width: 56%;
  padding-left: 6%;
}
.block-d-o__text__a {
  font-size: 16px;
  margin-bottom: 20px;
}
.block-d-o__text__b {
  font-size: 12px;
  position: relative;
  top: -4px;
}
.block-d-o .block-f-w__list__item {
  font-size: 12px;
}
/*
Variations

bottom ボトムパーツ ユーザー紹介詳細

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__container mod-grid2">
    <p class="{{modifier_class}}__pic__container mod-grid2__cell">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/article/otsuka_img_001_pc.png">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/article/otsuka_img_001_sp.png">
    </p>
    <div class="mod-grid2__cell {{modifier_class}}__text__container">
      <div class="{{modifier_class}}__title__container mod-box">
        <h4 class="{{modifier_class}}__title mod-text">増え続ける海外との取引</h4>
      </div>
      <p class="mod-text {{modifier_class}}__text__a">WIndows10に対応した最新WEBアプリケーションです。ブラウザはInternet Explorer及びChromeをサポートし（SSL128bit）、ご利用PCへのモジュール類のインストールは一切ありません。</p>
      <p class="mod-text {{modifier_class}}__text__a helper--margin-bottom0">また、ランニングコストを考慮し、WEBサーバーとデータベースはOSS※もサポートしております。</p>
      <div class="block-f-w mod-box">
        <ul class="block-f-w__list mod-textgroup">
          <li class="block-f-w__list__item mod-textgroup__item mod-text"><span class="mod-textgroup__item__bullet">※</span>OSS：Open-source software</li>
        </ul>
      </div>
    </div>
  </div>
</div>

block-d-s - デフォルトスタイル

style guide: block.d.s
*/
.block-d-s__container {
  table-layout: fixed;
}
.block-d-s__title {
  font-size: 24px;
  color: #3c5a88;
  padding-bottom: 20px;
}
.block-d-s__title:after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background-color: #3c5a88;
  position: absolute;
  left: 0;
  bottom: -2px;
}
.block-d-s__title__container {
  border-bottom: 2px solid #e1e9f2;
  margin-bottom: 30px;
}
.block-d-s__pic__container {
  width: 50%;
  vertical-align: middle;
}
.block-d-s__text__container {
  width: 47.5%;
  padding-left: 2.5%;
}
.block-d-s__text__a {
  font-size: 16px;
  margin-bottom: 20px;
}
.block-d-s .block-f-w__list__item {
  font-size: 16px;
}
/*
Variations

bottom ボトムパーツ　ユーザー詳細ページ

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__container mod-grid2">
    <div class="mod-grid2__cell {{modifier_class}}__text__container">
      <div class="{{modifier_class}}__title__container mod-box">
        <h4 class="{{modifier_class}}__title mod-text">増え続ける海外との取引</h4>
      </div>
      <p class="mod-text {{modifier_class}}__text__a">WIndows10に対応した最新WEBアプリケーションです。ブラウザはInternet Explorer及びChromeをサポートし（SSL128bit）、ご利用PCへのモジュール類のインストールは一切ありません。</p>
      <p class="mod-text {{modifier_class}}__text__a helper--margin-bottom0">また、ランニングコストを考慮し、WEBサーバーとデータベースはOSS※もサポートしております。</p>
      <div class="block-f-w mod-box">
        <ul class="block-f-w__list mod-textgroup">
          <li class="block-f-w__list__item mod-textgroup__item mod-text"><span class="mod-textgroup__item__bullet">※</span>OSS：Open-source software</li>
        </ul>
      </div>
    </div>
    <p class="{{modifier_class}}__pic__container mod-grid2__cell">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/article/otsuka_img_001_pc.png">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/article/otsuka_img_001_sp.png">
    </p>
  </div>
</div>

block-d-t - デフォルトスタイル

style guide: block.d.t
*/
.block-d-t__container {
  table-layout: fixed;
}
.block-d-t__title {
  font-size: 24px;
  color: #3c5a88;
  padding-bottom: 20px;
}
.block-d-t__title:after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background-color: #3c5a88;
  position: absolute;
  left: 0;
  bottom: -2px;
}
.block-d-t__title__container {
  border-bottom: 2px solid #e1e9f2;
  margin-bottom: 30px;
}
.block-d-t__pic__container {
  width: 50%;
  vertical-align: middle;
}
.block-d-t__text__container {
  width: 47.5%;
  padding-right: 2.5%;
}
.block-d-t__text__a {
  font-size: 16px;
  margin-bottom: 20px;
}
.block-d-t .block-f-w__list__item {
  font-size: 16px;
}
/*
Variations

bottom ボトムパーツ

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__title__container mod-box">
    <h4 class="{{modifier_class}}__title mod-text">増え続ける海外との取引</h4>
  </div>
  <p class="mod-text {{modifier_class}}__text__a">WIndows10に対応した最新WEBアプリケーションです。ブラウザはInternet Explorer及びChromeをサポートし（SSL128bit）、ご利用PCへのモジュール類のインストールは一切ありません。</p>
  <p class="mod-text {{modifier_class}}__text__a helper--margin-bottom0">また、ランニングコストを考慮し、WEBサーバーとデータベースはOSS※もサポートしております。</p>
</div>

block-d-u - デフォルトスタイル

style guide: block.d.u
*/
.block-d-u__title {
  font-size: 24px;
  color: #3c5a88;
  padding-bottom: 20px;
}
.block-d-u__title:after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background-color: #3c5a88;
  position: absolute;
  left: 0;
  bottom: -2px;
}
.block-d-u__title__container {
  border-bottom: 2px solid #e1e9f2;
  margin-bottom: 30px;
}
.block-d-u__text__a {
  font-size: 16px;
  margin-bottom: 20px;
}
/*
Variations

bottom ボトムパーツ ユーザー紹介詳細

Markup:
<div class="{{modifier_class}} mod-box">
  <p class="{{modifier_class}}__pic__container mod-box">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/article/otsuka_img_004_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/article/otsuka_img_004_sp.png">
  </p>
  <div class="mod-box {{modifier_class}}__profile">
    <div class="mod-box">
      <p class="mod-text {{modifier_class}}__campany mod-text--theme-a-i">株式会社大塚家具</p>
      <p class="mod-text {{modifier_class}}__job mod-text--theme-a-i">総務部　情報システム課</p>
      <p class="mod-text {{modifier_class}}__name mod-text--theme-a-i">担当課長　大沢　伸人氏</p>
      <p class="mod-text {{modifier_class}}__other">※HarborWrite®導入時は、商品部に所属</p>
    </div>
  </div>
</div>

block-d-v - デフォルトスタイル

style guide: block.d.v
*/
.block-d-v {
  background-color: #f9f8f4;
}
.block-d-v__pic__container {
  float: left;
  padding-right: 30px;
}
.block-d-v__profile {
  padding-top: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.block-d-v__other {
  font-size: 12px;
}
/*
Variations

bottom ボトムパーツ

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="mod-responsive-grid2-b mod-responsive-grid2">
    <div class="mod-responsive-grid2-b__cell--a  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
      <div class="block-d-o mod-box">
          <div class="block-d-o__title__container mod-box">
            <h4 class="block-d-o__title mod-text">最新WEBアプリケーション</h4>
          </div>
          <div class="block-d-o__container mod-grid2">
            <p class="block-d-o__pic__container mod-grid2__cell">
              <img class="block-d-o__pic mod-pict helper--hide-landscape-under" src="../images/bottom/guidance_img_004_pc.png">
              <img class="block-d-o__pic mod-pict helper--hide-landscape-over" src="../images/bottom/guidance_img_004_sp.png">
            </p>
            <div class="mod-grid2__cell block-d-o__text__container">
              <p class="mod-text block-d-o__text__a">WIndows10に対応した最新WEBアプリケーションです。ブラウザはInternet Explorer及びChromeをサポートし（SSL128bit）、ご利用PCへのモジュール類のインストールは一切ありません。</p>
              <p class="mod-text block-d-o__text__a helper--margin-bottom0">また、ランニングコストを考慮し、WEBサーバーとデータベースはOSS※もサポートしております。</p>
              <div class="block-f-w mod-box">
                <ul class="block-f-w__list mod-textgroup">
                  <li class="block-f-w__list__item mod-textgroup__item mod-text"><span class="mod-textgroup__item__bullet">※</span>OSS：Open-source software</li>
                </ul>
              </div>
            </div>
          </div>
      </div>
    </div>
    <div class="mod-responsive-grid2-b__cell--b  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
    </div>
    <div class="mod-responsive-grid2-b__cell--c  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
      <div class="block-d-o mod-box">
        <div class="block-d-o__title__container mod-box">
          <h4 class="block-d-o__title mod-text">最新WEBアプリケーション</h4>
        </div>
        <div class="block-d-o__container mod-grid2">
          <p class="block-d-o__pic__container mod-grid2__cell">
            <img class="block-d-o__pic mod-pict helper--hide-landscape-under" src="../images/bottom/guidance_img_004_pc.png">
            <img class="block-d-o__pic mod-pict helper--hide-landscape-over" src="../images/bottom/guidance_img_004_sp.png">
          </p>
          <div class="mod-grid2__cell block-d-o__text__container">
            <p class="mod-text block-d-o__text__a">WIndows10に対応した最新WEBアプリケーションです。ブラウザはInternet Explorer及びChromeをサポートし（SSL128bit）、ご利用PCへのモジュール類のインストールは一切ありません。</p>
            <p class="mod-text block-d-o__text__a helper--margin-bottom0">また、ランニングコストを考慮し、WEBサーバーとデータベースはOSS※もサポートしております。</p>
            <div class="block-f-w mod-box">
              <ul class="block-f-w__list mod-textgroup">
                <li class="block-f-w__list__item mod-textgroup__item mod-text"><span class="mod-textgroup__item__bullet">※</span>OSS：Open-source software</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

block-d-p - デフォルトスタイル

style guide: block.d.p
*/
.block-d-p__first {
  padding-bottom: 40px;
}
.block-d-p__first__b {
  padding-bottom: 40px;
}
.block-d-p .mod-responsive-grid2-b__cell--a {
  width: 48%;
}
.block-d-p .mod-responsive-grid2-b__cell--b {
  width: 4%;
}
.block-d-p .mod-responsive-grid2-b__cell--c {
  width: 48%;
}
/*
Variations

bottom ボトムパーツ 導入の流れ

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__container mod-grid2">
    <p class="{{modifier_class}}__pic__container mod-grid2__cell">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/bottom/flow_img_001_pc.png">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/bottom/flow_img_001_sp.png">
    </p>
    <div class="mod-grid2__cell {{modifier_class}}__text__container">
      <div class="{{modifier_class}}__title__container mod-box">
        <h4 class="{{modifier_class}}__title mod-text">現状分析</h4>
      </div>
      <p class="mod-text {{modifier_class}}__text__a {{modifier_class}}__text__bold">・ヒアリング</p>
      <p class="mod-text {{modifier_class}}__text__a helper--margin-bottom0">貴社より現状業務、ご要望、課題をヒアリングさせていただき、簡易FIT&GAPを実施し、システム概要を検討します。</p>
    </div>
  </div>
</div>

block-d-q - デフォルトスタイル

style guide: block.d.q
*/
.block-d-q__container {
  table-layout: fixed;
}
.block-d-q__title {
  font-size: 24px;
  color: #3c5a88;
  padding-bottom: 20px;
}
.block-d-q__title:after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background-color: #3c5a88;
  position: absolute;
  left: 0;
  bottom: -2px;
}
.block-d-q__title__container {
  border-bottom: 2px solid #e1e9f2;
  margin-bottom: 30px;
}
.block-d-q__pic__container {
  width: 20%;
}
.block-d-q__text__container {
  width: 77.5%;
  padding-left: 2.5%;
}
.block-d-q__text__a {
  font-size: 16px;
  margin-bottom: 15px;
}
.block-d-q__text__bold {
  font-weight: bold;
}
.block-d-q .block-f-w__list__item {
  font-size: 16px;
}
/*
Variations

ぶら下がりインデント

Markup:
<div class="{$modifiers} mod-box">
  <ul class="{$modifiers}__list mod-textgroup">
    <li class="{$modifiers}__list__item mod-textgroup__item mod-text"><span class="mod-textgroup__item__bullet">・</span>研修コンテンツの手配だけではなく、人材開発に関わる全ての業務を一括手配が可能</li>
    <li class="{$modifiers}__list__item mod-textgroup__item mod-text"><span class="mod-textgroup__item__bullet">・</span>大企業の人事業務受託で培ったノウハウの提供が可能</li>
    <li class="{$modifiers}__list__item mod-textgroup__item mod-text"><span class="mod-textgroup__item__bullet">・</span>お客様の状況に合わせて最適な研修支援サポートを実施</li>
  </ul>
</div>

block-f-w - デフォルトスタイル

Styleguide block.f.w
*/
.block-f-w__font-size15-12 {
  font-size: 15px;
}
.block-f-w__font-size14-12 {
  font-size: 14px;
}
/*
Variations

bottom ボトムパーツ

Markup:
<div class="{{modifier_class}} mod-grid2">
  <div class="{{modifier_class}}__container__a mod-grid2__cell">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/top/top_img_001_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/top/top_img_001_sp.png">
    <h5 class="mod-text {{modifier_class}}__title">最新のWEBアプリ</h5>
    <p class="mod-text {{modifier_class}}__text">Win10に対応した、最新のWEBアプリケーションで、PCへのイントールは一切不要です。</p>
  </div>
  <div class="{{modifier_class}}__container__b mod-grid2__cell">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/top/top_img_002_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/top/top_img_002_sp.png">
    <h5 class="mod-text {{modifier_class}}__title"> 豊富な管理機能</h5>
    <p class="mod-text {{modifier_class}}__text">見積管理、受発注管理など貿易において必要とされる様々な管理機能を搭載しています。</p>
  </div>
  <div class="{{modifier_class}}__container__c mod-grid2__cell">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/top/top_img_003_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/top/top_img_003_sp.png">
    <h5 class="mod-text {{modifier_class}}__title">マルチカンパニー対応</h5>
    <p class="mod-text {{modifier_class}}__text">本社だけでなく海外現法やグループ会社でご利用いただけます。</p>
  </div>
  <div class="{{modifier_class}}__container__c mod-grid2__cell">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/top/top_img_004_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/top/top_img_004_sp.png">
    <h5 class="mod-text {{modifier_class}}__title">外部サービスとの連携</h5>
    <p class="mod-text {{modifier_class}}__text">インターネットバンキングや税関システムNACSSなど外部サービスとの連携が可能です。</p>
  </div>
</div>

block-d-n - デフォルトスタイル

style guide: block.d.n
*/
.block-d-n {
  table-layout: fixed;
}
.block-d-n .mod-grid2__cell {
  width: 25%;
  padding: 0 30px;
  border-right: 1px solid #e1e9f2;
}
.block-d-n .mod-grid2__cell:last-child {
  border-right: 0;
}
.block-d-n__title {
  font-size: 22px;
  font-weight: bold;
  margin-top: 15px;
  text-align: center;
  color: #3c5a88;
}
.block-d-n__text {
  font-size: 16px;
  margin-top: 15px;
}
/*
Variations

bottom ボトムパーツ slerのお客様へ

Markup:
<div class="{{modifier_class}} mod-grid2">
  <div class="{{modifier_class}}__container__a mod-grid2__cell mod-box--theme-a-b">
    <h5 class="mod-text {{modifier_class}}__title">業務に関する知見がない</h5>
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/bottom/sler_img_001_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/bottom/sler_img_001_sp.png">
    <p class="mod-text {{modifier_class}}__text">顧客から貿易業務のシステム化について相談や提案を依頼されたが貿易業務に関する知見ががない</p>
  </div>
  <div class="{{modifier_class}}__container__b mod-grid2__cell mod-box--theme-a-b">
    <h5 class="mod-text {{modifier_class}}__title">不慣れな業務が含まれている</h5>
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/bottom/sler_img_002_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/bottom/sler_img_002_sp.png">
    <p class="mod-text {{modifier_class}}__text">顧客の適用業務範囲の一部に不慣れな貿易業務が含まれていた</p>
  </div>
  <div class="{{modifier_class}}__container__c mod-grid2__cell mod-box--theme-a-b">
    <h5 class="mod-text {{modifier_class}}__title">専門のSEが居ない</h5>
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/bottom/sler_img_003_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/bottom/sler_img_003_sp.png">
    <p class="mod-text {{modifier_class}}__text">貿易関連のシステム構築経験が豊富なSEが見つからない</p>
  </div>
</div>

block-c-m - デフォルトスタイル

style guide: block.c.m
*/
.block-c-m {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 30px 0;
}
.block-c-m .mod-grid2__cell {
  width: 33.333%;
  padding: 30px;
}
.block-c-m__pic {
  margin-left: auto;
  margin-right: auto;
}
.block-c-m__title {
  font-size: 22px;
  font-weight: bold;
  margin-top: 15px;
  text-align: center;
  color: #3c5a88;
  margin-bottom: 35px;
}
.block-c-m__text {
  font-size: 14px;
  margin-top: 15px;
}
/*
Variations

bottom ボトムパーツ slerのお客様へ

Markup:
<div class="{{modifier_class}} mod-box mod-box--theme-a-r">
  <p class="{{modifier_class}}__point mod-text">POINT1</p>
  <div class="{{modifier_class}}__container mod-grid2">
    <p class="{{modifier_class}}__pic__container mod-grid2__cell">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/bottom/sler_img_004_pc.png">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/bottom/sler_img_004_sp.png">
    </p>
    <div class="mod-grid2__cell {{modifier_class}}__text__container">
      <div class="{{modifier_class}}__title__container mod-box">
        <h4 class="{{modifier_class}}__title mod-text">パッケージ適用が得意</h4>
      </div>
      <p class="mod-text {{modifier_class}}__text__a">20年以上に渡り、HarborWriteを開発・販売してきた経験により法人企業様における貿易パッケージ適用の在り方について、豊富な経験があります。例えば、</p>
      <div class="block-f-w mod-box">
        <ul class="block-f-w__list mod-textgroup">
          <li class="block-f-w__list__item mod-textgroup__item mod-text"><span class="mod-textgroup__item__bullet">・</span>スクラッチ開発した古いシステムをやめ、パッケージベースでリニューアルしたい</li>
          <li class="block-f-w__list__item mod-textgroup__item mod-text"><span class="mod-textgroup__item__bullet">・</span>海外取引が拡大し貿易業務のシステム化が必要だが、スクラッチ開発する予算は無い上記のような事例は、当社が最も得意する分野です。</li>
        </ul>
      </div>
    </div>
  </div>
</div>

block-c-n - デフォルトスタイル

style guide: block.c.n
*/
.block-c-n__point {
  display: inline-block;
  background-color: #3c5a88;
  color: #fff;
  font-size: 14px;
  width: 80px;
  height: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  position: absolute;
  top: -15px;
  padding: 5px;
}
.block-c-n__container {
  table-layout: fixed;
}
.block-c-n__title {
  font-size: 24px;
  color: #3c5a88;
  padding-bottom: 20px;
}
.block-c-n__title:after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background-color: #3c5a88;
  position: absolute;
  left: 0;
  bottom: -2px;
}
.block-c-n__title__container {
  border-bottom: 2px solid #e1e9f2;
  margin-bottom: 30px;
}
.block-c-n__pic__container {
  width: 20%;
}
.block-c-n__text__container {
  width: 77.5%;
  padding-left: 2.5%;
}
.block-c-n__text__a {
  font-size: 16px;
  margin-bottom: 15px;
}
.block-c-n .block-f-w__list__item {
  font-size: 16px;
}
/*
Variations

bottom ボトムパーツ ご検討中のお客様へ

Markup:
<div class="{{modifier_class}} mod-grid2">
  <div class="{{modifier_class}}__container__a mod-grid2__cell mod-box--theme-a-r">
    <h5 class="mod-text {{modifier_class}}__title">自由なメニュー選択</h5>
    <img class="{{modifier_class}}__pic mod-pict" src="../images/bottom/consideration_img_001_pc.png" width="110" height="100">
    <p class="mod-text {{modifier_class}}__text">顧客から貿易業務のシステム化について相談や提案を依頼されたが貿易業務に関する知見ががない</p>
  </div>
  <div class="{{modifier_class}}__container__b mod-grid2__cell mod-box--theme-a-r">
    <h5 class="mod-text {{modifier_class}}__title">多様な権限設定機能</h5>
    <img class="{{modifier_class}}__pic mod-pict" src="../images/bottom/consideration_img_002_pc.png" width="110" height="104">
    <p class="mod-text {{modifier_class}}__text">プログラムに修正を加えることなく、権限設定が可能です。</p>
  </div>
</div>

block-c-o - デフォルトスタイル

style guide: block.c.o
*/
.block-c-o {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 10px 0;
}
.block-c-o .mod-grid2__cell {
  width: 50%;
  padding: 12px;
}
.block-c-o__pic {
  margin-left: auto;
  margin-right: auto;
  width: 110px;
  height: auto;
}
.block-c-o__title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #3c5a88;
  margin-bottom: 8px;
  min-height: 42px;
  letter-spacing: -0.05em;
}
.block-c-o__text {
  font-size: 12px;
  margin-top: 10px;
}
/*
Variations

bottom ボトムパーツ ご検討中のお客様へ

Markup:
<div class="{{modifier_class}} mod-grid2">
  <div class="{{modifier_class}}__container__a mod-grid2__cell mod-box--theme-a-r">
    <h5 class="mod-text {{modifier_class}}__title">自由なメニュー選択</h5>
    <img class="{{modifier_class}}__pic mod-pict" src="../images/bottom/consideration_img_001_pc.png" width="110" height="100">
    <p class="mod-text {{modifier_class}}__text">顧客から貿易業務のシステム化について相談や提案を依頼されたが貿易業務に関する知見ががない</p>
  </div>
  <div class="{{modifier_class}}__container__b mod-grid2__cell mod-box--theme-a-r">
    <h5 class="mod-text {{modifier_class}}__title">多様な権限設定機能</h5>
    <img class="{{modifier_class}}__pic mod-pict" src="../images/bottom/consideration_img_002_pc.png" width="110" height="104">
    <p class="mod-text {{modifier_class}}__text">プログラムに修正を加えることなく、権限設定が可能です。</p>
  </div>
  <div class="{{modifier_class}}__container__c mod-grid2__cell mod-box--theme-a-r">
    <h5 class="mod-text {{modifier_class}}__title">柔軟なパラメータ設定</h5>
    <img class="{{modifier_class}}__pic mod-pict" src="../images/bottom/consideration_img_003_pc.png" width="110" height="100">
    <p class="mod-text {{modifier_class}}__text">プログラムに修正を加えることなく、画面項目の入力制御（必須、入力不可など）や、一覧画面の項目の追加、削除、並び替えなどが設定可能です。</p>
  </div>
  <div class="{{modifier_class}}__container__d mod-grid2__cell mod-box--theme-a-r">
    <h5 class="mod-text {{modifier_class}}__title">他社システムとのデータ<br>連携機能</h5>
    <img class="{{modifier_class}}__pic mod-pict" src="../images/bottom/consideration_img_004_pc.png" width="110" height="104">
    <p class="mod-text {{modifier_class}}__text">豊富なテンプレートにより、連携先のシステムに合わせたデータ連携の構築が可能です。</p>
  </div>
</div>

block-c-p - デフォルトスタイル

style guide: block.c.p
*/
.block-c-p {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 25px 0;
}
.block-c-p .mod-grid2__cell {
  width: 25%;
  padding: 30px;
}
.block-c-p__pic {
  margin-left: auto;
  margin-right: auto;
}
.block-c-p__title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #3c5a88;
  margin-bottom: 20px;
  min-height: 60px;
}
.block-c-p__text {
  font-size: 14px;
  margin-top: 10px;
}
/*
Variations　　　

bottom 見出し

Markup:
<div class="{{modifier_class}}__container mod-box">
  <div class="{{modifier_class}} mod-box">
    <h2 class="{{modifier_class}}__title mod-text">ニュース</h2>
  </div> 
</div>

block-i-a - デフォルトスタイル

style guide: block.i.a
*/
.block-i-a__container {
  background-color: #3c5a88;
}
.block-i-a__title {
  background-color: #3c5a88;
  color: #fff;
  font-size: 30px;
  padding: 27px 0;
}
/*
Variations　　　

bottom 見出し　問い合わせ

Markup:
<div class="{{modifier_class}}  mod-box">
  <div class="{{modifier_class}}__wrapper">
    <div class="{{modifier_class}}__container  mod-grid2">
      <div class="{{modifier_class}}__logo__container mod-grid2__cell">
        <h1 class="mod-box {{modifier_class}}__logo">
         <a class="{{modifier_class}}__btn mod-btn">
           <img class="mod-pict {{modifier_class}}__pict helper--hide-landscape-under" src="../images/common/logo_pc.png" alt="アルカディアソフト開発">
           <img class="mod-pict {{modifier_class}}__pict helper--hide-landscape-over" src="../images/common/logo_sp.png" alt="アルカディアソフト開発">
          </a>
        </h1>
      </div>
      <div class="{{modifier_class}}__right__container mod-grid2__cell">
         <a class="{{modifier_class}}__btn__close mod-btn" href="javascript:void(0);" onclick="window.close();return false;">
           <img class="mod-pict {{modifier_class}}__pict__close　 helper--hide-landscape-under" src="../images/common/icon11_pc.png" alt="閉じる">
           <img class="mod-pict {{modifier_class}}__pict__close　 helper--hide-landscape-over" src="../images/common/icon11_sp.png" alt="閉じる">
         </a>
      </div>
    </div>
  </div>
</div>

block-i-b - デフォルトスタイル

style guide: block.i.b
*/
.block-i-b {
  -webkit-box-shadow: 0 0 9px rgba(0,0,0,0.15);
          box-shadow: 0 0 9px rgba(0,0,0,0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: 80px;
  background-color: #fff;
  padding: 17px 0;
}
.block-i-b__container {
  max-width: 1000px;
  margin: 0 auto;
  display: table;
  width: 100%;
}
.block-i-b__btn__close {
  display: inline-block;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 101;
  margin-top: -20px;
}
.block-i-b__pict {
  display: inline-block;
}
.block-i-b__pict__close {
  width: 30px;
  height: auto;
}
.block-i-b__logo {
  margin-left: 20px;
}
.block-i-b__btn {
  text-align: left;
}
.block-i-b__text {
  font-size: 12px;
  color: #3c5a88;
}
.block-i-b__no__link {
  pointer-ivents: none;
}
/*
Variations　　　

bottom 見出し お問い合わせ

Markup:
<div class="{{modifier_class}}  mod-box">
 <table class="mod-table-a-g">
  <tr>
    <th class="mod-table-a-g__cell--c"><span class="{{modifier_class}}__hisu__container">希望職種<span class="{{modifier_class}}__hisu">必須</span></span></th>
    <td class="mod-table-a-g__cell--d">
      <select class="{{modifier_class}}__select" name="">
        <option value="システムエンジニア"> システムエンジニア </option>
        <option value="プログラマ">プログラマ </option>
      </select>
    </td>
  </tr>
  <tr>
    <th class="mod-table-a-g__cell--c">性別</th>
    <td class="mod-table-a-g__cell--d">
    <label class="mod-checkfield--theme-a-a--a__label {{modifier_class}}__check__b"><input type="radio" name="ship" value="on"><span class="block-a-d-e__text helper--margin-left5">HarborWrite®について</span></label>
    <label class="mod-checkfield--theme-a-a--a__label {{modifier_class}}__check__b"><input type="radio" name="ship" value="on"><span class="block-a-d-e__text helper--margin-left5">APSS®について</span></label>
    <label class="mod-checkfield--theme-a-a--a__label {{modifier_class}}__check__b"><input type="radio" name="ship" value="on"><span class="block-a-d-e__text helper--margin-left5">システムエンジニアリングサービスについて</span></label>
    <label class="mod-checkfield--theme-a-a--a__label {{modifier_class}}__check__b"><input type="radio" name="ship" value="on"><span class="block-a-d-e__text helper--margin-left5">採用について</span></label>
    <label class="mod-checkfield--theme-a-a--a__label {{modifier_class}}__check__b"><input type="radio" name="ship" value="on"><span class="block-a-d-e__text helper--margin-left5">会社概要について</span></label>
    <label class="mod-checkfield--theme-a-a--a__label {{modifier_class}}__check__b"><input type="radio" name="ship" value="on"><span class="block-a-d-e__text helper--margin-left5">その他</span></label>
    </td>
  </tr>
  <tr>
    <th class="mod-table-a-g__cell--c">お名前<span class="{{modifier_class}}__hisu">必須</span></th>
    <td class="mod-table-a-g__cell--d">
      <input type="text" placeholder="例）アルカディア太郎" name="" maxlength="50" class="form-control">
    </td>
  </tr>
  <tr>
    <th class="mod-table-a-g__cell--c">お名前読みカナ<span class="{{modifier_class}}__hisu">必須</span></th>
    <td class="mod-table-a-g__cell--d">
      <input type="text" placeholder="例）アルカディアタロウ" name="" maxlength="50" class="form-control">
    </td>
  </tr>
  <tr>
    <th class="mod-table-a-g__cell--c">メールアドレス<span class="{{modifier_class}}__hisu">必須</span></th>
    <td class="mod-table-a-g__cell--d">
      <input type="text" placeholder="例）ar-soft@arcadia-soft.co.jp" name="" maxlength="50" class="form-control-b">（半角）
      <input type="text" placeholder="例）ar-soft@arcadia-soft.co.jp" name="" maxlength="50" class="form-control-c">（半角）（再入力）<br>
      入力ミス防止のため同じメールアドレスを２度ご入力ください。<br>
      携帯電話のメールアドレスはご遠慮ください。
    </td>
  </tr>
  <tr>
    <th class="mod-table-a-g__cell--c">お電話番号<span class="{{modifier_class}}__hisu">必須</span></th>
    <td class="mod-table-a-g__cell--d">
      <input type="text" placeholder="例）0332570136" name="" maxlength="50" class="form-control">
    </td>
  </tr>
  <tr>
    <th class="mod-table-a-g__cell--c">性別</th>
    <td class="mod-table-a-g__cell--d">
    <label class="mod-checkfield--theme-a-a--a__label"><input type="radio" name="ship" value="on"><span class="block-a-d-e__text helper--margin-left5 helper--margin-left10">男性</span></label>
    <label class="mod-checkfield--theme-a-a--a__label"><input type="radio" name="ship" value="on"><span class="block-a-d-e__text helper--margin-left5">女性</span></label>
    </td>
  </tr>
  <tr>
    <th class="mod-table-a-g__cell--c">学校名<span class="{{modifier_class}}__hisu">必須</span></th>
    <td class="mod-table-a-g__cell--d">
      <input type="text" placeholder="例）アルカディア大学" name="" maxlength="50" class="form-control">
    </td>
  </tr>
  <tr>
    <th class="mod-table-a-g__cell--c">学部・学科名<span class="{{modifier_class}}__hisu">必須</span></th>
    <td class="mod-table-a-g__cell--d">
      <input type="text" placeholder="例）工学部　情報システム工学科" name="" maxlength="50" class="form-control">
    </td>
  </tr>
  <tr>
    <th class="mod-table-a-g__cell--c">卒業年度<span class="{{modifier_class}}__hisu">必須</span></th>
    <td class="mod-table-a-g__cell--d">
      <input type="text" name="" maxlength="50" class="form-control-d">　年　
      <select class="{{modifier_class}}__select form-control-e" name="">
        <option value="1月">1月</option>
        <option value="2月">2月</option>
        <option value="3月">3月</option>
        <option value="4月">4月</option>
        <option value="5月">5月</option>
        <option value="6月">6月</option>
        <option value="7月">7月</option>
        <option value="8月">8月</option>
        <option value="9月">9月</option>
        <option value="10月">10月</option>
        <option value="11月">11月</option>
        <option value="12月">12月</option>
      </select>　月　卒業予定/卒業
    </td>
  </tr>
  <tr>
    <th class="mod-table-a-g__cell--c">自己PR・ご質問など</th>
    <td class="mod-table-a-g__cell--d">
      <textarea placeholder="例）応募にあたり何か事前に提出が必要な書類などはありますでしょうか？" rows="6" name="content" required="" maxlength="2000" class="form-control-f"></textarea>
    </td>
  </tr>
 </table>
</div>

block-i-c - デフォルトスタイル

style guide: block.i.c
*/
.block-i-c__select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 34px;
  width: 45%;
  font-size: 12px;
  background-image: url("../images/common/select_pc.png");
  background-repeat: no-repeat;
  background-position: 95% center;
  border: 1px inset #d5d6d9;
  border-radius: 1px;
  background-color: transparent;
  border-radius: 0;
  padding-left: 7px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.block-i-c__hisu {
  font-size: 12px;
  color: #fff;
  display: inline-block;
  background-color: #dc1e28;
  width: 44px;
  height: 17px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -9px;
}
.block-i-c__hisu__b {
  margin-top: -20px;
}
.block-i-c .form-control {
  padding-left: 7px;
  width: 45%;
  height: 34px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 12px;
  border: 1px inset #d5d6d9;
  border-radius: 1px;
}
.block-i-c .form-control-b {
  padding-left: 7px;
  width: 45%;
  height: 34px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: 5px;
  border: 1px inset #d5d6d9;
  border-radius: 1px;
}
.block-i-c .form-control-c {
  padding-left: 7px;
  width: 45%;
  height: 34px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 10px 0;
  border: 1px inset #d5d6d9;
  border-radius: 1px;
}
.block-i-c .form-control-d {
  padding-left: 7px;
  width: 38%;
  height: 34px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: 5px;
  border: 1px inset #d5d6d9;
  border-radius: 1px;
}
.block-i-c .form-control-e {
  padding-left: 7px;
  width: 10%;
  height: 34px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 10px 0;
  border: 1px inset #d5d6d9;
  border-radius: 1px;
}
.block-i-c .form-control-f {
  padding: 7px;
  font-size: 12px;
  width: 100%;
  height: 120px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 10px 0;
  vertical-align: top;
  border: 1px inset #d5d6d9;
  border-radius: 1px;
}
.block-i-c .form-control-g {
  padding-left: 7px;
  width: 80%;
  height: 34px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 10px 0;
  vertical-align: top;
  border: 1px inset #d5d6d9;
  border-radius: 1px;
  display: block;
}
.block-i-c .form-control-h {
  padding-left: 7px;
  width: 45%;
  height: 34px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 12px;
  border: 1px inset #d5d6d9;
  border-radius: 1px;
}
.block-i-c .block-a-d-e__text {
  top: -2px;
  position: relative;
}
.block-i-c__text__b {
  margin-top: 8px;
}
.block-i-c__hisu__container {
  display: block;
  position: relative;
}
.block-i-c .form-control-i {
  padding-left: 7px;
  width: 12% !important;
  height: 34px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 12px;
  border: 1px inset #d5d6d9;
  border-radius: 1px;
  margin: 0 3px;
}
/*
Variations

ボトム 個人情報の取扱いに関する確認事項

Markup:
<div class="mod-box {{modifier_class}}__container">
  <h4 class="{{modifier_class}}__text">■個人情報の取扱いに関する確認事項</h4>
  <div class="{{modifier_class}} mod-box">
    <p class="{{modifier_class}}__text-a">個人情報の取扱いに関する確認事項</p>
    <p class="mod-text {{modifier_class}}__text-b">
    当社に電子メールでのお問い合わせ・ご連絡をなさりたい方は、下記の「個人情報の取り扱いに関する確認事項」に同意いただいた上で情報入力
    をお願い致します。なお、ご登録はご同意いただける場合のみとなります。</p>
    <h5 class="{{modifier_class}}__text-c mod-text">■個人情報の取扱いに関する確認事項</h5>
    <p class="mod-text {{modifier_class}}__text-b">
    当社に電子メールでのお問い合わせ・ご連絡をなさりたい方は、下記の「個人情報の取り扱いに関する確認事項」に同意いただいた上で情報入力
    をお願い致します。なお、ご登録はご同意いただける場合のみとなります。</p>
  </div>
</div>

block-i-d - デフォルトスタイル

Style guide: block.i.d
*/
.block-i-d {
  overflow-y: scroll;
  height: 120px;
  border: 1px solid #c9c9c9;
  padding: 10px;
  font-size: 14px;
  margin-bottom: 30px;
}
.block-i-d__container {
  font-size: 14px;
}
.block-i-d__text {
  font-size: 14px;
  text-align: left;
}
.block-i-d__text-a {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.block-i-d__text-b {
  font-size: 14px;
  margin-bottom: 20px;
}
.block-i-d__text-c {
  font-size: 14px;
}
/*
Variations

ボトム 問い合わせページ

Markup:
<div class="{{modifier_class}} mod-box">
  <p class="{{modifier_class}}__text mod-text">上記の個人情報の取り扱いに</p>
  <label class="{{modifier_class}}__mod-checkfield">
  <input type="checkbox" class="{{modifier_class}}__mod-checkfield__field" name="" value=""><span class="{{modifier_class}}__mod-checkfield__label">同意する</span>
  </label>
</div>

block-i-e - デフォルトスタイル

Style guide: block.i.e
*/
.block-i-e {
  padding: 20px 0;
  background-color: #fff;
  width: 257px;
  height: 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #c9c9c9;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}
.block-i-e__text {
  font-size: 16px;
  text-align: center;
  margin-bottom: 7px;
}
.block-i-e__mod-checkfield {
  font-size: 16px;
  text-align: center;
  display: block;
  font-weight: bold;
}
/*
Variations

ボトム 問い合わせページ

Markup:
<div class="{{modifier_class}} mod-box">
  <p class="{{modifier_class}}__text mod-text">
    本フォームから送信できない場合<br>
    またはお急ぎの場合は、<br>
    下記の電話番号にお問い合わせください。<br>
    電話：03-3257-0136<br>
    （平日9：00-18：00）</p>
</div>

block-i-f - デフォルトスタイル

Style guide: block.i.f
*/
.block-i-f {
  background-color: #fff;
  width: 260px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  top: -140px;
}
/*
Variations

ボトム 問い合わせページ

Markup:
<div class="{{modifier_class}} mod-box">
 <p class="{{modifier_class}}__btn mod-btn">
   <img class="mod-pict {{modifier_class}}__pict helper--hide-landscape-under" src="../images/bottom/form_img_001_pc.png">
   <img class="mod-pict {{modifier_class}}__pict helper--hide-landscape-over" src="../images/bottom/form_img_001_sp.png">
  </p>
  <p class="mod-text {{modifier_class}}__text">以下の各項目に必要事項を入力し、個人情報の取り扱いについてご同意の上、「入力内容を確認する」ボタンを押してください。なお、「<span class="{{modifier_class}}__red">必須</span>」マークはご入力必須項目になります。</p>
</div>

block-i-g - デフォルトスタイル

Style guide: block.i.g
*/
.block-i-g {
  margin-top: 20px;
}
.block-i-g__text {
  margin: 20px 0 30px 0;
  font-size: 14px;
}
.block-i-g__red {
  color: #dc1e28;
}
/*
Variations

ボトム 問い合わせページ

Markup:
<div class="{{modifier_class}} mod-box">
 <p class="{{modifier_class}}__text mod-text">
送信完了しました
  </p>
  <p class="mod-text {{modifier_class}}__text__b">
入力頂いたメールアドレス宛に自動メールを送信致しましたので、ご確認ください。後ほど担当者よりご連絡いたします。</p>
</div>

block-i-h - デフォルトスタイル

Style guide: block.i.h
*/
.block-i-h__text {
  margin: 40px auto 30px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.block-i-h__text__b {
  text-align: center;
}
/*
Variations

ボトム 問い合わせページボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="block-a-h-b-b mod-box">
    <a class="block-a-h-b-b__link__btn" href="javascript:;">
    入力内容を確認する
    </a>
  </div>
</div>

block-i-i - デフォルトスタイル

Style guide: block.i.i
*/
.block-i-i .block-a-h-b-b {
  min-width: 300px;
}
/*
Variations

ボトム 一覧へ戻るボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__contact__back mod-box">
    <a class="{{modifier_class}}__contact__link__btn" href="javascript:;">
    <span class="{{modifier_class}}__icon"></span>入力内容を訂正する
    </a>
  </div>
  <div class="{{modifier_class}}__single__back mod-box">
    <a class="{{modifier_class}}__single__link__btn" href="javascript:;">
    <span class="{{modifier_class}}__icon"></span>一覧へ戻る
    </a>
  </div>
  <div class="{{modifier_class}}__single__back__blue mod-box">
    <a class="{{modifier_class}}__single__blue__link__btn mod-btn" href="javascript:;">
    <span class="{{modifier_class}}__icon__single__back"></span>一覧へ戻る
    </a>
  </div>
</div>

block-i-j - デフォルトスタイル

Style guide: block.i.j
*/
.block-i-j__contact__back {
  margin-top: 20px;
}
.block-i-j__single__back {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid #e1e9f2;
  border-bottom: 1px solid #e1e9f2;
}
.block-i-j__single__back__blue {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.block-i-j__icon {
  width: 8px;
  height: 15px;
  background-image: url("../images/common/icon12_pc.png");
  background-repeat: no-repeat;
  background-position: 95% center;
  display: inline-block;
  margin-right: 10px;
  position: relative;
  top: 2px;
}
.block-i-j__icon__single__back {
  width: 8px;
  height: 15px;
  background-image: url("../images/common/icon26_pc.png");
  background-repeat: no-repeat;
  background-position: 95% center;
  display: inline-block;
  margin-right: 10px;
  position: relative;
  top: 2px;
}
.block-i-j__contact__link__btn {
  margin-left: auto;
  margin-right: auto;
  display: table;
  color: #444;
  font-size: 14px;
  background: #fff url("../images/common/icon12_pc.png") no-repeat 5% center;
  padding-left: 30px;
  margin-top: 10px;
}
.block-i-j__single__link__btn {
  color: #3c5a88;
  font-size: 13px;
}
.block-i-j__single__blue__link__btn {
  color: #fff;
  font-size: 13px;
  text-align: left;
}
/*
Variations

ボトム 問い合わせページボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="block-a-h-b-b mod-box">
    <a class="block-a-h-b-b__link__btn"  href="javascript:void(0);" onclick="window.close();return false;">
    閉じる
    </a>
  </div>
</div>

block-i-k - デフォルトスタイル

Style guide: block.i.k
*/
.block-i-k {
  margin-bottom: 60px;
}
.block-i-k .block-a-h-b-b {
  min-width: 300px;
}
.block-i-k .block-a-h-b-b__link__btn {
  background-image: url("../images/common/icon13_pc_off.png");
  background-repeat: no-repeat;
  background-position: 98% 50%;
}
.block-i-k .block-a-h-b-b__link__btn:hover {
  background-image: url("../images/common/icon13_pc_on.png");
}
/*
Variations

ボトム ボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="block-a-h-b-b mod-box">
    <a class="block-a-h-b-b__link__btn" href="javascript:;">
    <span class="helper--hide-landscape-under">機能詳細PDFファイル申し込みフォーム</span>
    <span class="helper--hide-landscape-over">機能詳細PDFファイル<br>申し込みフォーム</span>
    </a>
  </div>
</div>

block-i-l - デフォルトスタイル

Style guide: block.i.l
*/
.block-i-l .block-a-h-b-b {
  min-width: 580px;
}
.block-i-l .block-a-h-b-b__link__btn.block-a-h-b-b__link__btn {
  padding: 35px 0;
  font-size: 24px;
}
/*
Variations

サイトマップ

Markup:
<div class="{{modifier_class}} mod-box">
  <h4 class="{{modifier_class}}__head__a mod-text"><a href="#" class="{{modifier_class}}__head__a__link">トップ</a></h4>
  <ul class="{{modifier_class}}__list mod-box">
   <li class="{{modifier_class}}__list__item mod-text"><a href="#" class="{{modifier_class}}__link mod-text__link  mod-text__link--theme-a-a--a">私たちのビジョン</a></li>
   <li class="{{modifier_class}}__list__item mod-text"><a href="#" class="{{modifier_class}}__link mod-text__link  mod-text__link--theme-a-a--a">会社概要</a></li>
   <li class="{{modifier_class}}__list__item mod-text"><a href="#" class="{{modifier_class}}__link mod-text__link  mod-text__link--theme-a-a--a">海外拠点</a></li>
  </ul>
</div>

block-k-a - デフォルトスタイル

Style guide: block.k.a
*/
.block-k-a__head__a {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
}
.block-k-a__head__a__link {
  color: #3c5a88;
}
.block-k-a__link {
  color: #444;
}
.block-k-a__list__item {
  font-size: 16px;
  margin-bottom: 6px;
}
/*
Variations

ボトム 問い合わせページボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <p class="mod-text {{modifier_class}}__lead">　当社は、個人情報（特定個人情報等を含む）を取り扱う企業（ビジネスアプリケーションシステム開発、貿易業務支援パッケージシステム開発・運用・販売、販売在庫管理システムの開発・運用・販売および前述した事業に関連する付帯事業）として個人情報保護の重要性を認識し、事業などでの利用にあたってはその適切な取り扱いを心がけ、安全な管理に努めます。<br>
個人情報保護を実践するため、その基本となる『個人情報保護方針』を次の通り定め、従業者および社会一般に公表し、これを実行し、維持します。</p>
  <h3 class="{{modifier_class}}__title mod-text">１．個人情報の取得について</h3>
  <p class="{{modifier_class}}__text mod-text">個人情報を取得する場合は、ご本人にその利用目的を知らせ、適法、かつ、公正な手段で行います。</p>
  <h3 class="{{modifier_class}}__title mod-text">２．個人情報の利用、提供について</h3>
  <p class="{{modifier_class}}__text mod-text">当社は、正規の事業および雇用・人事管理などにおいて特定された利用目的の範囲内でのみ個人情報の利用、提供を行い、ご本人の事前の同意を得ることな
く、目的外利用を行うことはありません。そのための措置を講じます。</p>
  <p class="{{modifier_class}}__sign mod-text">
  2005年1月21日制定<br>
  2016年4月1日改定<br>
  株式会社アルカディアソフト開発<br>
  代表取締役　髙島　晉</p>
</div>

block-k-b - デフォルトスタイル

Style guide: block.k.b
*/
.block-k-b {
  margin-top: 50px;
  margin-bottom: 50px;
}
.block-k-b__lead {
  font-size: 14px;
  margin-bottom: 30px;
}
.block-k-b__title {
  font-size: 14px;
}
.block-k-b__text {
  font-size: 14px;
  margin-bottom: 30px;
  padding-left: 2em;
}
.block-k-b__sign {
  margin-top: 50px;
  font-size: 14px;
  text-align: right;
}
/*
Variations

ボトム 問い合わせページボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <h3 class="{{modifier_class}}__title mod-text">１．個人情報の取得について</h3>
  <p class="{{modifier_class}}__text mod-text">以下に掲げる利用目的の達成に必要な範囲で個人情報を取り扱います。</p>
  <h4 class="mod-text {{modifier_class}}__title__sub">(1)開示対象個人情報の利用目的</h4>
    <p class="{{modifier_class}}__text__a mod-text">◎会社の業務により取得したお客様・お取引先様の個人情報</p>
    <ul class="{{modifier_class}}__list mod-box">
     <li class="{{modifier_class}}__list__item mod-text">・ビジネスアプリケーションシステム開発の遂行のため</li>
     <li class="{{modifier_class}}__list__item mod-text">・ビジネスアプリケーションシステム開発の遂行のため</li>
    </ul>
    <ul class="{{modifier_class}}__list mod-box>
     <li class="{{modifier_class}}__list__item mod-text">・ビジネスアプリケーションシステム開発の遂行のため</li>
     <li class="{{modifier_class}}__list__item mod-text">・ビジネスアプリケーションシステム開発の遂行のため</li>
    </ul>
  <p class="{{modifier_class}}__tantou mod-text">
  個人情報保護苦情相談窓口：管理本部　総務部　<br>
  電話番号：03-3257-0136<br>
  e-mail：ar-soft@arcadia-soft.co.jp</p>
  <p class="{{modifier_class}}__sign mod-text">
  2005年1月21日制定<br>
  2016年4月1日改定<br>
  株式会社アルカディアソフト開発<br>
  代表取締役　髙島　晉</p>
</div>

block-k-c - デフォルトスタイル

Style guide: block.k.c
*/
.block-k-c {
  margin-top: 50px;
  margin-bottom: 50px;
}
.block-k-c__title {
  font-size: 14px;
  font-weight: bold;
}
.block-k-c__title__sub {
  margin-bottom: 5px;
  font-size: 14px;
}
.block-k-c__text {
  font-size: 14px;
  margin-bottom: 30px;
  padding-left: 1em;
}
.block-k-c__text__a {
  font-size: 14px;
  padding-left: 1em;
}
.block-k-c__list {
  padding-left: 1em;
  margin-bottom: 30px;
}
.block-k-c__list__item {
  font-size: 14px;
}
.block-k-c__sign {
  margin-top: 50px;
  font-size: 14px;
  text-align: right;
}
.block-k-c__tantou {
  font-size: 14px;
  padding-left: 3em;
  margin-bottom: 30px;
}
/*
Variations

ボトム 記事詳細ページ

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__post__title__container mod-box">
    <time class="{{modifier_class}}__post__date mod-text">2016/03/10</time>
    <h3 class="{{modifier_class}}__post__title mod-text"><span>あああああああああああああああああああああああ</span></h3>
  </div>
  <div class="{{modifier_class}}__post__container mod-box">
    <p class="{{modifier_class}}__post mod-text">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    <p class="{{modifier_class}}__post mod-text">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    <p class="{{modifier_class}}__post mod-text">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
  </div>
</div>

block-k-e - デフォルトスタイル

Style guide: block.k.e
*/
.block-k-e__post {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 15px;
}
.block-k-e__post:last-child {
  margin-bottom: 0;
}
.block-k-e__post__container {
  padding: 66px 0 60px 0;
}
.block-k-e__post__date {
  font-size: 16px;
  margin-bottom: 10px;
}
.block-k-e__post__title {
  color: #3c5a88;
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 15px;
}
.block-k-e__post__title:after {
  content: "";
  display: block;
  width: 160px;
  height: 2px;
  background-color: #3c5a88;
  position: absolute;
  left: 0;
  bottom: -2px;
}
.block-k-e__post__title__container {
  border-bottom: 2px solid #e1e9f2;
}
/*
Variations

ボトム 記事詳細ページページネーション ユーザー紹介

Markup:
<div class="{{modifier_class}} mod-grid2">
  <div class="{{modifier_class}}__container__a mod-grid2__cell">
    <div class="block-a-h-b mod-box">
      <a class="block-a-h-b__link__btn {{modifier_class}}__before" href="javascript:;">
      </a>
    </div>
  </div>
  <div class="{{modifier_class}}__container__b mod-grid2__cell">
  </div>
  <div class="{{modifier_class}}__container__a mod-grid2__cell">
    <div class="block-a-h-b mod-box">
      <a class="block-a-h-b__link__btn {{modifier_class}}__img__none" href="javascript:;">
      1
      </a>
    </div>
  </div>
  <div class="{{modifier_class}}__container__b mod-grid2__cell">
  </div>
  <div class="{{modifier_class}}__container__a mod-grid2__cell">
    <div class="block-a-h-b mod-box">
      <a class="block-a-h-b__link__btn {{modifier_class}}__img__none" href="javascript:;">
      2
      </a>
    </div>
  </div>
  <div class="{{modifier_class}}__container__b mod-grid2__cell">
  </div>
  <div class="{{modifier_class}}__container__a mod-grid2__cell">
    <div class="block-a-h-b mod-box">
      <a class="block-a-h-b__link__btn {{modifier_class}}__img__none" href="javascript:;">
      3
      </a>
    </div>
  </div>
  <div class="{{modifier_class}}__container__b mod-grid2__cell">
  </div>
  <div class="{{modifier_class}}__container__a mod-grid2__cell">
    <div class="block-a-h-b mod-box">
      <a class="block-a-h-b__link__btn {{modifier_class}}__img__none" href="javascript:;">
      4
      </a>
    </div>
  </div>
  <div class="{{modifier_class}}__container__b mod-grid2__cell">
  </div>
  <div class="{{modifier_class}}__container__a mod-grid2__cell">
    <div class="block-a-h-b mod-box">
      <a class="block-a-h-b__link__btn {{modifier_class}}__img__none" href="javascript:;">
      5
      </a>
    </div>
  </div>
  <div class="{{modifier_class}}__container__b mod-grid2__cell">
  </div>
  <div class="{{modifier_class}}__container__a mod-grid2__cell">
    <div class="block-a-h-b mod-box">
      <a class="block-a-h-b__link__btn {{modifier_class}}__after" href="javascript:;">
      </a>
    </div>
  </div>
</div>

block-k-f - デフォルトスタイル

style guide: block.k.f
*/
.block-k-f {
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  table-layout: fixed;
}
.block-k-f .block-a-h-b {
  display: table;
  width: 100%;
}
.block-k-f .block-a-h-b__link__btn {
  display: table-cell;
  vertical-align: middle;
  height: 60px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  font-size: 24px;
  font-weight: normal;
}
.block-k-f__img__none {
  background-image: none;
}
.block-k-f__img__none:hover {
  background-image: none;
}
.block-k-f__before {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  background-position: center center !important;
}
.block-k-f__after {
  background-position: center center !important;
}
.block-k-f__container__a {
  width: 11%;
}
.block-k-f__container__b {
  width: 2%;
}
/*
Variations

事例リンクボタン

Markup:
<div class="{{modifier_class}}  mod-box">
  <a class="{{modifier_class}}__btn mod-btn" href="#">
    <img class="mod-pict {{modifier_class}}__pict helper--hide-landscape-under" src="../images/bottom/c_logo001.png" alt="大塚家具株式会社" width="280" height="auto">
    <img class=" mod-pict {{modifier_class}}__pict helper--hide-landscape-over" src="../images/bottom/c_logo001.png" alt="大塚家具株式会社" width="150" height="auto">
    <p class="{{modifier_class}}__text mod-text">株式会社大塚家具</p>
  </a>
</div>

block-a-f - デフォルトスタイル

Style guide: block.a.f
*/
.block-a-f__pict {
  height: auto;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  margin: auto;
}
.block-a-f__btn {
  background-color: #fff;
  padding: 23px;
  display: inline-block;
  width: 100%;
  height: 180px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.block-a-f__btn:hover {
  opacity: 0.5;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.block-a-f__text {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 15px;
  color: #444;
  text-align: center;
}
/*
Variations

bottom ボトムパーツ HarborWrite®のご案内

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__pic__container mod-box">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/bottom/guidance_img_001_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/bottom/guidance_img_001_sp.png">
  </div>
  <div class="{{modifier_class}}__container mod-box">
    <div class="{{modifier_class}}__container__text">
      <h3 class="{{modifier_class}}__logo　 mod-text"><img class="{{modifier_class}}__logo__pic mod-pict helper--hide-landscape-under" src="../images/bottom/guidance_img_002_pc.png"></h3>
      <p class="mod-text {{modifier_class}}__comment">これからの10年を見据えた全面リニューアル</p>
    </div>
  </div>
</div>

block-h-l-b - デフォルトスタイル

style guide: block.h.l.b
*/
.block-h-l-b {
  display: table;
  width: 100%;
  background-color: #f9f8f4;
}
.block-h-l-b__container {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}
.block-h-l-b__container__text {
  padding: 0 10px 0 38px;
}
.block-h-l-b__logo__pic {
  max-width: 411px;
  width: 100%;
}
.block-h-l-b__pic {
  width: 100%;
}
.block-h-l-b__pic__container {
  display: table-cell;
  width: 50%;
}
.block-h-l-b__comment {
  color: #3c5a88;
  font-size: 16px;
  margin-top: 20px;
}
/*
Variations

bottom ボトムパーツ

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__pic__container mod-box">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/bottom/export_system_img_001_pc.png">
    <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/bottom/export_system_img_001_sp.png">
  </div>
  <div class="{{modifier_class}}__container mod-box">
    <div class="{{modifier_class}}__container__text">
      <p class="mod-text {{modifier_class}}__comment">発注/仕入/支払/原価管理ならお任せください</p>
      <h3 class="{{modifier_class}}__logo　 mod-text">
      <img class="{{modifier_class}}__logo__pic mod-pict helper--hide-landscape-under" src="../images/bottom/export_system_img_002_pc.png">
      <span class="{{modifier_class}}__logo__text">Import System</span>
      </h3>
    </div>
  </div>
</div>

block-h-l-b-b - デフォルトスタイル

style guide: block.h.l.b.b
*/
.block-h-l-b-b {
  display: table;
  width: 100%;
  background-color: #f9f8f4;
}
.block-h-l-b-b__container {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}
.block-h-l-b-b__container__text {
  padding: 0 10px 0 38px;
}
.block-h-l-b-b__logo__pic {
  max-width: 205px;
  width: 100%;
}
.block-h-l-b-b__logo__text {
  font-size: 48px;
  color: #3c5a88;
  display: block;
  margin-top: 10px;
}
.block-h-l-b-b__pic {
  width: 100%;
}
.block-h-l-b-b__pic__container {
  display: table-cell;
  width: 50%;
}
.block-h-l-b-b__comment {
  font-size: 20px;
  color: #3c5a88;
  margin-bottom: 10px;
}
/*
Variations

bottom ボトムパーツ

Markup:
<div class="{{modifier_class}} mod-box">
  <p class="mod-text {{modifier_class}}__text__a">ああああああああああああああああああああああ</p>
  <p class="mod-text {{modifier_class}}__text__b">ああああああああああああああああああああああ</p>
</div>

block-h-l-b-c - デフォルトスタイル

style guide: block.h.l.b.c
*/
.block-h-l-b-c__text__a {
  font-size: 15px;
  margin-bottom: 10px;
}
.block-h-l-b-c__text__b {
  font-size: 15px;
}
/*
Variations

bottom ボトムパーツ

Markup:
<div class="{{modifier_class}} mod-box">
  <p class="{{modifier_class}}__text mod-box">これからの10年を見据えた<br>
全面リニューアル</p>
  <p class="{{modifier_class}}__text {{modifier_class}}__text__b mod-box">輸出業務から三国間業務まで広くサポート <br>
  <span class="{{modifier_class}}__text__b__large">Export System</span></p>
</div>

block-h-l-c - デフォルトスタイル

style guide: block.h.l.c
*/
.block-h-l-c {
  display: table;
  width: 100%;
  background-color: #f9f8f4;
}
.block-h-l-c__text {
  display: table-cell;
  vertical-align: middle;
  font-size: 20px;
  color: #3c5a88;
  padding: 0 20px 0 18px;
}
.block-h-l-c__text__b {
  font-size: 15px;
  letter-spacing: -0.02em;
}
.block-h-l-c__text__b__large {
  font-size: 25px;
}
/*
Variations

bottom リンクボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn" href="javascript:;">
      輸出業務から三国間業務まで広くサポート
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn {{modifier_class}}__link__btn--b" href="javascript:;">
      発注・仕入・輸入原価管理ならお任せください
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--c" href="javascript:;">
      </a>
    </h4>
  </div>
  <div>
    <h4 class="{{modifier_class}}__label mod-text">
      <a class="{{modifier_class}}__link__btn  {{modifier_class}}__link__btn--d" href="javascript:;">
      ライセンス買取、月額利用どちらかをお選び頂けます
      </a>
    </h4>
  </div>
</div>

block-f-a - デフォルトスタイル

style guide: block.f.a
*/
.block-f-a {
  z-index: 1000;
  overflow: hidden;
}
.block-f-a__link__btn {
  background-color: #e1e9f2;
  background-image: url("../images/common/icon15_pc_off.png");
  background-repeat: no-repeat;
  background-position: 50% 34%;
  width: 100%;
  padding: 180px 0 40px 0;
  text-align: center;
  font-size: 22px;
  color: #444;
  display: inline-block;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.block-f-a__link__btn:hover {
  background-color: #6c9bd2;
  color: #fff;
  background-image: url("../images/common/icon15_pc_on.png");
}
.block-f-a__link__btn__text {
  display: block;
  color: #444;
}
.block-f-a__link__btn--b {
  background-image: url("../images/common/icon02_off_pc.png");
  background-position: 50% 34%;
}
.block-f-a__link__btn--b:hover {
  background-image: url("../images/common/icon02_on_pc.png");
}
.block-f-a__link__btn--c {
  background-image: url("../images/common/icon03_off_pc.png");
  background-position: 50% 34%;
}
.block-f-a__link__btn--c:hover {
  background-image: url("../images/common/icon03_on_pc.png");
}
/*
Variations

ボトム 事業案内汎用パーツ

Markup:
<div class="{{modifier_class}}  mod-box">
  <div class="mod-box {{modifier_class}}__cell__a">
    <h3 class="mod-text {{modifier_class}}__cell__a__title">弊社とパートナー企業様との<br>
    <span class="{{modifier_class}}__cell__a__title__large">ソリューション紹介</span></h3>
  </div>
  <div class="mod-box {{modifier_class}}__cell__b">
    <div class="mod-box {{modifier_class}}__btn__container">
    </div>
  </div>
  <div class="mod-box {{modifier_class}}__cell__c">
  <p class="{{modifier_class}}__cell__c__tel__pc mod-text">安全保障貿易管理システム</p>
  <p class="{{modifier_class}}__cell__c__text mod-text">安全保障貿易管理業務の抜け漏れを防止。<br>
業務効率が格段に向上</p>
  </div>
</div>

block-d-h-i - デフォルトスタイル

style guide: block.d.h.i
*/
.block-d-h-i {
  display: table;
  table-layout: fixed;
  height: 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}
.block-d-h-i__cell__a {
  display: table-cell;
  vertical-align: middle;
  width: 28%;
  border-right: 1px solid #006cb8;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  background-color: #3c5a88;
}
.block-d-h-i__cell__a__title {
  font-size: 20px;
  color: #fff;
  text-align: center;
}
.block-d-h-i__cell__a__title__large {
  font-size: 24px;
}
.block-d-h-i__cell__b {
  display: table-cell;
  width: 40%;
  vertical-align: middle;
  background-color: #e1e9f2;
}
.block-d-h-i__btn__container {
  background: url("../images/common/hr_02.png") repeat-y;
  background-position: right;
}
.block-d-h-i__cell__c {
  display: table-cell;
  vertical-align: middle;
  width: 32%;
  background-color: #e1e9f2;
}
.block-d-h-i__cell__c__tel__pc {
  font-size: 30px;
  color: #006cb8;
  text-align: center;
}
.block-d-h-i__cell__c__tel__sp {
  text-align: center;
  font-size: 30px;
  color: #006cb8;
}
.block-d-h-i__cell__c__text {
  font-size: 14px;
  color: #006cb8;
  text-align: center;
}
.block-d-h-i__pic {
  display: inline-block;
  top: 3px;
}
.block-d-h-i .block-a-h-b-b {
  width: 80%;
}
.block-d-h-i .block-a-h-b-b__link__btn {
  font-size: 20px;
  font-weight: normal;
  background-position: 97% 50% !important;
}
/*
Variations

ボトム 汎用パーツ 提供形態

Markup:
<div class="{{modifier_class}}  mod-box">
  <ul class="mod-box {{modifier_class}}__list">
    <li class="mod-text {{modifier_class}}__list__items">Excel で業務を行っている</li>
    <li class="mod-text {{modifier_class}}__list__items">Excel で業務を行っている</li>
    <li class="mod-text {{modifier_class}}__list__items">Excel で業務を行っている</li>
  </ul>
  <ul class="mod-box {{modifier_class}}__list {{modifier_class}}__list__b">
    <li class="mod-text {{modifier_class}}__list__items {{modifier_class}}__list__items__b">Excel で業務を行っている</li>
    <li class="mod-text {{modifier_class}}__list__items {{modifier_class}}__list__items__b">Excel で業務を行っている</li>
    <li class="mod-text {{modifier_class}}__list__items {{modifier_class}}__list__items__b">Excel で業務を行っている</li>
  </ul>
</div>

block-d-h-j - デフォルトスタイル

style guide: block.d.h.j
*/
.block-d-h-j__list__b {
  display: table;
  width: 100%;
}
.block-d-h-j__list__items {
  color: #3c5a88;
  font-size: 16px;
  text-indent: -28px;
  padding-left: 28px;
  margin-bottom: 3px;
}
.block-d-h-j__list__items__b {
  display: table-cell;
}
.block-d-h-j__list__items:before {
  content: " ";
  background-image: url("../images/common/icon19_pc.png");
  background-repeat: no-repeat;
  background-position: 98% 50%;
  -webkit-background-size: 20px 20px;
          background-size: 20px;
  display: inline-block;
  height: 20px;
  width: 20px;
  position: relative;
  top: 3px;
  margin-right: 9px;
}
/*
Variations

ボトム 汎用パーツ

Markup:
<div class="{{modifier_class}}  mod-box">
  <div class="mod-responsive-grid2-a mod-responsive-grid2">
    <div class="mod-responsive-grid2-a__cell--a  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
      <ul class="mod-box block-d-h-j__list">
        <li class="mod-text block-d-h-j__list__items">Excel で業務を行っている</li>
        <li class="mod-text block-d-h-j__list__items">Excel で業務を行っている</li>
        <li class="mod-text block-d-h-j__list__items">Excel で業務を行っている</li>
      </ul>
    </div>
    <div class="mod-responsive-grid2-a__cell--b  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
      <ul class="mod-box block-d-h-j__list">
        <li class="mod-text block-d-h-j__list__items">NACCSより許可情報を取得し。インボイスと突き合わせたい</li>
        <li class="mod-text block-d-h-j__list__items">Excel で業務を行っている</li>
      </ul>
    </div>
  </div>
</div>

block-d-h-k - デフォルトスタイル

style guide: block.d.h.k
*/
.block-d-h-k {
  padding: 30px;
  background-color: #e1e9f2;
}
/*
Variations

ボトム 汎用パーツ 提供形態

Markup:
<div class="{{modifier_class}}  mod-box">
  <div class="block-d-h-j  mod-box">
    <ul class="mod-box block-d-h-j__list block-d-h-j__list__b">
      <li class="mod-text block-d-h-j__list__items block-d-h-j__list__items__b">Excel で業務を行っている</li>
      <li class="mod-text block-d-h-j__list__items block-d-h-j__list__items__b">Excel で業務を行っている</li>
      <li class="mod-text block-d-h-j__list__items block-d-h-j__list__items__b">Excel で業務を行っている</li>
    </ul>
  </div>
</div>

block-d-h-k-b - デフォルトスタイル

style guide: block.d.h.k.b
*/
.block-d-h-k-b {
  padding: 30px;
}
/*
Variations

ボトム 汎用パーツ

Markup:
<a class="{{modifier_class}}  mod-box">
  <div class="mod-responsive-grid2-a mod-responsive-grid2">
    <div class="{{modifier_class}}__pic__container mod-responsive-grid2-a__cell--a  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-under" src="../images/bottom/export_system_img_007_pc.png">
      <img class="{{modifier_class}}__pic mod-pict helper--hide-landscape-over" src="../images/bottom/export_system_img_007_sp.png">
    </div>
    <div class="mod-responsive-grid2-a__cell--b  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
      <div class="mod-box {{modifier_class}}__text__container">
        <p class="mod-text {{modifier_class}}__text__a">書類作成が数時間からわずか「5分」に。大幅な業務効率改善を実現しました。</p>
        <p class="mod-text {{modifier_class}}__text__b">株式会社日本アクセス様</p>
      </div>
    </div>
  </div>
</a>

block-d-h-l - デフォルトスタイル

style guide: block.d.h.l
*/
.block-d-h-l {
  background-color: #fff;
  min-height: 80px;
}
.block-d-h-l__pic__container {
  border-right: 1px solid #e1e9f2;
  vertical-align: middle;
  width: 25%;
  padding: 17px 20px;
}
.block-d-h-l__text__container {
  padding: 15px;
}
.block-d-h-l__text__a {
  font-size: 16px;
  margin-bottom: 10px;
  color: #000;
}
.block-d-h-l__text__b {
  color: #000;
  font-size: 12px;
  text-align: right;
}
.block-d-h-l .mod-responsive-grid2-a__cell--b {
  width: 75%;
  vertical-align: middle;
}
/*
Variations

ボトム ソリューション紹介 パーツ

Markup:
<div class="{{modifier_class}}  mod-box">
  <div class="mod-box {{modifier_class}}__container">
    <p class="{{modifier_class}}__point mod-text">POINT1</p>
    <div class="mod-responsive-grid2-a mod-responsive-grid2">
      <div class="{{modifier_class}}__cell__a mod-responsive-grid2-a__cell--a  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
      <p class="mod-text {{modifier_class}}__cell__a__text">安全保障貿易管理システムと照合で誤輸出を防止</p>
      </div>
      <div class="{{modifier_class}}__cell__b mod-responsive-grid2-a__cell--b  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
        <p class="mod-text {{modifier_class}}_cell__b__text">船積段階での水際管理。安全保障貿易管理システムとの照合により、ステータスが「出荷可」に更新されない限り、正式輸出書類の出力ができない仕様になっているため間違って輸出される心配もありません。</p>
      </div>
    </div>
  </div>
  <div class="mod-box {{modifier_class}}__container">
    <p class="{{modifier_class}}__point mod-text">POINT1</p>
    <div class="mod-responsive-grid2-a mod-responsive-grid2">
      <div class="{{modifier_class}}__cell__a mod-responsive-grid2-a__cell--a  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
      <p class="mod-text {{modifier_class}}__cell__a__text">安全保障貿易管理システムと照合で誤輸出を防止</p>
      </div>
      <div class="{{modifier_class}}__cell__b mod-responsive-grid2-a__cell--b  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
        <p class="mod-text {{modifier_class}}_cell__b__text">船積段階での水際管理。安全保障貿易管理システムとの照合により、ステータスが「出荷可」に更新されない限り、正式輸出書類の出力ができない仕様になっているため間違って輸出される心配もありません。</p>
      </div>
    </div>
  </div>
  <div class="mod-box">
    <p class="{{modifier_class}}__point mod-text">POINT1</p>
    <div class="mod-responsive-grid2-a mod-responsive-grid2">
      <div class="{{modifier_class}}__cell__a mod-responsive-grid2-a__cell--a  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
      <p class="mod-text {{modifier_class}}__cell__a__text">安全保障貿易管理システムと照合で誤輸出を防止</p>
      </div>
      <div class="{{modifier_class}}__cell__b mod-responsive-grid2-a__cell--b  mod-responsive-grid2__cell  mod-responsive-grid2__cell--drop">
        <p class="mod-text {{modifier_class}}_cell__b__text">船積段階での水際管理。安全保障貿易管理システムとの照合により、ステータスが「出荷可」に更新されない限り、正式輸出書類の出力ができない仕様になっているため間違って輸出される心配もありません。</p>
      </div>
    </div>
  </div>
</div>

block-d-h-p - デフォルトスタイル

style guide: block.d.h.p
*/
.block-d-h-p {
  background-color: #e1e9f2;
  padding: 30px;
}
.block-d-h-p__point {
  display: inline-block;
  background-color: #3c5a88;
  color: #fff;
  font-size: 14px;
  width: 80px;
  height: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  padding: 5px;
}
.block-d-h-p__container {
  margin-bottom: 20px;
}
.block-d-h-p__cell__a {
  background-color: #fff;
  border-right: 1px solid #e1e9f2;
  vertical-align: middle;
  width: 25%;
  padding: 20px;
  height: 150px;
}
.block-d-h-p__cell__a__text {
  font-size: 21px;
  color: #3c5a88;
  font-weight: bold;
}
.block-d-h-p__cell__b {
  background-color: #fff;
  width: 75%;
  height: 150px;
  padding: 25px;
  vertical-align: middle;
}
.block-d-h-p__cell__b__text {
  font-size: 16px;
  color: #444;
}
.block-d-h-p__text__container {
  padding: 15px;
}
.block-d-h-p__text__a {
  font-size: 16px;
  margin-bottom: 10px;
}
.block-d-h-p__text__b {
  font-size: 12px;
  text-align: right;
}
.block-d-h-p .block-f-w__list__item {
  font-size: 16px;
}
/*
Variations

ブロック定義 アコーディオン

Markup:
<div class="mod-box {{modifier_class}}">
  <dl id="js_acMenu" class="{{modifier_class}}__container mod-box">
    <dt class="mod-text {{modifier_class}}__term">１．見積登録</dt>
    <dd class="mod-text {{modifier_class}}__description">
    見積入力を行い、見積登録（Offer Sheet）の出力を行います。仕入れ単価が登録されている場合、簡単な粗利計算も可能です。<br>
      ■主な機能<br>
      ・見積書の出力<br>
      ■主な管理データ<br>
      ・見積データ見積入力を行い、見積登録（Offer Sheet）の出力を行います。仕入れ単価が登録されている場合、簡単な粗利計算も可能です。<br>
      ■主な機能<br>
      ・見積書の出力<br>
      ■主な管理データ<br>
・見積データ</dd>
  </dl>
  <dl id="js_acMenu" class="{{modifier_class}}__container mod-box">
    <dt class="mod-text {{modifier_class}}__term">１．見積登録</dt>
    <dd class="mod-text {{modifier_class}}__description">
    <p class="mod-text">見積入力を行い、見積登録（Offer Sheet）の出力を行います。仕入れ単価が登録されている場合、簡単な粗利計算も可能です。<br>
      ■主な機能<br>
      ・見積書の出力<br>
      ■主な管理データ<br>
      ・見積データ見積入力を行い、見積登録（Offer Sheet）の出力を行います。仕入れ単価が登録されている場合、簡単な粗利計算も可能です。<br>
      ■主な機能<br>
      ・見積書の出力<br>
      ■主な管理データ<br>
・見積データ
      </p>
      <p class="{{modifier_class}}__pict mod-box">
        <img class="mod-pict helper--hide-landscape-under" src="../images/bottom/faq_img_001_pc.png">
        <img class="mod-pict helper--hide-landscape-over" src="../images/bottom/faq_img_001_pc.png">
      </p>
    </dd>
  </dl>
</div>

block-d-h-m - デフォルトスタイル

Style guide: block.d.h.m
*/
.block-d-h-m #js_acMenu {
  border-bottom: 1px solid #fff;
}
.block-d-h-m #js_acMenu dt {
  display: block;
  cursor: pointer;
  background-image: url("../images/common/acordion03_open_pc.png");
  background-repeat: no-repeat;
  -webkit-background-size: 15px auto;
          background-size: 15px auto;
  background-position: 100% top;
  background-position: 98% 50%;
  font-size: 20px;
  color: #3c5a88;
  padding: 20px;
  background-color: #e1e9f2;
  text-indent: -50px;
  padding-left: 70px;
  padding-right: 50px;
}
.block-d-h-m #js_acMenu dd {
  display: none;
}
.block-d-h-m #js_acMenu dt.close {
  background-image: url("../images/common/acordion03_close_pc.png");
  background-repeat: no-repeat;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
  -webkit-background-size: 15px auto;
          background-size: 15px auto;
  color: #fff;
  background-color: #6c9bd2;
}
.block-d-h-m #js_acMenu dt.block-d-h-m__term__large {
  text-indent: -80px;
  padding-left: 100px;
  padding-right: 50px;
}
.block-d-h-m__description {
  font-size: 16px;
  color: #444;
  padding: 20px;
  background-color: #fff;
  border-right: 1px solid #6c9bd2;
  border-left: 1px solid #6c9bd2;
  border-bottom: 1px solid #6c9bd2;
}
.block-d-h-m__pict {
  width: 100%;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 0;
}
/*
Variations

ブロック定義 アンカーリンク

Markup:
<div class="mod-box {{modifier_class}}">
  <ul class="mod-box {{modifier_class}}__list">
    <li class="mod-text {{modifier_class}}__list_item"><a href="#" class="{{modifier_class}}__list__btn mod-btn">ああああああああああ</a></li>
    <li class="mod-text {{modifier_class}}__list_item"><a href="#" class="{{modifier_class}}__list__btn mod-btn">ああああああああああ</a></li>
    <li class="mod-text {{modifier_class}}__list_item"><a href="#" class="{{modifier_class}}__list__btn mod-btn">ああああああああああ</a></li>
  </ul>
</div>

block-d-h-n - デフォルトスタイル

Style guide: block.d.h.n
*/
.block-d-h-n__list_item {
  display: inline-block;
}
.block-d-h-n__list__btn {
  padding: 0 30px 0 15px;
  margin-right: 15px;
  font-size: 20px;
  color: #3c5a88;
  background-image: url("../images/common/icon22_pc.png");
  background-repeat: no-repeat;
  -webkit-background-size: 9px auto;
          background-size: 9px auto;
  background-position: 0% 50%;
  border-right: 1px solid #999;
}
/*
Variations

ボトム ソリューション紹介　パーツ

Markup:
<div class="{{modifier_class}}  mod-box">
  <div class="mod-box {{modifier_class}}__cell__b">
    <p class="mod-pict {{modifier_class}}__cell__b__pict__container">
    <img class="mod-pict {{modifier_class}}__cell__b__pict helper--hide-landscape-under" src="../images/bottom/solution_img_001_pc.png">
    <img class="mod-pict {{modifier_class}}__cell__b__pict helper--hide-landscape-over" src="../images/bottom/solution_img_001_sp.png">
    </p>
  </div>
  <div class="mod-box {{modifier_class}}__cell__a">
    <h3 class="{{modifier_class}}__cell__a__title mod-text">安全保障貿易管理の<br>
水際対策でお悩みの方へ</h3>
  </div>
</div>

block-d-h-o - デフォルトスタイル

style guide: block.d.h.o
*/
.block-d-h-o {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.block-d-h-o__cell__a {
  display: table-cell;
  width: 40%;
  height: 180px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #3c5a88;
  padding: 30px;
  vertical-align: middle;
}
.block-d-h-o__cell__a__title {
  font-size: 30px;
  color: #fff;
  text-align: left;
  padding-bottom: 5px;
}
.block-d-h-o__cell__b {
  display: table-cell;
  width: 60%;
  height: 180px;
  background-color: #fff;
  border: 1px solid #e1e9f2;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: middle;
}
.block-d-h-o__cell__b__pict__container {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 30px;
}
/*
Variations

ボトム ソリューション紹介　パーツ

Markup:
<div class="mod-box">
  <a href="#" class="{{modifier_class}}  mod-box">
    <div class="mod-box {{modifier_class}}__cell__b">
      <p class="mod-pict {{modifier_class}}__cell__b__pict__container">
      <img class="mod-pict {{modifier_class}}__cell__b__pict helper--hide-landscape-under" src="../images/bottom/solution_img_001_pc.png">
      <img class="mod-pict {{modifier_class}}__cell__b__pict helper--hide-landscape-over" src="../images/bottom/solution_img_001_sp.png">
      </p>
    </div>
    <div class="mod-box {{modifier_class}}__cell__a">
      <h3 class="{{modifier_class}}__cell__a__title mod-text">安全保障貿易管理の<br>
  水際対策でお悩みの方へ</h3>
    </div>
  </a>
</div>

block-d-h-o-o - デフォルトスタイル

style guide: block.d.h.o.o
*/
.block-d-h-o-o {
  display: table;
  width: 100%;
  table-layout: fixed;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background-color: #fff;
}
.block-d-h-o-o:hover {
  background-color: #6c9bd2;
}
.block-d-h-o-o__cell__a {
  display: table-cell;
  width: 40%;
  height: 120px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #3c5a88;
  padding: 0 30px;
  vertical-align: middle;
  background-image: url("../images/common/nav_pc_on.png");
  background-repeat: no-repeat;
  background-position: 98% 50%;
}
.block-d-h-o-o__cell__a__title {
  font-size: 30px;
  color: #fff;
  text-align: left;
  padding-bottom: 5px;
}
.block-d-h-o-o__cell__b {
  display: table-cell;
  width: 60%;
  height: 120px;
  border-top: 1px solid #e1e9f2;
  border-bottom: 1px solid #e1e9f2;
  border-left: 1px solid #e1e9f2;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: middle;
}
.block-d-h-o-o__cell__b__pict__container {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 30px;
}
.block-d-h-o-o .block-a-h-b-b {
  width: 80%;
}
.block-d-h-o-o .block-a-h-b-b__link__btn {
  font-size: 20px;
  font-weight: normal;
  background-position: 97% 50% !important;
}
/*
Variations

bottom ボトムパーツ ユーザー紹介

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__container mod-grid2">
    <p class="{{modifier_class}}__pic__container mod-grid2__cell">
      <img class="{{modifier_class}}__pic mod-pict" src="../images/bottom/users_img_001_sp.png">
    </p>
    <div class="mod-grid2__cell {{modifier_class}}__text__container">
      <div class="{{modifier_class}}__title__container mod-box">
        <h4 class="{{modifier_class}}__title mod-text">「内部統制強化」と「輸入管理業務の標準化への挑戦」</h4>
      </div>
      <p class="mod-text {{modifier_class}}__text__a">総合インテリアのリーディングカンパニーとして、国内外460社を超えるメーカーと取引を行う大塚家具様。増え続ける海外との取引先と商品点数。担当者個人のスキルに依存することには限界を感じる中で2008年から「HarborWrite®」を採用。その結果、数々のメリットを生み出すことに成功いたしました。</p>
      <div class="block-a-h-b mod-box">
        <a class="block-a-h-b__link__btn" href="javascript:;">
        詳しく見る
        </a>
      </div>
    </div>
  </div>
</div>

block-d-r - デフォルトスタイル

style guide: block.d.r
*/
.block-d-r__container {
  table-layout: fixed;
}
.block-d-r__title {
  font-size: 24px;
  color: #3c5a88;
  padding-bottom: 20px;
}
.block-d-r__title:after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background-color: #3c5a88;
  position: absolute;
  left: 0;
  bottom: -2px;
}
.block-d-r__title__container {
  border-bottom: 2px solid #e1e9f2;
  margin-bottom: 30px;
}
.block-d-r__pic {
  border: 1px solid #9fa0a0;
  max-width: 600px;
  width: 100%;
}
.block-d-r__pic__container {
  width: 48.5%;
}
.block-d-r__text__container {
  width: 48.5%;
  padding-left: 3%;
}
.block-d-r__text__a {
  font-size: 16px;
  margin-bottom: 15px;
}
.block-d-r .block-a-h-b__link__btn {
  padding: 38px;
  font-size: 24px;
}
/*
Variations

サイド固定ボタン

Markup:
<div class="{{modifier_class}} mod-box  mod-box--theme-b-p">
  <div class="mod-grid-a-a">
    <div class="mod-grid-a-a__cell--a">
      <a class="mod-pict {{modifier_class}}__cell--a__pict__btn">
        <p class="mod-text {{modifier_class}}__cell--a__pict__container"><img class="mod-pict {{modifier_class}}__cell__b__pict" src="../images/common/contact_btn001_open.png" alt="お問い合わせ"></p>
       </a>
    </div>
    <div class="{{modifier_class}}__detail mod-grid-a-a__cell--b">
      <h3 class="{{modifier_class}}__title__container mod-text"><span class="{{modifier_class}}__title">電話のお問い合わせ</span></h3>
      <div class="mod-box">
        <p class="{{modifier_class}}__tel mod-text">03-0000-0000</p>
        <span class="{{modifier_class}}__time">受付時間00:00～00:00（土日休）</span>
      </div>
      <h3 class="{{modifier_class}}__title__form__container mod-text"><span class="{{modifier_class}}__title__form">フォームのお問い合わせ</span></h3>
      <a class="{{modifier_class}}__demo__form mod-btn">お問合せ・デモ<br>申し込みフォーム</a>
    </div>
  </div>
</div>

block-d-w - デフォルトスタイル

style guide: block.d.w
*/
.block-d-w {
  width: 380px;
  height: 280px;
}
.block-d-w .mod-grid-a-a {
  height: 100%;
}
.block-d-w .mod-grid-a-a__cell--a {
  width: 19%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.block-d-w .mod-grid-a-a__cell--b {
  width: 81%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 20px;
}
.block-d-w__cell--a__pict__btn {
  background-color: #c54c5a;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: table;
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.block-d-w__cell--a__pict__container {
  display: table-cell;
  vertical-align: middle;
}
.block-d-w__cell__b__pict {
  margin-left: auto;
  margin-right: auto;
}
.block-d-w__title {
  background-image: url("../images/common/contact_btn002.png");
  background-repeat: no-repeat;
  padding-left: 35px;
  font-size: 21px;
  display: block;
  line-height: 35px;
}
.block-d-w__title__container {
  padding-bottom: 7px;
  border-bottom: 1px solid #c54c5a;
}
.block-d-w__tel {
  font-size: 30px;
  text-align: center;
  border-bottom: 1px solid #c54c5a;
  color: #c54c5a;
  margin-top: 3px;
  padding-bottom: 6px;
}
.block-d-w__time {
  font-size: 11px;
  color: #c54c5a;
  background-color: #fff;
  display: inline-block;
  position: absolute;
  bottom: -7px;
  left: 47px;
  padding-left: 6px;
}
.block-d-w__title__form {
  background-image: url("../images/common/contact_btn003.png");
  background-repeat: no-repeat;
  padding-left: 35px;
  font-size: 21px;
  letter-spacing: -0.05em;
  display: block;
}
.block-d-w__title__form__container {
  padding-bottom: 7px;
  border-bottom: 1px solid #c54c5a;
  margin-top: 15px;
}
.block-d-w__demo__form {
  background-color: #c54c5a;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  padding: 13px;
  margin-top: 10px;
  line-height: 26px;
  background-image: url("../images/common/contact_btn004.png");
  background-repeat: no-repeat;
  background-position: 95% 50%;
}
/*
Variations

サイド固定ボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <a class="{{modifier_class}}__btn mod-btn">
    <p class="mod-text {{modifier_class}}__pict__container"><img class="mod-pict {{modifier_class}}__pict" src="../images/common/contact_btn001_close.png" alt="お問い合わせ"></p>
 </a>
  <a class="mod-btn {{modifier_class}}__btn__b">
    <p class="mod-text {{modifier_class}}__pict__container"><img class="mod-pict {{modifier_class}}__pict" src="../images/common/intoroduction_info_btn001_close.png" alt="導入のご案内"></p>
 </a>
</div>

block-d-x - デフォルトスタイル

style guide: block.d.x
*/
.block-d-x {
  width: 72px;
  height: 280px;
}
.block-d-x__btn {
  background-color: #c54c5a;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: table;
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.block-d-x__btn__b {
  background-color: #3c5a88;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: table;
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.block-d-x__pict__container {
  display: table-cell;
  vertical-align: middle;
}
.block-d-x__pict {
  margin-left: auto;
  margin-right: auto;
}
/*
Variations

サイド固定ボタン

Markup:
<div class="{{modifier_class}} mod-box">
<!-- スライドボックスー部分-->
<div id="slide_menu">
  <div class="block-d-w mod-box  mod-box--theme-b-p" id="slide_box">
    <div class="mod-grid-a-a">
      <div class="mod-grid-a-a__cell--a">
        <a class="mod-pict block-d-w__cell--a__pict__btn" id="slide_close">
          <p class="mod-text block-d-w__cell--a__pict__container"><img class="mod-pict block-d-w__cell__b__pict" src="../images/common/contact_btn001_open.png" alt="お問い合わせ"></p>
         </a>
      </div>
      <div class="block-d-w__detail mod-grid-a-a__cell--b">
        <h3 class="block-d-w__title__container mod-text"><span class="block-d-w__title">電話のお問い合わせ</span></h3>
        <div class="mod-box">
          <p class="block-d-w__tel mod-text">03-0000-0000</p>
          <span class="block-d-w__time">受付時間00:00～00:00（土日休）</span>
        </div>
        <h3 class="block-d-w__title__form__container mod-text"><span class="block-d-w__title__form">フォームのお問い合わせ</span></h3>
        <a class="block-d-w__demo__form mod-btn">お問合せ・デモ<br>申し込みフォーム</a>
      </div>
    </div>
  </div>
</div>
<div id="container">
    <!--メニューを出すボタン-->
  <div class="block-d-x mod-box">
    <a class="block-d-x__btn mod-btn" id="button">
      <p class="mod-text block-d-x__pict__container"><img class="mod-pict block-d-x__pict" src="../images/common/contact_btn001_close.png" alt="お問い合わせ"></p>
   </a>
  </div>
</div><!-- /.container -->
</div>

block-d-y - デフォルトスタイル

Style guide: block.d.y
*/
.block-d-y {
  z-index: 10000;
}
.block-d-y #slide_box {
  position: fixed;
  top: 57%;
  right: -380px;
  z-index: 3;
  margin-top: -285px;
}
.block-d-y #container {
  position: fixed;
  top: 57%;
  right: 0;
  margin-top: -285px;
}
.block-d-y #button {
  cursor: pointer;
  z-index: 2;
}
/*
Variations

サイド固定ボタン

Markup:
<div class="{{modifier_class}} mod-box">
<!-- スライドボックスー部分-->
<div id="slide_menu">
  <div class="block-d-z mod-box  mod-box--theme-b-p" id="slide_box">
    <div class="mod-grid-a-a">
      <div class="mod-grid-a-a__cell--a">
        <a class="mod-pict block-d-z__cell--a__pict__btn" id="slide_close">
          <p class="mod-text block-d-z__cell--a__pict__container"><img class="mod-pict block-d-z__cell__b__pict" src="../images/common/intoroduction_info_btn001_open.png" alt="お問い合わせ"></p>
         </a>
      </div>
      <div class="block-d-z__detail mod-grid-a-a__cell--b">
        <a class="block-d-z__form mod-btn helper--margin-bottom15">初めてのお客様へ</a>
        <a class="block-d-z__form mod-btn helper--margin-bottom15">ご検討中のお客様へ</a>
        <a class="block-d-z__form mod-btn">導入済みのお客様へ</a>
      </div>
    </div>
  </div>
</div>
<div id="container">
    <!--メニューを出すボタン-->
  <div class="block-d-x mod-box">
    <a class="mod-btn block-d-x__btn__b" id="button">
      <p class="mod-text block-d-x__pict__container"><img class="mod-pict block-d-x__pict" src="../images/common/intoroduction_info_btn001_close.png" alt="導入のご案内"></p>
   </a>
  </div>
</div><!-- /.container -->
</div>

block-d-y-b - デフォルトスタイル

Style guide: block.d.y.b
*/
.block-d-y-b {
  z-index: 10000;
}
.block-d-y-b #slide_box {
  position: fixed;
  top: 57%;
  right: -380px;
  z-index: 3;
  margin-top: 10px;
}
.block-d-y-b #container {
  position: fixed;
  top: 57%;
  right: 0;
  margin-top: 10px;
}
.block-d-y-b #button {
  cursor: pointer;
  z-index: 2;
}
/*
Variations

サイド固定ボタン

Markup:
<div class="{{modifier_class}} mod-box  mod-box--theme-b-p">
  <div class="mod-grid-a-a">
    <div class="mod-grid-a-a__cell--a">
      <a class="mod-pict {{modifier_class}}__cell--a__pict__btn">
        <p class="mod-text {{modifier_class}}__cell--a__pict__container"><img class="mod-pict {{modifier_class}}__cell__b__pict" src="../images/common/intoroduction_info_btn001_close.png" alt="お問い合わせ"></p>
       </a>
    </div>
    <div class="{{modifier_class}}__detail mod-grid-a-a__cell--b">
      <a class="{{modifier_class}}__form mod-btn helper--margin-bottom15">初めてのお客様へ</a>
      <a class="{{modifier_class}}__form mod-btn helper--margin-bottom15">ご検討中のお客様へ</a>
      <a class="{{modifier_class}}__form mod-btn">導入済みのお客様へ</a>
    </div>
  </div>
</div>

block-d-z - デフォルトスタイル

style guide: block.d.z
*/
.block-d-z {
  width: 380px;
  height: 280px;
}
.block-d-z .mod-grid-a-a {
  height: 100%;
}
.block-d-z .mod-grid-a-a__cell--a {
  width: 19%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.block-d-z .mod-grid-a-a__cell--b {
  width: 81%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 20px;
}
.block-d-z__cell--a__pict__btn {
  background-color: #3c5a88;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: table;
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.block-d-z__cell--a__pict__container {
  display: table-cell;
  vertical-align: middle;
}
.block-d-z__cell__b__pict {
  margin-left: auto;
  margin-right: auto;
}
.block-d-z__form {
  background-color: #3c5a88;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  padding: 13px;
  line-height: 47px;
  background-image: url("../images/common/contact_btn004.png");
  background-repeat: no-repeat;
  background-position: 95% 50%;
  height: 70px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/*
Variations

bottom ツールチップ export

Markup:
<div class="{{modifier_class}} mod-box helper--hide-tablet-under">
  <div class="{{modifier_class}}__container mod-box">
    <p class="mod-pict {{modifier_class}}__pict__container">
      <img class="mod-pict {{modifier_class}}__pict__bg" src="../images/bottom/export_system_img_008_pc.png" alt="図">
    </p>
    <a class="mod-pict {{modifier_class}}__pict__container__a mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/export_system_img_009_pc_off.png" alt="発注">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__b mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/export_system_img_010_pc_off.png" alt="入荷">
    </a>
    <span class="mod-pict {{modifier_class}}__pict__container__c mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/export_system_img_011_pc.png" alt="買取">
    </span>
    <a class="mod-pict {{modifier_class}}__pict__container__d mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/export_system_img_012_pc_off.png" alt="アプリケーションドラフト">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__e mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/export_system_img_013_pc_off.png" alt="オーダ照会">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__f mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/export_system_img_014_pc_off.png" alt="見積">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__g mod-btn">
      <img class="mod-pict {{modifier_class}}__pict {{modifier_class}}__pict__g" src="../images/bottom/export_system_img_018_pc_off.png" alt="入金">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__h mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/export_system_img_015_pc_off.png" alt="受注">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__i mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/export_system_img_016_pc_off.png" alt="船積">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__j mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/export_system_img_017_pc_off.png" alt="L/C接受">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__k mod-btn">
      <img class="mod-pict {{modifier_class}}__pict {{modifier_class}}__pict__k" src="../images/bottom/export_system_img_019_pc_off.png" alt="為替予約">
    </a>
  </div>
</div>

block-c-d - デフォルトスタイル

style guide: block.c.d
*/
.block-c-d {
  background-color: #fff;
}
.block-c-d__container {
  margin-bottom: 130px;
}
.block-c-d__pict__container__a {
  position: absolute;
  top: 0;
  left: 357px;
}
.block-c-d__pict__container__b {
  position: absolute;
  top: 0;
  left: 519px;
}
.block-c-d__pict__container__c {
  position: absolute;
  top: 0;
  left: 684px;
  z-index: 700;
}
.block-c-d__pict__container__d {
  position: absolute;
  top: 0;
  left: 682px;
  z-index: 600;
}
.block-c-d__pict__container__e {
  position: absolute;
  top: 109px;
  left: 30px;
}
.block-c-d__pict__container__f {
  position: absolute;
  top: 109px;
  left: 195px;
  z-index: 1000;
}
.block-c-d__pict__container__g {
  position: absolute;
  top: 109px;
  left: 848px;
  z-index: 500;
}
.block-c-d__pict__container__h {
  position: absolute;
  bottom: 80px;
  left: 194px;
  z-index: 10;
}
.block-c-d__pict__container__i {
  position: absolute;
  bottom: 27px;
  left: 522px;
}
.block-c-d__pict__container__j {
  position: absolute;
  top: 386px;
  left: 346px;
}
.block-c-d__pict__container__k {
  position: absolute;
  bottom: 27px;
  left: 847px;
  z-index: 100;
}
/*
Variations

bottom 画像

Markup:
<div class="{{modifier_class}} mod-box">
  <p class="mod-pict {{modifier_class}}__pict__container">
    <img class="mod-pict {{modifier_class}}__pict helper--hide-landscape-under" src="../images/bottom/export_system_img_020_tab.png">
    <img class="mod-pict {{modifier_class}}__pict helper--hide-landscape-over" src="../images/bottom/export_system_img_020_sp.png">
  </p>
</div>

block-c-e - デフォルトスタイル

style guide: block.c.e
*/
.block-c-e__pict {
  width: 100%;
}
.block-c-e__pict__container {
  padding: 15px;
}
/*
Variations

bottom ツールチップ import

Markup:
<div class="{{modifier_class}} mod-box helper--hide-tablet-under">
  <div class="{{modifier_class}}__container mod-box">
    <p class="mod-pict {{modifier_class}}__pict__container">
      <img class="mod-pict {{modifier_class}}__pict__bg" src="../images/bottom/import_system_img_007_pc.png" alt="図">
    </p>
    <a class="mod-pict {{modifier_class}}__pict__container__a mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/import_system_img_008_pc_off.png" alt="原価計算">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__b mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/import_system_img_009_pc_off.png" alt="諸掛">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__c mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/import_system_img_010_pc_off.png" alt="荷捌">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__d mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/import_system_img_011_pc_off.png" alt="オーダ照会">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__e mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/import_system_img_012_pc_off.png" alt="契約">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__f mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/import_system_img_013_pc_off.png" alt="受注">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__g mod-btn">
      <img class="mod-pict {{modifier_class}}__pict {{modifier_class}}__pict__g" src="../images/bottom/import_system_img_014_pc_off.png" alt="船積">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__h mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/import_system_img_015_pc_off.png" alt="支払">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__i mod-btn">
      <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/import_system_img_017_pc_off.png" alt="為替予約">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__j mod-btn">
       <img class="mod-pict {{modifier_class}}__pict" src="../images/bottom/import_system_img_016_pc_off.png" alt="送金">
    </a>
    <a class="mod-pict {{modifier_class}}__pict__container__k mod-btn">
      <img class="mod-pict {{modifier_class}}__pict {{modifier_class}}__pict__k" src="../images/bottom/import_system_img_018_pc_off.png" alt="L/C接受">
    </a>
  </div>
</div>

block-c-f - デフォルトスタイル

style guide: block.c.f
*/
.block-c-f {
  background-color: #fff;
}
.block-c-f__container {
  margin-bottom: 70px;
}
.block-c-f__pict__container__a {
  position: absolute;
  top: 21px;
  left: 149px;
}
.block-c-f__pict__container__b {
  position: absolute;
  top: 20px;
  left: 519px;
}
.block-c-f__pict__container__c {
  position: absolute;
  top: 22px;
  left: 842px;
  z-index: 700;
}
.block-c-f__pict__container__d {
  position: absolute;
  top: 112px;
  left: 42px;
px
  z-index: 600;
}
.block-c-f__pict__container__e {
  position: absolute;
  top: 143px;
  left: 202px;
  z-index: 1000;
}
.block-c-f__pict__container__f {
  position: absolute;
  top: 251px;
  left: 195px;
  z-index: 20px;
}
.block-c-f__pict__container__g {
  position: absolute;
  top: 250px;
  left: 524px;
  z-index: 10;
}
.block-c-f__pict__container__h {
  position: absolute;
  bottom: 164px;
  left: 685px;
  z-index: 60;
}
.block-c-f__pict__container__i {
  position: absolute;
  bottom: 27px;
  left: 849px;
}
.block-c-f__pict__container__j {
  position: absolute;
  bottom: 164px;
  left: 849px;
}
.block-c-f__pict__container__k {
  position: absolute;
  bottom: 27px;
  left: 438px;
  z-index: 100;
}
/*
Variations

スライダー

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__container  mod-box__container">
    <div class="{{modifier_class}}__list  mod-box" id="js-top-mv-slide">
      <div class="{{modifier_class}}__list__item  mod-box__container  js-top-mv-slide__item">
        <a class="{{modifier_class}}__list__item__thumb  mod-pict" href="javascript:;">
          <img class="helper--hide-landscape-under  mod-pict__src  mod-pict__src--fit-width  js-rollover" src="../images/top/mv01_pc.png" alt="">
          <img class="helper--hide-landscape-over  mod-pict__src  mod-pict__src--fit-width  js-rollover" src="../images/top/mv01_sp.png" alt="">
        </a>
      </div>
      <div class="{{modifier_class}}__list__item  mod-box__container  js-top-mv-slide__item">
        <a class="{{modifier_class}}__list__item__thumb  mod-pict" href="javascript:;">
          <img class="helper--hide-landscape-under  mod-pict__src  mod-pict__src--fit-width  js-rollover" src="../images/top/mv01_pc.png" alt="">
          <img class="helper--hide-landscape-over  mod-pict__src  mod-pict__src--fit-width  js-rollover" src="../images/top/mv01_sp.png" alt="">
        </a>
      </div>
    </div>
  </div>
</div>

block-c-g - デフォルトスタイル

style guide: block.c.g
*/
.block-c-g {
  margin-top: 100px;
}
.block-c-g__container .bx-viewport {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #ccc;
}
.block-c-g__container .bx-pager {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 10px;
  width: 160px;
  margin: 0 auto;
}
.block-c-g__container .bx-pager-item {
  display: inline-block;
  padding: 0 6px;
}
.block-c-g__container .bx-pager-link {
  display: inline-block;
  width: 40px;
  height: 5px;
  border-radius: 5px;
  background-color: #959595;
  margin-left: 5px;
  margin-right: 5px;
  overflow: hidden;
  text-indent: -9999px;
}
.block-c-g__container .bx-pager-link.active {
  background-color: #4c668f;
}
.block-c-g__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}
.block-c-g__list__item {
  float: left;
  width: 100%;
}
.block-c-g .js-top-mv-slide {
  display: none;
}
.block-c-g .slide_no_link {
  pointer-events: none;
}
/*
Variations

次へ前へボタン

Markup:
<div class="{{modifier_class}} mod-box">
  <div class="{{modifier_class}}__container  mod-box__container">
    <div class="{{modifier_class}}__prev-btn__container"><a href="javascript:void(0);" class="{{modifier_class}}__prev-btn mod-btn"><span class="{{modifier_class}}__prev-btn__icon"></span>前へ</a></div>
    <div class="{{modifier_class}}__next-btn__container"><a href="javascript:void(0);" class="{{modifier_class}}__next-btn mod-btn"><span class="{{modifier_class}}__next-btn__icon"></span>次へ</a></div>
  </div>
</div>

block-c-h - デフォルトスタイル

style guide: block.c.h
*/
.block-c-h {
  margin-top: 30px;
}
.block-c-h__prev-btn {
  float: left;
  width: 50%;
  color: #3c5a88;
  text-align: left;
  font-size: 13px;
}
.block-c-h__next-btn {
  float: right;
  width: 50%;
  color: #3c5a88;
  text-align: right;
  font-size: 13px;
}
/*
helper

レイアウトのためのヘルパー

Weight: 10000

Style guide: helper
*/
/*
Margin

`margin` 調整のためのヘルパー（例は、最小値と最大値のみ表示。5px 単位で設定可能）

Markup: <div style="position:relative;padding:50px;">
  <div class="{{modifier_class}}" style="position:relative;width:50px;height:50px;line-height:50px;background:#999;text-align:center;">div</div>
</div>

helper--margin-top5 - 上に 5px のマージン
helper--margin-right5 - 右に 5px のマージン
helper--margin-bottom5 - 下に 5px のマージン
helper--margin-left5 - 左に 5px のマージン
helper--margin-top50 - 上に 50px のマージン
helper--margin-right50 - 右に 50px のマージン
helper--margin-bottom50 - 下に 50px のマージン
helper--margin-left50 - 左に 50px のマージン
helper--margin-top5- - 上に 5px のネガティブマージン
helper--margin-right5- - 右に 5px のネガティブマージン
helper--margin-bottom5- - 下に 5px のネガティブマージン
helper--margin-left5- - 左に 5px のネガティブマージン
helper--margin-top50- - 上に 5p0x のネガティブマージン
helper--margin-right50- - 右に 50px のネガティブマージン
helper--margin-bottom50- - 下に 50px のネガティブマージン
helper--margin-left50- - 左に 50px のネガティブマージン
helper--margin-center - ボックスの水平中央寄せ

Style guide: helper.0.1
*/
.helper--margin-top0 {
  margin-top: 0px !important;
}
.helper--margin-top0- {
  margin-top: 0px !important;
}
.helper--margin-left0 {
  margin-left: 0px !important;
}
.helper--margin-left0- {
  margin-left: 0px !important;
}
.helper--margin-bottom0 {
  margin-bottom: 0px !important;
}
.helper--margin-bottom0- {
  margin-bottom: 0px !important;
}
.helper--margin-right0 {
  margin-right: 0px !important;
}
.helper--margin-right0- {
  margin-right: 0px !important;
}
.helper--margin-top5 {
  margin-top: 5px !important;
}
.helper--margin-top5- {
  margin-top: -5px !important;
}
.helper--margin-left5 {
  margin-left: 5px !important;
}
.helper--margin-left5- {
  margin-left: -5px !important;
}
.helper--margin-bottom5 {
  margin-bottom: 5px !important;
}
.helper--margin-bottom5- {
  margin-bottom: -5px !important;
}
.helper--margin-right5 {
  margin-right: 5px !important;
}
.helper--margin-right5- {
  margin-right: -5px !important;
}
.helper--margin-top10 {
  margin-top: 10px !important;
}
.helper--margin-top10- {
  margin-top: -10px !important;
}
.helper--margin-left10 {
  margin-left: 10px !important;
}
.helper--margin-left10- {
  margin-left: -10px !important;
}
.helper--margin-bottom10 {
  margin-bottom: 10px !important;
}
.helper--margin-bottom10- {
  margin-bottom: -10px !important;
}
.helper--margin-right10 {
  margin-right: 10px !important;
}
.helper--margin-right10- {
  margin-right: -10px !important;
}
.helper--margin-top15 {
  margin-top: 15px !important;
}
.helper--margin-top15- {
  margin-top: -15px !important;
}
.helper--margin-left15 {
  margin-left: 15px !important;
}
.helper--margin-left15- {
  margin-left: -15px !important;
}
.helper--margin-bottom15 {
  margin-bottom: 15px !important;
}
.helper--margin-bottom15- {
  margin-bottom: -15px !important;
}
.helper--margin-right15 {
  margin-right: 15px !important;
}
.helper--margin-right15- {
  margin-right: -15px !important;
}
.helper--margin-top20 {
  margin-top: 20px !important;
}
.helper--margin-top20- {
  margin-top: -20px !important;
}
.helper--margin-left20 {
  margin-left: 20px !important;
}
.helper--margin-left20- {
  margin-left: -20px !important;
}
.helper--margin-bottom20 {
  margin-bottom: 20px !important;
}
.helper--margin-bottom20- {
  margin-bottom: -20px !important;
}
.helper--margin-right20 {
  margin-right: 20px !important;
}
.helper--margin-right20- {
  margin-right: -20px !important;
}
.helper--margin-top25 {
  margin-top: 25px !important;
}
.helper--margin-top25- {
  margin-top: -25px !important;
}
.helper--margin-left25 {
  margin-left: 25px !important;
}
.helper--margin-left25- {
  margin-left: -25px !important;
}
.helper--margin-bottom25 {
  margin-bottom: 25px !important;
}
.helper--margin-bottom25- {
  margin-bottom: -25px !important;
}
.helper--margin-right25 {
  margin-right: 25px !important;
}
.helper--margin-right25- {
  margin-right: -25px !important;
}
.helper--margin-top30 {
  margin-top: 30px !important;
}
.helper--margin-top30- {
  margin-top: -30px !important;
}
.helper--margin-left30 {
  margin-left: 30px !important;
}
.helper--margin-left30- {
  margin-left: -30px !important;
}
.helper--margin-bottom30 {
  margin-bottom: 30px !important;
}
.helper--margin-bottom30- {
  margin-bottom: -30px !important;
}
.helper--margin-right30 {
  margin-right: 30px !important;
}
.helper--margin-right30- {
  margin-right: -30px !important;
}
.helper--margin-top35 {
  margin-top: 35px !important;
}
.helper--margin-top35- {
  margin-top: -35px !important;
}
.helper--margin-left35 {
  margin-left: 35px !important;
}
.helper--margin-left35- {
  margin-left: -35px !important;
}
.helper--margin-bottom35 {
  margin-bottom: 35px !important;
}
.helper--margin-bottom35- {
  margin-bottom: -35px !important;
}
.helper--margin-right35 {
  margin-right: 35px !important;
}
.helper--margin-right35- {
  margin-right: -35px !important;
}
.helper--margin-top40 {
  margin-top: 40px !important;
}
.helper--margin-top40- {
  margin-top: -40px !important;
}
.helper--margin-left40 {
  margin-left: 40px !important;
}
.helper--margin-left40- {
  margin-left: -40px !important;
}
.helper--margin-bottom40 {
  margin-bottom: 40px !important;
}
.helper--margin-bottom40- {
  margin-bottom: -40px !important;
}
.helper--margin-right40 {
  margin-right: 40px !important;
}
.helper--margin-right40- {
  margin-right: -40px !important;
}
.helper--margin-top45 {
  margin-top: 45px !important;
}
.helper--margin-top45- {
  margin-top: -45px !important;
}
.helper--margin-left45 {
  margin-left: 45px !important;
}
.helper--margin-left45- {
  margin-left: -45px !important;
}
.helper--margin-bottom45 {
  margin-bottom: 45px !important;
}
.helper--margin-bottom45- {
  margin-bottom: -45px !important;
}
.helper--margin-right45 {
  margin-right: 45px !important;
}
.helper--margin-right45- {
  margin-right: -45px !important;
}
.helper--margin-top50 {
  margin-top: 50px !important;
}
.helper--margin-top50- {
  margin-top: -50px !important;
}
.helper--margin-left50 {
  margin-left: 50px !important;
}
.helper--margin-left50- {
  margin-left: -50px !important;
}
.helper--margin-bottom50 {
  margin-bottom: 50px !important;
}
.helper--margin-bottom50- {
  margin-bottom: -50px !important;
}
.helper--margin-right50 {
  margin-right: 50px !important;
}
.helper--margin-right50- {
  margin-right: -50px !important;
}
.helper--margin-center {
  margin-left: auto !important;
  margin-right: auto !important;
}
/*
Padding

`padding` 調整のためのヘルパー（例は、最小値と最大値のみ表示。5px 単位で設定可能）

Markup: <div style="position:relative;padding:50px;">
  <div class="{{modifier_class}}" style="position:relative;width:50px;height:50px;line-height:50px;background:#999;text-align:center;">div</div>
</div>

helper--padding-top5 - 上に 5px のパディング
helper--padding-right5 - 右に 5px のパディング
helper--padding-bottom5 - 下に 5px のパディング
helper--padding-left5 - 左に 5px のパディング
helper--padding-top50 - 上に 50px のパディング
helper--padding-right50 - 右に 50px のパディング
helper--padding-bottom50 - 下に 50px のパディング
helper--padding-left50 - 左に 50px のパディング

Style guide: helper.0.2
*/
.helper--padding-top0 {
  padding-top: 0px !important;
}
.helper--padding-left0 {
  padding-left: 0px !important;
}
.helper--padding-bottom0 {
  padding-bottom: 0px !important;
}
.helper--padding-right0 {
  padding-right: 0px !important;
}
.helper--padding-top5 {
  padding-top: 5px !important;
}
.helper--padding-left5 {
  padding-left: 5px !important;
}
.helper--padding-bottom5 {
  padding-bottom: 5px !important;
}
.helper--padding-right5 {
  padding-right: 5px !important;
}
.helper--padding-top10 {
  padding-top: 10px !important;
}
.helper--padding-left10 {
  padding-left: 10px !important;
}
.helper--padding-bottom10 {
  padding-bottom: 10px !important;
}
.helper--padding-right10 {
  padding-right: 10px !important;
}
.helper--padding-top15 {
  padding-top: 15px !important;
}
.helper--padding-left15 {
  padding-left: 15px !important;
}
.helper--padding-bottom15 {
  padding-bottom: 15px !important;
}
.helper--padding-right15 {
  padding-right: 15px !important;
}
.helper--padding-top20 {
  padding-top: 20px !important;
}
.helper--padding-left20 {
  padding-left: 20px !important;
}
.helper--padding-bottom20 {
  padding-bottom: 20px !important;
}
.helper--padding-right20 {
  padding-right: 20px !important;
}
.helper--padding-top25 {
  padding-top: 25px !important;
}
.helper--padding-left25 {
  padding-left: 25px !important;
}
.helper--padding-bottom25 {
  padding-bottom: 25px !important;
}
.helper--padding-right25 {
  padding-right: 25px !important;
}
.helper--padding-top30 {
  padding-top: 30px !important;
}
.helper--padding-left30 {
  padding-left: 30px !important;
}
.helper--padding-bottom30 {
  padding-bottom: 30px !important;
}
.helper--padding-right30 {
  padding-right: 30px !important;
}
.helper--padding-top35 {
  padding-top: 35px !important;
}
.helper--padding-left35 {
  padding-left: 35px !important;
}
.helper--padding-bottom35 {
  padding-bottom: 35px !important;
}
.helper--padding-right35 {
  padding-right: 35px !important;
}
.helper--padding-top40 {
  padding-top: 40px !important;
}
.helper--padding-left40 {
  padding-left: 40px !important;
}
.helper--padding-bottom40 {
  padding-bottom: 40px !important;
}
.helper--padding-right40 {
  padding-right: 40px !important;
}
.helper--padding-top45 {
  padding-top: 45px !important;
}
.helper--padding-left45 {
  padding-left: 45px !important;
}
.helper--padding-bottom45 {
  padding-bottom: 45px !important;
}
.helper--padding-right45 {
  padding-right: 45px !important;
}
.helper--padding-top50 {
  padding-top: 50px !important;
}
.helper--padding-left50 {
  padding-left: 50px !important;
}
.helper--padding-bottom50 {
  padding-bottom: 50px !important;
}
.helper--padding-right50 {
  padding-right: 50px !important;
}
/*
Border

`border` 調整のためのヘルパー

Markup: <div style="position:relative;padding:50px;">
  <div class="{{modifier_class}}" style="position:relative;width:50px;height:50px;line-height:50px;background:#999;text-align:center;">div</div>
</div>

helper--border-none-top - 上のボーダーを解除
helper--border-none-right - 右のボーダーを解除
helper--border-none-bottom - 下のボーダーを解除
helper--border-none-left - 左のボーダーを解除
helper--border-a-a-top - 上に 1px (`#000`) のボーダー
helper--border-a-a-right - 右に 1px (`#000`) のボーダー
helper--border-a-a-bottom - 下に 1px (`#000`) のボーダー
helper--border-a-a-left - 左に 1px (`#000`) のボーダー

Style guide: helper.0.3
*/
.helper--border-none-top,
.helper--border-a-a-top,
.helper--border-none-left,
.helper--border-a-a-left,
.helper--border-none-bottom,
.helper--border-a-a-bottom,
.helper--border-none-right,
.helper--border-a-a-right {
  _zoom: 1;
}
.helper--border-none-top {
  border-top: 0 !important;
}
.helper--border-a-a-top {
  border-top: 1px solid #000 !important;
}
.helper--border-none-left {
  border-left: 0 !important;
}
.helper--border-a-a-left {
  border-left: 1px solid #000 !important;
}
.helper--border-none-bottom {
  border-bottom: 0 !important;
}
.helper--border-a-a-bottom {
  border-bottom: 1px solid #000 !important;
}
.helper--border-none-right {
  border-right: 0 !important;
}
.helper--border-a-a-right {
  border-right: 1px solid #000 !important;
}
/*
Position

`position` 調整のためのヘルパー（例は、最小値と最大値のみ表示。5px 単位で設定可能）

Markup: <div style="position:relative;padding:50px;">
  <div class="{{modifier_class}}" style="position:relative;width:50px;height:50px;line-height:50px;background:#999;text-align:center;">div</div>
</div>

helper--position-top5 - 上に 5px の移動
helper--position-right5 - 右に 5px の移動
helper--position-bottom5 - 下に 5px の移動
helper--position-left5 - 左に 5px の移動
helper--position-top50 - 上に 50px の移動
helper--position-right50 - 右に 50px の移動
helper--position-bottom50 - 下に 50px の移動
helper--position-left50 - 左に 50px の移動
helper--position-top5- - 上に -5px の移動
helper--position-right5- - 右に -5px の移動
helper--position-bottom5- - 下に -5px の移動
helper--position-left5- - 左に -5px の移動
helper--position-top50- - 上に -50px の移動
helper--position-right50- - 右に -50px の移動
helper--position-bottom50- - 下に -50px の移動
helper--position-left50- - 左に -50px の移動
helper--helper--position-static- - 解除

Style guide: helper.0.4
*/
.helper--position-top0 {
  top: 0px !important;
}
.helper--position-top0- {
  top: 0px !important;
}
.helper--position-left0 {
  left: 0px !important;
}
.helper--position-left0- {
  left: 0px !important;
}
.helper--position-bottom0 {
  bottom: 0px !important;
}
.helper--position-bottom0- {
  bottom: 0px !important;
}
.helper--position-right0 {
  right: 0px !important;
}
.helper--position-right0- {
  right: 0px !important;
}
.helper--position-top5 {
  top: 5px !important;
}
.helper--position-top5- {
  top: -5px !important;
}
.helper--position-left5 {
  left: 5px !important;
}
.helper--position-left5- {
  left: -5px !important;
}
.helper--position-bottom5 {
  bottom: 5px !important;
}
.helper--position-bottom5- {
  bottom: -5px !important;
}
.helper--position-right5 {
  right: 5px !important;
}
.helper--position-right5- {
  right: -5px !important;
}
.helper--position-top10 {
  top: 10px !important;
}
.helper--position-top10- {
  top: -10px !important;
}
.helper--position-left10 {
  left: 10px !important;
}
.helper--position-left10- {
  left: -10px !important;
}
.helper--position-bottom10 {
  bottom: 10px !important;
}
.helper--position-bottom10- {
  bottom: -10px !important;
}
.helper--position-right10 {
  right: 10px !important;
}
.helper--position-right10- {
  right: -10px !important;
}
.helper--position-top15 {
  top: 15px !important;
}
.helper--position-top15- {
  top: -15px !important;
}
.helper--position-left15 {
  left: 15px !important;
}
.helper--position-left15- {
  left: -15px !important;
}
.helper--position-bottom15 {
  bottom: 15px !important;
}
.helper--position-bottom15- {
  bottom: -15px !important;
}
.helper--position-right15 {
  right: 15px !important;
}
.helper--position-right15- {
  right: -15px !important;
}
.helper--position-top20 {
  top: 20px !important;
}
.helper--position-top20- {
  top: -20px !important;
}
.helper--position-left20 {
  left: 20px !important;
}
.helper--position-left20- {
  left: -20px !important;
}
.helper--position-bottom20 {
  bottom: 20px !important;
}
.helper--position-bottom20- {
  bottom: -20px !important;
}
.helper--position-right20 {
  right: 20px !important;
}
.helper--position-right20- {
  right: -20px !important;
}
.helper--position-top25 {
  top: 25px !important;
}
.helper--position-top25- {
  top: -25px !important;
}
.helper--position-left25 {
  left: 25px !important;
}
.helper--position-left25- {
  left: -25px !important;
}
.helper--position-bottom25 {
  bottom: 25px !important;
}
.helper--position-bottom25- {
  bottom: -25px !important;
}
.helper--position-right25 {
  right: 25px !important;
}
.helper--position-right25- {
  right: -25px !important;
}
.helper--position-top30 {
  top: 30px !important;
}
.helper--position-top30- {
  top: -30px !important;
}
.helper--position-left30 {
  left: 30px !important;
}
.helper--position-left30- {
  left: -30px !important;
}
.helper--position-bottom30 {
  bottom: 30px !important;
}
.helper--position-bottom30- {
  bottom: -30px !important;
}
.helper--position-right30 {
  right: 30px !important;
}
.helper--position-right30- {
  right: -30px !important;
}
.helper--position-top35 {
  top: 35px !important;
}
.helper--position-top35- {
  top: -35px !important;
}
.helper--position-left35 {
  left: 35px !important;
}
.helper--position-left35- {
  left: -35px !important;
}
.helper--position-bottom35 {
  bottom: 35px !important;
}
.helper--position-bottom35- {
  bottom: -35px !important;
}
.helper--position-right35 {
  right: 35px !important;
}
.helper--position-right35- {
  right: -35px !important;
}
.helper--position-top40 {
  top: 40px !important;
}
.helper--position-top40- {
  top: -40px !important;
}
.helper--position-left40 {
  left: 40px !important;
}
.helper--position-left40- {
  left: -40px !important;
}
.helper--position-bottom40 {
  bottom: 40px !important;
}
.helper--position-bottom40- {
  bottom: -40px !important;
}
.helper--position-right40 {
  right: 40px !important;
}
.helper--position-right40- {
  right: -40px !important;
}
.helper--position-top45 {
  top: 45px !important;
}
.helper--position-top45- {
  top: -45px !important;
}
.helper--position-left45 {
  left: 45px !important;
}
.helper--position-left45- {
  left: -45px !important;
}
.helper--position-bottom45 {
  bottom: 45px !important;
}
.helper--position-bottom45- {
  bottom: -45px !important;
}
.helper--position-right45 {
  right: 45px !important;
}
.helper--position-right45- {
  right: -45px !important;
}
.helper--position-top50 {
  top: 50px !important;
}
.helper--position-top50- {
  top: -50px !important;
}
.helper--position-left50 {
  left: 50px !important;
}
.helper--position-left50- {
  left: -50px !important;
}
.helper--position-bottom50 {
  bottom: 50px !important;
}
.helper--position-bottom50- {
  bottom: -50px !important;
}
.helper--position-right50 {
  right: 50px !important;
}
.helper--position-right50- {
  right: -50px !important;
}
.helper--position-static {
  position: static;
}
/*
Width

`width` 調整のためのヘルパー（数値指定は 25px 単位で設定可能）

Markup: <div style="position:relative;padding:50px;">
  <div class="{{modifier_class}}" style="position:relative;width:50px;height:50px;line-height:50px;background:#999;text-align:center;">div</div>
</div>

helper--width-auto - auto に指定
helper--width-fit - 100% に指定
helper--width-25 - 25px に指定
helper--width-500 - 500px に指定

Style guide: helper.0.5
*/
.helper--width-auto {
  width: auto !important;
}
.helper--width-fit {
  width: 100% !important;
}
.helper--width-25 {
  width: 25px !important;
}
.helper--width-50 {
  width: 50px !important;
}
.helper--width-75 {
  width: 75px !important;
}
.helper--width-100 {
  width: 100px !important;
}
.helper--width-125 {
  width: 125px !important;
}
.helper--width-150 {
  width: 150px !important;
}
.helper--width-175 {
  width: 175px !important;
}
.helper--width-200 {
  width: 200px !important;
}
.helper--width-225 {
  width: 225px !important;
}
.helper--width-250 {
  width: 250px !important;
}
.helper--width-275 {
  width: 275px !important;
}
.helper--width-300 {
  width: 300px !important;
}
.helper--width-325 {
  width: 325px !important;
}
.helper--width-350 {
  width: 350px !important;
}
.helper--width-375 {
  width: 375px !important;
}
.helper--width-400 {
  width: 400px !important;
}
.helper--width-425 {
  width: 425px !important;
}
.helper--width-450 {
  width: 450px !important;
}
.helper--width-475 {
  width: 475px !important;
}
.helper--width-500 {
  width: 500px !important;
}
/*
Height

`height` 調整のためのヘルパー（数値指定は 25px 単位で設定可能）

Markup: <div style="position:relative;padding:50px;">
  <div class="{{modifier_class}}" style="position:relative;width:50px;height:50px;line-height:50px;background:#999;text-align:center;">div</div>
</div>

helper--height-auto - auto に指定
helper--height-fit - 100% に指定
helper--height-25 - 25px に指定
helper--height-500 - 500px に指定

Style guide: helper.0.6
*/
.helper--height-auto {
  height: auto !important;
}
.helper--height-fit {
  height: 100% !important;
}
.helper--height-25 {
  height: 25px !important;
}
.helper--height-50 {
  height: 50px !important;
}
.helper--height-75 {
  height: 75px !important;
}
.helper--height-100 {
  height: 100px !important;
}
.helper--height-125 {
  height: 125px !important;
}
.helper--height-150 {
  height: 150px !important;
}
.helper--height-175 {
  height: 175px !important;
}
.helper--height-200 {
  height: 200px !important;
}
.helper--height-225 {
  height: 225px !important;
}
.helper--height-250 {
  height: 250px !important;
}
.helper--height-275 {
  height: 275px !important;
}
.helper--height-300 {
  height: 300px !important;
}
.helper--height-325 {
  height: 325px !important;
}
.helper--height-350 {
  height: 350px !important;
}
.helper--height-375 {
  height: 375px !important;
}
.helper--height-400 {
  height: 400px !important;
}
.helper--height-425 {
  height: 425px !important;
}
.helper--height-450 {
  height: 450px !important;
}
.helper--height-475 {
  height: 475px !important;
}
.helper--height-500 {
  height: 500px !important;
}
/*
Float

`float` 設定のためのヘルパー

Markup: <div style="position:relative;padding:50px;">
  <div class="{{modifier_class}}" style="position:relative;width:50px;height:50px;line-height:50px;background:#999;text-align:center;">div</div>
  <p class="mod-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum. </p>
</div>

helper--float-left - 左フロート
helper--float-right - 右フロート
helper--float-none - フロートを解除

Style guide: helper.0.7
*/
.helper--float-left {
  float: left !important;
}
.helper--float-right {
  float: right !important;
}
.helper--float-none {
  float: none !important;
}
/*
Clear

`float` 解除のためのヘルパー

Markup: <div style="position:relative;padding:50px;">
  <div class="helper--float-left" style="position:relative;width:50px;height:50px;line-height:50px;background:#999;text-align:center;">div</div>
  <p class="mod-text {{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum. </p>
  <div class="helper--float-right" style="position:relative;width:50px;height:50px;line-height:50px;background:#999;text-align:center;">div</div>
  <p class="mod-text {{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum. </p>
</div>

helper--clear-left - 左フロートをクリア
helper--clear-right - 右フロートをクリア
helper--clear-both - 両方のフロートをクリア

Style guide: helper.0.8
*/
.helper--clear-left {
  clear: left !important;
}
.helper--clear-right {
  clear: right !important;
}
.helper--clear-both {
  clear: both !important;
}
/*
ZIndex

`z-index` 調整のためのヘルパー（5 単位で設定可能）

Markup: <div style="position:relative;padding:50px;">
  <div style="position:absolute;width:50px;height:50px;top:50%;left:50%;margin:-50px 0 0 -50px;line-height:50px;color:#fff;background:#900;text-align:center;z-index:1">1</div>
  <div class="{{modifier_class}}" style="position:absolute;width:50px;height:50px;line-height:50px;top:50%;left:50%;margin:-25px 0 0 -25px;line-height:50px;background:#999;text-align:center;">div</div>
  <div style="position:absolute;width:50px;height:50px;line-height:50px;top:50%;left:50%;margin:0;color:#fff;background:#009;text-align:center;z-index:49">49</div>
</div>

helper--z-index-0 - 重なり順 0
helper--z-index-25 - 重なり順 25
helper--z-index-50 - 重なり順 50

Style guide: helper.0.9
*/
.helper--z-index-0 {
  z-index: 0 !important;
}
.helper--z-index-5 {
  z-index: 5 !important;
}
.helper--z-index-10 {
  z-index: 10 !important;
}
.helper--z-index-15 {
  z-index: 15 !important;
}
.helper--z-index-20 {
  z-index: 20 !important;
}
.helper--z-index-25 {
  z-index: 25 !important;
}
.helper--z-index-30 {
  z-index: 30 !important;
}
.helper--z-index-35 {
  z-index: 35 !important;
}
.helper--z-index-40 {
  z-index: 40 !important;
}
.helper--z-index-45 {
  z-index: 45 !important;
}
.helper--z-index-50 {
  z-index: 50 !important;
}
/*
Vertical Align

縦方向の整列のためのヘルパー

Markup: <div style="display:table;position:relative;height:100px;">
  <div class="{{modifier_class}}" style="display:table-cell;width:50px;height:50px;line-height:50px;line-height:50px;background:#999;text-align:center;">div</div>
  <div style="display:table-cell;width:50px;height:50px;line-height:50px;line-height:50px;color:#fff;background:#333;text-align:center;">div</div>
</div>

helper--valign-top - 上揃え
helper--valign-middle - 中央揃え
helper--valign-bottom - 下揃え

Style guide: helper.0.10
*/
.helper--valign-top {
  vertical-align: top !important;
}
.helper--valign-middle {
  vertical-align: middle !important;
}
.helper--valign-bottom {
  vertical-align: bottom !important;
}
/*
Box Sizing

ボックスモデル調整のためのヘルパー

Markup: <div style="position:relative;padding:50px;">
  <div class="{{modifier_class}}" style="display:block;width:50px;height:50px;padding:25px;border:5px solid #333;line-height:50px;line-height:50px;background:#999;text-align:center;">div</div>
</div>

helper--border-box-true - ボーダーボックス（`width`、`height` に `padding` を含む）
helper--content-box-true - コンテントボックス（`width`、`height` に `padding` を含まない）

Style guide: helper.0.11
*/
.helper--border-box-true {
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
}
.helper--content-box-true {
  -webkit-box-sizing: content-box !important;
          box-sizing: content-box !important;
}
/*
Hide (Responsive)

media queryを用いた非表示制御のヘルパー

Markup: <div style="position:relative;padding:50px;">
  <div class="{{modifier_class}}" style="position:relative;width:50px;height:50px;line-height:50px;background:#999;text-align:center;">div</div>
</div>

helper--hide-landscape-over - スマホ`横`サイズ` + 1px 以上`は非表示
helper--hide-landscape-under - スマホ`横`サイズ`以下`は非表示
helper--hide-tablet-over - タブレット`横`サイズ` + 1px 以上`は非表示
helper--hide-tablet-under - タブレット`横`サイズ`以下`は非表示


Style guide: helper.0.12
*/
/*
Third Parties

サードパティーのプラグインの呼び出し方法。

Weight: 30000

Styleguide thirdparties
*/
/*
Facebook

Facebook のプラグイン

Weight: 100

Style guide: thirdparties.facebook
*/
/*
Facebook Like Button

Facebook Like Button の呼び出し方法。`js/app.facebook.js` パラメーターの詳細は <https://developers.facebook.com/docs/plugins/like-button> を確認して下さい。

Markup: <div class="{{modifier_class}}" data-href="http://www.ingsnet.co.jp/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

fb-like - デフォルトのスタイル

Styleguide thirdparties.facebook.like
*/
/*
Facebook Follow Button

Facebook Follow Button の呼び出し方法。`js/app.facebook.js` パラメーターの詳細は <https://developers.facebook.com/docs/plugins/follow-button> を確認して下さい。

Markup: <div class="{{modifier_class}}" data-href="https://www.facebook.com/ingsnet" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

fb-follow - デフォルトのスタイル

Styleguide thirdparties.facebook.follow
*/
/*
Facebook like Box

Facebook like Box の呼び出し方法。`js/app.facebook.js` パラメーターの詳細は <https://developers.facebook.com/docs/plugins/like-box-for-pages> を確認して下さい。

Markup: <div class="{{modifier_class}}" data-href="https://www.facebook.com/ingsnet" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"></div>

fb-like-box - デフォルトのスタイル

Styleguide thirdparties.facebook.likebox
*/
/*
Facebook Comments

Facebook Comments の呼び出し方法。`js/app.facebook.js` パラメーターの詳細は <https://developers.facebook.com/docs/plugins/comments> を確認して下さい。

Markup: <div class="{{modifier_class}}" data-href="http://www.ingsnet.co.jp/" data-numposts="5" data-colorscheme="light"></div>

fb-comments - デフォルトのスタイル

Styleguide thirdparties.facebook.comments
*/
/*
Facebook Embedded Posts

Facebook Embedded Posts の呼び出し方法。`js/app.facebook.js` の実装が必要。パラメーターの詳細は <https://developers.facebook.com/docs/plugins/embedded-posts> を確認して下さい。

Markup: <div class="{{modifier_class}}" data-href="https://www.facebook.com/ingsnet/posts/674800035944799" data-width="500"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/ingsnet/posts/674800035944799">投稿</a> by <a href="https://www.facebook.com/ingsnet">株式会社イングス</a>.</div></div>

fb-post - デフォルトのスタイル

Styleguide thirdparties.facebook.embeddedposts
*/
/*
Twitter

Twitter のプラグイン

Weight: 200

Style guide: thirdparties.twitter
*/
/*
Twitter Tweet

「ツイート」ボタンの呼び出し方法。`js/app.twitter.js` の実装が必要。パラメーターの詳細は <https://about.twitter.com/ja/resources/buttons#tweet> を確認して下さい。

Markup: <a href="https://twitter.com/share" class="{{modifier_class}}" data-url="http://www.ingsnet.co.jp/" data-lang="ja">ツイート</a>

twitter-share-button - デフォルトのスタイル

Styleguide thirdparties.twitter.tweet
*/
/*
Hatena

Hatena のプラグイン

Weight: 300

Style guide: thirdparties.hatena
*/
/*
Hatena Bookmark

はてなブックマークボタンの呼び出し方法。`js/app.hatenabookmark.js` の実装が必要。パラメーターの詳細は <http://b.hatena.ne.jp/guide/bbutton> を確認して下さい。

Markup: <a href="http://b.hatena.ne.jp/entry/http://www.ingsnet.co.jp/" class="{{modifier_class}}" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja">はてなブックマーク</a>

hatena-bookmark-button - デフォルトのスタイル

Styleguide thirdparties.hatena.bookmark
*/
/*
Google

Google のプラグイン

Weight: 400

Style guide: thirdparties.google
*/
/*
Google Plus

「Google +1」ボタンの呼び出し方法。`js/app.googleplus.js` の実装が必要。パラメーターの詳細は <https://developers.google.com/+/web/+1button/?hl=ja> を確認して下さい。

Markup: <div class="{{modifier_class}}" data-size="medium" data-href="http://www.ingsnet.co.jp/"></div>

g-plusone - デフォルトのスタイル

Styleguide thirdparties.google.plus
*/
/*
Google Maps

GoogleMapsAPI の呼び出し方法。`js/app.googlemapapi.js` の実装が必要。`data-js-googlemap-latlan` で緯度経度を指定し、`data-js-googlemap-address` で住所を指定する。`data-js-googlemap-autoload="true"` を指定することで自動的にマップが表示される。

Markup: <!-- 住所のみ -->
<figure class="mod-pict" {{modifier_class}} data-js-googlemap-address="東京都千代田区神田錦町3-14" style="width:100%;height:300px;"></figure>
<!-- 緯度経度のみ -->
<figure class="mod-pict" {{modifier_class}} data-js-googlemap-latlan="35.693750,139.761967" style="width:100%;height:300px;"></figure>
<!-- 住所と緯度経度 -->
<figure class="mod-pict" {{modifier_class}} data-js-googlemap-latlan="35.693750,139.761967" data-js-googlemap-address="東京都千代田区神田錦町3-14 神田錦町ミハマビル7F" style="width:100%;height:300px;"></figure>

data-js-googlemap-autoload="true" - デフォルトスタイル

Styleguide thirdparties.google.maps
*/
/*
JavaScript UI

JavaScript の UI 実装の記述サンプル

Weight: 20000

Style guide: javascript
*/
/*
ui/tab

タブコンテンツモジュール

Weight: 100

Style guide: javascript.tab
*/
/*
localstrage

LocalStroge によるタブ復元

Markup: <div class="mod-box" id="js-sample-tab-restore-last-opened">
  <div class="mod-box__container">
    <!-- タブ・メニュ -->
    <div class="mod-grid">
      <div class="mod-grid__cell">
        <a class="mod-btn  js-ui-tab__navi" href="#sample-tab-a-contents-1">
          <span class="mod-btn__label">タブ1</span>
        </a>
      </div>
      <div class="mod-grid__cell">
        <a class="mod-btn  js-ui-tab__navi" href="#sample-tab-a-contents-2">
          <span class="mod-btn__label">タブ2</span>
        </a>
      </div>
      <div class="mod-grid__cell">
        <a class="mod-btn  js-ui-tab__navi" href="#sample-tab-a-contents-3">
          <span class="mod-btn__label">タブ3</span>
        </a>
      </div>
    </div>
    <!-- タブ・コンテンツ -->
    <div class="mod-box  js-ui-tab__contents" id="sample-tab-a-contents-1">
      <div class="mod-box__container">
        タブコンテンツ1
      </div>
    </div>
    <div class="mod-box  js-ui-tab__contents" id="sample-tab-a-contents-2">
      <div class="mod-box__container">
        タブコンテンツ2
      </div>
    </div>
    <div class="mod-box  js-ui-tab__contents" id="sample-tab-a-contents-3">
      <div class="mod-box__container">
        タブコンテンツ3
      </div>
    </div>
  </div>
</div>
<!--
  // スクリプト記述例
  var Tab = require('./ui/tab');
  new Tab({
    // UI となる DOM 要素
    element: $('#js-sample-tab')[0],
    // WebStorage に状態を保存するためのキー
    storageKey: 'sample',
    // 最後に開いたタブを復元するかどうかの真偽値
    // ie7- など WebStorage に未対応なブラウザは無効
    isRestoreLastOpenedTab: true,
    // Tab の内部に内包される、タブコンテンツ要素のクラス名
    contentsClassName: 'js-ui-tab__contents',
    // Tab の内部に内包される、タブナビゲーション要素のクラス名
    naviClassName: 'js-ui-tab__navi',
    // Tab の内部に内包される、タブナビゲーション要素の通常時のテーマクラス名
    naviThemeClassName: 'js-ui-tab__navi--theme-default',
    // Tab の内部に内包される、タブナビゲーション要素のアクティブ時のテーマクラス名
    naviActiveThemeClassName: 'js-ui-tab__navi--theme-active',
    // Tab の内部に内包される、タブナビゲーション要素のカレント時に追加するクラス名
    naviCurrentClassName: 'js-ui-tab__navi--theme-current',
    // Tab が変更されたときに $element に配信されるイベント名
    changeUIEventName: 'tab-event-change'
  });
-->

ui/tab - タブコンテンツモジュール

Style guide: javascript.tab.localstorage
*/
/*
location.hash

location.hash の値によるタブ復元

Markup: <div class="mod-box" id="js-sample-tab-restore-by-locationhash">
  <div class="mod-box__container">
    <!-- タブ・メニュ -->
    <div class="mod-grid">
      <div class="mod-grid__cell">
        <a class="mod-btn  js-ui-tab__navi" href="#sample-tab-b-contents-1">
          <span class="mod-btn__label">タブ1</span>
        </a>
      </div>
      <div class="mod-grid__cell">
        <a class="mod-btn  js-ui-tab__navi" href="#sample-tab-b-contents-2">
          <span class="mod-btn__label">タブ2</span>
        </a>
      </div>
      <div class="mod-grid__cell">
        <a class="mod-btn  js-ui-tab__navi" href="#sample-tab-b-contents-3">
          <span class="mod-btn__label">タブ3</span>
        </a>
      </div>
    </div>
    <!-- タブ・コンテンツ -->
    <div class="mod-box  js-ui-tab__contents" id="sample-tab-b-contents-1">
      <div class="mod-box__container">
        タブコンテンツ1
      </div>
    </div>
    <div class="mod-box  js-ui-tab__contents" id="sample-tab-b-contents-2">
      <div class="mod-box__container">
        タブコンテンツ2
      </div>
    </div>
    <div class="mod-box  js-ui-tab__contents" id="sample-tab-b-contents-3">
      <div class="mod-box__container">
        タブコンテンツ3
      </div>
    </div>
  </div>
</div>
<!--
  // スクリプト記述例
  var Tab = require('./ui/tab');
  new Tab({
    // UI となる DOM 要素
    element: $('#js-sample-tab')[0],
    // location.hash の値からタブを復元する場合に使用される文字列
    // 直リンクで指定した場合に、該当のタブコンテンツまで画面がスクロールしてしまう問題を防ぐ
    // スクロールしてもよい場合は空文字列を指定する
    prefixLocationHash: 'js-ui-tab-hash-',
    // location.hash の値からタブを復元するかどうかの真偽値
    // isRestoreLastOpenedTab が有効な場合はその値が優先される
    isRestoreTabByLocationHash: true,
    // Tab の内部に内包される、タブコンテンツ要素のクラス名
    contentsClassName: 'js-ui-tab__contents',
    // Tab の内部に内包される、タブナビゲーション要素のクラス名
    naviClassName: 'js-ui-tab__navi',
    // Tab の内部に内包される、タブナビゲーション要素の通常時のテーマクラス名
    naviThemeClassName: 'js-ui-tab__navi--theme-default',
    // Tab の内部に内包される、タブナビゲーション要素のアクティブ時のテーマクラス名
    naviActiveThemeClassName: 'js-ui-tab__navi--theme-active',
    // Tab の内部に内包される、タブナビゲーション要素のカレント時に追加するクラス名
    naviCurrentClassName: 'js-ui-tab__navi--theme-current',
    // Tab が変更されたときに $element に配信されるイベント名
    changeUIEventName: 'tab-event-change'
  });
-->

ui/tab - タブコンテンツモジュール

Style guide: javascript.tab.locationhash
*/
/*
ui/accordion

アコーディオンモジュール

Weight: 200

Style guide: javascript.accordion
*/
/*
single

単体のアコーディオン

Weight: -100

Markup: <div class="mod-box" id="js-sample-accordion" data-js-ui-accordion-initial-state="open">
  <div class="mod-box__container">
    <!-- アコーディオン・ボタン -->
    <a class="mod-btn  js-ui-accordion__btn" href="javascript:void(0);">
      <span class="mod-btn__label">アコーディオンボタン</span>
      <span class="mod-btn__icon  mod-icon  js-ui-accordion__icon"></span>
    </a>
    <!-- アコーディオン・コンテンツ -->
    <div class="mod-box  js-ui-accordion__contents">
      <div class="mod-box__container">
        アコーディオンコンテンツ
      </div>
    </div>
  </div>
</div>
<!--
  // スクリプト記述例
  var Accordion = require('./ui/accordion').Accordion;
  // アコーディオンの初期化（単体での使用）
  new Accordion({
    // UI の対象となるエレメント
    element: $('#js-sample-accordion')[0],
    // アニメーションの動作速度
    duration: 300,
    // 初期状態を自動で設定するか否か
    autoInitialize: true,
    // コンテンツ要素に含まれているボタンを有効にするか否か
    // Accordion をコンテンツ要素に含む場合は false にする必要がある
    enableContainedButton: false,
    // Accordion の内部に内包される、コンテンツ要素のクラス名
    classNameContents: 'js-ui-accordion__contents',
    // Accordion の内部に内包される、ボタン要素のクラス名
    classNameBtn: 'js-ui-accordion__btn',
    // Accordion の内部に内包される、アイコン要素のクラス名
    classNameIcon: 'js-ui-accordion__icon',
    // Accordion の内部に内包される、アイコン要素のオープン時のテーマクラス名
    classNameIconOpen: 'js-ui-accordion__icon--open',
    // Accordion の内部に内包される、アイコン要素のクローズ時のテーマクラス名
    classNameIconClose: 'js-ui-accordion__icon--close',
    // Accordion が変更されたときに $element に配信されるイベント名
    eventNameChange: 'accordion-event-change',
    // Accordion の変更が完了したときに $element に配信されるイベント名
    eventNameDone: 'accordion-event-done',
    // Accordion の初期の開閉状態を記述する data 属性値
    attrNameInitialStatus: 'data-js-ui-accordion-initial-state'
  });
-->

ui/accordion - アコーディオンモジュール

Style guide: javascript.accordion.single
*/
/*
linked

リストを利用した連携

Markup: <div class="mod-box  js-sample-accordion-list" data-js-ui-accordion-initial-state="close">
  <div class="mod-box__container">
    <!-- アコーディオン・ボタン1 -->
    <a class="mod-btn  js-ui-accordion__btn" href="javascript:void(0);">
      <span class="mod-btn__label">アコーディオンボタン1</span>
      <span class="mod-btn__icon  mod-icon  js-ui-accordion__icon"></span>
    </a>
    <!-- アコーディオン・コンテンツ1 -->
    <div class="mod-box  js-ui-accordion__contents">
      <div class="mod-box__container">
        アコーディオンコンテンツ1
      </div>
    </div>
  </div>
</div>
<div class="mod-box  js-sample-accordion-list" data-js-ui-accordion-initial-state="close">
  <div class="mod-box__container">
    <!-- アコーディオン・ボタン2 -->
    <a class="mod-btn  js-ui-accordion__btn" href="javascript:void(0);">
      <span class="mod-btn__label">アコーディオンボタン2</span>
      <span class="mod-btn__icon  mod-icon  js-ui-accordion__icon"></span>
    </a>
    <!-- アコーディオン・コンテンツ2 -->
    <div class="mod-box  js-ui-accordion__contents">
      <div class="mod-box__container">
        アコーディオンコンテンツ2
      </div>
    </div>
  </div>
</div>
<div class="mod-box  js-sample-accordion-list" data-js-ui-accordion-initial-state="close">
  <div class="mod-box__container">
    <!-- アコーディオン・ボタン3 -->
    <a class="mod-btn  js-ui-accordion__btn" href="javascript:void(0);">
      <span class="mod-btn__label">アコーディオンボタン3</span>
      <span class="mod-btn__icon  mod-icon  js-ui-accordion__icon"></span>
    </a>
    <!-- アコーディオン・コンテンツ1 -->
    <div class="mod-box  js-ui-accordion__contents">
      <div class="mod-box__container">
        アコーディオンコンテンツ3
      </div>
    </div>
  </div>
</div>
<!--
  // スクリプト記述例
  var AccordionList = require('./ui/accordion').AccordionList,
      Accordion = require('./ui/accordion').Accordion;
  // アコーディオンリストの初期化
  var accordionList = new AccordionList({
    // UI の対象となるエレメント
    element: null,
    // Accordion のインスタンスの配列
    accordions: null,
    // AccordionList に属する Accordion を開くのを一つだけにするかどうかの真偽値
    isOpenOnlyOne: true,
    // AccordionList に属する Accordion のカレント状態指定するクラス名
    classNameCurrent: 'js-accordion-list--current',
    // AccordionList に属する Accordion の非カレント状態指定するクラス名
    classNameNotCurrent: 'js-accordion-list--not-current',
    // Accordion が変更されたときに $element に配信されるイベント名
    eventNameChange: 'accordion-list-event-change',
    // Accordion が変更されたときに $element に配信されるイベント名
    eventNameDone: 'accordion-list-event-done',
    // $element に配信される Accordion すべてを閉じるイベント名
    eventNameCloseAll: 'accordion-list-event-close-all',
    // $element に配信される Accordion すべてを閉じるイベント名
    eventNameOpenAll: 'accordion-list-event-open-all'
  });
  // アコーディオンリストへのアコーディオンの登録
  $('.js-sample-accordion-list').each(function(){
    var accordion = new Accordion({
      element: this,
      duration: 300,
      autoInitialize: true
    });
    accordionList.add(accordion);
  });
-->

ui/accordion - アコーディオンモジュール

Style guide: javascript.accordion.linked
*/
/*
ui/smoothscroll

スムーズスクロールモジュール

Weight: 300

Style guide: javascript.smoothscroll
*/
/*
ui/smoothscroll

アンカーリンクへの設定例

Markup: <!-- スムーズスクロールを有効にしたアンカーリンク -->
<p class="mod-text">
  <a class="mod-text__link  js-smooth-scroll-link" href="#js-sample-smooth-scroll-target">スムーズスクロールリンク</a>
</p>
<div class="mod-box  helper--height-500">
  <div class="mod-box__container">
  </div>
</div>
<!-- スムーズスクロールのターゲット -->
<p class="mod-text" id="js-sample-smooth-scroll-target">スムーズスクロールターゲット</p>
<!--
  // スクリプト記述例
  var smoothScroll = require('./ui/smoothscroll');
  // リンクへのスムーズスクロールの設定例
  $('.js-smooth-scroll-link').on('click', function(e){
    var $link = $(this),
        targetId = $link.attr('href');
    // スムーズスクロールの実行
    // jQuery.Deferred が実装されていれば Promise オブジェクトが返される
    smoothScroll(targetId, {
      // スクロール速度
      duration: 300,
      // イージング
      // jQuery で使用できるイージングを指定
      easing: 'swing',
      // スムーズスクロール完了時にフラグメントを更新するか否かの真偽値
      updateFragment: true
    })
    .then(function(){
      alert('scrolling Complete');
    });
    // リンクの抑制
    e.preventDefault();
  });
-->

ui/smoothscroll - スムーズスクロールモジュール

Style guide: javascript.smoothscroll.default
*/
/*
ui/scrollfollower

スクロール追従モジュール

Weight: 400

Style guide: javascript.scrollfollower
*/
/*
ui/scrollfollower

上辺、下辺への追従

Weight: -100

Markup: <div class="mod-box" id="js-sample-scroll-follower-range">
  <div class="mod-box__container">
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    <p class="mod-text  mod-text--theme-a-a  mod-text--inline-true" id="js-sample-scroll-follower-a">画面上辺からの追従</p>
    <p class="mod-text  mod-text--theme-a-a  mod-text--inline-true" id="js-sample-scroll-follower-b">画面下辺からの追従</p>
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</div>
<!--
  // スクリプト記述例
  var ScrollFollower = require('./ui/scrollfollower').ScrollFollower;
  // スクロール追従要素の初期化（上辺への追従）
  new ScrollFollower({
    element: $('#js-sample-scroll-follower-a')[0],
    // イベントリスナの処理抑制するためのインターバル
    reduceInterval: 10,
    // 固定する位置（'top' or 'bottom'）
    position: 'top',
    // 固定する位置からずらす場合の値
    offset: 0,
    // プレースホルダー要素を使用するか否か（デフォルトでは有効）
    enablePlaceholder: true,
    // 有効範囲の開始の起点となる要素（又は JQuery オブジェクト）
    // 要素の上辺を起点とする
    scopeStartTarget: $('#js-sample-scroll-follower-range'),
    // 有効範囲の終了の起点となる要素（又は JQuery オブジェクト）
    // 要素の下辺を起点とする
    scopeEndTarget:  $('#js-sample-scroll-follower-range'),
    // 追従状態のクラス名
    classNameFollowed: 'js-ui-scroll-follower--followed-a',
    // 有効範囲外（通過前）の時のクラス名
    classNameBeforeScope: 'js-ui-scroll-follower--before-scope-a',
    // 有効範囲外（通過後）の時のクラス名
    classNameAfterScope: 'js-ui-scroll-follower--after-scope-a'
  });
  // スクロール追従要素の初期化（下辺への追従）
  new ScrollFollower({
    element: $('#js-sample-scroll-follower-b')[0],
    reduceInterval: 10,
    position: 'bottom',
    scopeStartTarget: $('#js-sample-scroll-follower-range'),
    scopeEndTarget: $('#js-sample-scroll-follower-range'),
    classNameFollowed: 'js-ui-scroll-follower--followed-b',
    classNameBeforeScope: 'js-ui-scroll-follower--before-scope-b',
    classNameAfterScope: 'js-ui-scroll-follower--after-scope-b'
  });
-->

ui/scrollfollower - スクロール追従モジュール

Style guide: javascript.scrollfollower.default
*/
.js-ui-scroll-follower--followed-a {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: auto;
}
.js-ui-scroll-follower--followed-b {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  width: auto;
}
/*
ui/scrollfollower

アンカーリンクによるカレント表示

Markup: <div class="mod-box" id="js-sample-scroll-follower-range-c">
  <div class="mod-box__container">
    <p class="mod-text  mod-text--theme-a-a  mod-text--inline-true" id="js-sample-scroll-follower-c">
      <a class="mod-text__link" href="#js-sample-scroll-follower-anchor-a">アンカーA</a>
      <a class="mod-text__link" href="#js-sample-scroll-follower-anchor-b">アンカーB</a>
      <a class="mod-text__link" href="#js-sample-scroll-follower-anchor-c">アンカーC</a>
      <a class="mod-text__link" href="#js-sample-scroll-follower-anchor-d">アンカーD</a>
      <a class="mod-text__link" href="#js-sample-scroll-follower-anchor-e">アンカーE</a>
    </p>
    <br /><br /><br /><br />
    <a class="js-sample-scroll-follower-anchor" id="js-sample-scroll-follower-anchor-a"></a>
    <br /><br /><br /><br />
    <a class="js-sample-scroll-follower-anchor" id="js-sample-scroll-follower-anchor-b"></a>
    <br /><br /><br /><br />
    <a class="js-sample-scroll-follower-anchor" id="js-sample-scroll-follower-anchor-c"></a>
    <br /><br /><br /><br />
    <a class="js-sample-scroll-follower-anchor" id="js-sample-scroll-follower-anchor-d"></a>
    <br /><br /><br /><br />
    <a class="js-sample-scroll-follower-anchor" id="js-sample-scroll-follower-anchor-e"></a>
    <br /><br /><br /><br />
  </div>
</div>
<!--
  // スクリプト記述例
  var ScrollFollower = require('./ui/scrollfollower').ScrollFollower;
  // スクロール追従要素の初期化（アンカーリンクによるカレント表示）
  new ScrollFollower({
    element: $('#js-sample-scroll-follower-c')[0],
    // イベントリスナの処理抑制するためのインターバル
    reduceInterval: 10,
    // 固定する位置（'top' or 'bottom'）
    position: 'top',
    // 有効範囲の開始の起点となる要素（又は JQuery オブジェクト）
    // 要素の上辺を起点とする
    scopeStartTarget: $('#js-sample-scroll-follower-range-c'),
    // 有効範囲の終了の起点となる要素（又は JQuery オブジェクト）
    // 要素の下辺を起点とする
    scopeEndTarget:  $('#js-sample-scroll-follower-range-c'),
    // 範囲を示すアンカーの配列（又は JQuery オブジェクト）
    rangeAnchors: $('.js-sample-scroll-follower-anchor'),
    // 追従状態のクラス名
    classNameFollowed: 'js-ui-scroll-follower--followed-c',
    // カレント状態を示すクラス名
    classNameLinkCurrent: 'js-ui-scroll-follower--current'
  });
-->

ui/scrollfollower - スクロール追従モジュール

Style guide: javascript.scrollfollower.current
*/
.js-ui-scroll-follower--followed-c {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: auto;
}
.js-ui-scroll-follower--current {
  color: #f00;
}
/*
ui/scrollfollower

特定効果範囲の指定

Markup: <div class="mod-box" id="js-sample-scroll-follower-range-d">
  <div class="mod-box__container">
    <p class="mod-text  mod-text--theme-a-a  mod-text--inline-true" id="js-sample-scroll-follower-d">上辺への追従</p>
    <br /><br /><br /><br />
    <p class="mod-text  mod-text--theme-a-a  helper--padding-top50  helper--padding-bottom50  js-sample-scroll-follower-effect-scope-d">特定効果範囲</p>
    <br /><br /><br /><br />
    <p class="mod-text  mod-text--theme-a-a  helper--padding-top50  helper--padding-bottom50  js-sample-scroll-follower-effect-scope-d">特定効果範囲</p>
    <br /><br /><br /><br />
  </div>
</div>
<!--
  // スクリプト記述例
  var ScrollFollower = require('./ui/scrollfollower').ScrollFollower;
  // スクロール追従要素の初期化（特定効果範囲を有効）
  new ScrollFollower({
    element: $('#js-sample-scroll-follower-d')[0],
    // イベントリスナの処理抑制するためのインターバル
    reduceInterval: 10,
    // 固定する位置（'top' or 'bottom'）
    position: 'top',
    // 有効範囲の開始の起点となる要素（又は JQuery オブジェクト）
    // 要素の上辺を起点とする
    scopeStartTarget: $('#js-sample-scroll-follower-range-d'),
    // 有効範囲の終了の起点となる要素（又は JQuery オブジェクト）
    // 要素の下辺を起点とする
    scopeEndTarget:  $('#js-sample-scroll-follower-range-d'),
    // 特定の効果を有効にする範囲を指定する要素
    // 指定した要素の位置を通過中は独自のイベントを発行し続ける
    effectScopeTargets: $('.js-sample-scroll-follower-effect-scope-d'),
    // 追従状態のクラス名
    classNameFollowed: 'js-ui-scroll-follower--followed-d',
    // 特定の効果を有効にする範囲内のクラス名
    classNameEffectScope: 'js-ui-scroll-follower--effect-scope'
  });
-->

ui/scrollfollower - スクロール追従モジュール

Style guide: javascript.scrollfollower.effectscope
*/
.js-ui-scroll-follower--followed-d {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: auto;
}
.js-ui-scroll-follower--effect-scope {
  background-color: #999;
}
/*
ui/NewsTicker

ニュースティッカー

Markup: <div class="mod-box">
  <div class="mod-box__container" id="js-sample-newsticker">
    <p class="mod-text  js-news-ticker__item">ニュースティッカーのアイテム1</p>
    <p class="mod-text  js-news-ticker__item">ニュースティッカーのアイテム2 ニュースティッカーのアイテム2</p>
    <p class="mod-text  js-news-ticker__item">ニュースティッカーのアイテム3 ニュースティッカーのアイテム3 ニュースティッカーのアイテム3</p>
  </div>
</div>
<!--
  // スクリプト記述例
  var NewsTicker = require('./ui/NewsTicker');
  // ニュースティッカーの初期化
  new NewsTicker({
    // 対象の要素
    element: null,
    // 動作スピード（多いほど早い）
    speed: 300,
    // 実行間隔（ms）
    interval: 500,
    // ニュース間の余白
    padding: 30,
    // CSS3 を使用するか否か
    useCSS3: true,
    // 内部要素を選択するためのクラス名
    classNameItem: 'js-news-ticker__item'
  });
-->

ui/NewsTicker - スクロール追従モジュール

Style guide: javascript.newsticker.default
*/
body {
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #333;
}
.wrap {
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
a {
  text-decoration: none;
}
.fuwatAnime {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-name: fuwatAnime;
  animation-name: fuwatAnime;
  visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
header.header {
  z-index: 10000;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
}
.r-style {
  position: relative;
  top: -2px;
}
input {
  border: 0;
}
.mwform-radio-field input {
  display: inline-block;
}
.block-k-f {
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  table-layout: fixed;
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}
.pagination .page-numbers {
  background-color: #e1e9f2;
  text-align: center;
  color: #006cb8;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: table-cell;
  width: 60px;
  text-align: center;
  vertical-align: middle;
  font-size: 24px;
}
.pagination .prev {
  background-image: url("../images/common/nav_pc_off.png");
  background-repeat: no-repeat;
  background-position: 98% 50%;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  background-position: center center !important;
  padding: 30px;
  font-size: 0;
}
.pagination .prev:hover,
.pagination .next:hover {
  background-image: url("../images/common/nav_pc_on.png");
}
.pagination .next {
  background-image: url("../images/common/nav_pc_off.png");
  background-repeat: no-repeat;
  background-position: 98% 50%;
  background-position: center center !important;
  padding: 30px;
  font-size: 0;
}
.pagination .page-numbers:hover {
  background-color: #6c9bd2;
  color: #fff;
}
.pagination .current {
  background-color: #6c9bd2;
  color: #fff;
}
.anchor {
  margin-top: -100px;
  padding-top: 100px;
}
@-webkit-keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@media only screen and (max-width: 1200px){
  .css-mqpacker-test{
    color: #000;
  }
  .mod-box__container--width-a-a{
    width: 100%;
    padding: 0 10px;
  }
  .mod-box__container--width-a-b{
    width: 100%;
  }
  .mod-box__container--width-a-d{
    width: 100%;
    padding: 0 10px;
  }
  .mod-box__container--width-a-m{
    width: 100%;
  }
  .block-a-a-a__dropdown__list__b{
    width: 48%;
  }
  .block-a-a-a__dropdown__list__b:nth-child(odd){
    margin-right: 2%;
  }
  .block-a-a-a__dropdown__list__b:nth-child(odd) a{
    margin-left: auto;
    display: table;
  }
  .block-a-a-a__dropdown__list__b:nth-child(even){
    margin-right: 0;
  }
  .block-a-a-a__dropdown__list__b:nth-child(even) a{
    margin-right: auto;
    display: table;
  }
  .block-a-b-e__title{
    font-size: 17px;
    padding: 10px;
    height: 70px;
  }
  .block-a-b-e__text{
    font-size: 13px;
    padding: 10px;
  }
  .block-a-b-f__title{
    font-size: 17px;
    padding: 10px;
    height: 70px;
  }
  .block-a-b-f__text{
    font-size: 13px;
    padding: 10px;
  }
  .block-a-h__link__btn{
    background-position: 50% 34%;
  }
  .block-a-h__link__btn:hover{
    background-position: 50% 34%;
  }
  .block-a-h__link__btn--d{
    -webkit-background-size: 160px auto !important;
    background-size: 160px auto !important;
    font-size: 12px;
  }
  .block-a-h__link__btn--d:hover{
    -webkit-background-size: 160px auto;
    background-size: 160px auto;
    font-size: 12px;
  }
  .block-a-h__link__btn--e{
    -webkit-background-size: 160px auto !important;
    background-size: 160px auto !important;
    font-size: 12px;
  }
  .block-a-h__link__btn--e:hover{
    -webkit-background-size: 160px auto;
    background-size: 160px auto;
    font-size: 12px;
  }
  .block-a-h__link__btn--f{
    -webkit-background-size: 90px auto !important;
    background-size: 90px auto !important;
    font-size: 12px;
  }
  .block-a-h__link__btn--f:hover{
    -webkit-background-size: 90px auto;
    background-size: 90px auto;
    font-size: 12px;
  }
  .block-a-h-d__link__btn{
    font-size: 14px;
  }
  .block-a-h-d__link__btn:hover{
    font-size: 14px;
  }
  .block-a-g-a-table__table__separate{
    border-spacing: 15px 0;
  }
  .block-h-l-b__comment{
    font-size: 20px;
    color: #3c5a88;
  }
  .block-h-l-b-b__comment{
    font-size: 20px;
    color: #3c5a88;
  }
  .block-f-a__link__btn{
    font-size: 17px;
    background-position: 50% 34%;
  }
  .block-f-a__link__btn:hover{
    font-size: 17px;
    background-position: 50% 34%;
  }
  .block-d-h-i__cell__a__title{
    font-size: 16px;
  }
  .block-d-h-i .block-a-h-b-b__link__btn{
    font-size: 16px;
  }
  .block-d-h-o__cell__a{
    padding: 35px 16px;
  }
  .block-d-h-o__cell__a__title{
    font-size: 25px;
    letter-spacing: -0.05em;
    text-align: center;
  }
  .block-d-h-o-o__cell__a{
    padding: 35px 16px;
  }
  .block-d-h-o-o__cell__a__title{
    font-size: 25px;
    letter-spacing: -0.05em;
    text-align: center;
  }
  .block-d-h-o-o .block-a-h-b-b__link__btn{
    font-size: 16px;
  }
  .block-c-d__container{
    width: 769px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
  }
  .block-c-d__pict{
    width: 60%;
    height: auto;
  }
  .block-c-d__pict__g{
    width: 100%;
    height: auto;
  }
  .block-c-d__pict__k{
    width: 100%;
    height: auto;
  }
  .block-c-d__pict__container{
    width: 769px;
  }
  .block-c-d__pict__container__a{
    top: 8px;
    left: 235px;
  }
  .block-c-d__pict__container__b{
    top: 8px;
    left: 337px;
  }
  .block-c-d__pict__container__c{
    top: 8px;
    left: 438px;
  }
  .block-c-d__pict__container__d{
    top: 8px;
    left: 446px;
  }
  .block-c-d__pict__container__e{
    top: 81px;
    left: 30px;
  }
  .block-c-d__pict__container__f{
    top: 81px;
    left: 129px;
  }
  .block-c-d__pict__container__g{
    top: 81px;
    left: 545px;
    width: 194px;
  }
  .block-c-d__pict__container__h{
    bottom: 54px;
    left: 134px;
  }
  .block-c-d__pict__container__i{
    bottom: 21px;
    left: 336px;
    z-index: 60;
  }
  .block-c-d__pict__container__j{
    top: 250px;
    left: 227px;
    z-index: 50;
  }
  .block-c-d__pict__container__k{
    bottom: 15px;
    left: 545px;
    width: 194px;
  }
  .block-c-f__container{
    width: 769px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
  }
  .block-c-f__pict{
    width: 60%;
    height: auto;
  }
  .block-c-f__pict__j{
    width: 100%;
    height: auto;
  }
  .block-c-f__pict__i{
    width: 100%;
    height: auto;
  }
  .block-c-f__pict__container{
    width: 769px;
  }
  .block-c-f__pict__container__a{
    top: 25px;
    left: 102px;
  }
  .block-c-f__pict__container__b{
    top: 24px;
    left: 335px;
  }
  .block-c-f__pict__container__c{
    left: 547px;
  }
  .block-c-f__pict__container__d{
    top: 82px;
    left: 43px;
  }
  .block-c-f__pict__container__e{
    top: 99px;
    left: 136px;
  }
  .block-c-f__pict__container__f{
    top: 164px;
    left: 131px;
  }
  .block-c-f__pict__container__g{
    top: 164px;
    left: 337px;
  }
  .block-c-f__pict__container__h{
    bottom: 106px;
    left: 449px;
  }
  .block-c-f__pict__container__i{
    left: 548px;
    width: 194px;
    z-index: 60;
  }
  .block-c-f__pict__container__j{
    bottom: 107px;
    left: 547px;
    width: 194px;
    z-index: 50;
  }
  .block-c-f__pict__container__k{
    bottom: 27px;
    left: 284px;
    z-index: 5;
  }
}
@media only screen and (max-width: 667px){
  .css-mqpacker-test{
    color: #fff;
  }
  .mod-text--theme-a-b{
    font-size: 20px;
  }
  .mod-text--theme-a-c{
    font-size: 12px;
  }
  .mod-text--theme-a-d{
    font-size: 12px !important;
    padding: 0;
  }
  .mod-text--theme-a-e{
    text-align: left !important;
    padding-left: 10px;
    padding-right: 10px;
  }
  .mod-text--theme-a-f{
    font-size: 12px !important;
    padding: 0;
  }
  .mod-text--theme-a-g{
    font-size: 10px;
    padding: 0;
  }
  .mod-text--theme-a-h{
    font-size: 10px;
    padding: 0;
  }
  .mod-text--theme-a-i{
    font-size: 12px;
    padding: 0;
    margin-bottom: 0;
  }
  .mod-grid2__w25{
    width: 100%;
    display: block;
    margin-bottom: 25px;
  }
  .mod-grid2__sp__block{
    display: block;
  }
  .mod-responsive-grid__cell--drop{
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }
  .mod-responsive-grid-d__cell--a{
    width: 50%;
    padding-left: 0;
    padding-right: 0;
  }
  .mod-responsive-grid-d__cell--b{
    width: 50%;
    padding-left: 0;
    padding-right: 0;
  }
  .mod-responsive-grid-d__cell--c{
    width: 50%;
    padding-left: 0;
    padding-right: 0;
  }
  .mod-responsive-grid-d__cell--d{
    width: 50%;
    padding-left: 0;
    padding-right: 0;
  }
  .mod-responsive-grid2__cell--drop{
    display: block;
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }
  .mod-box--theme-a-f{
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .mod-box--theme-a-g{
    padding-top: 20px;
    padding-bottom: 22px;
  }
  .mod-box--theme-a-h{
    padding-bottom: 25px;
  }
  .mod-box--theme-a-i{
    padding-top: 40px;
    padding-bottom: 30px;
  }
  .mod-box--theme-a-j{
    padding-bottom: 18px;
  }
  .mod-box--theme-a-k{
    padding-top: 30px;
  }
  .mod-box--theme-a-l{
    padding-top: 43px;
    padding-bottom: 40px;
  }
  .mod-box--theme-a-m{
    padding-bottom: 20px;
  }
  .mod-box--theme-a-n{
    margin-top: 20px;
  }
  .mod-box--theme-a-o{
    padding-top: 38px;
    padding-bottom: 33px;
  }
  .mod-box--theme-a-p{
    padding-top: 0;
    padding-bottom: 35px;
  }
  .mod-box--theme-a-q{
    padding-bottom: 18px;
  }
  .mod-box--theme-a-r{
    padding: 20px;
  }
  .mod-box--theme-a-s{
    padding-top: 30px;
    padding-bottom: 35px;
  }
  .mod-box--theme-a-t{
    padding-bottom: 35px;
  }
  .mod-box--theme-a-u{
    padding-top: 35px;
    padding-bottom: 40px;
  }
  .mod-box--theme-a-v{
    margin-bottom: 20px;
  }
  .mod-box--theme-a-w{
    padding-top: 20px;
  }
  .mod-box--theme-a-x{
    padding-top: 25;
    padding-bottom: 13px;
  }
  .mod-box--theme-a-y{
    padding-top: 36px;
    padding-bottom: 30px;
  }
  .mod-box--theme-a-z{
    padding-top: 32px;
    padding-bottom: 35px;
  }
  .mod-box--theme-b-a{
    margin-top: 13px;
    margin-bottom: 25px;
  }
  .mod-box--theme-b-b{
    margin-top: 50px;
  }
  .mod-box--theme-b-c{
    margin-bottom: 30px;
  }
  .mod-box--theme-b-d{
    padding-top: 25;
    padding-bottom: 10px;
  }
  .mod-box--theme-b-e{
    margin-bottom: 20px;
  }
  .mod-box--theme-b-f{
    margin-bottom: 20px;
  }
  .mod-box--theme-b-h{
    margin-top: 27px;
    margin-bottom: 43px;
  }
  .mod-box--theme-b-i{
    margin-bottom: 15px;
  }
  .mod-box--theme-b-j{
    margin-bottom: 25px;
  }
  .mod-box--theme-b-k{
    margin-bottom: 25px;
  }
  .mod-box--theme-b-l{
    margin-bottom: 30px;
  }
  .mod-box--theme-b-m{
    margin-bottom: 20px;
  }
  .mod-box--theme-b-n{
    margin-top: 30px;
    margin-bottom: 16px;
  }
  .mod-box--theme-b-o{
    margin-bottom: 20px;
  }
  .mod-box--theme-b-q{
    margin-top: 15px;
  }
  .mod-box__container--width-a-a{
    width: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
  }
  .mod-box__container--width-a-b{
    width: auto;
  }
  .mod-box__container--width-a-c{
    width: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
  }
  .mod-box__container--width-a-d{
    width: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 2%;
  }
  .mod-box__container--width-a-f{
    width: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
  }
  .mod-box__container--width-a-m{
    width: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
  }
  .mod-box__container--width-table-center-sp{
    margin-left: auto;
    margin-right: auto;
    display: table;
  }
  .mod-table-a-b__cell--a{
    width: inherit;
    display: block;
    font-size: 12px;
    padding: 9px 18px;
  }
  .mod-table-a-b__cell--b{
    width: inherit;
    display: block;
    border-top: 0;
    font-size: 12px;
    padding: 9px 18px;
  }
  .mod-table-a-b__cell--c{
    width: inherit;
    display: block;
    border: 0;
    font-size: 12px;
    padding: 9px 18px;
  }
  .mod-table-a-b__cell--d{
    width: inherit;
    display: block;
    border: 0;
    font-size: 12px;
    padding: 9px 18px;
  }
  .mod-table-a-b__cell--e{
    width: inherit;
    display: block;
    border: 0;
    font-size: 12px;
    padding: 9px 18px;
  }
  .mod-table-a-b__cell--f{
    width: inherit;
    display: block;
    font-size: 12px;
    border-top: 0;
    padding: 9px 18px;
  }
  .mod-table-a-c__cell--a{
    width: inherit;
    display: block;
    border: 0;
    padding: 6px 10px;
    font-size: 12px;
    text-align: left;
  }
  .mod-table-a-c__cell--b{
    width: inherit;
    display: block;
    border: 0;
    padding: 6px 10px 0 10px;
    font-size: 12px;
    text-align: left;
  }
  .mod-table-a-c__cell--c{
    width: inherit;
    display: block;
    border: 0;
    padding: 0 10px 6px 10px;
    font-size: 12px;
  }
  .mod-table-a-c__cell--d{
    width: inherit;
    display: block;
    border: 0;
    padding: 6px 10px 0 10px;
    font-size: 12px;
    text-align: left;
  }
  .mod-table-a-c__cell--e{
    width: inherit;
    display: block;
    border: 0;
    padding: 0 10px 0 10px;
    font-size: 12px;
  }
  .mod-table-a-c__cell--f{
    width: inherit;
    display: block;
    border: 0;
    padding: 0 10px 0 10px;
    font-size: 12px;
    text-align: left;
  }
  .mod-table-a-c__cell--g{
    width: inherit;
    display: block;
    border: 0;
    padding: 0 10px 6px 10px;
    font-size: 12px;
  }
  .mod-table-a-d__cell--a{
    width: inherit;
    display: block;
    border: 0;
    padding: 7px 0;
    font-size: 12px;
    border-right: 0;
    border-bottom: 1px solid #006cb8;
  }
  .mod-table-a-d__cell--b{
    padding-left: 0;
    width: inherit;
    display: block;
    border: 0;
    padding: 7px 0;
    font-size: 12px;
  }
  .mod-table-a-e{
    font-size: 10px;
  }
  .mod-table-a-e__cell--a{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-e__cell--b{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-e__cell--c{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-e__cell--d{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-e__cell--e{
    font-size: 10px;
  }
  .mod-table-a-e__cell--f{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-e__cell--g{
    font-size: 10px;
  }
  .mod-table-a-e__cell--h{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-e__cell--i{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f{
    font-size: 10px;
  }
  .mod-table-a-f__cell--a{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--b{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--c{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--d{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--f{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--e{
    font-size: 10px;
  }
  .mod-table-a-f__cell--g{
    font-size: 10px;
  }
  .mod-table-a-f__cell--h{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--i{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--j{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--k{
    font-size: 10px;
  }
  .mod-table-a-f__cell--l{
    font-size: 10px;
  }
  .mod-table-a-f__cell--m{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f{
    font-size: 10px;
  }
  .mod-table-a-f__cell--a{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--b{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--c{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--d{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--f{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--e{
    font-size: 10px;
  }
  .mod-table-a-f__cell--g{
    font-size: 10px;
  }
  .mod-table-a-f__cell--h{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--i{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--j{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .mod-table-a-f__cell--k{
    font-size: 10px;
  }
  .mod-table-a-f__cell--l{
    font-size: 10px;
  }
  .mod-table-a-f__cell--m{
    font-size: 10px;
    letter-spacing: -0.05em;
  }
  .block-d-c__title{
    font-size: 13px;
  }
  .block-d-c__title__b{
    font-size: 16px;
    letter-spacing: -0.07em;
  }
  .block-d-c__title__b__small{
    font-size: 12px;
  }
  .block-d-c__title__b__container{
    padding: 20px 15px;
  }
  .block-d-c__title__c{
    font-size: 15px;
  }
  .block-d-d__title{
    font-size: 19px;
    letter-spacing: -0.05em;
  }
  .block-d-d__title__a{
    background-image: url("../images/common/title_bg_002_sp.png");
    -webkit-background-size: 20px auto;
    background-size: 20px auto;
    padding-left: 30px;
    font-size: 13px;
    line-height: 23px;
  }
  .block-d-d__title__b{
    font-size: 20px;
    border-left: 4px solid #3c5a88;
    padding: 5px 0 5px 15px;
  }
  .block-d-d__title__c{
    background-image: url("../images/common/title_bg_003_sp.png");
    -webkit-background-size: 20px auto;
    background-size: 20px auto;
    padding-left: 30px;
    font-size: 13px;
    line-height: 23px;
  }
  .block-d-d__title__e{
    font-size: 20px;
    border-left: 4px solid #3c5a88;
    padding: 5px 0 5px 15px;
  }
  .block-d-d__title__e__sub{
    font-size: 12px;
  }
  .block-d-d__title__f{
    font-size: 19px;
    padding-left: 40px;
  }
  .block-d-e__title__a{
    font-size: 20px;
  }
  .block-d-e__title__b{
    font-size: 12px;
  }
  .block-d-e__title__c{
    font-size: 18px;
  }
  .block-d-e__title__d{
    font-size: 18px;
  }
  .block-a-d-d-b{
    padding-left: initial;
  }
  .block-a-d-d-b__a{
    margin-bottom: 5px;
  }
  .block-a-d-d-c{
    display: block;
    margin-left: inherit;
  }
  .block-a-d-d-c li{
    margin-right: 25px;
  }
  .block-a-d-d-c li a{
    font-size: 12px;
  }
  .block-a-b-e{
    margin: 0;
    background-color: inherit;
  }
  .block-a-b-e__btn:hover{
    -webkit-transform: inherit;
    -ms-transform: inherit;
    transform: inherit;
    -webkit-transition: inherit;
    transition: inherit;
  }
  .block-a-b-f{
    margin: 0;
    background-color: inherit;
  }
  .block-a-b-f__btn:hover{
    -webkit-transform: inherit;
    -ms-transform: inherit;
    transform: inherit;
    -webkit-transition: inherit;
    transition: inherit;
  }
  .block-a-b-f__title{
    font-size: 19px;
  }
  .block-a-h__link__btn{
    background-image: url("../images/common/icon01_off_sp.png");
    background-repeat: no-repeat;
    background-position: 10% 100%;
    -webkit-background-size: 90px auto;
    background-size: 90px auto;
    width: 100%;
    font-size: 19px;
    text-align: center;
    height: initial;
  }
  .block-a-h__link__btn:hover{
    background-image: url("../images/common/icon01_on_sp.png");
    background-position: 10% 100%;
    background-color: #6c9bd2;
    color: #fff;
  }
  .block-a-h__link__btn--b{
    background-image: url("../images/common/icon02_off_sp.png");
    -webkit-background-size: 120px auto;
    background-size: 120px auto;
  }
  .block-a-h__link__btn--b:hover{
    background-image: url("../images/common/icon02_on_sp.png");
  }
  .block-a-h__link__btn--c{
    background-image: url("../images/common/icon03_off_sp.png");
    -webkit-background-size: 206px auto;
    background-size: 206px auto;
  }
  .block-a-h__link__btn--c:hover{
    background-image: url("../images/common/icon03_on_sp.png");
  }
  .block-a-h__link__btn--d{
    background-image: url("../images/common/icon22_off_sp.png");
    -webkit-background-size: 140px auto;
    background-size: 140px auto;
  }
  .block-a-h__link__btn--d:hover{
    background-image: url("../images/common/icon22_on_sp.png");
  }
  .block-a-h__link__btn--e{
    background-image: url("../images/common/icon23_off_sp.png");
    -webkit-background-size: 140px auto;
    background-size: 140px auto;
  }
  .block-a-h__link__btn--e:hover{
    background-image: url("../images/common/icon23_on_sp.png");
  }
  .block-a-h__link__btn--f{
    background-image: url("../images/common/icon24_off_sp.png");
    -webkit-background-size: 76px auto;
    background-size: 76px auto;
  }
  .block-a-h__link__btn--f:hover{
    background-image: url("../images/common/icon24_on_sp.png");
  }
  .block-a-h-b__link__btn{
    background-color: #e1e9f2;
    background-image: url("../images/common/nav_sp_off.png");
    background-repeat: no-repeat;
    background-position: 98% 50%;
    -webkit-background-size: 9px auto;
    background-size: 9px auto;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 18px;
  }
  .block-a-h-b__link__btn:hover{
    background-color: #6c9bd2;
    background-image: url("../images/common/nav_sp_on.png");
    color: #fff;
  }
  .block-a-h-c{
    padding: 0 10px;
  }
  .block-a-h-c__text-b{
    padding: 20px 0 25px 0;
  }
  .block-a-h-c__btn__container{
    width: 100%;
    margin: 40px auto 20px;
  }
  .block-a-h-d__link__btn{
    background-image: url("../images/common/icon15_sp_off.png"), url("../images/common/nav_sp_off.png");
    background-repeat: no-repeat;
    -webkit-background-size: 240px auto, 9px auto;
    background-size: 240px auto, 9px auto;
    background-position: 15px 50%, 98% 50%;
    width: 100%;
    font-size: 12px;
    height: 120px;
    padding: 56px 25px 0 104px;
  }
  .block-a-h-d__link__btn:hover{
    background-image: url("../images/common/icon15_sp_on.png"), url("../images/common/nav_sp_on.png");
    background-color: #6c9bd2;
    color: #fff;
  }
  .block-a-h-d__link__btn--b{
    background-image: url("../images/common/icon16_sp_off.png"), url("../images/common/nav_sp_off.png");
  }
  .block-a-h-d__link__btn--b:hover{
    background-image: url("../images/common/icon16_sp_on.png"), url("../images/common/nav_sp_on.png");
  }
  .block-a-h-d__link__btn--c{
    background-image: url("../images/common/icon17_sp_off.png"), url("../images/common/nav_sp_off.png");
    -webkit-background-size: 160px auto, 9px auto;
    background-size: 160px auto, 9px auto;
    height: 90px;
  }
  .block-a-h-d__link__btn--c:hover{
    background-image: url("../images/common/icon17_sp_on.png"), url("../images/common/nav_sp_on.png");
  }
  .block-a-h-d__link__btn--d{
    background-image: url("../images/common/icon18_sp_off.png"), url("../images/common/nav_sp_off.png");
    -webkit-background-size: 160px auto, 9px auto;
    background-size: 160px auto, 9px auto;
    height: 90px;
    padding: 39px 0 0 104px;
  }
  .block-a-h-d__link__btn--d:hover{
    background-image: url("../images/common/icon18_sp_on.png"), url("../images/common/nav_sp_on.png");
  }
  .block-a-h-d__link__btn--e{
    background-image: url("../images/common/icon19_sp_off.png"), url("../images/common/nav_sp_off.png");
    -webkit-background-size: 170px auto, 9px auto;
    background-size: 170px auto, 9px auto;
    height: 90px;
  }
  .block-a-h-d__link__btn--e:hover{
    background-image: url("../images/common/icon19_sp_on.png"), url("../images/common/nav_sp_on.png");
  }
  .block-a-h-d__link__btn--f{
    background-image: url("../images/common/icon20_sp_off.png"), url("../images/common/nav_sp_off.png");
    -webkit-background-size: 180px auto, 9px auto;
    background-size: 180px auto, 9px auto;
    height: 90px;
  }
  .block-a-h-d__link__btn--f:hover{
    background-image: url("../images/common/icon20_sp_on.png"), url("../images/common/nav_sp_on.png");
  }
  .block-a-h-d__link__btn--g{
    background-image: url("../images/common/icon21_sp_off.png"), url("../images/common/nav_sp_off.png");
    -webkit-background-size: 206px auto, 9px auto;
    background-size: 206px auto, 9px auto;
    height: 90px;
  }
  .block-a-h-d__link__btn--g:hover{
    background-image: url("../images/common/icon21_sp_on.png"), url("../images/common/nav_sp_on.png");
  }
  .block-a-h-d__link__btn--h__cell-a{
    background-image: url("../images/bottom/guidance_img_008_sp_off.png"), url("../images/common/nav_sp_off.png");
    -webkit-background-size: 206px auto, 9px auto;
    background-size: 206px auto, 9px auto;
    height: 90px;
  }
  .block-a-h-d__link__btn--h__cell-a:hover{
    background-image: url("../images/bottom/guidance_img_008_sp_on.png"), url("../images/common/nav_sp_on.png");
  }
  .block-a-h-d__link__btn--h__cell-b{
    background-image: url("../images/bottom/guidance_img_008_sp_off.png"), url("../images/common/nav_sp_off.png");
    -webkit-background-size: 206px auto, 9px auto;
    background-size: 206px auto, 9px auto;
    height: 90px;
  }
  .block-a-h-d__link__btn--h__cell-b:hover{
    background-image: url("../images/bottom/guidance_img_008_sp_on.png"), url("../images/common/nav_sp_on.png");
  }
  .block-a-h-b-b{
    width: 100%;
    min-width: inherit;
  }
  .block-a-h-b-b__link__btn{
    background-color: #e1e9f2;
    background-image: url("../images/common/nav_sp_off.png");
    background-repeat: no-repeat;
    background-position: 98% 50%;
    -webkit-background-size: 9px auto;
    background-size: 9px auto;
    width: 100%;
    font-size: 14px;
    padding: 11px 0;
  }
  .block-a-h-b-b__link__btn:hover{
    background-color: #6c9bd2;
    background-image: url("../images/common/nav_sp_on.png");
    color: #fff;
  }
  .block-a-h-b-e{
    width: 100%;
  }
  .block-a-h-b-e__link__btn{
    background-image: url("../images/common/icon14_sp_off.png");
    -webkit-background-size: 13px auto;
    background-size: 13px auto;
    height: 62px;
    vertical-align: middle;
  }
  .block-a-h-b-e__link__btn:hover{
    background-color: #6c9bd2;
    background-image: url("../images/common/icon14_sp_on.png");
    color: #fff;
  }
  .block-a-h-b-f{
    width: 100%;
    min-width: inherit;
  }
  .block-a-h-b-f__link__btn{
    background-image: url("../images/common/nav_sp_off.png");
    background-repeat: no-repeat;
    background-position: 98% 50%;
    -webkit-background-size: 9px auto;
    background-size: 9px auto;
    width: 100%;
    font-size: 19px;
    padding: 11px 0;
  }
  .block-a-h-b-f__link__btn:hover{
    background-color: #6c9bd2;
    background-image: url("../images/common/nav_sp_on.png");
    color: #fff;
  }
  .block-a-h-b-g{
    width: 100%;
    min-width: inherit;
  }
  .block-a-h-b-g__link__btn{
    background-image: url("../images/common/nav_sp_off.png");
    background-repeat: no-repeat;
    background-position: 98% 50%;
    -webkit-background-size: 9px auto;
    background-size: 9px auto;
    width: 100%;
    font-size: 19px;
    padding: 11px 0;
  }
  .block-a-h-b-g__link__btn:hover{
    background-color: #6c9bd2;
    background-image: url("../images/common/nav_sp_on.png");
    color: #fff;
  }
  .block-a-h-b-h{
    padding: 10px;
  }
  .block-a-h-b-h__text{
    text-align: left;
    font-size: 13px;
    margin-top: 25px;
    letter-spacing: initial;
  }
  .block-a-h-b-h__pict{
    width: 280px;
  }
  .block-a-h-b-h{
    min-width: initial;
  }
  .block-a-h-b-h__link__btn{
    background-image: url("../images/common/icon25_sp_off.png");
    background-repeat: no-repeat;
    background-position: 98% 50%;
    -webkit-background-size: 17px auto;
    background-size: 17px auto;
    width: 100%;
    font-size: 19px;
    padding: 11px 0;
  }
  .block-a-h-b-h__link__btn:hover{
    background-color: #6c9bd2;
    background-image: url("../images/common/icon25_sp_on.png");
    color: #fff;
  }
  .block-a-j{
    font-size: 10px;
  }
  .block-a-j__text__a{
    display: block;
  }
  .block-a-j__text__b{
    display: block;
  }
  .block-a-r #js_acMenu dt{
    background-image: url("../images/common/acordion01_open_sp.png");
  }
  .block-a-r #js_acMenu dt.close{
    background-image: url("../images/common/acordion01_close_sp.png");
  }
  .block-a-g-a__cell--b{
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .block-a-g-a__cell--a:nth-child(2){
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100%;
  }
  .block-a-g-a-table{
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .block-a-g-a-table__cell--b{
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .block-a-g-a-table__cell--a{
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .block-a-g-a-table__cell--c{
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .block-a-g-b__cell--a{
    margin-bottom: 10px;
  }
  .block-a-g-b{
    margin-right: 0;
    margin-bottom: 10px;
  }
  .block-a-g-b-table{
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .block-a-g-b-table__cell--a{
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .block-a-g-b-table__cell--b{
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .block-a-g-b-table__mb{
    margin-bottom: 30px;
  }
  .block-a-g-b-table-b{
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .block-a-g-b-table-b__cell--a{
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .block-a-g-b-table-b__cell--b{
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .block-a-g-c{
    margin-right: 0;
    width: 100%;
  }
  .block-a-g-c__mb20{
    margin-bottom: 20px;
  }
  .block-a-g-d{
    padding: 20px 20px 20px 20px;
    border-radius: 10px;
  }
  .block-a-g-d-b{
    padding: 20px 20px 20px 20px;
    border-radius: 10px;
  }
  .block-a-g-f__cell--b{
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 20px;
    display: block;
    width: 100%;
    padding-left: 0;
    margin-top: 10px;
  }
  .block-a-g-f__cell--a{
    display: block;
    width: 100%;
    padding-right: 0;
  }
  .block-a-g-f__cell--c{
    display: block;
    width: 100%;
  }
  .block-a-g-g{
    margin-top: 15px;
  }
  .block-a-g-g__cell--a{
    width: 46.875%;
    margin-right: 6.25%;
    float: left;
  }
  .block-a-g-g__cell--b{
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 15px;
    width: 46.875%;
    float: left;
  }
  .block-a-g-g__cell--c{
    width: 46.875%;
    margin-right: 6.25%;
    float: left;
  }
  .block-a-g-g__cell--d{
    width: 46.875%;
    float: left;
  }
  .block-a-g-h{
    margin-right: 0;
    margin-bottom: 10px;
  }
  .block-a-g-h__mb0{
    margin-bottom: 0;
  }
  .block-a-g-h-c{
    margin-right: 0;
    margin-bottom: 10px;
  }
  .block-a-g-h-c__mb0{
    margin-bottom: 0;
  }
  .block-a-g-h-c__w280{
    width: 280px;
    margin: auto;
  }
  .block-a-g-h-c__w240{
    width: 240px;
    margin: auto;
  }
  .block-a-g-h-b__cell--a{
    margin-bottom: 20px;
  }
  .block-a-g-h-b{
    margin-right: 0;
    margin-bottom: 10px;
  }
  .block-a-g-i__cell--b{
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 20px;
  }
  .block-a-g-j__cell--a{
    display: block;
    width: 100%;
    height: auto;
  }
  .block-a-g-j__cell--b{
    display: block;
    width: 100%;
    height: auto;
  }
  .block-d-a-b{
    padding-top: 50px;
  }
  .block-d-f-h{
    display: block;
  }
  .block-d-f-h__cell--a{
    display: block;
    width: 100%;
  }
  .block-d-f-h__cell--b{
    display: block;
    width: 100%;
    height: 20px;
  }
  .block-d-f-h__cell--c{
    display: block;
    width: 100%;
  }
  .block-d-f-h__cell--d{
    display: block;
    width: 100%;
    height: 20px;
  }
  .block-d-f-h__cell--e{
    display: block;
    width: 100%;
  }
  .block-d-f-l{
    display: block;
  }
  .block-d-f-l__cell--a{
    display: block;
    width: 100%;
  }
  .block-d-f-l__cell--b{
    display: block;
    width: 100%;
    height: 20px;
  }
  .block-d-f-l__cell--c{
    display: block;
    width: 100%;
  }
  .block-d-f-l__cell--d{
    display: block;
    width: 100%;
    height: 20px;
  }
  .block-d-f-l__cell--e{
    display: block;
    width: 100%;
  }
  .block-d-f-p:after{
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-m .mod-grid2__cell{
    display: block;
    width: 100%;
    height: auto;
  }
  .block-d-m__pic{
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-m__pic__container{
    margin-bottom: 15px;
  }
  .block-d-m__text__container{
    padding-right: 0;
    padding-bottom: 46px;
  }
  .block-d-m__text__a{
    margin-bottom: 0px;
    font-size: 12px;
  }
  .block-d-m-b .mod-grid2__cell{
    display: block;
    width: 100%;
    height: auto;
  }
  .block-d-m-b__pic{
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-m-b__pic__container{
    padding-right: 0;
    margin-bottom: 15px;
  }
  .block-d-m-b__text{
    margin-bottom: 20px;
  }
  .block-d-m-b__text__container{
    padding-bottom: 46px;
  }
  .block-d-m-b__text__a{
    margin-bottom: 0px;
    font-size: 12px;
  }
  .block-d-m-b__flow__list__text{
    font-size: 12px;
    width: 100%;
  }
  .block-d-m-b__flow__list__text__container{
    float: left;
    width: 41%;
    margin-left: 5%;
  }
  .block-d-m-b__flow__list__title{
    margin-top: 0;
    font-size: 12px;
    width: initial;
    height: initial;
  }
  .block-d-m-b__flow__list__pic{
    max-width: 160px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .block-d-m-b__flow__list__pic__container{
    float: left;
    width: 53%;
  }
  .block-d-m-b__flow__list__item__a{
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .block-d-m-b__flow__list__item__b{
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .block-d-m-b__flow__list__item__c{
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .block-d-o .mod-grid2__cell{
    display: block;
    width: 100%;
    height: auto;
  }
  .block-d-o__title{
    font-size: 18px;
    padding-bottom: 15px;
  }
  .block-d-o__title__container{
    margin-bottom: 20px;
  }
  .block-d-o__pic{
    width: 100%;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-o__pic__container{
    margin-bottom: 15px;
  }
  .block-d-o__text__container{
    padding-left: 0;
  }
  .block-d-o__text__a{
    margin-bottom: 0px;
    font-size: 12px;
  }
  .block-d-o .block-f-w__list__item{
    font-size: 11px;
  }
  .block-d-s .mod-grid2__cell{
    display: block;
    width: 100%;
    height: auto;
  }
  .block-d-s__title{
    font-size: 18px;
    padding-bottom: 15px;
  }
  .block-d-s__title__container{
    margin-bottom: 20px;
  }
  .block-d-s__pic{
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-s__pic__container{
    margin-bottom: 15px;
  }
  .block-d-s__text__container{
    padding-left: 0;
  }
  .block-d-s__text__a{
    margin-bottom: 0px;
    font-size: 12px;
  }
  .block-d-s .block-f-w__list__item{
    font-size: 12px;
  }
  .block-d-t .mod-grid2__cell{
    display: block;
    width: 100%;
    height: auto;
  }
  .block-d-t__title{
    font-size: 18px;
    padding-bottom: 15px;
  }
  .block-d-t__title__container{
    margin-bottom: 20px;
  }
  .block-d-t__pic{
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-t__pic__container{
    margin-bottom: 15px;
  }
  .block-d-t__text__container{
    padding-right: 0;
    margin-bottom: 15px;
  }
  .block-d-t__text__a{
    margin-bottom: 0px;
    font-size: 12px;
  }
  .block-d-t .block-f-w__list__item{
    font-size: 12px;
  }
  .block-d-u__title{
    font-size: 18px;
    padding-bottom: 15px;
  }
  .block-d-u__title__container{
    margin-bottom: 20px;
  }
  .block-d-u__text__a{
    margin-bottom: 0px;
    font-size: 12px;
  }
  .block-d-v__pic{
    width: 100px;
  }
  .block-d-v__pic__container{
    padding-right: 15px;
  }
  .block-d-v__profile{
    padding-top: 10px;
  }
  .block-d-v__other{
    font-size: 9px;
  }
  .block-d-p__first{
    margin-bottom: 28px;
  }
  .block-d-p__first__b{
    padding-bottom: 0;
    margin-bottom: 20px;
  }
  .block-d-p .mod-responsive-grid2-b__cell--a{
    width: 100%;
    margin-bottom: 28px;
  }
  .block-d-p .mod-responsive-grid2-b__cell--b{
    display: none;
  }
  .block-d-p .mod-responsive-grid2-b__cell--c{
    width: 100%;
  }
  .block-d-q .mod-grid2__cell{
    display: block;
    width: 100%;
    height: auto;
  }
  .block-d-q__title{
    font-size: 18px;
    padding-bottom: 15px;
  }
  .block-d-q__title__container{
    margin-bottom: 20px;
  }
  .block-d-q__pic{
    width: 100%;
    max-width: 230px;
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-q__pic__container{
    margin-bottom: 15px;
  }
  .block-d-q__text__container{
    padding-left: 0;
  }
  .block-d-q__text__a{
    margin-bottom: 0px;
    font-size: 12px;
  }
  .block-d-q .block-f-w__list__item{
    font-size: 12px;
  }
  .block-f-w__font-size15-12{
    font-size: 12px;
  }
  .block-f-w__font-size14-12{
    font-size: 12px;
  }
  .block-d-n .mod-grid2__cell{
    display: block;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #e1e9f2;
    padding: 30px 0;
  }
  .block-d-n .mod-grid2__cell:last-child{
    border-bottom: 0;
  }
  .block-d-n__pic{
    margin-left: auto;
    margin-right: auto;
    max-width: 150px;
  }
  .block-d-n__container__a{
    margin-bottom: 35px;
  }
  .block-d-n__container__b{
    margin-bottom: 35px;
  }
  .block-d-n__title{
    font-size: 19px;
  }
  .block-d-n__text{
    font-size: 12px;
  }
  .block-c-m{
    border-collapse: initial;
    border-spacing: initial;
  }
  .block-c-m .mod-grid2__cell{
    display: block;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #e1e9f2;
    padding: 15px;
    height: auto;
  }
  .block-c-m .mod-grid2__cell:last-child{
    border-bottom: 0;
    padding: 15px;
  }
  .block-c-m__pic{
    max-width: 150px;
  }
  .block-c-m__container__a{
    margin-bottom: 20px;
  }
  .block-c-m__container__b{
    margin-bottom: 20px;
  }
  .block-c-m__title{
    font-size: 19px;
  }
  .block-c-m__text{
    font-size: 12px;
  }
  .block-c-n__point{
    font-size: 12px;
  }
  .block-c-n .mod-grid2__cell{
    display: block;
    width: 100%;
    height: auto;
  }
  .block-c-n__title{
    font-size: 18px;
    padding-bottom: 15px;
  }
  .block-c-n__title__container{
    margin-bottom: 20px;
  }
  .block-c-n__pic{
    width: 100%;
    max-width: 230px;
    margin-left: auto;
    margin-right: auto;
  }
  .block-c-n__pic__container{
    margin-bottom: 15px;
  }
  .block-c-n__text__container{
    padding-left: 0;
  }
  .block-c-n__text__a{
    margin-bottom: 0px;
    font-size: 12px;
  }
  .block-c-n .block-f-w__list__item{
    font-size: 12px;
  }
  .block-i-a__title{
    font-size: 20px;
    padding: 10px 0;
  }
  .block-i-b{
    height: 50px;
    padding: 0;
    -webkit-box-shadow: 0 0 9px rgba(0,0,0,0.15);
    box-shadow: 0 0 9px rgba(0,0,0,0.15);
  }
  .block-i-b__container{
    height: 50px;
  }
  .block-i-b__btn__close{
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 50%;
    cursor: pointer;
    z-index: 101;
    margin-top: -15px;
  }
  .block-i-b__pict{
    width: 140px;
    display: inline-block;
    padding: 0 8px 0 10px;
  }
  .block-i-b__logo{
    margin-left: 0;
  }
  .block-i-b__btn{
    text-align: left;
  }
  .block-i-b .mod-grid2__cell{
    vertical-align: middle;
  }
  .block-i-c__select{
    height: 39px;
    width: 100%;
  }
  .block-i-c__hisu{
    position: static;
    margin-left: 5px;
  }
  .block-i-c .form-control{
    height: 39px;
    width: 100%;
  }
  .block-i-c .form-control-b{
    height: 39px;
    width: 70%;
  }
  .block-i-c .form-control-c{
    height: 39px;
    width: 70%;
  }
  .block-i-c .form-control-d{
    height: 39px;
    width: 38%;
  }
  .block-i-c .form-control-e{
    height: 39px;
    width: 16%;
  }
  .block-i-c .form-control-f{
    height: 120px;
    width: 100%;
  }
  .block-i-c .form-control-g{
    height: 39px;
    width: 100%;
  }
  .block-i-c .form-control-h{
    height: 39px;
    width: 80%;
  }
  .block-i-d{
    font-size: 12px;
  }
  .block-i-d__text{
    font-size: 12px;
  }
  .block-i-d__text-a{
    font-size: 12px;
  }
  .block-i-d__text-b{
    font-size: 12px;
  }
  .block-i-d__text-c{
    font-size: 12px;
  }
  .block-i-e{
    width: 80%;
    height: 100px;
    margin-bottom: 30px;
  }
  .block-i-e__mod-checkfield{
    font-size: 18px;
  }
  .block-i-g{
    margin-top: 25px;
  }
  .block-i-i .block-a-h-b-b{
    min-width: 210px;
  }
  .block-i-j__contact__back{
    margin-top: 17px;
  }
  .block-i-j__single__back{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .block-i-j__single__back__blue{
    padding: 10px 0;
  }
  .block-i-j__icon{
    background-image: url("../images/common/icon12_sp.png");
    -webkit-background-size: 8px auto;
    background-size: 8px auto;
  }
  .block-i-j__contact__link__btn{
    font-size: 12px;
  }
  .block-i-j__single__link__btn{
    font-size: 12px;
  }
  .block-i-j__single__blue__link__btn{
    font-size: 12px;
  }
  .block-i-k{
    margin-bottom: 30px;
  }
  .block-i-k .block-a-h-b-b{
    min-width: 210px;
  }
  .block-i-k .block-a-h-b-b__link__btn{
    background-image: url("../images/common/icon13_sp_off.png");
    -webkit-background-size: 9px auto;
    background-size: 9px auto;
  }
  .block-i-k .block-a-h-b-b__link__btn:hover{
    background-image: url("../images/common/icon13_sp_on.png");
  }
  .block-i-l .block-a-h-b-b{
    width: 100%;
    min-width: inherit;
  }
  .block-i-l .block-a-h-b-b__link__btn.block-a-h-b-b__link__btn{
    font-size: 19px;
    padding: 15px 0;
  }
  .block-k-a__head__a{
    font-size: 12px;
  }
  .block-k-a__list__item{
    font-size: 12px;
  }
  .block-k-b{
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .block-k-b__lead{
    font-size: 12px;
    margin-bottom: 25px;
  }
  .block-k-b__title{
    font-size: 12px;
  }
  .block-k-b__text{
    font-size: 12px;
    margin-bottom: 25px;
  }
  .block-k-b__sign{
    font-size: 12px;
  }
  .block-k-c{
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .block-k-c__title{
    font-size: 12px;
  }
  .block-k-c__title__sub{
    font-size: 12px;
  }
  .block-k-c__text{
    font-size: 12px;
    margin-bottom: 25px;
  }
  .block-k-c__text__a{
    font-size: 12px;
  }
  .block-k-c__list{
    margin-bottom: 35px;
  }
  .block-k-c__list__item{
    font-size: 12px;
  }
  .block-k-c__sign{
    font-size: 12px;
  }
  .block-k-c__tantou{
    font-size: 12px;
  }
  .block-k-e__post{
    font-size: 12px;
  }
  .block-k-e__post__container{
    padding: 18px 0 25px 0;
  }
  .block-k-e__post__date{
    font-size: 12px;
  }
  .block-k-e__post__title{
    font-size: 19px;
  }
  .block-k-f .block-a-h-b__link__btn{
    font-size: 12px;
    height: 35px;
    width: 35px;
  }
  .block-k-f__img__none{
    background-image: none;
  }
  .block-k-f__img__none:hover{
    background-image: none;
  }
  .block-k-f__container__a{
    max-width: 35px;
  }
  .block-a-f__pict{
    top: 35px;
  }
  .block-a-f__btn{
    height: 150px;
  }
  .block-h-l-b__comment{
    font-size: 12px;
  }
  .block-h-l-b-b__comment{
    font-size: 12px;
  }
  .block-h-l-b-c__text__a{
    font-size: 12px;
  }
  .block-h-l-b-c__text__b{
    font-size: 12px;
  }
  .block-f-a__link__btn{
    background-image: url("../images/common/icon15_sp_off.png");
    background-repeat: no-repeat;
    background-position: 10% 100%;
    -webkit-background-size: 90px auto;
    background-size: 90px auto;
    width: 100%;
    font-size: 19px;
    text-align: center;
  }
  .block-f-a__link__btn:hover{
    background-image: url("../images/common/icon15_sp_on.png");
    background-position: 10% 100%;
    background-color: #6c9bd2;
    color: #fff;
  }
  .block-f-a__link__btn--b{
    background-image: url("../images/common/icon02_off_sp.png");
    -webkit-background-size: 120px auto;
    background-size: 120px auto;
  }
  .block-f-a__link__btn--b:hover{
    background-image: url("../images/common/icon02_on_sp.png");
  }
  .block-f-a__link__btn--c{
    background-image: url("../images/common/icon03_off_sp.png");
    -webkit-background-size: 206px auto;
    background-size: 206px auto;
  }
  .block-f-a__link__btn--c:hover{
    background-image: url("../images/common/icon03_on_sp.png");
  }
  .block-d-h-i{
    display: block;
    height: inherit;
  }
  .block-d-h-i__cell__a{
    border-bottom: 1px solid #006cb8;
    display: block;
    width: 100%;
    border-right: none;
  }
  .block-d-h-i__cell__a__title{
    letter-spacing: -0.05em;
  }
  .block-d-h-i__cell__b{
    display: block;
    width: 100%;
    padding-top: 20px;
  }
  .block-d-h-i__btn__container{
    background: url("../images/top/hr_pc.png") repeat-x;
    background-position: bottom;
    width: 80%;
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
  }
  .block-d-h-i__cell__c{
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
  .block-d-h-i__cell__c__text{
    font-size: 13px;
    letter-spacing: -0.05em;
  }
  .block-d-h-i__pic{
    width: 24px;
  }
  .block-d-h-i .block-a-h-b-b__link__btn{
    font-size: 14px;
  }
  .block-d-h-j__list__items{
    font-size: 15px;
    text-indent: -27px;
    padding-left: 27px;
    margin-bottom: 6px;
    font-weight: bold;
  }
  .block-d-h-j__list__items__b{
    display: block;
  }
  .block-d-h-j__list__items:before{
    background-image: url("../images/common/icon19_sp.png");
  }
  .block-d-h-k{
    padding: 20px 15px;
  }
  .block-d-h-k-b{
    padding: 20px 15px;
  }
  .block-d-h-l__pic__container{
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #637ba0;
  }
  .block-d-h-l__text__a{
    font-size: 12px;
  }
  .block-d-h-l__pic{
    width: 100%;
    max-width: 210px;
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-h-l__pic__b{
    width: 100%;
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-h-l .mod-responsive-grid2-a__cell--b{
    width: 100%;
  }
  .block-d-h-p{
    padding: 15px;
  }
  .block-d-h-p__point{
    font-size: 12px;
  }
  .block-d-h-p__cell__a{
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #e1e9f2;
    padding: 20px 15px;
    height: initial;
  }
  .block-d-h-p__cell__b{
    width: 100%;
    height: initial;
    padding: 20px 15px;
  }
  .block-d-h-p__cell__b__text{
    font-size: 12px;
  }
  .block-d-h-p__text__a{
    font-size: 12px;
  }
  .block-d-h-p .block-f-w__list__item{
    font-size: 12px;
  }
  .block-d-h-m #js_acMenu dt{
    background-image: url("../images/common/acordion03_open_sp.png");
    -webkit-background-size: 20px auto;
    background-size: 20px auto;
    font-size: 13px;
    padding: 15px 20px;
    text-indent: -35px;
    padding-left: 50px;
    padding-right: 30px;
  }
  .block-d-h-m #js_acMenu dt.close{
    background-image: url("../images/common/acordion03_close_sp.png");
    -webkit-background-size: 20px auto;
    background-size: 20px auto;
  }
  .block-d-h-m #js_acMenu dt.block-d-h-m__term__large{
    text-indent: -50px;
    padding-left: 65px;
    padding-right: 50px;
  }
  .block-d-h-m__description{
    font-size: 13px;
    padding: 15px;
  }
  .block-d-h-m__pict{
    max-width: 300px;
    padding: 15px 0;
  }
  .block-d-h-n__list__btn{
    padding: 0 15px 0 10px;
    margin-right: 4px;
    background-image: url("../images/common/icon22_sp.png");
    font-size: 13px;
  }
  .block-d-h-o{
    display: block;
    height: inherit;
  }
  .block-d-h-o__cell__a{
    display: block;
    width: 100% !important;
    border-right: none;
    float: none;
    padding: 20px 15px !important;
    height: initial;
  }
  .block-d-h-o__cell__b{
    display: block;
    width: 100% !important;
    float: none;
    height: initial;
  }
  .block-d-h-o__cell__b__pict{
    width: 172px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-h-o__cell__b__pict__container{
    display: block;
    vertical-align: initial;
  }
  .block-d-h-o-o{
    display: block;
    height: inherit;
  }
  .block-d-h-o-o__cell__a{
    display: block;
    width: 100% !important;
    border-right: none;
    float: none;
    padding: 20px 15px !important;
    height: initial;
  }
  .block-d-h-o-o__cell__b{
    display: block;
    width: 100% !important;
    float: none;
    height: initial;
    border-top: 1px solid #e1e9f2;
    border-bottom: 0;
    border-left: 1px solid #e1e9f2;
    border-right: 1px solid #e1e9f2;
  }
  .block-d-h-o-o__cell__b__pict{
    width: 172px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-h-o-o__cell__b__pict__container{
    display: block;
    padding: 15px;
    vertical-align: initial;
  }
  .block-d-h-o-o .block-a-h-b-b__link__btn{
    font-size: 14px;
  }
  .block-d-r .mod-grid2__cell{
    display: block;
    width: 100%;
    height: auto;
  }
  .block-d-r__title{
    font-size: 18px;
    padding-bottom: 15px;
  }
  .block-d-r__title__container{
    margin-bottom: 20px;
  }
  .block-d-r__pic{
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .block-d-r__pic__container{
    margin-bottom: 15px;
  }
  .block-d-r__text__container{
    padding-left: 0;
  }
  .block-d-r__text__a{
    margin-bottom: 20px;
    font-size: 12px;
  }
  .block-d-r .block-a-h-b__link__btn{
    font-size: 19px;
    padding: 30px;
  }
  .block-c-g{
    margin-top: 50px;
  }
  .block-c-g__container{
    border-radius: 0;
  }
  .block-c-g__container .bx-pager{
    display: none;
  }
  .block-c-h{
    margin-top: 20px;
  }
  .block-c-h__prev-btn{
    font-size: 12px;
  }
  .block-c-h__next-btn{
    font-size: 12px;
  }
  .helper--hide-landscape-under{
    display: none !important;
  }
  body{
    padding-top: 0;
  }
  header.header{
    height: inherit;
  }
  .pagination .page-numbers{
    font-size: 12px;
    width: 40px;
  }
  .pagination .prev{
    padding: 20px;
    font-size: 0;
  }
  .pagination .next{
    padding: 20px;
    font-size: 0;
  }
  .anchor{
    margin-top: -50px;
    padding-top: 50px;
  }
}
@media only screen and (max-width: 768px){
  .mod-box__container--width-a-a{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
  }
  .mod-box__container--width-a-c{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
  }
  .mod-box__container--width-a-d{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
  }
  .mod-box__container--width-a-f{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
  }
  .mod-box__container--width-a-m{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
  }
  .mod-box__container--width-a-e{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }
  .mod-box__container--width-a-g{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }
  .mod-box__container--width-a-h{
    width: 100%;
  }
  .mod-table-a-g__cell--c{
    width: inherit;
    display: block;
    border: 0;
    font-size: 12px;
    padding: 12px 15px;
    font-weight: normal;
  }
  .mod-table-a-g__cell--d{
    width: inherit;
    display: block;
    border: 0;
    font-size: 10px;
    padding: 9px 18px;
  }
  .mod-table-a-h__cell--c{
    width: inherit;
    display: block;
    font-size: 12px;
    padding: 12px 15px;
    font-weight: bold;
    border-top: 1px solid #3c5a88;
    border-left: 1px solid #3c5a88;
    border-right: 1px solid #3c5a88;
    border-bottom: 0;
  }
  .mod-table-a-h__cell--d{
    width: inherit;
    display: block;
    font-size: 12px;
    padding: 9px 18px;
    border-left: 1px solid #3c5a88;
    border-right: 1px solid #3c5a88;
    border-top: 0;
    border-bottom: 0;
  }
  .mod-table-a-h__cell--e{
    width: inherit;
    display: block;
    font-size: 12px;
    padding: 12px 15px;
    font-weight: normal;
    border-left: 1px solid #3c5a88;
    border-right: 1px solid #3c5a88;
    border-top: 0;
    border-bottom: 0;
    font-weight: bold;
  }
  .mod-table-a-h__cell--f{
    width: inherit;
    display: block;
    font-size: 12px;
    padding: 9px 18px;
    border-left: 1px solid #3c5a88;
    border-right: 1px solid #3c5a88;
    border-top: 0;
    border-bottom: 0;
  }
  .mod-table-a-h__cell--g{
    width: inherit;
    display: block;
    font-size: 12px;
    padding: 12px 15px;
    font-weight: normal;
    border-left: 1px solid #3c5a88;
    border-right: 1px solid #3c5a88;
    border-top: 0;
    border-bottom: 0;
    font-weight: bold;
  }
  .mod-table-a-h__cell--h{
    width: inherit;
    display: block;
    font-size: 12px;
    padding: 9px 18px;
    border-left: 1px solid #3c5a88;
    border-right: 1px solid #3c5a88;
    border-top: 0;
    border-bottom: 1px solid #3c5a88;
  }
  .mod-table-a-i__cell--c{
    font-size: 12px;
    padding: 12px 10px;
    border-top: 1px solid #3c5a88;
    border-left: 1px solid #3c5a88;
  }
  .mod-table-a-i__cell--d{
    font-size: 12px;
    padding: 9px 18px;
    border-left: 1px solid #3c5a88;
    border-right: 1px solid #3c5a88;
    border-bottom: 0;
  }
  .mod-table-a-i__cell--e{
    font-size: 12px;
    padding: 12px 10px;
    font-weight: normal;
    border-left: 1px solid #3c5a88;
    border-top: 0;
  }
  .mod-table-a-i__cell--f{
    font-size: 12px;
    padding: 9px 18px;
    border-right: 1px solid #3c5a88;
    border-bottom: 1px solid #e1e9f2;
  }
  .mod-table-a-i__cell--g{
    font-size: 12px;
    padding: 12px 10px;
    font-weight: normal;
    border-left: 1px solid #3c5a88;
    border-top: 0;
  }
  .mod-table-a-i__cell--h{
    font-size: 12px;
    padding: 9px 18px;
    border-right: 1px solid #3c5a88;
    border-top: 0;
    border-bottom: 1px solid #3c5a88;
  }
  .block-a-a-a__head__btn{
    width: 65%;
  }
  .block-a-d-d__lists{
    display: block;
    padding: 10px 0 17px 0;
  }
  .block-a-d-d__a{
    float: none;
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }
  .block-a-d-d__b{
    display: block;
    width: 100%;
  }
  .block-a-d-d-b__lists{
    margin-bottom: 40px;
  }
  .block-a-b-e__title{
    font-size: 15px;
    padding: 5px 5px 5px 5px;
    height: 65px;
  }
  .block-a-b-e__text{
    font-size: 12px;
    padding: 0 5px;
  }
  .block-a-b-f__title{
    font-size: 15px;
    padding: 5px 5px 5px 5px;
    height: 56px;
  }
  .block-a-b-f__text{
    font-size: 12px;
    padding: 0 5px;
    height: 70px;
  }
  .block-a-h__link__btn{
    font-size: 12px;
    background-position: 50% 34%;
    -webkit-background-size: 100px auto;
    background-size: 100px auto;
  }
  .block-a-h__link__btn:hover{
    background-position: 50% 34%;
  }
  .block-a-h__link__btn--b{
    -webkit-background-size: 130px auto;
    background-size: 130px auto;
  }
  .block-a-h__link__btn--c{
    -webkit-background-size: 180px auto;
    background-size: 180px auto;
  }
  .block-a-h-d__link__btn{
    font-size: 12px;
  }
  .block-a-h-d__link__btn:hover{
    font-size: 12px;
  }
  .block-a-g-a-table__table__separate{
    border-spacing: 14px 0;
  }
  .block-d-m__text__a{
    margin-bottom: 0;
    font-size: 13px;
  }
  .block-d-m-b__text__a{
    margin-bottom: 0;
    font-size: 13px;
  }
  .block-d-o__text__a{
    margin-bottom: 0;
    font-size: 13px;
  }
  .block-d-s__text__a{
    margin-bottom: 0;
    font-size: 13px;
  }
  .block-d-t__text__a{
    margin-bottom: 0;
    font-size: 13px;
  }
  .block-d-u__text__a{
    margin-bottom: 0;
    font-size: 13px;
  }
  .block-d-q__text__a{
    margin-bottom: 0;
    font-size: 13px;
  }
  .block-i-c__hisu{
    position: static;
    margin-left: 5px;
  }
  .block-i-c__hisu__container{
    position: static;
    display: inline-block;
  }
  .block-i-f{
    width: 100%;
    top: inherit;
  }
  .block-i-f__text{
    text-align: center;
    font-size: 12px;
    padding: 30px 0;
  }
  .block-i-g__text{
    font-size: 12px;
    margin: 20px 0 13px 0;
  }
  .block-i-h__text{
    font-size: 14px;
    margin: 30px auto 15px;
  }
  .block-i-h__text__b{
    text-align: left;
  }
  .block-h-l-b__container{
    display: none;
    width: 100%;
  }
  .block-h-l-b__pic__container{
    display: block;
    width: 100%;
  }
  .block-h-l-b__comment{
    margin-top: 5px;
  }
  .block-h-l-b-b__container{
    display: none;
    width: 100%;
  }
  .block-h-l-b-b__pic__container{
    display: block;
    width: 100%;
  }
  .block-h-l-b-b__comment{
    margin-top: 5px;
  }
  .block-f-a__link__btn{
    font-size: 13px;
    background-position: 50% 34%;
    -webkit-background-size: 100px auto;
    background-size: 100px auto;
  }
  .block-f-a__link__btn:hover{
    font-size: 13px;
    background-position: 50% 34%;
  }
  .block-f-a__link__btn--b{
    -webkit-background-size: 130px auto;
    background-size: 130px auto;
  }
  .block-f-a__link__btn--c{
    -webkit-background-size: 180px auto;
    background-size: 180px auto;
  }
  .block-d-h-i__cell__a__title{
    font-size: 15px;
    letter-spacing: -0.05em;
  }
  .block-d-h-i__cell__c__text{
    font-size: 12px;
    letter-spacing: -0.05em;
  }
  .block-d-h-i .block-a-h-b-b__link__btn{
    font-size: 15px;
    letter-spacing: -0.05em;
  }
  .block-d-h-p__cell__a__text{
    font-size: 18px;
  }
  .block-d-h-o__cell__a{
    padding: 35px 5px;
  }
  .block-d-h-o__cell__a__title{
    font-size: 15px;
  }
  .block-d-h-o-o__cell__a{
    padding: 35px 5px;
  }
  .block-d-h-o-o__cell__a__title{
    font-size: 15px;
  }
  .block-d-h-o-o .block-a-h-b-b__link__btn{
    font-size: 15px;
    letter-spacing: -0.05em;
  }
  .helper--hide-tablet-under{
    display: none !important;
  }
}
@media only screen and (max-width: 1240px){
  .mod-box__container--width-a-c{
    width: 100%;
  }
}
@media only screen and (max-width: 960px){
  .mod-box__container--width-a-e{
    width: 100%;
  }
  .mod-box__container--width-a-h{
    width: 100%;
  }
}
@media only screen and (max-width: 1260px){
  .mod-box__container--width-a-g{
    width: 100%;
  }
}
@media only screen and (min-width: 668px){
  .helper--hide-landscape-over{
    display: none !important;
  }
}
@media only screen and (min-width: 769px){
  .helper--hide-tablet-over{
    display: none !important;
  }
}