@charset 'UTF-8';
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
dfn,
em,
img,
ins,
q,
strong,
small,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
small {
  font-size: 100%;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

caption,
th,
td {
  text-align: left;
}

q:before,
q:after {
  content: '';
}

object,
embed {
  vertical-align: top;
}

img,
abbr,
acronym,
fieldset {
  border: 0;
}

li {
  list-style-type: none;
}

a,
label {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto; 
  vertical-align: top;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0; 
  border: 0;
}

svg {
  overflow: hidden;
}

/*---------------------------------------
  Base
----------------------------------------*/
*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  overflow-y: scroll;
          text-size-adjust: 100%;
  font-size: 62.5%; 

  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

html[data-font-size='middle'] {
  font-size: 68.8%;
}

html[data-font-size='large'] {
  font-size: 75.0%;
}

body {
  position: relative;
  width: 100%;
  min-width: 1200px;
  height: 100%;
  word-wrap: break-word;
  color: #333;
          text-size-adjust: 100%;
  font-family: 'Noto Sans Japanese', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, '游ゴシック', YuGothic, sans-serif;
  font-size: 1.4rem;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7; 

  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  overflow-wrap: break-word;
}
body.before_include {
  visibility: hidden;
}

a {
  text-decoration: none; 
  color: #333;
}
a {
  color: #333;
}
a:hover {
  text-decoration: underline;
}
a:hover img {
  opacity: 0.5;
}

input,
textarea,
select,
button {
  color: inherit;
  font-family: 'Noto Sans Japanese', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, '游ゴシック', YuGothic, sans-serif;
  font-size: inherit;

     -moz-appearance: none;
  -webkit-appearance: none;
          appearance: none;
}
input::-ms-expand,
textarea::-ms-expand,
select::-ms-expand,
button::-ms-expand {
  display: none;
}

select,
button {
  margin: 0;
  cursor: pointer;
}

::-webkit-input-placeholder {
  color: #a9a9a9;
}

::-moz-placeholder {
  color: #a9a9a9;
}

:-ms-input-placeholder {
  color: #a9a9a9;
}

::placeholder {
  color: #a9a9a9;
}

svg {
  vertical-align: middle;
}

/* 外部ウィンドウ　アイコン
--------------------- */
.external_anchor {
  display: inline-block;
  padding-right: 21px;
  background: url(/img/share/ico-window.png) no-repeat right center;
}
.external_anchor:hover {
  text-decoration: underline;
}

/* SP のみ有効な電話番号リンク
--------------------- */
.tel_for_sp {
  pointer-events: none; 
  color: inherit;
}
.tel_for_sp:hover img {
  opacity: 1;
}

.inner:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}

.content {
  margin: 0 auto;
}
.content .title_main {
  margin-bottom: 44px; 
  font-size: 2.6rem;
  font-weight: 700;
}
.content .title_sub {
  margin-bottom: 50px; 
  padding-left: 12px;
  border-left: 6px solid #db0016;
  background-color: #f5f5f5;
  font-size: 2.2rem;
  font-weight: 500;
}
.content .title_third {
  margin-bottom: 25px; 
  padding-left: 12px;
  border-left: 6px solid #a5a5a5;
  font-size: 1.8rem;
  font-weight: normal;
}

.column:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}

.column_block {
  margin-bottom: 30px;
}

.column_2 {
  width: 372px;
}
.column_2.left {
  float: left;
}
.column_2.right {
  float: right;
}

.column_inner {
  margin-bottom: 30px;
}
.column_inner:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.column_inner .img {
  float: left;
  width: 120px;
  height: 120px;
  margin: 0;
}
.column_inner .txt {
  float: right; 
  width: 222px;
}

.column_list li {
  position: relative; 
  padding-left: 14px;
}
.column_list li:before {
  position: absolute;
  top: 1em;
  left: 1px;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  content: '';
  border-radius: 6px;
  background: #a5a5a5;
}

/*
---
name: 注意文ブロック
tag:
  - block
category:
  - service
---

```jade
aside.attention
  h3.attention_title メンテナンスなどによるサービス停止時間
  .attention_body
    p ※毎週月曜日1:00～5:00の間は定期点検のため、アコムATMならびに提携ATMはご利用いただけません。
    p ※セブン銀行のATMは23:50～0:10の間、イオン銀行のATMは23:45～0:10の間は、ご利用いただけません。
    p ※詳しくはお問い合わせいただくか、各銀行のホームページなどでご確認ください。
```
*/
.attention {
  margin-bottom: 50px;
  padding: 30px 50px;
  border: 2px solid #db0016;
  background-color: #faf6f7;
}
.attention_title {
  margin-bottom: 22px;
  text-align: center; 
  color: #db0016;
  font-size: 1.8rem;
  font-weight: bold;
}
.attention_body {
  font-size: 1.4rem;
}

/*
---
name: 注意文ブロック(SPアコーディオンタイプ)
tag:
  - block
category:
  - service
---
『スマホ・ケータイでのお申し込み(/first/apply/mobile/)』ページ参照。

「○○でのお申し込み」ページ、「STEP」リスト内の要素として使われています。SPの時にアコーディオンになります。

```jade
.js-attention_block.apply_attention
  .apply_attention_title_wrapper
    button.js-attention_button.apply_attention_btn(aria-pressed="true") ご契約時のご注意点
      span.apply_attention_icon
  .js-attention_content.apply_attention_inner(aria-expanded="true")
    ul.apply_attention_list
      li.apply_attention_item 契約時にご確認いただく以下のPDFファイルは、ご利用の端末にダウンロードのうえ、大切に保管してください。
        ul.apply_attention_item_children.content_list
          li 契約事前説明書
          li AC会員契約内容通知書
```
*/
.apply_attention {
  margin-top: 52px;
  border: 2px solid #de2336;
  background-color: #faf6f7;
}
.apply_attention_btn {
  display: block;
  width: 100%;
  padding: 33px 18px 18px;
  cursor: default;
  text-align: center;
  pointer-events: none;
  color: #de2336; 
  border: none;
  outline: none;
  background: none;
  font-size: 1.8rem;
  font-weight: 700;
}
.apply_attention_btn_icon {
  display: none;
}
.apply_attention_list {
  padding: 0 18px 33px;
}
.apply_attention_item {
  position: relative;
  padding-left: 18px;
  font-size: 1.3rem;
  line-height: 1.7;
}
.apply_attention_item:before {
  position: absolute;
  top: 0;
  left: 0; 
  display: block;
  content: '※';
}
.apply_attention_item_children {
  margin-top: 8px;
  margin-bottom: 5px;
}

/*
---
name: 注意文ブロック内テーブル
tag:
  - block
category:
  - service
---

```jade
aside.attention.content_section
  h2.attention_title メンテナンスなどによるサービス停止時間
  p.attention_body 原則24時間お取り扱い可能ですが、以下の時間帯はご利用を一時停止させていただいております
  dl.table_b_layout.attention_table
    dt.table_b_layout_headline メンテナンス日
    dd.table_b_layout_detail
      ul
        li 毎週月曜日 1：00～5：00
        li 1月1日 20:00～ 1月2日 6:00
        li 毎月第3日曜日 0:00～5:30
        li (6月、9月の第3日曜日は、0:00～6:00)
        li その他、各金融機関メンテナンス日
```
*/
.attention .table_b_layout {
  margin-top: 26px;
}

.attention .table_b_layout_headline,
.attention .table_c_layout_headline {
  background-color: #ffebed;
  font-weight: bold;
}

.attention .table_b_layout_detail,
.attention .table_c_layout_detail {
  background-color: #fff;
}

/*
---
name: FAQ コンテンツ
tag:
  - block
category:
  - service
  - service/faq
---

```jade
article.faq
  header.faq_header
    h2.faq_question 必要な書類など用意するものはありますか？
    p.faq_answer 運転免許証（交付を受けていないお客さまは個人番号カードや健康保険証等）をご用意ください。

  .faq_body
    p.faq_paragraph 顔写真がない書類、または書類住所が現在お住まいの住所と異なる場合は、現在お住まいの住所が記載された以下のいずれかの書類をあわせてご用意ください。
    .faq_paragraph
      ul.faq_list
        li 住民票
        li 公共料金の「領収書」･･･電気、ガス、水道、固定電話（携帯電話を除く）、ＮＨＫ等
        li 納税証明書
      p.faq_caption.faq_enphasize ※確認時に発行日または領収日から６ヵ月以内のものに限ります。
    p.faq_paragraph 外国籍のお客さまは、「在留カード」または「特別永住者証明書」（法令により、有効とみなされる期間内は「外国人登録証明書」を含む）をあわせてご用意ください。
    p.faq_caption ※「口座振替（自動引き落とし）」でお支払いを希望されるお客さまは、引き落としの口座がわかるものおよびその口座届出印もご用意ください。

  .faq_body
    .faq_paragraph
      strong.faq_strong なお、以下に該当するお客さまは収入証明書（源泉徴収票または給与明細書など）が必要です。
      ul.faq_list
        li 他社を含めたお借入総額が100万円を超えるお客さま
        li 当社のご利用において50万円を超えるご契約を行うお客さま
      p.faq_caption ※収入証明書について、詳しくはこちらをご覧ください。

    p.faq_paragraph 書類に個人番号（マイナンバー）、本籍地が記載されている場合は、個人番号、本籍地を隠す（塗りつぶす）など、写らない状態にしてご提出ください。
```
*/
.faq {
  margin-bottom: 50px;
}
.faq_body {
  margin-bottom: 50px;
}
.faq_question {
  margin-bottom: 49px;
  padding: 17px 17px 17px 58px;
  border-bottom: 1px solid #d1d1d1;
  background: url(/img/share/ico-faq_q.png) 3px center no-repeat;
  background-size: 46px auto;
  font-size: 2.2rem;
  font-weight: bold;
}
.faq_answer {
  margin-bottom: 47px;
  padding: 9px 17px 9px 58px;
  background: url(/img/share/ico-faq_a.png) 3px 0 no-repeat;
  background-size: 46px auto;
  font-size: 1.4rem;
  font-weight: bold;
}
.faq_paragraph {
  margin-bottom: 30px;
}
.faq_list > li::before {
  content: '・';
}
.faq_caption {
  font-size: 1.3rem;
}
.faq_strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.6rem;
  font-weight: bold;
}

/*  CMS コンテンツ用
----------------------------------------*/
.faq_body .content_section_bottom {
  margin-bottom: 30px;
}

/*
---
name: フォーム ラベル横付き
tag:
  - block
category:
  - service
---

```jade
.form_horizontal
  .form_horizontal_body
    ul.form_horizontal_table
      li.form_horizontal_row
        dl.form_horizontal_set
          dt.form_horizontal_title
            label(for="amount_borrow").form_horizontal_label 借入ご希望金額
          dd.form_horizontal_parts
            label.text_form
              input#amount_borrow.text_form_input(type="number" name="amount_borrow" placeholder="入力してください" min="10" max="800")
              span.text_form_suffix 万円
  p.content_text
    small.content_text_caption ※「ご返済回数（毎月1回払い）」の上限は借入利率（実質年率）18.00%選択の場合47回まで、15.00%選択の場合は44回まで、7.7％選択の場合○○回まで、4.7％選択の場合○○回、3.0％選択の場合○○回となります。

  .form_horizontal_btns
    .btn_md
      a.btn(href="#")
        span.btn_txt シミュレーションする
```
*/
.form_horizontal {
  padding: 50px 80px; 
  background: #f2f2f2;
}
.form_horizontal_row {
  padding-top: 10px;
}
.form_horizontal_row:first-child {
  padding-top: 0;
}
.form_horizontal_set {
  display: table;
  width: 100%; 
  font-size: 1.8rem;
  font-weight: bold;
}
.form_horizontal_title {
  display: table-cell;
  width: 235px;
  padding-right: 13px;
  vertical-align: middle;
  line-height: 2.2rem;
}
.form_horizontal_label_caption {
  color: #db0016; 
  font-size: 1.3rem;
  font-weight: normal;
}
.form_horizontal_parts {
  display: table-cell;
  vertical-align: middle;
  white-space: no-wrap;
}
.form_horizontal_description {
  font-size: 1.4rem;
  font-weight: normal;
}
.form_horizontal_caption {
  display: block;
  margin: 9px 0 9px 235px;
  color: #db0016; 
  font-size: 1.3rem;
  font-weight: normal;
}
.form_horizontal_btns {
  margin-top: 50px;
  text-align: center;
}
.form_horizontal_btns > .btn_md {
  margin: 0 10px;
}
.form_horizontal .text_form_input,
.form_horizontal .select_form_body {
  width: 346px;
}
.form_horizontal .btn_md {
  display: inline-block;
}
.form_horizontal .content_text_caption {
  margin-top: 50px;
}

/*
---
name: 大ボタン
tag:
  - part
category:
  - service
---

```jade
.column_block
  .btn_lrg
    a.btn(href="#")
      span.btn_txt 大ボタン
.column_block
  .btn_lrg.type_app
    a.btn(href="#")
      span.btn_txt
        span.small インターネットから簡単！
        | お申し込み
.column_block
  .btn_lrg.type_check
    a.btn(href="#")
      span.btn_txt 3秒診断
.column_block
  .btn_lrg.type_member
    a.btn(href="#")
      span.btn_txt 会員ログイン
```
*/
.btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  width: 100%;
  padding: 0 40px;
  -webkit-transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
          transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98); 
  border: 2px solid #e0e0e0;
  border-radius: 5px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 0 0 #a1a1a1;
          box-shadow: 0 2px 0 0 #a1a1a1;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.btn:hover {
  text-decoration: none;
  opacity: 0.5;
}
.btn_inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  width: 100%;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}

/* 赤ボタン
--------------------*/
.btn.btn_red {
    color: #fff;
    border: 2px solid #db0016;
    background: #db0016;
    -webkit-box-shadow: 0 3px 0 0 #9a000f;
    box-shadow: 0 3px 0 0 #9a000f;
}

/* 大ボタン
--------------------*/
.btn_lrg .btn {
  position: relative;
  height: 60px;
  -webkit-box-shadow: 0 3px 0 0 #a1a1a1;
          box-shadow: 0 3px 0 0 #a1a1a1; 
  font-size: 1.6rem;
}
.btn_lrg .btn:before,
.btn_lrg .btn:after {
  position: absolute;
  display: block;
  width: 24px;
  height: 22px;
  content: '';
  background: url(/img/share/ico-arrow_btn_gray.png) no-repeat 0 0;
}
.btn_lrg .btn:before {
  top: 2px;
  left: 2px;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  opacity: 0.5;
}
.btn_lrg .btn:after {
  right: 2px;
  bottom: 2px;
}

.btn_lrg.type_app .btn {
  color: #fff;
  border: 2px solid #db0016;
  background: #db0016;
  -webkit-box-shadow: 0 3px 0 0 #9a000f;
          box-shadow: 0 3px 0 0 #9a000f; 
  font-weight: 700;
}
.btn_lrg.type_app .btn:before,
.btn_lrg.type_app .btn:after {
  background: url(/img/share/ico-arrow_btn_white.png) no-repeat;
}
.btn_lrg.type_app .btn_txt {
  display: inline-block;
}
.btn_lrg.type_app .btn_txt .small {
  display: block;
  font-size: 1.3rem;
  font-weight: normal;
}

.btn_lrg.type_app .apply {
  width: 40px;
  height: 40px;
  margin-right: 3px;

  fill: #fff;
}

.btn_lrg.type_check .btn {
  color: #fff;
  border: 2px solid #ff6473;
  background: #ff6473;
  -webkit-box-shadow: 0 3px 0 0 #dd3645;
          box-shadow: 0 3px 0 0 #dd3645; 
  font-weight: 700;
}
.btn_lrg.type_check .btn:before,
.btn_lrg.type_check .btn:after {
  background: url(/img/share/ico-arrow_btn_white.png) no-repeat 0 0;
}

.btn_lrg.type_check .btn_txt {
  display: inline-block;
}

.btn_lrg.type_member .btn {
  color: #fff;
  border: 2px solid #f3ab00;
  background: #f3ab00;
  -webkit-box-shadow: 0 3px 0 0 #d49500;
          box-shadow: 0 3px 0 0 #d49500; 
  font-weight: 700;
}
.btn_lrg.type_member .btn:before,
.btn_lrg.type_member .btn:after {
  background: url(/img/share/ico-arrow_btn_white.png) no-repeat 0 0;
}

.btn_lrg.type_member .login {
  width: 35px;
  height: 35px;
  margin-right: 3px;

  fill: #fff;
}

.btn_external .btn_txt::after {
  display: inline-block;
  margin-top: -9px;
  margin-left: 7px;
  content: url(/img/share/ico-window.png);
  vertical-align: middle;
}

.btn_pdf .btn_txt {
  padding-right: 25px; 
  background: url(/img/share/ico-pdf.svg) right center no-repeat;
  background-size: auto 100%;
}

/*
---
name: 中ボタン
tag:
  - part
category:
  - service
---

```jade
.column_block
  .btn_md
    a.btn(href="#")
      span.btn_txt 同画面遷移ボタン
.column_block
  .btn_md.btn_external
    a.btn(href="#")
      span.btn_txt 別画面遷移ボタン
.column_block
  .btn_md.type_close
    a.btn(href="#")
      span.btn_txt 閉じるボタン
.column_block
  .btn_md.btn_pdf
    a.btn(href="#")
      span.btn_txt PDF ボタン
```
*/
.btn_md {
  width: auto;
  margin: 0 auto;
}
.btn_md .btn {
  height: 54px;
}
.btn_md .btn_txt {
  text-align: center;
}
.btn_md.type_close {
  text-align: center;
}
.btn_md.type_close .btn {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display:         inline-flex;
  width: auto;
  color: #fff; 
  border: 2px solid #db0016;
  background: #db0016;
  -webkit-box-shadow: 0 3px 0 0 #9a000f;
          box-shadow: 0 3px 0 0 #9a000f;
}
.btn_md.type_close button.btn {
  display: inline-block;
}

/*
---
name: バナーボタン
tag:
  - part
category:
  - service
---

```jade
.content_column_btn
  .btn_bnr
    a(href="https://get.adobe.com/reader/", target="_blank")
      img(src="/img/share/ico-adobe.png" width="180" height="44" alt="Get ADOBE READER")
```
*/
.btn_bnr {
  width: auto;
  margin: 0 auto;
}

/*
---
name: チェックボックス
tag:
  - part
category:
  - service
---

```jade
label.checkbox
  input.checkbox_input(type="checkbox")
  span.checkbox_label テキスト
```
*/
.checkbox {
  display: inline-block;
}
.checkbox_input {
  display: none;
}
.checkbox_label {
  position: relative;
  padding-left: 30px;
}
.checkbox_label::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  content: '';
  border: 1px solid #d1d1d1; 
  background: #fff center no-repeat;
  background-size: 12px auto;
}
.checkbox_input:checked + .checkbox_label::before {
  border-color: #db0016;
  background-image: url(/img/share/ico-checkbox.png);
}

/*
---
name: ラジオボタン
tag:
  - part
category:
  - service
---

```jade
label.radio
  input.radio_input(type="radio" name="radio" value="foo")
  span.radio_label ラジオその 1
label.radio
  input.radio_input(type="radio" name="radio" value="bar")
  span.radio_label ラジオその 2
```
*/
.radio {
  display: inline-block;
}
.radio_input {
  position: absolute;
  display: none;
  width: 0; 
  height: 0;
}
.radio_label {
  position: relative;
  display: inline-block;
  padding-left: 32px;
}
.radio_label::before,
.radio_label::after {
  position: absolute;
  top: 50%;
  left: 0;
  content: '';
  border-radius: 50%;
}
.radio_label::before {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 1px solid #db0016;
  background-color: #fff;
}
.radio_label::after {
  left: 5px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  -webkit-transition: 100ms ease-out;
          transition: 100ms ease-out;
  -webkit-transition-property: opacity, -webkit-transform;
          transition-property: opacity, -webkit-transform;
          transition-property: opacity, transform;
          transition-property: opacity, transform, -webkit-transform; 
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  background-color: #db0016;
}
.radio_input:checked + .radio_label::after {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1); 
  opacity: 1;
}

/*
---
name: テキストフォーム(text, number)
tag:
  - part
category:
  - service
---

```jade
div
  label.text_form
    input.text_form_input(type="text" name="text" placeholder="入力してください")
div
  label.text_form
    span.text_form_prefix プレフィックス
    input.text_form_input(type="number" name="text" placeholder="入力してください")
    span.text_form_suffix サフィックス
```
*/
.text_form_input {
  margin: 0;
  padding: 16px 13px;
  border: 1px solid #d1d1d1;
  border-radius: 0; 
  font-size: 1.4rem;
}
.text_form_input::-webkit-outer-spin-button,
.text_form_input::-webkit-inner-spin-button {
  margin: 0; 

  -webkit-appearance: none;
          appearance: none;
}

.text_form_prefix {
  padding-right: 13px;
}

.text_form_suffix {
  padding-left: 13px;
}

/*
---
name: セレクトフォーム
tag:
  - part
category:
  - service
---

```jade
div
  label.select_form
    .select_form_decorate
      select.select_form_body.no_select
        option(disabled selected).select_form_option.placeholder 選択してください
        option.select_form_option 選択肢1
        option.select_form_option 選択肢2
        option.select_form_option 選択肢3
        option.select_form_option 選択肢4
div
  label.select_form
    span.select_form_prefix プレフィックス
    .select_form_decorate
      select.select_form_body.no_select
        option(disabled selected).select_form_option.placeholder 選択してください
        option.select_form_option 選択肢1
        option.select_form_option 選択肢2
        option.select_form_option 選択肢3
        option.select_form_option 選択肢4
    span.select_form_suffix サフィックス

p ※option.placeholder以外を選択するとselect要素から.no_selectを削除します。
```
*/
.select_form_decorate {
  position: relative;
  display: inline-block;
  height: 54px;
}
.select_form_decorate:before {
  position: absolute;
  z-index: 1; 
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  content: '';
  pointer-events: none;
  border-left: 1px solid #d1d1d1;
}
.select_form_decorate:after {
  position: absolute;
  top: 20px;
  right: 23px;
  width: 10px;
  height: 10px;
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  pointer-events: none; 
  border-right: 2px solid #d1d1d1;
  border-bottom: 2px solid #d1d1d1;
}

.select_form_body {
  position: relative;
  height: 54px;
  margin: 0;
  padding: 0 67px 0 13px;
  border: 1px solid #d1d1d1;
  border-radius: 0;
  background-color: #fff;
  font-size: 1.4rem;

  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.select_form_body.no_select {
  color: #a5a5a5;
}

.select_form_option {
  color: #333;
}
.select_form_option:checked {
  color: #a5a5a5;
}
.select_form_option.placeholder {
  display: none;
}

.select_form_prefix {
  padding-right: 13px;
}

.select_form_suffix {
  padding-left: 13px;
}

/*
---
name: 汎用タイトル
tag:
  - typography
category:
  - service
---

```jade
h1.content_title_main h1 タイトル
h2.content_title_sub h2 タイトル
h3.content_title_third h3 タイトル
h4.content_title_fourth h4 タイトル
h4.content_title_border h4 ボーダー付きタイトル
```
*/
.content_title_main {
  margin-top: 9px;
  margin-bottom: 30px; 
  font-size: 3.4rem;
  font-weight: 700;
}

.content_title_sub {
  margin-bottom: 50px; 
  padding: 0 12px;
  border-left: 6px solid #db0016;
  background-color: #f5f5f5;
  font-size: 2.2rem;
  font-weight: 500;
}

.content_title_third {
  margin-bottom: 25px;
  padding-left: 11px;
  border-left: 6px solid #a5a5a5;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
}

.content_title_fourth {
  margin-bottom: 9px;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
}

.content_title_border {
  margin-bottom: 18px;
  padding-bottom: 6px;
  border-bottom: 1px solid #a5a5a5; 
  font-size: 1.4rem;
  font-weight: 700;
}

.news_title {
  margin-bottom: 27px;
  padding-left: 12px;
  border-left: 6px solid #db0016;
  font-size: 2.0rem;
  line-height: 1;
}

.news_list {
  border-top: 1px solid #d1d1d1;
}
.news_list .list {
  width: 100%;
  border-bottom: 1px solid #d1d1d1;
}
.news_list .list a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  height: 52px;
  padding: 10px 60px 10px 10px; 
  line-height: 1.3;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.news_list .list a:hover {
  text-decoration: none;
}
.news_list .list a:hover .text {
  text-decoration: underline;
}
.news_list .list a:after {
  position: absolute;
  top: 50%;
  right: 8px; 
  display: block;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-width: 0;
  border-style: solid;
  border-color: #333;
  border-top-width: 2px;
  border-right-width: 2px;
}
.news_list .list .external_anchor {
  background-image: none;
}
.news_list .list .external_anchor:before {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 11px;
  height: 8px;
  margin-top: -4px;
  content: '';
  background-image: url(/img/share/ico-window.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}
.news_list .list .external_anchor:after {
  display: none;
}
.news_list .list .no_link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  height: 52px;
  padding: 10px; 
  line-height: 1.3;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.news_list .list .date,
.news_list .list .text {
  display: inline-block;
}
.news_list .list .date {
  float: left;
  min-width: 92px;
  color: #999;
}
.news_list .list .text {
  min-width: 1px; 
  word-wrap: break-word;

  overflow-wrap: break-word;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.news_list .list .label {
  display: inline-block;
  min-width: 48px;
  margin-right: 17px;
  padding: 0 12px;
  text-decoration: none; 
  color: #fff;
  border-radius: 4px;
  font-size: 1.2rem;
  line-height: 20px;
}
.news_list .list .label_important {
  background-color: #db0016;
}
.news_list .list .label_new {
  background-color: #f3ab00;
}

.news_archive {
  display: none;
}

/*
---
name: パネルボタン ナビゲーション
tag:
  - block
category:
  - service
---

```jade
.panel_nav
  ul.panel_nav_list
    li.panel_nav_item.btn_panel
      a.panel_nav_anchor(href="/first/credit/scene/case1/")
        span.panel_nav_text ネットショッピングはクレジットカードで!
    li.panel_nav_item.btn_panel
      a.panel_nav_anchor(href="/first/credit/scene/case2/")
        span.panel_nav_text コンビニでもクレジットカードを!!
    li.panel_nav_item.btn_panel
      a.panel_nav_anchor(href="/first/credit/scene/case3/")
        span.panel_nav_text スマホ代金もクレジットカードで!!
    li.panel_nav_item.btn_panel
      a.panel_nav_anchor(href="/first/credit/scene/case4/")
        span.panel_nav_text タクシーもクレジットカードで!
    li.panel_nav_item.btn_panel
      a.panel_nav_anchor(href="/first/credit/scene/case5/")
        span.panel_nav_text 旅行先でもクレジットカードで便利に!!
    li.panel_nav_item.btn_panel
      a.panel_nav_anchor(href="/use/overseas/case1/")
        span.panel_nav_text クレジットカードで海外旅行を満喫！
```
*/
/* パネルボタン ナビゲーション
-----------------------------------*/
.panel_nav {
  width: 100%;
  padding: 35px 30px 40px; 
  background-color: #f2f2f2;
}
.panel_nav_list {
  width: 100%;
  border-left: 1px solid #d1d1d1;
}
.panel_nav_list:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.panel_nav_item {
  float: left; 
  width: 370px;
  height: 58px;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
}
.panel_nav_item:nth-child(-n+2) {
  border-top: 1px solid #d1d1d1;
}

/*
---
name: サムネイル画像パネルボタン
tag:
  - block
category:
  - service
---

```jade
ul.content_panel_btn_block
  li.content_panel_btn_item.btn_panel
    a.content_panel_btn_anchor(href="/lineup/cardloan/")
      span.content_panel_btn_img_block
        img.content_panel_btn_img(src="/img/share/img-card_loan.jpg", width="257", height="157", alt="カードローン")
      span.content_panel_btn_text カードローン
  li.content_panel_btn_item.btn_panel.btn_panel
    a.content_panel_btn_anchor(href="/lineup/credit/")
      span.content_panel_btn_img_block
        img.content_panel_btn_img(src="/img/share/img-credit_card.jpg", width="257", height="157", alt="クレジットカード")
      span.content_panel_btn_text クレジットカード
```
*/
.btn_panel {
  display: inline-block;
}
.btn_panel.type_square {
  width: 267px;
  height: 223px;
}
.btn_panel.type_rect {
  width: 368px;
  height: 60px;
}
.btn_panel a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #fff; 
  font-size: 1.8rem;
  font-weight: 500;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.btn_panel a:before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: border 0.1s cubic-bezier(0.42, 0, 0.58, 1);
          transition: border 0.1s cubic-bezier(0.42, 0, 0.58, 1); 
  border: 0 solid #db0016;
}
.btn_panel a:after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: block;
  width: 0;
  height: 0;
  content: '';
  border-bottom: 10px solid #d1d1d1; 
  border-left: 10px solid transparent;
}
.btn_panel a:hover {
  text-decoration: none;
}
.btn_panel a:hover:before {
  border-width: 4px;
}
.btn_panel a:hover:after {
  opacity: 0;
}
.btn_panel_sub a:after {
  border-bottom: 10px solid #d1d1d1;
}

.panel_block {
  width: 100%;
  padding: 20px 0 30px; 
  text-align: center;
  background: #f2f2f2;
}
.panel_block .title {
  margin-bottom: 20px; 
  font-size: 1.8rem;
  font-weight: 700;
}

/* サムネイル画像パネルボタン
------------------------------------*/
.content_panel_btn_block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  width: 533px;
  margin-top: 47px;
  margin-bottom: 50px;
  border: 1px solid #d1d1d1;
  background-color: #d1d1d1;

  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
          justify-content: space-between;
}

.content_panel_btn_item {
  -webkit-flex-basis: 265px;
  -ms-flex-preferred-size: 265px;
          flex-basis: 265px;
}

.content_panel_btn_img_block {
  display: block;
  width: 100%;
  padding: 4px;
}

.content_panel_btn_img {
  width: 100%;
}

.content_panel_btn_text {
  display: block;
  padding: 12px 0;
  text-align: center;
}

a.content_panel_btn_anchor {
  display: block;
}

/*
---
name: パーソナライズ セグメント
tag:
  - block
category:
  - service
---

原則 `personalizePanel` mixin を使用する。
with mixin
```jade 
+personalizePanel('未行動')
``` 

```jade
.personalize_panel
  .personalize_panel_top
    .personalize_column.grid_panel
      .personalize_btn.btn_panel.panel_apply
        a(href="/first/apply").personalize_btn_anchor.btn_anchor
          span.personalize_btn_icon ICON
          span.personalize_btn_text お申し込み
      .personalize_btn.btn_panel.panel_3sec
        a(href="/first/3sec/").personalize_btn_anchor.btn_anchor
          span.personalize_btn_icon ICON
          span.personalize_btn_text 3秒診断

    .personalize_column.col_panel
      .personalize_btn.btn_panel.btn_panel_sub
        a(href="#").personalize_btn_anchor.btn_anchor
          span.personalize_btn_text はじめてのアコム

  .personalize_panel_bottom
    h3.personalize_panel_title お客さまの疑問にお答えします。
    .personalize_column.col_panel
      .personalize_btn_col.btn_panel.btn_panel_sub
        a(href="#").personalize_btn_anchor.btn_anchor
          span.personalize_btn_text 商品・サービスに関するご質問
      .personalize_btn_col.btn_panel.btn_panel_sub
        a(href="#").personalize_btn_anchor.btn_anchor
          span.personalize_btn_text よくあるご質問
```
*/
.personalize_panel {
  padding: 35px 40px 40px 40px; 
  border-top: 5px solid #dc2334;
  background: #f2f2f2;
}
.personalize_panel .btn_panel {
  position: relative;
  min-width: 1px; 
  border-top: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
}
.personalize_panel .btn_panel:first-child:after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100%;
  content: '';
  border-left: 1px solid #d1d1d1;
}
.personalize_panel .btn_wrapper .btn_panel {
  display: block;
}
.personalize_panel .btn_wrapper .btn_panel:first-child:after {
  display: none;
}
.personalize_panel .btn_wrapper .btn_panel .btn_anchor {
  height: 59px;
}
.personalize_panel_top {
  border-bottom: 1px solid #d1d1d1;
}
.personalize_panel_top .btn_panel,
.personalize_panel_top .btn_wrapper {
  -webkit-flex-basis: 359px;
  -ms-flex-preferred-size: 359px;
          flex-basis: 359px;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
          flex-grow: 1;
}
.personalize_panel_top .btn_anchor {
  height: 59px;
}
.personalize_panel_bottom {
  margin-top: 45px;
}
.personalize_panel_bottom .btn_panel {
  border-bottom: 1px solid #d1d1d1; 

  -webkit-flex-basis: 239px;
  -ms-flex-preferred-size: 239px;
          flex-basis: 239px;
}
.personalize_panel_bottom .btn_anchor {
  height: 78px;
}
.personalize_panel_title {
  margin-bottom: 19px; 
  text-align: center;
  font-size: 1.8rem;
}

.personalize_column {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
}
.personalize_column.grid_panel {
  border-bottom: none;
  /* お申し込みパネルボタン */
  /* 3秒診断パネルボタン */
  /* 会員ログインパネルボタン */
  /* 各種お問い合わせパネルボタン */
  /* アイコンなしパネルボタン */
}
.personalize_column.grid_panel .btn_panel {
  border-bottom: none;
}
.personalize_column.grid_panel .panel_apply .btn_anchor .personalize_btn_icon_img {
  fill: #dc2334;
}
.personalize_column.grid_panel .panel_apply .btn_anchor:after {
  border-bottom-color: #dc2334;
}
.personalize_column.grid_panel .panel_3sec .btn_anchor .personalize_btn_icon_img {
  fill: #ff91a1;
}
.personalize_column.grid_panel .panel_3sec .btn_anchor:after {
  border-bottom-color: #ff91a1;
}
.personalize_column.grid_panel .panel_hurry .btn_anchor .personalize_btn_icon_img {
  fill: #787878;
}
.personalize_column.grid_panel .panel_hurry .btn_anchor:after {
  border-bottom-color: #787878;
}
.personalize_column.grid_panel .panel_login .btn_anchor .personalize_btn_icon_img {
  fill: #f3ab00;
}
.personalize_column.grid_panel .panel_login .btn_anchor:after {
  border-bottom-color: #f3ab00;
}
.personalize_column.grid_panel .panel_tel .btn_anchor .personalize_btn_icon_img {
  fill: #a5a5a5;
}
.personalize_column.grid_panel .panel_tel .btn_anchor:after {
  border-bottom-color: #a5a5a5;
}
.personalize_column.grid_panel .panel_text .btn_anchor:after {
  border-bottom-color: #d1d1d1;
}
.personalize_column.grid_panel .btn_anchor {
          flex-direction: column;
  height: 119px; 

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
}
.personalize_column.large .btn_anchor {
  height: 179px;
}
.personalize_column.large .btn_anchor .personalize_btn_icon {
  margin-bottom: 10px;
}

.personalize_btn_icon_img {
  width: 48px;
  height: 48px;
  margin-top: 6px;
}

.personalize_btn_anchor {
  padding: 0 20px;
}

.personalize_btn_text {
  min-width: 1px;
  max-width: 100%;
  text-align: center;
  line-height: 1.3;
}

/* 1カラムブロック　*/
.personalize_block {
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
  .personalize_panel_top .personalize_block .btn_panel, .personalize_panel_top .personalize_block .btn_wrapper {
  -webkit-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.personalize_block .personalize_btn_anchor{
  height:65px;
}
.personalize_block .personalize_btn_icon{
  margin-right:10px;
}
.personalize_block .personalize_btn_icon_img{
  margin-top:0;
}
.personalize_block .panel_tel .btn_anchor .personalize_btn_icon_img {
  fill: #a5a5a5;
}
.personalize_block .panel_apply .btn_anchor .personalize_btn_icon_img {
  fill: #dc2334;
}
.personalize_block .panel_apply .btn_anchor:after {
  border-bottom-color: #dc2334;
}
.personalize_block .panel_3sec .btn_anchor .personalize_btn_icon_img {
  fill: #ff91a1;
}
.personalize_block .panel_3sec .btn_anchor:after {
  border-bottom-color: #ff91a1;
}
.personalize_block .panel_hurry .btn_anchor .personalize_btn_icon_img {
  fill: #787878;
}
.personalize_block .panel_hurry .btn_anchor:after {
  border-bottom-color: #787878;
}
.personalize_block .panel_login .btn_anchor .personalize_btn_icon_img {
  fill: #f3ab00;
}
.personalize_block .panel_login .btn_anchor:after {
  border-bottom-color: #f3ab00;
}
.personalize_block .panel_tel .btn_anchor .personalize_btn_icon_img {
  fill: #a5a5a5;
}
.personalize_block .panel_tel .btn_anchor:after {
  border-bottom-color: #a5a5a5;
}
.personalize_block .panel_text .btn_anchor:after {
  border-bottom-color: #d1d1d1;
}



/*
---
name: 電話番号ブロック
tag:
  - block
category:
  - service
---

```jade
.phone_block
  dl.phone_block_main
    dt.phone_block_title アコム総合カードローンデスク
    dd.phone_block_number
      a.phone_block_number_anchor.tel_for_sp(href="tel:0120-629-215")
        img.phone_block_number_text(src="/img/share/txt-phone_total_desk_number.png", width="313", height="301", alt="0120-629-215")
  p.phone_block_notice
    | 担当者受付時間外(18:00 ～ 翌 9:00)の間にお電話された場合は、
    br.phone_block_notice_pc_break
    | 音声ガイダンスが流れますので、はじめてのお客さま「1」を押してください。
```
*/
/*
---
name: 電話番号ブロック プレーンテキストタイプ
tag:
  - block
category:
  - service
---
- 0120-91-7245
- 0120-134-567
- 0120-629-215
- 0120-07-1000
- 03-3537-2366

上記の電話番号以外はプレーンテキストを使用します。

```jade
.phone_block
  dl.phone_block_main
    dt.phone_block_title 女性専用ダイヤル
    dd.phone_block_number_text
      a.phone_block_number_anchor.tel_for_sp(href="tel:0120-39-9197") 0120-39-9197
```
*/
/* 電話番号 通常タイプ
-----------------------------------*/
.phone_block {
  width: 557px;
  margin: 40px auto 48px;
  padding: 40px 0;
  text-align: center;
  border: 1px solid #d1d1d1;
  background: #fff;
}
.phone_block_main {
  font-weight: 700;
}
.phone_block_title {
  margin-bottom: 20px; 
  font-size: 1.8rem;
}
.phone_block_number {
  margin-bottom: 25px;
}
.phone_block_number_text,
.phone_block_b_number_text {
  color: #db0016;
  font-family: Arial, 'Noto Sans Japanese', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, '游ゴシック', YuGothic, sans-serif;
  font-size: 5.6rem;
  line-height: 1;
}
.phone_block_notice {
  font-size: 1.3rem;
  font-weight: 700;
}

/*
---
name: 電話番号ブロック お問い合せ窓口
tag:
  - block
category:
  - service
---

```jade
.phone_block_b
  dl.phone_block_b_main
    dt.phone_block_b_title お問い合せ窓口
    dd.phone_block_b_text
      p
        | 既にアコムカードをお持ちのお客さま、以前ご利用のあったお客さまは、
        br
        | フリーコールまでお電話ください。
      dl.phone_block_b_number_info
        dt.phone_block_b_number_name アコム総合カードローンデスク
        dd.phone_block_b_number
          a.phone_block_b_number_anchor.tel_for_sp(href="tel:0120-629-215")
            img.phone_block_b_number_text(src="/img/share/txt-phone_total_desk_number.png", width="313", height="301", alt="0120-629-215")
  p.phone_block_b_notice 受付時間：平日9:00～18:00
```
*/
/* 電話番号B お問い合せ窓口タイプ
-----------------------------------*/
.phone_block_b {
  width: 557px;
  margin: 50px auto 48px;
  padding: 0 0 27px;
  text-align: center;
  border: 1px solid #d1d1d1;
  background: #fff;
}
.phone_block_b_title,
.phone_block_column_2_title {
  margin-bottom: 20px;
  padding: 15px 0; 
  background-color: #f2f2f2;
  font-size: 1.8rem;
  font-weight: 700;
}
.phone_block_b_text {
  font-size: 1.3rem;
  line-height: 1.5;
}
.phone_block_b_text p {
  margin-bottom: 10px;
}
.phone_block_b_number_info {
  margin-top: 10px;
}
.phone_block_b_number_name,
.phone_block_column_2_name {
  margin-bottom: 10px; 
  font-size: 1.8rem;
  font-weight: 700;
}
.phone_block_b_number {
  margin: 10px auto 15px;
}
.phone_block_b_number img {
  width: 250px;
}
.phone_block_b_number_text {
  font-weight: 700;
}
.phone_block_b_notice {
  font-size: 1.3rem;
  font-weight: 700;
}
.phone_block_b_sp_break {
  display: none;
}

/*
---
name: 電話番号ブロック 2カラムレイアウト
tag:
  - block
category:
  - service
---

```jade
.phone_block_column_2
  dl.phone_block_column_2_inner
    dt.phone_block_column_2_title お問い合せ窓口
    dd.phone_block_column_2_block
      .phone_block_column_2_left
        p.phone_block_column_2_name はじめてのお客さま
        .phone_block_column_2_number
          a.phone_block_column_2_number_anchor.tel_for_sp(href="tel:0120-07-1000")
            img(src="/img/share/txt-phone_first_customer_number.png", width="504", height="62", alt="0120-07-1000")
      .phone_block_column_2_right
        p.phone_block_column_2_name アコム総合カードローンデスク
        .phone_block_column_2_number
          a.phone_block_column_2_number_anchor.tel_for_sp(href="tel:0120-629-215")
            img(src="/img/share/txt-phone_total_desk_number.png", width="313", height="301", alt="0120-629-215")
          span.phone_block_column_2_caption 受付時間：平日9:00～18:00
```
*/
/* 電話番号　2カラムレイアウト
 * PC 2 column -> SP 1 column
-----------------------------------*/
.phone_block_column_2 {
  width: 100%;
  margin-top: 50px;
  border: 1px solid #d1d1d1;
}
.phone_block_column_2_title {
  margin-bottom: 30px; 
  text-align: center;
}
.phone_block_column_2_inner {
  margin-bottom: 30px;
}
.phone_block_column_2_block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex; 
  width: 100%;
}
.phone_block_column_2_left,
.phone_block_column_2_right {
  width: -webkit-calc(50% - 1px);
  width:         calc(50% - 1px); 
  padding-top: 12px;
  text-align: center;
}
.phone_block_column_2_left {
  border-right: 1px solid #d1d1d1;
}
.phone_block_column_2_number {
  width: 250px;
  margin: 11px auto 12px;
}
.phone_block_column_2_caption {
  display: inline-block;
  margin-top: 10px;
  font-size: 1.5rem;
  font-weight: 700;
}

/* ポイントアイコン リスト
-----------------------------------*/
/*
---
name: ポイントアイコン リスト
tag:
  - block
category:
  - service
---

リストアイコン画像は6ポイントまであります。

```jade
ol.point_list
  li.point_item
    .point_item_icon
      img.point_item_icon_img(src="/img/share/ico-point_1.png", width="80", hegiht="80", alt="POINT 1")
    dl.point_item_block
      dt.point_item_title
        span.point_item_sp_icon ポイント1 タイトル
      dd.point_item_detail
        p.point_item_text ポイントテキストが入ります。ポイントテキストが入ります。ポイントテキストが入ります。ポイントテキストが入ります。
  li.point_item
    .point_item_icon
      img.point_item_icon_img(src="/img/share/ico-point_2.png", width="80", hegiht="80", alt="POINT 2")
    dl.point_item_block
      dt.point_item_title
        span.point_item_sp_icon.point_icon_2 ポイント2 タイトル
      dd.point_item_detail
        p.point_item_text ポイントテキストが入ります。ポイントテキストが入ります。ポイントテキストが入ります。ポイントテキストが入ります。
  li.point_item
    .point_item_icon
      img.point_item_icon_img(src="/img/share/ico-point_3.png", width="80", hegiht="80", alt="POINT 3")
    dl.point_item_block
      dt.point_item_title
        span.point_item_sp_icon.point_icon_3 ポイント3 タイトル
      dd.point_item_detail
        p.point_item_text ポイントテキストが入ります。ポイントテキストが入ります。ポイントテキストが入ります。ポイントテキストが入ります。
  li.point_item
    .point_item_icon
      img.point_item_icon_img(src="/img/share/ico-point_4.png", width="80", hegiht="80", alt="POINT 4")
    dl.point_item_block
      dt.point_item_title
        span.point_item_sp_icon.point_icon_4 ポイント4 タイトル
      dd.point_item_detail
        p.point_item_text ポイントテキストが入ります。ポイントテキストが入ります。ポイントテキストが入ります。ポイントテキストが入ります。
```
*/
.point_list {
  margin-bottom: 20px;
}

.point_item {
  margin-bottom: 30px;
}
.point_item:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.point_item_icon {
  float: left; 
  width: 80px;
}
.point_item_block {
  margin-left: 94px; 
  padding-top: 20px;
}
.point_item_title {
  font-size: 2.0rem;
  font-weight: 700;
}
.point_item_text_caption {
  display: block;
  margin-top: 6px;
  font-size: 1.3rem;
}
.point_item_text:not(:first-child) {
  margin-top: 20px;
}
.point_item_btn {
  margin: 30px 0 0;
}
.point_item_btn_anchor {
  padding: 0 38px;
}
.point_item_btn.btn_md {
  width: 316px;
}

/*
---
name: 関連情報
tag:
  - block
category:
  - service
---

原則 `contentsRelatedInfo` mixin を使用する。

```jade
.related_info_panel
  h4.related_info_title 関連情報
  .related_info_column
    .related_info_btn.btn_panel.btn_panel_sub
      a(href="/members/information/certificatehowto/").related_info_btn_anchor.btn_anchor
        span.related_info_btn_text 収入証明書のご提出方法
    .related_info_btn.btn_panel.btn_panel_sub
      a(href="/members/information/transfer/").related_info_btn_anchor.btn_anchor
        span.related_info_btn_text お振り込み先銀行口座について
    .related_info_btn.btn_panel.btn_panel_sub.related_info_external
      a(href="#" target="_blank").related_info_btn_anchor.btn_anchor
        span.related_info_btn_text 店舗・ATM検索
```
*/
/*  下層ページ 関連情報
----------------------------------------*/
.related_info_panel {
  margin: 80px 0 60px 0; 
  padding: 35px 30px 40px 30px;
  text-align: center;
  border-top: 5px solid #f3ab00;
  background: #f2f2f2;
}
.related_info_panel .btn_panel {
  position: relative;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
}
.related_info_panel .btn_panel:first-child:after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100%; 
  content: '';
}
.related_info_panel .btn_anchor {
  height: 58px; 
  padding: 0 35px;
}
.related_info_panel .btn_anchor_3line{
  height: 85px; 
  padding: 0 35px;
}

.related_info_panel .btn_anchor_three{
  height: 85px;
  padding: 0 35px;
}

.related_info_panel .btn_anchor:after {
  border-bottom-color: #f9d57f;
}

.related_info_column {
  display: inline-block;
  max-width: 741px; 
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #d1d1d1;
  border-left: 1px solid #d1d1d1;
  font-size: 0;
}

.related_info_title {
  margin-bottom: 25px; 
  text-align: center;
  font-size: 1.8rem;
}

.related_info_btn {
  display: inline-block;
  width: 370px;
  vertical-align: top;
}
.related_info_btn_text {
  min-width: 1px;
  line-height: 1.3;
}

.related_info_external .related_info_btn_text::after {
  position: relative;
  top: -2px;
  display: inline-block;
  margin-left: 10px; 
  content: url(/img/share/ico-window.png);
}

.segment {
  /* よくあるご質問
  -----------------*/
  /* よくあるご質問 メガメニュー
  -----------------*/
  /* PC, SP 出し分け要素
  -----------------*/
  /* SVG アイコン
  --------------------*/
}
.segment_personalize_top {
  position: absolute;
  top: 0;
  left: 0;
  width: 329px;
  padding: 15px 20px 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.09);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.09);
  /* SVG アイコン
    --------------------*/
}
.segment_personalize_top .btn_lrg.type_app .btn {
  padding: 0 20px 0 59px; 
  font-size: 2.4rem;
}
.segment_personalize_top .btn_lrg.type_app .btn_inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.segment_personalize_top .btn_lrg.type_app .icon .apply {
  width: 40px;
  height: 40px;
  margin-right: 4px;
}
.segment_personalize_top .btn_lrg.type_check {
  margin-bottom: 19px;
}
.segment_personalize_top .btn_lrg.type_check .btn {
  height: 50px; 
  font-size: 2.4rem;
}
.segment_personalize_top .btn_lrg.type_check .btn_inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.segment_personalize_top .btn_lrg.type_check .icon .check3sec {
  width: 30px;
  height: 30px;
  margin-right: 4px;
}
.segment_personalize_top .btn_lrg.type_check .small {
  display: none;
}
.segment_personalize_top .btn_lrg.type_member {
  margin-bottom: 19px;
}
.segment_personalize_top .btn_lrg.type_member .btn {
  height: 50px; 
  font-size: 2.2rem;
}
.segment_personalize_top .btn_lrg.type_member .btn_inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.segment_personalize_top .btn_lrg.type_member .icon .login {
  width: 35px;
  height: 35px;
}
.segment_personalize_dropdown {
  position: absolute;
  top: 10px;
  left: 100%;
  overflow: hidden;
  width: 782px;
  margin-left: 10px;
  -webkit-transition: height 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98);
          transition: height 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98); 
  border-radius: 4px;
  background-color: #fff;
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.09);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.09);
}
.segment_personalize_dropdown[aria-hidden='true'] {
  display: none;
}
.segment_personalize_dropdown_close {
  position: absolute;
  top: 16px;
  right: 20px;
  padding: 0;
  border-width: 0;
  background-color: transparent;
  font-weight: bold;
}
.segment_personalize_dropdown_close_icon {
  position: relative;
  display: inline-block;
  width: 12px;
  width: 10px;
  height: 12px;
  height: 10px; 
  margin-right: 10px;
}
.segment_personalize_dropdown_close_icon::before,
.segment_personalize_dropdown_close_icon::after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 12px;
  height: 2px;
  margin-top: -1px;
  content: '';
  background-color: currentColor;
}
.segment_personalize_dropdown_close_icon::before {
  -webkit-transform: rotateZ(45deg);
      -ms-transform: rotate(45deg);
          transform: rotateZ(45deg);
}
.segment_personalize_dropdown_close_icon::after {
  -webkit-transform: rotateZ(135deg);
      -ms-transform: rotate(135deg);
          transform: rotateZ(135deg);
}
.segment_inner {
  padding-bottom: 6px;
}
.segment_title {
  margin-bottom: 11px; 
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
}
.segment_first_persons {
  display: inline-block;
  background-size: 16px auto;
}
.segment_container {
  margin-bottom: 10px;
}
.segment_container .type_app .btn {
  height: 64px;
}
.segment_column {
  width: 100%;
}
.segment_column:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.segment_column .btn_md {
  float: right; 
  width: 140px;
}
.segment_column .btn_md:first-child {
  float: left;
}
.segment_column .btn_md .btn {
  height: 40px; 
  padding: 0;
  font-size: 1.4rem;
  font-weight: 700;
}
.segment_faq {
  width: 100%;
  margin-bottom: 5px; 
  padding: 11px 0 13px;
  border: 1px solid #d1d1d1;
  background-color: #fff;
}
.segment_faq_title {
  margin-bottom: 4px; 
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
}
.segment_faq_item {
  margin-bottom: 4px;
}
.segment_faq_item a {
  position: relative; 
  display: block;
  padding-right: 16px;
  padding-left: 29px;
}
.segment_faq_item a[aria-selected='true'] {
  background-color: #f2f2f2;
}
.segment_faq_item a[aria-selected='true']::before {
  border-left-color: currentColor;
}
.segment_faq_item a::before {
  position: absolute;
  top: 50%;
  left: 16px;
  display: block;
  width: 0;
  height: 0;
  margin-top: -1.5px;
  content: '';
  border: 3px solid transparent;
  border-left-color: #9f9f9f;
}
.segment_faq_dropdown[aria-hidden='true'] {
  display: none;
}
.segment_faq_dropdown_title {
  margin-bottom: 20px;
  padding: 30px 40px 0;
  font-size: 1.5rem;
  font-weight: bold;
}
.segment_faq_dropdown_list {
  margin-bottom: 17px; 
  padding: 0 40px;
}
.segment_faq_dropdown_item {
  border-bottom: 1px solid #d1d1d1;
}
.segment_faq_dropdown_item:first-child {
  border-top: 1px solid #d1d1d1;
}
.segment_faq_dropdown_anchor {
  position: relative;
  display: block;
  padding: 8px;
  line-height: 1.6;
}
.segment_faq_dropdown_anchor::after {
  position: absolute;
  top: 50%;
  right: 5px;
  display: block;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  margin-top: -4px; 
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
  border-top-width: 2px;
  border-right-width: 2px;
}
.segment_faq_dropdown_more {
  padding-bottom: 20px;
  text-align: center;
}
.segment_faq_dropdown_more_btn {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display:         inline-flex;
  width: auto;
  padding: 7px 35px;
  -webkit-transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
          transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98); 
  border: 1px solid #bbb;
  border-bottom-width: 2px;
  border-radius: 6px;
  font-weight: bold;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.segment_faq_dropdown_more_btn:hover {
  text-decoration: none; 
  opacity: 0.5;
}
.segment_section_sp {
  display: none;
}
.segment_img {
  fill: #fff;
}
.segment_img_3sec {
  width: 36px;
  height: 36px;
  margin-right: 5px;
}
.segment_img_login {
  width: 30px;
  height: 30px;
  margin-right: 3px;
}

.search_form_wrapper {
  margin-top: 40px;
  padding: 40px 0 50px;
  background-color: #f2f2f2;
}

.search_form {
  position: relative;
  z-index: 2; 
  margin-top: 0;
}
.search_form_input,
.search_form_submit_btn.btn {
  height: 50px;
  padding-right: 20px;
  padding-left: 20px;
  font-size: 1.8rem;
}
.search_form_input {
  display: inline-block;
  width: 680px;
  vertical-align: middle; 
  border-width: 0;
  border-radius: 4px;
}
.search_form_submit {
  display: inline-block;
  width: 114px;
  margin-left: 7px;
  vertical-align: middle;
}
.search_form_submit_btn.btn {
  display: inline;
}

.search_status_wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  margin-top: 80px; 

  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}

.pbox-count-selector {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
          order: 2;
}

.pbox-search-status {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
          order: 1;
}

.search_not_found {
  display: none;
}

.search_hint {
  margin-top: 36px;
  margin-bottom: 0;
  line-height: 2;
}

.search_suggestion {
  margin-top: 44px;
  text-align: center;
}

/*
---
name: ステップオーダーリスト
tag:
  - block
  - layout
category:
  - service
---
「STEP」リボン画像内のテキストはページ毎に異なるため、ページに合わせて画像を切り出してください。


```jade
ol.step_order_list
  li.step_order_block
    dl.step_order_block_inner
      dt.step_order_title
        span.step_order_title_icon
          img.step_order_title_icon_img_pc(src="/aigis_assets/img/components/step_order_list/ico-step_1.png", width="153", hegiht="145", alt="STEP01 お申し込み")
          img.step_order_title_icon_img_sp(src="/aigis_assets/img/components/step_order_list/sp/ico-step_1.png", width="583", hegiht="238", alt="STEP01 お申し込み")
      dd.step_order_detail
        dl.step_order_detail_block
          dt.step_order_detail_title ステップ1 見出しタイトル
          dd.step_order_detail_column
            p テキストテキストテキストテキストテキストテキストテキストテキストテキスト
  li.step_order_block
    dl.step_order_block_inner
      dt.step_order_title
        span.step_order_title_icon
          img.step_order_title_icon_img_pc(src="/aigis_assets/img/components/step_order_list/ico-step_2.png", width="153", hegiht="156", alt="STEP02 書類の提出(本人確認)")
          img.step_order_title_icon_img_sp(src="/aigis_assets/img/components/step_order_list/sp/ico-step_2.png", width="583", hegiht="278", alt="STEP02 書類の提出(本人確認)")
      dd.step_order_detail
        dl.step_order_detail_block
          dt.step_order_detail_title ステップ2 見出しタイトル1
          dd.step_order_detail_column
            p テキストテキストテキストテキストテキストテキストテキストテキストテキスト
      dd.step_order_detail
        dl.step_order_detail_block
          dt.step_order_detail_title ステップ2 見出しタイトル2
          dd.step_order_detail_column
            p テキストテキストテキストテキストテキストテキストテキストテキストテキスト
    li.step_order_block
      dl.step_order_block_inner
        dt.step_order_title
          span.step_order_title_icon
            img.step_order_title_icon_img_pc(src="/aigis_assets/img/components/step_order_list/ico-step_3.png", width="153", hegiht="145", alt="STEP03 審査完了")
            img.step_order_title_icon_img_sp(src="/aigis_assets/img/components/step_order_list/sp/ico-step_3.png", width="583", hegiht="238", alt="STEP03 審査完了")
        dd.step_order_detail
          dl.step_order_detail_block
            dt.step_order_detail_title ステップ3 見出しタイトル
            dd.step_order_detail_column
              p テキストテキストテキストテキストテキストテキストテキストテキストテキスト
```
*/
/* ステップオーダーリスト
-----------------------------------*/
.step_order {
  /* リスト全体
   * ------------------------------*/
  /* リストブロック
   * ------------------------------*/
  /* リストブロック 見出しタイトル
   * ------------------------------*/
  /* リストブロック 詳細エリア
   * ------------------------------*/
  /* サイドバーなしの時
  ----------------------------------------*/
}
.step_order_list {
  width: 100%;
}
.step_order_block {
  position: relative;
  min-height: 150px;
  margin-top: 54px; 
  padding: 45px 30px;
  background: #f7f7f7;
}
.step_order_block_inner:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.step_order_title {
  position: absolute;
  top: -5px;
  left: 20px;
}
.step_order_title_icon {
  display: block;
}
.step_order_title_icon_img_sp {
  display: none;
}
.step_order_detail {
  float: right;
  width: 558px;
  /* リストブロック 詳細タイトル
     * ----------------------------*/
  /* リストブロック 詳細内容
     * ----------------------------*/
}
.step_order_detail:not(:first-of-type) {
  margin-top: 30px;
}
.step_order_detail_title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
}
.step_order_detail_column {
  width: 100%;
}
.step_order_detail_column:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.step_order_detail_part_text {
  margin-bottom: 16px;
}
.step_order_detail_part_btn {
  display: inline-block;
  width: auto;
  margin-right: 6px;
}
.step_order_detail_part_btn .login {
  width: 35px;
  height: 35px;
  margin-right: 3px; 

  fill: #fff;
}
.step_order_detail_part_list {
  margin-bottom: 23px;
}
.step_order_text {
  margin-top: 22px;
}
.step_order_phone {
  width: 100%;
  margin: 20px auto 0;
  padding: 24px 0 25px;
  text-align: center;
  background: #fff;
}
.step_order_phone_main {
  font-weight: 700;
}
.step_order_phone_title {
  margin-bottom: 7px; 
  font-size: 1.8rem;
}
.step_order_phone_number img {
  width: 249px;
}
.content_no_sidenav .step_order_detail {
  width: 801px;
}

/*
---
name: テーブル 1 カラム
tag:
  - table
category:
  - service
---

文字揃えを調整するためのスタイルとして、`.table_layout_left`, `.table_layout_center`, `.table_layout_right`, `.table_layout_top`, `.table_layout_middle`, `.table_layout_bottom` があります。

```jade
-
  const table = [
    {title: 'ご融資額', text: '1万円～800万円', link: '#'},
    {title: '必要書類', text: '運転免許証（交付を受けていない方は健康保険証等）', caption: '※お借入総額により収入証明書（源泉徴収票等）が必要'}
  ]
table.table_layout
  tbody.table_layout_body
    each value in table
      tr.table_layout_row
        th.table_layout_headline= value.title
        td.table_layout_detail
          if value.link
            a.table_layout_detail_anchor(href=value.link)= value.text
          else
            = value.text
          span.table_layout_detail_caption.caption= value.caption
```
*/
.table_layout_headline,
.table_2_layout_headline,
.table_layout_detail,
.table_2_layout_detail {
  padding: 9px 19px;
  vertical-align: top; 
  border: 1px solid #d1d1d1;
}

.table_layout,
.table_2_layout,
.table_b_layout,
.table_c_layout {
  width: 100%;
  text-align: left;
  vertical-align: top;
}
.table_layout_head,
.table_layout_foot,
.table_layout_body,
.table_layout_row,
.table_layout_headline,
.table_2_layout_headline,
.table_layout_detail,
.table_2_layout_detail {
  text-align: inherit;
  vertical-align: inherit;
}
.table_layout_headline,
.table_2_layout_headline {
  width: 198px;
  background-color: #f5f5f5;
  font-size: 1.6rem;
  font-weight: bold;
}
.table_layout_detail,
.table_2_layout_detail {
  border-left: none;
}
.table_layout_detail_text {
  margin-bottom: 26px;
}
.table_layout_detail_anchor,
.table_2_layout_detail_anchor,
.table_b_layout_detail_anchor,
.table_c_layout_detail_anchor {
  text-decoration: underline;
}
.table_layout_detail_anchor:hover,
.table_2_layout_detail_anchor:hover,
.table_b_layout_detail_anchor:hover,
.table_c_layout_detail_anchor:hover {
  text-decoration: none;
}
.table_layout_detail_caption,
.table_2_layout_detail_caption {
  display: block;
  margin-top: 6px; 
  font-size: 1.3rem;
}

/*
---
name: テーブル 2 カラム
tag:
  - table
category:
  - service
---

```jade
-
  const table = [
    {title: 'ご融資額', text: '1万円～800万円', link: '#'},
    {title: '必要書類', text: '運転免許証（交付を受けていない方は健康保険証等）', caption: '※お借入総額により収入証明書（源泉徴収票等）が必要'}
  ]
table.table_2_layout
  tbody.table_2_layout_body
    each value in table
      tr.table_2_layout_row
        th.table_2_layout_headline= value.title
        td.table_2_layout_detail
          if value.link
            a.table_2_layout_detail_anchor(href=value.link)= value.text
          else
            = value.text
          span.table_2_layout_detail_caption.caption= value.caption
```
*/
.table_2_layout_head,
.table_2_layout_foot,
.table_2_layout_body,
.table_2_layout_row,
.table_2_layout_headline,
.table_2_layout_detail {
  text-align: inherit;
  vertical-align: inherit;
}

.table_2_layout_headline {
  width: 93px;
  padding: 15px 10px;
  font-size: 1.4rem;
}

.table_2_layout_detail {
  padding: 15px 17px;
  font-size: 1.4rem;
}

/*
---
name: テーブルB(上部見出しタイプ)
tag:
  - table
category:
  - service
---

```jade
table.table_b_layout
  thead.table_b_layout_head
    tr.table_b_layout_row
      th.table_b_layout_headline 表見出し
      th.table_b_layout_headline 表見出し
  tbody.table_b_layout_body
    tr.table_b_layout_row
      td.table_b_layout_detail
        a.table_b_layout_detail_anchor(href="#") 表セル
      td.table_b_layout_detail
        a.table_b_layout_detail_anchor(href="#") 表セル
    tr.table_b_layout_row
      td.table_b_layout_detail 表セル
      td.table_b_layout_detail 表セル
```
*/
.table_b_layout {
  text-align: center;
}
.table_b_layout_head,
.table_b_layout_foot,
.table_b_layout_body,
.table_b_layout_row,
.table_b_layout_headline,
.table_c_layout_headline,
.table_b_layout_detail,
.table_c_layout_detail {
  text-align: inherit;
  vertical-align: inherit;
}
.table_b_layout_headline,
.table_c_layout_headline {
  padding: 10px;
  border: 1px solid #d1d1d1;
  border-bottom-width: 0;
  background-color: #f5f5f5;
  font-size: 1.4rem;
  font-weight: bold;
}
.table_b_layout_detail,
.table_c_layout_detail {
  padding: 10px;
  border: 1px solid #d1d1d1;
  border-top-width: 0;
  font-size: 1.4rem;
}

/*
---
name: テーブルC(上部・左部 見出しタイプ)
tag:
  - table
category:
  - service
---
上部、左部が見出し(th)のタイプです。
すべてのセルにボーダーがつきます

```jade
table.table_c_layout
  thead.table_c_layout_head
    tr.table_c_layout_row
      th.table_c_layout_headline 上部見出し
      th.table_c_layout_headline 上部見出し
      th.table_c_layout_headline 上部見出し
  tbody.table_c_layout_body
    tr.table_c_layout_row
      th.table_c_layout_headline 左部見出し
      td.table_c_layout_detail
        a.table_c_layout_detail_anchor(href="#") 表セル
      td.table_c_layout_detail
        a.table_c_layout_detail_anchor(href="#") 表セル
    tr.table_c_layout_row
      th.table_c_layout_headline 左部見出し
      td.table_c_layout_detail 表セル
      td.table_c_layout_detail 表セル
```
*/
.table_c_layout_head,
.table_c_layout_foot,
.table_c_layout_body,
.table_c_layout_row,
.table_c_layout_headline,
.table_c_layout_detail {
  text-align: inherit;
  vertical-align: inherit;
}

.table_c_layout_headline {
  border-bottom-width: 1px;
}

/*  テーブルの文字揃えを調整するためのスタイル
 * --------------------------------*/
.table_layout_right {
  text-align: right;
}

.table_layout_center {
  text-align: center;
}

.table_layout_left {
  text-align: left;
}

.table_layout_top {
  vertical-align: top;
}

.table_layout_middle {
  vertical-align: middle;
}

.table_layout_bottom {
  vertical-align: bottom;
}

/*  PC, SP 出し分け
----------------------------------------*/
.table_sp {
  display: none;
}

/*
---
name: サムネイル画像(122px × 112px) グリッドレイアウト 1カラム
tag:
  - block
  - layout
category:
  - service
---
１カラムパターン
```jade
h3.content_title_third ビジネスサポートカードローン
.thumb_column_grid.thumb_column_grid_1
  .thumb_column_grid_inner
    .thumb_column_grid_img
      img(src="/img/share/thumb/img-service_1.png", width="122", height="112", alt="ビジネスサポートカードローン")
    .thumb_column_grid_text
      p.thumb_column_grid_text_top
        b.content_text_strong キャッシングが可能な金額は
          span.content_text_color 最高800万円
          | まで!
          br
          | アコムの金利は
          span.content_text_color 3.0％～18.0％
          | (実質年率)
    .thumb_column_grid_text.thumb_column_grid_bottom
      ul
        li お借入額：1万円～800万円（要審査）、ご利用用途は自由
        li 貸付対象者：20歳以上の安定した収入と返済能力を有する方で、当社基準を満たす方。
      p 詳しくはこちらをご確認ください。
```
*/
/*
---
name: サムネイル画像(122px × 112px) グリッドレイアウト 2カラム
tag:
  - block
  - layout
category:
  - service
---
2カラムパターン

```jade
.content_column_2
  .content_column_2_row
    article#transfer.content_column_2_left
      h3.content_title_third 左カラム タイトル
      .thumb_column_grid
        .thumb_column_grid_inner
          .thumb_column_grid_img
            img(src="/img/share/thumb/img-service_1.png", width="122", height="112", alt="ビジネスサポートカードローン")
          .thumb_column_grid_text
            h4.thumb_column_grid_title 左カラム サブタイトル
            p テキストテキストテキストテキストテキストテキストテキスト
        .content_column_btn
          p.btn_md
            a.btn(href="#") 左カラム ボタン
        .column_sub
          p.column_sub_text テキストテキストテキスト
          .column_sub_btn.btn_md
            a.column_sub_anchor.btn(href="#") 中サブボタン
    article#return.content_column_2_right
      h3.content_title_third 右カラム タイトル
      .thumb_column_grid
        .thumb_column_grid_inner
          .thumb_column_grid_img
            img(src="/img/share/thumb/img-service_1.png", width="122", height="112", alt="ビジネスサポートカードローン")
          .thumb_column_grid_text
            h4.thumb_column_grid_title 右カラム サブタイトル
            p テキストテキストテキストテキストテキストテキストテキスト
        .content_column_btn
          p.btn_md
            a.btn(href="#") 右カラム ボタン
        .column_sub
          p.column_sub_text テキストテキストテキスト
          .column_sub_btn.btn_md
            a.column_sub_anchor.btn(href="#") 中サブボタン1
          .column_sub_btn.btn_md
            a.column_sub_anchor.btn(href="#") 中サブボタン2
```
*/
.thumb_column {
  /* 1カラム
  -------------------------------*/
}
.thumb_column_grid {
  width: 373px;
}
.thumb_column_grid_inner {
  margin-bottom: 30px;
}
.thumb_column_grid_inner:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.thumb_column_grid_img {
  float: left; 
  width: 122px;
}
.thumb_column_grid_text {
  float: right; 
  width: 221px;
}
.thumb_column_grid_text_top {
  margin-top: -0.38em;
}
.thumb_column_grid_title {
  margin-bottom: 13px; 
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
}
.thumb_column_grid_1 {
  width: 100%;
}
.thumb_column_grid_1 .thumb_column_grid_text {
  float: left;
  width: -webkit-calc(100% - 150px);
  width:         calc(100% - 150px);
  margin-left: 28px;
}

/*
---
name: イメージ図
tag:
  - block
  - layout
category:
  - service
---

```jade
.image_view
  p.image_view_title
    | 全国の店頭窓口・ATMや
    br.image_view_break_pc
    |お近くの金融機関・コンビニなどでも！
  p.image_view_title_sub
    | ATMは原則24時間年中無休
  p.image_view_text.image_view_img
    img(src="/use/img/img-from_anywhere.png", width="288", height="128", alt="どこからでも")
  p.image_view_text
    | ATMは原則24時間年中無休
    br
    span.image_view_text_caption ※一部異なる場合もございます
```
*/
.image_view {
  width: 100%; 
  padding: 35px 10px;
  text-align: center;
  background: #f2f2f2;
  font-weight: bold;
}
.image_view_title {
  font-size: 1.8rem;
}
.image_view_title_sub {
  margin: 5px 0 10px 0;
  font-size: 1.4rem;
}
.image_view_text {
  margin-bottom: 10px;
  font-size: 1.4rem;
}
.image_view_text_caption {
  font-size: 1.3rem; 
  font-weight: normal;
}
.image_view_img {
  margin-top: 25px;
}

/*
---
name: パンくずリスト
tag:
  - block
category:
  - service
---

パンくずリストは breadcrumb mixin（/_pug/partial/_breadcrumb.pug）を使用する。

```jade
nav.topic_path
  ol.topick_path_list
    li.topic_path_list_item
      a.topic_path_list_anchor(href="/") HOME
    li.topic_path_list_item
      span.topic_path_list_current 商品のご案内
```
*/
.topic_path {
  width: auto;
}
.topic_path:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.topic_path_list {
  width: auto;
}
.topic_path_list:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.topic_path_list_item {
  position: relative; 
  display: inline-block;
  float: left;
  margin-right: 4px;
  padding-right: 12px;
}
.topic_path_list_item:after {
  position: absolute;
  top: 0;
  right: 0; 
  display: block;
  content: '>';
}
.topic_path_list_item:last-child {
  margin-right: 0;
  padding-right: 0;
}
.topic_path_list_item:last-child:after {
  display: none;
}
.topic_path_list_anchor {
  color: #db0016; 
  font-size: 1.2rem;
}
.topic_path_list_current {
  font-size: 1.2rem;
}

/*
---
name: 3つのメリット
tag:
  - block
category:
  - service
---

```jade
ul.merit
  li.merit_item
    .merit_text
      p.merit_text_strongest
        | 手数料 <strong class="content_text_color">無料</strong>
    img.merit_img(src="/aigis_assets/img/components/merit/img-0_yen.png" width="94" height="77" alt="0円")

  li.merit_item
    .merit_text
      p.merit_text_strong
        strong.merit_text_group.content_text_color
          | 24
          span.merit_text_weak 時間
          | 365
          span.merit_text_weak 日
        br.merit_text_pc
        span.merit_text_group 借入可能
    img.merit_img(src="/aigis_assets/img/components/merit/img-24_hours.png" width="101" height="101" alt="24h")

  li.merit_item
    .merit_text
      p.merit_text_normal
        span.merit_text_group.merit_text_weakest 楽天銀行に口座をお持ちなら、
        strong.content_text_color
          span.merit_text_group
            | 24
            span.merit_text_weak 時間、
          span.merit_text_group
            | 最短1分
            span.merit_text_weak で
            | 振込！
    img.merit_img(src="/aigis_assets/img/components/merit/img-1_min.png" width="97" height="89" alt="楽天銀行 最短1分")
p.merit_caption ご契約後、会員メニューからお手続きいただけます。
```
 */
.merit {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;

  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
          align-items: stretch;
}
.merit_item {
  margin-right: 13px;
  padding-top: 20px;
  text-align: center; 
  background-color: #f5f5f5;

  -webkit-box-flex: 0;
  -webkit-flex: 0 0 258px;
      -ms-flex: 0 0 258px;
          flex: 0 0 258px;
}
.merit_item:nth-child(3n) {
  margin-right: 0;
}
.merit_text {
  display: table;
  width: 100%;
  height: 60px;
  font-weight: bold;
}
.merit_text_strongest,
.merit_text_strong,
.merit_text_normal {
  display: table-cell;
  vertical-align: middle;
}
.merit_text_strongest {
  font-size: 2.4rem;
  line-height: 1.1;
}
.merit_text_strong {
  font-size: 2.2rem;
  line-height: 1.2;
}
.merit_text_normal {
  font-size: 2rem;
  line-height: 1.4;
}
.merit_text_weak,
.merit_text_weakest {
  font-size: 1.4rem;
}
.merit_text_group {
  display: inline-block;
}
.merit_img {
  padding: 20px 0;
}
.merit_caption {
  margin-top: 10px;
}

/*
---
name: タブ
tag:
  - block
category:
  - service
---

```jade
ul.tab
  li.tab_item
    a(href='#js-amount').tab_btn.current 返済金額(毎月)
  li.tab_item
    a(href='#js-times').tab_btn 返済回数(毎月一回)
```
*/
.tab {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  margin-bottom: 5px; 
  text-align: center;
  border: 1px solid #d1d1d1;
  background: #f2f2f2;
}
.tab:before {
  position: absolute;
  top: 4px;
  left: 50%; 
  width: 1px;
  height: 50px;
  content: '';
  background: #d1d1d1;
}
.tab_item {
  position: relative;
  display: table;
  width: 50%;
  padding: 0 6px; 
  font-size: 1.6rem;
}
.tab_btn {
  position: relative;
  top: 0;
  display: table-cell;
  height: 58px;
  -webkit-transition: 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
          transition: 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98); 
  vertical-align: middle;
}
.tab_btn.current {
  top: 6px; 
  color: #fff;
  background: #db0016;
}
.tab_btn:hover {
  text-decoration: none;
}
.tab_btn:not(.current):hover {
  opacity: 0.5;
}
.tab_content {
  border-top: 2px solid #db0016;
}

/*
---
name: ページ内ナビゲーション
tag:
  - block
category:
  - service
---

```jade
nav.local_nav
  ul.local_nav_list
    li.local_nav_item
      a.local_nav_anchor(href="#")
        span.local_nav_text お申し込み
    li.local_nav_item
      a.local_nav_anchor(href="#")
        span.local_nav_text カードローン（お借入）
    li.local_nav_item
      a.local_nav_anchor(href="#")
        span.local_nav_text クレジット（ご利用）
    li.local_nav_item
      a.local_nav_anchor(href="#")
        span.local_nav_text ご返済・お支払い
```
*/
.local_nav {
  padding: 30px 40px;
  background-color: #f5f5f5;
}
.local_nav_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  border-top: 1px solid #d1d1d1;
  border-left: 1px solid #d1d1d1; 

  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-flex-flow: wrap;
      -ms-flex-flow: wrap;
          flex-flow: wrap;
}
.local_nav_item {
  min-width: 1px;
  background-color: #fff; 

  -webkit-box-flex: 0;
  -webkit-flex: 0 0 240px;
      -ms-flex: 0 0 240px;
          flex: 0 0 240px;
}
.local_nav_anchor {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  width: 100%;
  height: 53px;
  border: 1px solid #d1d1d1;
  border-top-width: 0;
  border-left-width: 0;
  font-size: 1.4rem;
  font-weight: 500; 

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.local_nav_anchor::before {
  position: absolute;
  top: 50%;
  left: 14px; 
  display: block;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-width: 0;
  border-style: solid;
  border-color: #db0016;
  border-right-width: 2px;
  border-bottom-width: 2px;
}
.local_nav_anchor::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  -webkit-transition: border 0.1s cubic-bezier(0.42, 0, 0.58, 1);
          transition: border 0.1s cubic-bezier(0.42, 0, 0.58, 1); 
  border: 0 solid #db0016;
}
.local_nav_anchor:hover {
  text-decoration: none;
}
.local_nav_anchor:hover::after {
  border-width: 4px;
}
.local_nav_external .local_nav_anchor::before {
  position: absolute;
  top: 50%;
  display: block;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  margin-top: -3px;
  margin-left: -2px; 
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-width: 0;
  border-style: solid;
  border-color: #db0016;
  border-top-width: 2px;
  border-right-width: 2px;
}
.local_nav_text {
  display: block;
}

/*
---
name: 1/3 カラム画像付き本文
tag:
  - layout
  - block
category:
  - service
  - service/first
---

```jade
.thumb_3.thumb_3_right
  .thumb_3_img_wrapper
    img.thumb_3_img(src="/aigis_assets/img/components/thumb_3/img-outpay.png", width="267", height="167", alt="")
  .thumb_3_body.thumb_column_grid_text_top
    p.thumb_3_text 実家を出て一人暮らしを始めると、自由な生活ができる反面、何事も自分の力でやり繰りしていく努力も必要となります。特に生活費の管理には気を付けておきたいもの。お金を使い過ぎて家賃が払えず、大家さんから怒られた……という事態にならないためにも、社会人として支払いはしっかり期限内に終えたいところです。

    p.thumb_3_text
      strong.thumb_3_text_strong
        | そんなときに強い味方となるのが
        strong.thumb_3_text_strongest アコムの「即日融資」
        | です。
      small.thumb_3_text_caption ※申し込み時間帯によっては対応できない場合がございます。

    p.thumb_3_text
      | お申し込みはスマホから行うことができ、氏名・住所や勤め先情報などの必要事項を入力して送信。
      br.thumb_3_text_pc
      | 確認のメールが届いたら、専用アプリをダウンロード（無料）することで、本人確認書類として必要な免許証の画像も送信可能です。
```
*/
.thumb_3:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}

.thumb_3_img_wrapper {
  width: 267px; 
  margin-bottom: 24px;
}
.thumb_3_right .thumb_3_img_wrapper {
  float: right;
}
.thumb_3_left .thumb_3_img_wrapper {
  float: left;
}

.thumb_3_img {
  max-width: 100%;
}

.thumb_3_body {
  width: -webkit-calc(100% - 267px);
  width:         calc(100% - 267px);
}
.thumb_3_none .thumb_3_body {
  width: 100%;
}
.thumb_3_right .thumb_3_body {
  float: left; 
  padding-right: 26px;
}
.thumb_3_left .thumb_3_body {
  float: right; 
  padding-left: 26px;
}

.thumb_3_text {
  margin-bottom: 24px;
}
.thumb_3_text_strong,
.thumb_3_text_strongest {
  font-size: 1.6rem;
  font-weight: bold;
}
.thumb_3_text_strongest {
  color: #db0016;
}
.thumb_3_text_caption {
  display: block;
  font-size: 1.3rem;
}

/*
---
name: こちらのステッカーの貼ってるATMコーナーが目印です
tag:
  - part
category:
  - service
---

```jade
span.icon_caption
  img.icon_caption_img(src="/aigis_assets/img/components/icon_caption/ico-acom.png" width="32" height="32" alt="")
  span.icon_caption_text こちらのステッカーの貼ってるATMコーナーが目印です
```
*/
.icon_caption {
  display: block;
  margin-top: 2px;
  margin-bottom: 30px;
}
.icon_caption_image,
.icon_caption_text {
  display: inline-block;
  vertical-align: middle;
}
.icon_caption_text {
  margin-left: 10px;
}

/*
---
name: リンクリスト
tag:
  - block
category:
  - service
---

```jade
-
  const list = [
    {text: 'サイトのご利用にあたって', link: '/information/site/'},
    {text: 'クレジットポリシーについて', link: '/information/creditpolicy/'}
  ]
ul.link_list
  each item in list
    li.link_list_item
      a.link_list_anchor(href=item.link)= item.text
```
*/
.link_list {
  margin-bottom: 30px;
  border-top: 1px solid #d1d1d1;
}
.link_list_item {
  border: 1px solid #d1d1d1;
  border-top-width: 0; 
  font-size: 1.4rem;
}
.link_list_anchor {
  position: relative;
  display: block;
  padding: 18px 30px 17px 20px;
}
.link_list_anchor::after {
  position: absolute;
  top: 50%;
  right: 14px; 
  display: block;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-width: 0;
  border-style: solid;
  border-color: #db0016;
  border-top-width: 2px;
  border-right-width: 2px;
}
.link_list .external_anchor {
  background-image: none;
}
.link_list .external_anchor:before {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 11px;
  height: 8px;
  margin-top: -4px;
  content: '';
  background-image: url(/img/share/ico-window.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}
.link_list .external_anchor::after {
  display: none;
}
.link_list .local_anchor {
  text-indent: 24px;
}
.link_list .local_anchor::before {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 10px;
  height: 9px;
  margin-top: -5px;
  content: '';
  border-bottom: 1px solid #373737;
  border-left: 1px solid #373737;
}

/*---------------------------------------
  CMSコンテンツ用スタイル
----------------------------------------*/
.cms .font_large {
  font-size: 1.6rem;
}

.cms .font_medium {
  font-size: 1.4rem;
}

.cms .font_small {
  font-size: 1.2rem;
}

.cms .font_bold {
  font-weight: bold;
}

.cms .font_black {
  color: #333;
}

.cms .font_red {
  color: #db0016;
}

.cms .text_left {
  text-align: left;
}

.cms .text_right {
  text-align: right;
}

.cms .text_center {
  text-align: center;
}

.cms .link,
.cms .link_external,
.cms .link_pdf {
  text-decoration: underline;
}
.cms .link:hover,
.cms .link_external:hover,
.cms .link_pdf:hover {
  text-decoration: none;
}

.cms .link_external {
  margin-right: 5px;
  padding-right: 16px;
  background: url(/img/share/ico-window.png) right center no-repeat;
}

.cms .link_pdf {
  margin-right: 5px;
  padding-right: 21px;
  background: url(/img/share/ico-pdf.svg) right center no-repeat;
  background-size: 16px 16px;
}

.cms .link.tel_for_sp {
  text-decoration: none;
}

.cms .content_title_sub {
  margin-right: 0;
  margin-bottom: 30px; 
  margin-left: 0;
}
.cms .content_title_sub ~ .content_title_sub {
  margin-top: 40px;
}

/* アコムのお知らせ 詳細ページ
-------------------------------------*/
.news_post_date {
  display: block;
  margin-top: 2px;
  margin-bottom: 21px; 
  text-align: right;
  font-size: 1.3rem;
}

.news_post_customer {
  font-size: 1.6rem;
  font-weight: 500;
}

.news_post_author {
  display: block;
  text-align: right;
  font-weight: 500;
}

.news_post_photo {
  margin: 0 0 50px;
}

.news_post_text {
  margin-bottom: 25px;
}
.news_post_text_noted {
  margin-top: 38px;
  margin-bottom: 48px; 
  text-align: center;
}

.news_post_block {
  margin-bottom: 50px;
}

.news_post_title {
  margin-bottom: 10px; 
  font-size: 1.6rem;
}
.news_post_title:not(:first-child) {
  margin-top: 25px;
}

.news_post_sub_title {
  margin-bottom: 10px;
}
.news_post_sub_title:not(:first-child) {
  margin-top: 25px;
}

.news_post_table {
  margin-bottom: 20px;
}

.news_post_end {
  text-align: right;
}

.news_post_back {
  display: none;
}

.news_post .content_section_bottom {
  margin-bottom: 30px;
}

.news_post_margin {
  margin-bottom: 10px;
}

.table_b_layout.fixed {
  table-layout: fixed;
}

.table_b_layout_headline,
.table_c_layout_headline,
.table_b_layout_detail,
.table_c_layout_detail {
  border: 1px solid #d1d1d1;
}

/*
---
name: 全体レイアウト
tag:
  - layout
category:
  - service
---

ヘッダーが固定なので、ヘッダーの高さの分だけ上に padding がつく。
パンくずリストは breadcrumb mixin（/_pug/partial/_breadcrumb.pug）、
サイドバーは underNav mixin（/_pug/partial/_under_nav.pug）を使用する。

```jade
.main
  header.main_top
    .main_top_inner
      ここにパンくずリストが入ります

  .main_content
    article.content
      //- メインコンテンツ部分
      h1.content_title_main ここにはタイトルが入ります

    aside.aside
      //- サイドバー部分
      .aside_btn
        サイドバーのボタンが入ります
      .aside_nav
        サイドバーのナビゲーションが入ります
```
*/
.main {
  margin-bottom: 80px;
  padding-top: 132px;
}
.main:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.main_top {
  width: auto;
  padding: 19px 0 25px;
}
.main_top_inner {
  width: 1200px; 
  margin: 0 auto;
  padding: 0 30px;
}
.main_top_inner:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.main_content {
  width: 1080px;
  margin: 0 auto;
}
.main_content:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.main_content.main_no_topic_path {
  margin-top: 37px;
}
.static_header .main {
  padding-top: 0;
}

/*----------------------------------------
  コンテンツ
----------------------------------------*/
/*
---
name: ノーマルコンテンツ
tag:
  - block
  - layout
category:
  - service
---

```jade
section.content_section
  h2.content_title_sub ご利用限度額の変更方法
  p.content_text 「極度額増額のお申し込み」をされる場合は、「アコム総合カードローンデスク」までお電話ください。担当者がご変更可能かすぐにお調べいたします。
  .content_text
    p.content_text_paragraph 段落用クラスです。「極度額増額のお申し込み」をされる場合は、「アコム総合カードローンデスク」までお電話ください。担当者がご変更可能かすぐにお調べいたします。
    p.content_text_paragraph 段落用クラスです。「極度額増額のお申し込み」をされる場合は、「アコム総合カードローンデスク」までお電話ください。担当者がご変更可能かすぐにお調べいたします。

  .content_section_sub
    h3.content_title_third サブタイトル
```
*/
/*
---
name: サマリー
tag:
  - block
  - typography
category:
  - service
---

```jade
section.content_summary
  h2.content_summary_title
    span.content_summary_title_underline
      | キャッシング可能な金額は
      br.content_summary_title_break
      | 1万円から800万円まで（要審査）
  p.content_text
    | 「極度額増額のお申し込み」をされる場合は、「アコム総合カードローンデスク」までお電話ください。担当者がご変更可能かすぐにお調べいたします。
    small.content_text_caption ※ここに注釈が入ります
```
*/
/*
---
name: サマリー Bタイプ
tag:
  - block
  - typography
category:
  - service
---

タイトル下のマージンを18pxに詰める

```jade
section.content_summary
  h2.content_summary_title.content_summary_title_b
    span.content_summary_title_underline
      | キャッシング可能な金額は
      br.content_summary_title_break
      | 1万円から800万円まで（要審査）
  p.content_text
    | 「極度額増額のお申し込み」をされる場合は、「アコム総合カードローンデスク」までお電話ください。担当者がご変更可能かすぐにお調べいたします。
    small.content_text_caption ※ここに注釈が入ります
```
*/
/*
---
name: 灰色背景
tag:
  - block
category:
  - service
---

注釈は本文から 15px の余白を取る。

```jade
.content_section_bottom
  .content_section_bottom_head
    .content_section_bottom_head_group
      img(src="/img/share/ico-smart_phone.png" width="19" height="29" alt="")
    p.content_section_bottom_head_group アプリ（無料）のダウンロードはこちら
  ul.content_section_bottom_list
    li.content_section_bottom_list_item.btn_lrg.type_member
      a.content_section_bottom_btn.btn(href="/members/")
        span.content_section_bottom_btn_icon.icon
          svg(role="img" aria-label=title class=`svg-login login`).aside_btn_icon_img
            use(xlink:href="/img/share/svg-symbols.svg#icon-" + login)
        span.content_section_bottom_text 会員ログイン

    li.content_section_bottom_list_item.btn_lrg
      a.content_section_bottom_btn.btn(href="#")
        span.content_section_bottom_text ATMご利用明細書(お借入)の見方
```
*/
/*
---
name: テキスト装飾(強調)
tag:
  - typography
category:
  - service
---

```jade
section.content_section
  p
    b.content_text_strong ご融資額
      span.content_text_color 最高800万円
      | まで
      br
      | 貸付利率（実質年率）
      span.content_text_color 3.0％～18.0％
```
*/
/*
---
name: 通常リスト
tag:
  - list
category:
  - service
---

```jade
ul.content_list
  li リスト
  li リスト
  li リスト
  li リスト
```
*/
/*
---
name: 番号付きリスト
tag:
  - list
category:
  - service
---

```jade
ol.content_order_list
  li リスト
  li リスト
  li リスト
  li リスト
```
*/
.content {
  float: left;
  width: 801px;
  /*  section
  ----------------------------------------*/
}
.content_no_sidenav {
  float: none; 
  width: auto;
}
.content_text {
  margin-bottom: 50px;
}
.content_text_anchor {
  text-decoration: underline;
}
.content_text_anchor:hover {
  text-decoration: none;
}
.content_text_anchor.tel_for_sp {
  text-decoration: none;
}
.content_text_strong {
  display: block; 
  margin-bottom: 5px;
  font-size: 1.8rem;
}
.content_text_color {
  color: #db0016;
}
.content_text_sp_break {
  display: none;
}
.content_text_caption {
  display: block;
  margin-top: 7px;
  font-size: 1.3rem;
}
.content_text_caption_center {
  display: block;
  padding-top: 10px; 
  text-align: center;
  font-size: 1.3rem;
}
.content_text_caption_indent{
  display: block;
  margin-top: 7px;
  font-size: 1.3rem;
}
.content_text_caption_indent > li{
  position: relative;
  text-indent: -1.4rem;
  padding-left: 1.3rem;
}
.content_text_caption_indent_hang{
  display: block;
  margin-top: 7px;
  padding-left: 1.4rem;
  font-size: 1.3rem;
}
.content_text_caption_indent_hang > li{
  position: relative;
  text-indent: -1.4rem;
  padding-left: 1.3rem;
}
.content_text_paragraph {
  margin-bottom: 25px;
}
.content_image {
  text-align: center;
}
.content_list > li {
  position: relative; 
  padding-left: 14px;
}
.content_list > li:before {
  position: absolute;
  top: 0.85em;
  left: 1px;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  content: '';
  border-radius: 6px;
  background: #a5a5a5;
}
.content_order_list {
  margin: 0;
  padding: 0; 
  list-style: none;
  counter-reset: number;
}
.content_order_list.content_order_list_btm{
  margin-bottom: 50px;
}

.content_order_list > li {
  position: relative;
  margin-bottom: 13px;
  padding-left: 20px;
}
.content_order_list > li:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: counter(number) '.'; 
  counter-increment: number;
}
.content_description {
  margin-bottom: 50px; 
  line-height: 2;
}
.content_summary {
  width: auto;
  margin-bottom: 80px;
}
.content_summary_title {
  margin-bottom: 60px; 
  font-size: 2.6rem;
  font-weight: normal;
}
.content_summary_title_underline {
  background: -webkit-linear-gradient(transparent 80%, #ffe3e7 6px);
  background:         linear-gradient(transparent 80%, #ffe3e7 6px);
}
.content_summary_title_break {
  display: none;
}
.content_summary_title_b {
  margin-bottom: 18px;
}
.content_section {
  width: auto;
  margin-bottom: 80px;
}
.content_section_bottom {
  width: auto;
  margin-top: 30px;
  padding: 30px 0; 
  background: #f5f5f5;
}
.content_section_bottom_head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: bold; 

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.content_section_bottom_head_group {
  margin: 0 6px;
  text-align: center;
}
.content_section_bottom_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
}
.content_section_bottom_list_item {
  margin: 0 3px;
}
.content_section_bottom_btn_sp_break {
  display: none;
}
.content_section_sub {
  margin-bottom: 40px;
}



ul.content_label_3column_lyout{
  overflow: hidden;
}

.content_label_3column_lyout li{
  float: left;
  width: 105px;
  margin: 0 10px 15px 0;
  text-align: center;
  color: #fff;
  background: #ff6473;
  border-radius: 4px;
  font-size: 1.4rem;
  line-height: 26px;
}
.content_label_3column_lyout li.mg0{
  margin-right:0; 
}

.content_list_box{
  margin: 32px 0 0 0;
}
.content_list_box ul{
  margin-bottom:15px; 
}



/*
---
name: 括弧番号付きリスト
tag:
  - list
category:
  - service
---

```jade
ol.parenthesis_list
  li.parenthesis_list_item 括弧付き番号リスト
  li.parenthesis_list_item 括弧付き番号リスト
  li.parenthesis_list_item 括弧付き番号リスト
  li.parenthesis_list_item 括弧付き番号リスト
```
*/
.parenthesis_list {
  margin: 0;
  padding: 0; 
  list-style: none;
  counter-reset: number;
}
.parenthesis_list.parenthesis_list_position{
  margin-left: -2.0em;
}
.parenthesis_list > li {
  position: relative;
  margin-bottom: 13px;
  padding-left: 2.5em;
}
.parenthesis_list > li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '（' counter(number) '）';
  counter-increment: number;
}

.parenthesis_text_caption{
  display: block;
  margin-top: 7px;
  margin-left: -2.2em;
  font-size: 1.3rem;
}
.parenthesis_list .parenthesis_text_caption{
  margin-left: -2.7em;
}
.parenthesis_text_caption > li{
  position: relative;
  padding-left: 3.4em;
  margin-bottom: 7px;
}
.parenthesis_text_caption > li:last-child{
  margin-bottom: 0;
}
.parenthesis_text_caption > li .parenthesis_text_caption_top{
  position: absolute;
  top: 0;
  left: 0;
}

.parenthesis_text_caption_indent{
  display: block;
  margin-top: 7px;
  font-size: 1.3rem;
}
.parenthesis_text_caption_indent > li{
  position: relative;
  padding-left: 3.4em;
  margin-bottom: 7px;
}
.parenthesis_text_caption_indent > li:last-child{
  margin-bottom: 0;
}
.parenthesis_text_caption_indent > li .parenthesis_text_caption_top{
  position: absolute;
  top: 0;
  left: 0;
}
.header {
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  min-width: 1200px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  border-top: 4px solid #db0016;
  -webkit-box-shadow: 0 4px 9px rgba(192, 192, 192, 0.2);
          box-shadow: 0 4px 9px rgba(192, 192, 192, 0.2);
  /* ヘッダー上部
  ----------------------------------------*/
  /* グローバルナビ
  ----------------------------------------*/
  /* ユーザーのインタラクションで表示する
  ----------------------------------------*/
  /* share.js で追加される
   * ドロップダウン、ハンバーガーメニュー表示時の背景
  ----------------------------------------*/
  /* 以下 PC では非表示
  ----------------------------------------*/
}
.static_header .header {
  position: static;
}
.header_top {
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
}
.header_top_inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  width: 1200px; 
  height: 81px;
  margin: 0 auto;
  padding: 12px 20px;

  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
          justify-content: space-between;
}
.header_brand_area {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;

  -webkit-flex-shrink: 5;
  -ms-flex-negative: 5;
          flex-shrink: 5;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
          align-items: flex-end;
}
.header_brand {
  margin-bottom: 3px;
}
.header_brand_catch {
  margin-left: 20px;
  padding-bottom: 7px;
  font-size: 1.1rem;
  line-height: 1.4;
}
.header_brand_catch_line {
  display: block;
}
.header_contact_menu {
  text-align: right;
}
.header_phone {
  text-align: right; 
  line-height: 1;
}
.header_phone_icon {
  margin-right: 5px;

  fill: currentColor;
}
.header_phone_text {
  vertical-align: middle; 
  font-size: 1.35rem;
}
.header_phone_number {
  margin-left: 8px;
  vertical-align: middle; 
  line-height: 1;
}
.header_phone_number_img {
  vertical-align: middle;
}
.header_top_menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  margin-top: 10px; 

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
          justify-content: flex-end;
}
.header_top_nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  margin-right: 5px;
}
.header_top_nav_item {
  padding: 0 10px;
  border-style: solid;
  border-color: #818181;
  border-left-width: 1px;
  font-size: 1.2rem;
  line-height: 9px;
}
.header_top_nav_item:first-child {
  border-left-width: 0;
}
.header_top_nav_corp {
  padding-right: 14px;
  background: url(/img/share/ico-window.png) right center no-repeat;
}
.header_btns_icon {
  display: none;
}
.header_request,
.header_login,
.header_close_btn {
  min-width: 100px;
  height: 26px;
  padding: 0 10px;
  -webkit-transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
          transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98); 
  text-align: center;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 1.2rem;
  font-weight: bold;
}
.header_request:hover,
.header_login:hover,
.header_close_btn:hover {
  text-decoration: none; 
  opacity: 0.5;
}
.header_request {
  display: none;
  margin-right: 4px;
  border-color: #9a000f;
  background-color: #db0016;
  -webkit-box-shadow: 0 2px #9a000f;
          box-shadow: 0 2px #9a000f;
}
.header_request_navitime {
  display: inline-block;
}
.header_login,
.header_close_btn {
  display: inline-block;
  border-color: #d49500;
  background-color: #f3ab00;
  -webkit-box-shadow: 0 2px #d49500;
          box-shadow: 0 2px #d49500;
}
.header_menu_btn {
  display: none;
}
.header_btns_text {
  vertical-align: middle;
}
.header_close_btn {
  display: inline-block;
  padding: 0 20px;
  border-color: #9a000f;
  background-color: #db0016;
  -webkit-box-shadow: 0 2px #9a000f;
          box-shadow: 0 2px #9a000f;
}
.header_close_btn_navitime {
  display: none;
}
.header_bottom {
  position: relative;
  z-index: 3; 
  background-color: #fff;
}
.header_nav_category {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  height: 47px; 

  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
}
.header_nav_category_icon,
.header_nav_category_toggle_icon {
  display: none;
}
.header_nav_category_item,
.header_nav_search {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  margin-left: -1px;
  font-size: 1.7rem; 

  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
          align-items: stretch;
}
.header_nav_category_anchor,
.header_nav_search_trigger {
  position: relative; 
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.header_nav_category_anchor:not(.current)::before,
.header_nav_search_trigger:not(.current)::before,
.header_nav_category_anchor:not(.current)::after,
.header_nav_search_trigger:not(.current)::after {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
          transition: -webkit-transform 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
          transition:         transform 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
          transition:         transform 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98), -webkit-transform 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
}
.header_nav_category_anchor::before,
.header_nav_search_trigger::before,
.header_nav_category_anchor::after,
.header_nav_search_trigger::after {
  position: absolute;
  bottom: 0;
  content: '';
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0); 
  border-bottom: 4px solid #db0016;
}
.header_nav_category_anchor::before,
.header_nav_search_trigger::before {
  right: 50%;
  left: 0;
  -webkit-transform-origin: right center;
      -ms-transform-origin: right center;
          transform-origin: right center;
}
.header_nav_category_anchor::after,
.header_nav_search_trigger::after {
  right: 0;
  left: 50%;
  -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
          transform-origin: left center;
}
.header_nav_category_anchor:hover,
.header_nav_search_trigger:hover,
.header_nav_category_anchor[aria-selected='true'],
[aria-selected='true'].header_nav_search_trigger,
.header_nav_category_anchor.current,
.current.header_nav_search_trigger {
  text-decoration: none;
}
.header_nav_category_anchor:hover::before,
.header_nav_search_trigger:hover::before,
.header_nav_category_anchor:hover::after,
.header_nav_search_trigger:hover::after,
.header_nav_category_anchor[aria-selected='true']::before,
[aria-selected='true'].header_nav_search_trigger::before,
.header_nav_category_anchor[aria-selected='true']::after,
[aria-selected='true'].header_nav_search_trigger::after,
.header_nav_category_anchor.current::before,
.current.header_nav_search_trigger::before,
.header_nav_category_anchor.current::after,
.current.header_nav_search_trigger::after {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}
.header_nav_category_text,
.header_nav_search_text {
  padding: 0 24px;
  border-style: solid;
  border-color: #d1d1d1;
  border-right-width: 1px;
  border-left-width: 1px;
  line-height: 1.4;
}
.header_nav_category_child {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  overflow: hidden;
  -webkit-transition: height 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98);
          transition: height 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98); 
  background-color: #e1e1e1;
}
.header_nav_category_child[aria-expanded='true'] {
  display: block;
}
.header_nav_search_trigger {
  padding: 0;
  border: none;
  background: transparent;
}
.header_nav_search_text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  height: 23px;
  border-right-width: 1px; 

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.header_nav_search_trigger[aria-selected='true'] + .header_search {
  display: block;
}
/* AC_OPERATE-426 CSS Start */
.header_nav_search.pc_Search{
  display:flex;
}
.header_nav_search.sp_Search{
  display:none;
}
/* AC_OPERATE-426 CSS End */
.header_nav_child {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  width: 1200px; 
  margin: 0 auto;
  padding: 20px;
}
.header_nav_child_heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  min-width: 1px;
  margin-top: 23px;
  margin-right: 18px;
  -webkit-transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
          transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98); 

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 228px;
      -ms-flex: 0 0 228px;
          flex: 0 0 228px;
}
.header_nav_child_heading:hover {
  text-decoration: none; 
  opacity: 0.5;
}
.header_nav_child_heading_inner {
  display: block;
  text-align: center;
}
.header_nav_child_heading_icon {
  fill: #a5a5a5;
}
.header_nav_child_heading_text {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
}
.header_nav_child_heading_text::after {
  position: absolute;
  position: static;
  top: 50%;
  display: block;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  margin-top: -3px;
  margin-left: 6px;
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  vertical-align: middle; 
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
  border-top-width: 2px;
  border-right-width: 2px;
}
.header_nav_child_list {
  width: 100%;
}
.header_nav_child_list:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.header_nav_child_item {
  display: block;
  float: left;
  width: 33.333%; 
  height: 65px;
  padding-bottom: 2px;
  padding-left: 2px;
}
.header_nav_child a.header_nav_child_anchor {
  padding: 0 18px;
  font-size: 1.6rem; 

  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
          justify-content: flex-start;
}
.header_nav_child_close,
.header_search_close {
  width: 100%;
  padding: 12px 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
          transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98); 
  color: #fff;
  border: none;
  background-color: #999;
  font-size: 1.3rem;
}
.header_nav_child_close:hover,
.header_search_close:hover {
  opacity: 0.5;
}
.header_nav_child_close::before,
.header_search_close::before {
  position: absolute;
  position: relative;
  top: 50%;
  top: 3px;
  display: block;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  vertical-align: middle; 
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
  border-top-width: 2px;
  border-left-width: 2px;
}
.header_search {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  overflow: hidden;
  -webkit-transition: height 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98);
          transition: height 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98); 
  background-color: #e1e1e1;
}
.header_search[aria-expanded='true'] {
  display: block;
}
.header_search_group {
  padding: 40px 0;
  text-align: center;
}
.header_search_input {
  width: 645px;
  height: 50px;
  padding: 0 20px;
  vertical-align: middle; 
  border: none;
  border-radius: 4px;
  font-size: 1.8rem;
}
.header_search_icon {
  display: none;
}
.header_search_submit {
  display: inline-block;
  width: auto;
  height: 46px;
  margin-left: 12px;
  vertical-align: middle; 
  font-size: 1.8rem;
}
.header_backdrop {
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  -webkit-transition: opacity 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98);
          transition: opacity 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98); 
  opacity: 0.6;
  background-color: #000;
}
.header_backdrop_menu {
  display: none;
}
.header_backdrop_dropdown {
  display: block;
}
.header_nav_other_item,
.header_nav_corp_item,
.header_menu_close {
  display: none;
}

.footer_sitemap {
  width: 387px;
  margin: 0 auto;
}
.footer_sitemap_block {
  position: relative;
  top: 1px;
  width: 100%;
  height: 37px;
  padding-top: 13px; 
  text-align: center;
  background: url(/img/share/bg-footer_sitemap.png) no-repeat top center;
}
.footer_sitemap_btn {
  position: relative;
  display: inline-block;
  border: 0;
  outline: none;
  background: none;
  font-size: 1.2rem;
  font-weight: 700;
}
.footer_sitemap_btn:before {
  position: absolute;
  position: relative;
  top: 50%;
  top: 4px;
  display: block;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 12px;
  content: '';
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98);
          transition: -webkit-transform 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98);
          transition:         transform 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98);
          transition:         transform 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98), -webkit-transform 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98); 
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
  border-top-width: 2px;
  border-left-width: 2px;
}
.footer_sitemap_btn[aria-pressed='true']::before {
  -webkit-transform: translateY(-50%) rotate(225deg);
      -ms-transform: translateY(-50%) rotate(225deg);
          transform: translateY(-50%) rotate(225deg);
}

.footer_top {
  width: 100%;
  padding-top: 9px; 
  border-top: 1px solid #d1d1d1;
  background-color: #f2f2f2;
}
.footer_top_accordion {
  overflow: hidden;
  -webkit-transition: height 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98);
          transition: height 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98);
}
.footer_top_accordion[aria-hidden='true'] {
  display: none;
}
.footer_top_inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  width: 1080px;
  margin: 0 auto;
  padding-top: 46px;
  padding-bottom: 10px;

  -webkit-flex-flow: wrap;
      -ms-flex-flow: wrap;
          flex-flow: wrap;
}

.footer_nav_list {
  width: 252px;
  margin-bottom: 28px; 
  margin-left: 24px;
}
.footer_nav_list:nth-child(1),
.footer_nav_list:nth-child(5) {
  margin-left: 0;
}
.footer_nav_list_item > a {
  display: inline-block;
  margin-bottom: 8px; 
  font-weight: 700;
}
.footer_nav_list_children_item {
  width: 215px;
  margin-bottom: 5px; 
  font-size: 1.2rem;
}

.footer_bottom {
  padding-top: 60px;
  padding-bottom: 45px; 
  border-top: 1px solid #ccc;
}
.footer_bottom_inner {
  width: 760px;
  margin: 0 auto;
}
.footer_bottom_nav {
  width: 100%;
  margin-bottom: 57px;
}
.footer_bottom_nav:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}

.footer_other_nav {
  float: right;
  width: 240px;
  font-size: 1.2rem;
}
.footer_other_nav_list_item {
  margin-bottom: 5px;
}
.footer_other_nav .btn_md {
  display: none;
}
.footer_other_nav a {
  position: relative; 
  display: inline-block;
  padding-left: 14px;
}
.footer_other_nav a:after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg); 
  border-width: 1px;
  border-style: solid;
  border-top-color: #999da3;
  border-right-color: #999da3;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.footer_info_security {
  float: left;
  width: 479px;
  min-height: 146px;
  border-right: 1px solid #d1d1d1;
}
.footer_info_security:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.footer_info_security_mark {
  float: left;
  width: 144px;
  min-height: 146px;
  border-right: 1px solid #d1d1d1;
}
.footer_info_security_mark .norton {
  display: inline-block;
  width: 103px;
  margin-bottom: 12px;
}
.footer_info_security_mark .pmark a {
  display: inline-block;
  width: 58px;
}
.footer_info_security_paragraph {
  float: right;
  width: 255px;
  margin-right: 38px;
  font-size: 1.1rem;
}

.footer_security_bold {
  display: inline-block; 
  width: 100%;
  margin-bottom: 19px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.8;
}

.footer_trade_list {
  margin-bottom: 22px; 
  text-align: center;
}
.footer_trade_list_item {
  display: inline-block;
  margin-left: 6px;
}
.footer_trade_list_item:first-child {
  margin-left: 0;
}
.footer_trade_list dt,
.footer_trade_list dd {
  display: inline-block;
  font-size: 1.2rem;
}

.footer_info {
  text-align: center;
}
.footer_info small {
  display: block;
  font-size: 1.0rem;
}

.page_top {
  position: fixed;
  z-index: 5;
  right: 20px;
  bottom: 50px;
  width: 44px;
  height: 44px;
  -webkit-transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
          transition: opacity 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98); 
  border-radius: 6px;
  background-color: #373737;
}
.page_top:hover {
  opacity: 0.5;
}
.page_top_btn {
  width: 100%; 
  height: 100%;
}
.page_top_btn a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  overflow: hidden; 
  width: 100%;
  height: 100%;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
          align-items: center;
}
.page_top_btn a::before {
  position: absolute;
  position: static;
  top: 50%;
  display: block;
  width: 12px;
  height: 12px;
  margin-top: 6px; 
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-width: 0;
  border-style: solid;
  border-color: #fff;
  border-top-width: 2px;
  border-left-width: 2px;
}

/*
---
name: サイドナビゲーション
tag:
  - layout
  - block
category:
  - service
---

基本的に Pug の underNav mixin (`/_pug/_partial/_under_nav.pug`) を使用する。

```jade
aside.aside
  .aside_btn
    ul.aside_btn_list
      li.aside_btn_item.btn_lrg.type_app
        a.aside_btn_anchor.btn(href="#")
          span.aside_btn_icon.icon
            span.aside_btn_text お申し込み

      li.aside_btn_item.btn_lrg.type_member
        a.aside_btn_anchor.btn(href="#")
          span.aside_btn_icon.icon
            span.aside_btn_text 会員ログイン
  nav.aside_nav
    h3.aside_nav_title
      a.aside_nav_title_anchor(href="#") 商品のご案内
    ul.aside_nav_list
      li.aside_nav_list_item
        a.aside_nav_list_anchor(href="#")
          span.aside_nav_list_text カードローン
      li.aside_nav_list_item
        a.aside_nav_list_anchor.current(href="#")
          span.aside_nav_list_text クレジットカード
      li.aside_nav_list_item
        a.aside_nav_list_anchor(href="#")
          span.aside_nav_list_text ビジネスサポートカードローン
      li.aside_nav_list_item
        a.aside_nav_list_anchor.external(href="#" target="_blank")
          span.aside_nav_list_text 外部リンク
```
*/
.aside {
  float: right; 
  width: 243px;
}
.aside_btn {
  margin-bottom: 42px;
  padding: 20px 14px 23px 14px; 
  background: #f2f2f2;
}
.aside_btn_item {
  width: 100%;
  margin-top: 12px;
}
.aside_btn_item:first-child {
  margin-top: 0;
}
.aside_btn_anchor {
  height: 50px;
}
.aside_btn_anchor.btn {
  height: 50px;
  line-height: 50px;
}
.aside_btn_anchor .icon .apply,
.aside_btn_anchor .icon .login {
  width: 30px;
  height: 30px;
}
.aside_btn_text {
  font-size: 1.4rem;
}
.aside_nav {
  border-top: 7px solid #db0016;
  background: #f2f2f2;
}
.aside_nav_title {
  margin-bottom: 9px; 
  border-bottom: 1px solid #d1d1d1;
  font-size: 1.6rem;
  font-weight: 700;
}
.aside_nav_title_anchor {
  display: block;
  padding: 18px 16px 21px 16px;
}
.aside_nav_list {
  padding-bottom: 9px;
}
.aside_nav_list_anchor {
  display: block;
  padding: 5px 14px 4px 14px;
}
.aside_nav_list_anchor:hover {
  background: #e9e9e9;
}
.aside_nav_list_anchor.current {
  background: #ddd; 
  font-weight: 700;
}
.aside_nav_list_anchor.external::after {
  margin-left: 6px; 
  content: url(/img/share/ico-window.png);
}
.aside_nav_list_text {
  position: relative; 
  display: inline-block;
  padding-left: 16px;
}
.aside_nav_list_text:before {
  position: absolute;
  top: 50%;
  top: 1em;
  left: 0;
  display: block;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  margin-top: -6px; 
  content: '';
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-width: 0;
  border-style: solid;
  border-color: #db0016;
  border-top-width: 2px;
  border-right-width: 2px;
}
.aside_nav_list_anchor:hover .aside_nav_list_text::before,
.aside_nav_list_anchor.current .aside_nav_list_text::before {
  border-top-color: #999da3;
  border-right-color: #999da3;
}

/* SP 非表示 アコーディオンナビゲーション
-------------------------------------*/
.aside_sp_nav {
  display: none;
}

/*  1 column
----------------------------------------*/
.content_column {
  width: 100%;
}
.content_column_inner {
  width: 100%;
}
.content_column_inner:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.content_column_graph {
  float: left;
  width: 465px;
}
.content_column_graph_img.sp {
  display: none;
}
.content_column_paragraph {
  float: right;
  width: 306px;
}
.content_column_text_caption {
  display: inline-block;
  margin-top: 6px;
  color: #333;
  font-size: 1.3rem;
  line-height: 1.5;
}
.content_column_btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  margin-top: 21px;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
          justify-content: center;
}
.content_column_btn .btn_lrg {
  margin: 0 auto;
}
.content_column_btn .type_member .login {
  width: 35px;
  height: 35px;
  margin-right: 3px;

  fill: #fff;
}

/*
---
name: 2 カラムレイアウト
tag:
  - layout
category:
  - service
---

`.variable` クラスを付けると可変幅になる

```jade
.content_section
  .content_text
    .content_column_2
      .content_column_2_row
        article.content_column_2_left
          h3.content_title_third 左カラム 1
          p テキストテキストテキストテキストテキストテキスト1
          .content_column_btn
            .btn_md
              a.btn(href="#")
                span.btn_txt 中ボタン1
          .column_sub
            p.column_sub_text テキストテキストテキスト
            .column_sub_btn.btn_md
              a.column_sub_anchor.btn(href="#") 中サブボタン
        article.content_column_2_right
          h3.content_title_third 右カラム 1
          p テキストテキストテキストテキストテキストテキスト1
          .content_column_btn
            .btn_md
              a.btn(href="#")
                span.btn_txt 中ボタン1
      .content_column_2_row
        article.content_column_2_left
          h3.content_title_third 左カラム 2
          p テキストテキストテキストテキストテキストテキスト2
          .content_column_btn
            .btn_md
              a.btn(href="#")
                span.btn_txt 中ボタン2
        article.content_column_2_right
          h3.content_title_third 右カラム 2
          p テキストテキストテキストテキストテキストテキスト2
          .content_column_btn
            .btn_md
              a.btn(href="#")
                span.btn_txt 中ボタン2
          .column_sub
            p.column_sub_text テキストテキストテキスト
            .column_sub_btn.btn_md
              a.column_sub_anchor.btn(href="#") 中サブボタン1
            .column_sub_btn.btn_md
              a.column_sub_anchor.btn(href="#") 中サブボタン2
```
*/
.content_column_2 {
  margin-top: -58px;
}
.content_column_2_row {
  padding-top: 58px;
}
.content_column_2_row:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.content_column_2_left {
  float: left; 
  width: 372px;
}
.content_column_2_right {
  float: right; 
  width: 372px;
}
.content_column_2.variable .content_column_2_left,
.content_column_2.variable .content_column_2_right {
  width: 50%;
}
.content_column_2.variable .content_column_2_left {
  padding-right: 29px;
}
.content_column_2.variable .content_column_2_right {
  padding-left: 29px;
}

/*
---
name: 1/2画像を入れるカラムレイアウト
tag:
  - layout
category:
  - service
---

`.variable` クラスを付けると可変幅になる

```jade
.content_section
  .content_text
    .content_column_image
      .content_column_image_left
        h3.content_title_third カードローン
        p ご返済期日は、前回ご返済日の翌日から数えて、35日目です。ご返済をいただくと、その翌日からまた35日後が次回のご返済期限となります。
        ul.content_text_caption
          li ※最初はお借入日の翌日から35日後になります。
          li ※お取り引きの途中で追加借入をされても、ご返済期日は延長されません。
      .content_column_image_right
        img(src="/return/term/img/img-term_1.jpg" width="674" height="830" alt="カードローンの場合のご返済期日")
```
*/
.content_column_image {
  width: 100%;
}
.content_column_image:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.content_column_image_left {
  float: left;
  width: 336px;
}
.content_column_image_right {
  float: right;
  width: 429px;
}
.content_column_image.variable .content_column_image_left {
  width: -webkit-calc(100% - 429px);
  width:         calc(100% - 429px);
  padding-right: 36px;
}
.content_column_image.variable .content_column_image_right {
  text-align: center;
}

/*
---
name: 1/2画像を入れるカラムレイアウト(左画像/右テキスト)
tag:
  - layout
category:
  - service
---

```jade
.content_section
  .content_text
    .content_column_image_b
      .content_column_image_b_left
        img(src="/return/term/img/img-term_1.jpg" width="674" height="830" alt="カードローンの場合のご返済期日")
      .content_column_image_b_right
        h3.content_title_third カードローン
        p ご返済期日は、前回ご返済日の翌日から数えて、35日目です。ご返済をいただくと、その翌日からまた35日後が次回のご返済期限となります。
        ul.content_text_caption
          li ※最初はお借入日の翌日から35日後になります。
          li ※お取り引きの途中で追加借入をされても、ご返済期日は延長されません。
```
*/
.content_column_image_b {
  width: 100%;
}
.content_column_image_b:after {
  display: block;
  clear: both;
  height: 0; 
  content: '';
}
.content_column_image_b_left {
  float: left;
  width: 429px;
}
.content_column_image_b_right {
  float: right;
  width: 336px;
}

/* カラム内のテキスト付きボタン
--------------------------*/
.column_sub {
  width: 100%;
  margin-top: 32px;
  text-align: center;
}
.column_sub_text {
  margin-bottom: 10px; 
  text-align: center;
  font-size: 1.3rem;
}
.column_sub_btn {
  display: inline-block;
  width: auto;
  margin: 0 6px;
}
.column_sub_anchor {
  padding: 0 21px; 
  font-size: 1.4rem;
}

/*
---
name: PC 通常カラム + SP アコーディオン
tag:
  - layout
category:
  - service
---

1 カラムも 2 カラムも対応。.content_column(_2) の親に .content_column_accordion を付与する。
アコーディオンの動作自体は share.js 内の AccordionVM モジュールを使用する。

```jade
#js-trouble_block.content_column_accordion.content_text
  //- 1カラム
  article.content_column
    .content_column_row
      h3.content_title_third 盗難・紛失の場合
      button.js-members_accordion_button.content_column_accordion_button(aria-selected="true")
        | 盗難・紛失の場合
        span.content_column_accordion_icon
      .js-members_accordion_content.content_column_accordion_content(aria-expanded="true")
        .content_column_accordion_inner
          ol.content_order_list
            li フリーコール（0120-629-215）までご連絡ください。カードのご利用を停止いたします。
            li お近くの警察署へ紛失届をご提出ください。
            li 再発行のお手続きは、運転免許証などをご用意のうえ自動契約機（むじんくん）・店頭窓口・郵送のいずれかをご利用ください。
  //- 2カラム
  .content_column_2
    .content_column_2_row
      article.content_column_2_left
        h3.content_title_third 盗難・紛失の場合
        button.js-members_accordion_button.content_column_accordion_button(aria-selected="true")
          | 盗難・紛失の場合
          span.content_column_accordion_icon
        .js-members_accordion_content.content_column_accordion_content(aria-expanded="true")
          .content_column_accordion_inner
            ol.content_order_list
              li フリーコール（0120-629-215）までご連絡ください。カードのご利用を停止いたします。
              li お近くの警察署へ紛失届をご提出ください。
              li 再発行のお手続きは、運転免許証などをご用意のうえ自動契約機（むじんくん）・店頭窓口・郵送のいずれかをご利用ください。
```
*/
.content_column_accordion_button {
  display: none;
}

/*
---
name: モーダル
tag:
  - layout
category:
  - service
---

share.js の ModalVM から使用する。

 ```jade
//- トリガー & テンプレート
a(href="#template_id") モーダルを開く
.modal_template
  h3 モーダルのテンプレート

//- モーダル背景 & コンテンツ
.modal_backdrop
.modal
  .modal_content
    button.modal_close
    h3 モーダルのテンプレート
 ```
*/
html.modal_opened {
  overflow: hidden;
}

.modal_backdrop {
  position: fixed;
  z-index: 6;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: opacity 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98);
          transition: opacity 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98); 
  opacity: 0.6;
  background-color: #000;
}
.modal_backdrop[aria-hidden='true'] {
  display: none;
}

.modal_template {
  display: none;
}

.modal {
  position: fixed;
  z-index: 7;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: auto;
  -webkit-transition: opacity 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98);
          transition: opacity 0.5s cubic-bezier(0.44, 0.03, 0.14, 0.98); 

  outline-y: scroll;
}
.modal_content {
  position: relative;
  width: 900px;
  margin: 120px auto;
  background-color: #fff;
}
.modal_close {
  position: absolute;
  top: -35px;
  right: -35px;
  width: 30px;
  height: 30px;
  border-width: 0;
  background-color: transparent;
}
.modal_close::before,
.modal_close::after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 30px;
  height: 3px;
  margin-top: -1.5px;
  content: '';
  background-color: #fff;
}
.modal_close::before {
  -webkit-transform: rotateZ(45deg);
      -ms-transform: rotate(45deg);
          transform: rotateZ(45deg);
}
.modal_close::after {
  -webkit-transform: rotateZ(135deg);
      -ms-transform: rotate(135deg);
          transform: rotateZ(135deg);
}
@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}


/* カードローンを知るパーツ
--------------------------*/
.cardloan_know {
 background-color:#f5f5f5;
 }
.cardloan_know .content_title_cardloan_know{
 text-align:center;
 background-color:#f5f5f5;
 padding:10px;
 font-size:2rem;
 }
.cardloan_know .content_text{
  margin-bottom:0;
 }
.cardloan_know .thumb_column_grid_inner{
  margin-bottom:10px;
 }
.cardloan_know .content_section_bottom{
  padding-top:0;
  margin-top:0;
}
.cardloan_know .content_title_cardloan_know .content_title_cardloan_know_text{
  padding-left:40px;
  background-image:url(/img/share/ico-know.png);
  background-size:27px auto;
  background-repeat:no-repeat;
  background-position:left center;
}
.cardloan_know .thumb_column_grid_inner{
 padding:0 50px;
 }
.cardloan_know .thumb_column_grid_text{
  padding-top:15px;
 }
 .cardloan_know.type02 .content_title_cardloan_know{
   margin-bottom:0;
   padding-top:35px;
   background-color:#f5f5f5;
 }
 .cardloan_know.type02 .personalize_panel{
 border-top:none;
 background-color:#f5f5f5;

  }
.cardloan_know.type02 .personalize_panel a:hover img{
  opacity:1;
 }
.cardloan_know.type02 .personalize_panel .btn_panel.current a{background-color:#dddddd;font-weight:bold;}
.cardloan_know.type02 .sponly{
 display:none;
 }


/* 段落
--------------------------*/
.definition_list > dd{
  margin-left: 1.4rem;
}

/* 汎用クラス
--------------------------*/
.mL20 { margin-left: 20px !important; }
.mT20 { margin-top: 20px !important; }
.mB20 { margin-bottom: 20px !important; }
.m0a { margin: 0 auto; }
.w218 { width: 218px; }
.w250 { width: 250px; }
.bfbgNone:before { background: none !important; }
.textRed { color: #db0016 !important; }
.fontBold { font-weight: bold; }
.textUnder { text-decoration: underline; }

/* 括弧パーツ
--------------------------*/
.parenthesis {
	position: relative;
	padding: 0 20px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis::before {
	position: absolute;
	top: 0;
	content: '';
	width: 20px;
	height: 100%;
	border-top: 1px solid #a5a5a5;
	border-bottom: 1px solid #a5a5a5;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis::after {
	position: absolute;
	top: 0;
	content: '';
	width: 20px;
	height: 100%;
	border-top: 1px solid #a5a5a5;
	border-bottom: 1px solid #a5a5a5;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.parenthesis::before {
	left: 0;
	border-left: 1px solid #a5a5a5;
}
.parenthesis::after {
	right: 0;
	border-right: 1px solid #a5a5a5;
}

.listDisc {
  padding-left: 15px;
}
.listDisc:before {
  position: absolute;
  top: 0.85em;
  left: 15px;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  content: '';
  border-radius: 6px;
  background: #a5a5a5;
}

.sp_only{
  display:none;
}