レギュレーションパーツ一覧

Color rule
Peach Button
Title Text
Button
Object
Text icon
Text field
Check box、Check mark
Text
Tab
Status bar
Separate
Table
Accordion

Color rule

/* --- メインカラー/ベースカラー1 --- */

/* Peachピンク (PANTONE 204C) */

--peach-pink

/* Peachアイボリー (PANTONE 9061C) */

--peach-ivory

/* --- ベースカラー2 --- */

/* Peachベージュ (PANTONE 4725C) */

--peach-beige

/* ホワイト */

--peach-white

/* --- サブカラー1 --- */

/* ローズピンク (PANTONE 205C) */

--peach-rose-pink

/* ペールピンク (PANTONE 2043C) */

--peach-pale-pink

--peach-pale-pink-70

--peach-pale-pink-50

/* ライトベージュ (PANTONE 4745C) */

--peach-light-beige

--peach-light-beige-50

--peach-light-beige-40

--peach-light-beige-30

/* --- テキストカラー --- */

/* ダークブラウン (PANTONE 411C) */

--peach-dark-brown

--peach-dark-brown-80

--peach-dark-brown-50

--peach-dark-brown-30

--peach-dark-brown-15

/* --- サブカラー2 --- */

/* ブルー (PANTONE 4150C) */

--peach-blue

--peach-blue-80

--peach-blue-60

--peach-blue-30

--peach-blue-20

/* --- アクセントカラー --- */

/* レッド (PANTONE 3546C) */

--peach-red

--peach-red-15

<div style="color:#000;">
/* --- メインカラー/ベースカラー1 --- */

/* Peachピンク (PANTONE 204C) */
<div style="background: var(--peach-pink);">--peach-pink</div>
/* Peachアイボリー (PANTONE 9061C) */
<div style="background: var(--peach-ivory);">--peach-ivory</div>



/* --- ベースカラー2 --- */

/* Peachベージュ (PANTONE 4725C) */
<div style="background: var(--peach-beige);">--peach-beige</div>
/* ホワイト */
<div style="background: var(--peach-white);">--peach-white</div>



/* --- サブカラー1 --- */

/* ローズピンク (PANTONE 205C) */
<div style="background: var(--peach-rose-pink);">--peach-rose-pink</div>
/* ペールピンク (PANTONE 2043C) */
<div style="background: var(--peach-pale-pink);">--peach-pale-pink</div>
<div style="background: var(--peach-pale-pink-70);">--peach-pale-pink-70</div>
<div style="background: var(--peach-pale-pink-50);">--peach-pale-pink-50</div>
/* ライトベージュ (PANTONE 4745C) */
<div style="background: var(--peach-light-beige);">--peach-light-beige</div>
<div style="background: var(--peach-light-beige-50);">--peach-light-beige-50</div>
<div style="background: var(--peach-light-beige-40);">--peach-light-beige-40</div>
<div style="background: var(--peach-light-beige-30);">--peach-light-beige-30</div>



/* --- テキストカラー --- */

/* ダークブラウン (PANTONE 411C) */
<div style="background: var(--peach-dark-brown);">--peach-dark-brown</div>
<div style="background: var(--peach-dark-brown-80);">--peach-dark-brown-80</div>
<div style="background: var(--peach-dark-brown-50);">--peach-dark-brown-50</div>
<div style="background: var(--peach-dark-brown-30);">--peach-dark-brown-30</div>
<div style="background: var(--peach-dark-brown-15);">--peach-dark-brown-15</div>



/* --- サブカラー2 --- */

/* ブルー (PANTONE 4150C) */
<div style="background: var(--peach-blue);">--peach-blue</div>
<div style="background: var(--peach-blue-80);">--peach-blue-80</div>
<div style="background: var(--peach-blue-60);">--peach-blue-60</div>
<div style="background: var(--peach-blue-30);">--peach-blue-30</div>
<div style="background: var(--peach-blue-20);">--peach-blue-20</div>



/* --- アクセントカラー --- */

/* レッド (PANTONE 3546C) */
<div style="background: var(--peach-red);">--peach-red</div>
<div style="background: var(--peach-red-15);">--peach-red-15</div>

</div>

Peach Button

テキスト

テキストテキストテキストテキストテキスト

矢なし

非活性ボタン

<div class="u-tc">
  <div class="btn_book">
    <a href="#">テキスト</a>
  </div>
</div>

<div class="u-tc">
  <div class="btn_book">
    <a href="#">テキストテキストテキストテキストテキスト</a>
  </div>
</div>

<div class="u-tc">
  <div class="btn_book no_arrow size_small">
    <a href="#">矢なし</a>
  </div>
</div>

<div class="u-tc">
  <div class="btn_book">
    <a href="#" class="is-disabled">非活性ボタン</a>
  </div>
</div>

テキスト

矢なし

非活性ボタン

<div class="u-tc">
  <div class="btn_book_g">
    <a href="#">テキスト</a>
  </div>
</div>

<div class="u-tc">
  <div class="btn_book_g no_arrow size_small">
    <a href="#">矢なし</a>
  </div>
</div>

<div class="u-tc">
  <div class="btn_book_g">
    <a href="#" class="is-disabled">非活性ボタン</a>
  </div>
</div>

テキスト

矢なし

非活性ボタン

<div class="u-tc">
  <div class="btn_book_n">
    <a href="#">テキスト</a>
  </div>
</div>

<div class="u-tc">
  <div class="btn_book_n no_arrow size_small">
    <a href="#">矢なし</a>
  </div>
</div>

<div class="u-tc">
  <div class="btn_book_n">
    <a href="#" class="is-disabled">非活性ボタン</a>
  </div>
</div>

戻るボタン

<div class="u-tc">
  <div class="btn_book_g2 back_arrow">
    <a href="#">戻るボタン</a>
  </div>
</div>

PDFリンクアイコン

PDFリンク非活性

<div class="u-tc">
  <div class="btn_pdf">
    <a href="#"><span>PDFリンクアイコン</span></a>
  </div>
</div>

<div class="u-tc">
  <div class="btn_pdf">
    <a href="#" class="is-disabled"><span>PDFリンク非活性</span></a>
  </div>
</div>

外部リンクアイコン

外部リンク非活性

<div class="u-tc">
  <div class="btn_ex">
    <a href="#"><span>外部リンクアイコン</span></a>
  </div>
</div>

<div class="u-tc">
  <div class="btn_ex">
    <a href="#" class="is-disabled"><span>外部リンク非活性</span></a>
  </div>
</div>

検索

ボタン

出発地から選びなおす

<div class="u-tc">
  <div class="btn_book no_arrow size_small">
    <a href="#">検索<i class="icon u-ml10"><img src="/application/themes/peach/assets/images/common/icon/black/icon_search.svg" alt="SEARCH" width="54" height="54" class="u-filterWhiteColor"></i></a>
  </div>
</div>

<div class="u-tc">
  <div class="btn_book_g no_arrow">
    <a href="#">ボタン<i class="icon u-ml10"><img src="/application/themes/peach/assets/images/common/icon/black/icon_aircraft-horizontal.svg" alt="" class="u-filterWhiteColor"></i></a>
  </div>
</div>

<div class="u-tc">
  <div class="btn_book_n no_arrow">
    <a href="#">出発地から選びなおす<i class="icon u-ml10"><img src="/application/themes/peach/assets/images/common/icon/pink/icon_departure.svg" alt="" width="54" height="54"></i></a>
  </div>
</div>

ページ内リンク

ページ内Col2
ページ内Col2

ページ内Col3
ページ内Col3
ページ内Col3

ページ内Col4
ページ内Col4
ページ内Col4
ページ内Col4

<div><a href="#" class="pageLink">ページ内リンク</a></div>

<ul class="pageNavCol2">
  <li><a href="#***">ページ内Col2</a></li>
  <li><a href="#***">ページ内Col2</a></li>
</ul>

<ul class="pageNavCol3">
  <li><a href="#***">ページ内Col3</a></li>
  <li><a href="#***">ページ内Col3</a></li>
  <li><a href="#***">ページ内Col3</a></li>
</ul>

<ul class="pageNavCol4">
  <li><a href="#***">ページ内Col4</a></li>
  <li><a href="#***">ページ内Col4</a></li>
  <li><a href="#***">ページ内Col4</a></li>
  <li><a href="#***">ページ内Col4</a></li>
</ul>

サイト内リンク

サイト内Col2
サイト内Col2

サイト内Col3
サイト内Col3
サイト内Col3

サイト内Col4
サイト内Col4
サイト内Col4
サイト内Col4

<div><a href="#" class="siteLink">サイト内リンク</a></div>

<ul class="siteNavCol2">
  <li><a href="#***">サイト内Col2</a></li>
  <li><a href="#***">サイト内Col2</a></li>
</ul>

<ul class="siteNavCol3">
  <li><a href="#***">サイト内Col3</a></li>
  <li><a href="#***">サイト内Col3</a></li>
  <li><a href="#***">サイト内Col3</a></li>
</ul>

<ul class="siteNavCol4">
  <li><a href="#***">サイト内Col4</a></li>
  <li><a href="#***">サイト内Col4</a></li>
  <li><a href="#***">サイト内Col4</a></li>
  <li><a href="#***">サイト内Col4</a></li>
</ul>

<div class="relationLink">
  <a href="#">機内持ち込み手荷物</a>
  <a href="#">機内持ち込み手荷物</a>
  <a href="#">機内持ち込み手荷物</a>
</div>

Title Text

大見出し

<h1>大見出し</h1>

中見出し

<h2>中見出し</h2>

小見出し

<h3>小見出し</h3>

Button

キーワードで検索

<dl class="formItemGroup">
  <dt>キーワードで検索</dt>
  <dd>
    <form class="searchForm u-maxw500" method="get" action="#">
      <label class="searchForm_input"><input type="search" placeholder="キーワード"></label>
      <div class="searchForm_submit">
        <div class="btn_icon"><button><i class="icon"><img src="/application/themes/peach/assets/images/common/icon/black/icon_search.svg" alt="SEARCH" width="54" height="54" class="u-filterWhiteColor"></i></button></div>
      </div>
    </form>
  </dd>
</dl>

<div class="btn_thumb">
  <a href="#">
    <figure>
      <img src="/application/themes/peach/assets/images/dummy/dummy1.jpg" alt="">
      <figcaption>環境</figcaption>
    </figure>
  </a>
</div>

Object

本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

[Peach メールマガジン配信設定]

<div class="box1">
  <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
  <p class="mt20">[Peach メールマガジン配信設定]</p>
</div>

<div class="box2">
  <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
  <p class="mt20">[Peach メールマガジン配信設定]</p>
</div>

<div class="box3">
  <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
  <p class="mt20">[Peach メールマガジン配信設定]</p>
</div>

便の変更はできますか

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<dl class="box_definition -attention">
  <dt>便の変更はできますか</dt>
  <dd>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </dd>
</dl>

ご注意: ・テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト; ・テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<dl class="noteList">
 <dt>ご注意</dt>
 <dd>・テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
 <dd>・テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>

<ul class="indexLayout">
  <li>
    <figure><img src="/application/themes/peach/assets/images/dummy/pic_sample01.png" alt=""></figure>
    <div class="ttl"><a href="#">機内持ち込み手荷物</a></div>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
  </li>
  <li>
    <figure><img src="/application/themes/peach/assets/images/dummy/pic_sample01.png" alt=""></figure>
    <div class="ttl"><a href="#">機内持ち込み手荷物</a></div>
  </li>
  <li>
    <div class="ttl"><a href="#">機内持ち込み手荷物</a></div>
  </li>
  <li>
    <div class="ttl"><a href="#">機内持ち込み手荷物</a></div>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
  </li>
</ul>

Text icon

SALE

STAFF

NEW

PRE

<span class="text_icon1 outline_pink">SALE</span>

<span class="text_icon1 bg_brown">STAFF</span>

<span class="text_icon1 bg_pink">NEW</span>

<span class="text_icon1 bg_blue">PRE</span>

必須

任意

<span class="text_icon2 bg_rosepink">必須</span>

<span class="text_icon2 bg_palebrown">任意</span>

Text field

任意電話番号

必須電話番号: 半角英数で入力してください。

電話番号

<dl class="formItemGroup u-maxw500">
  <dt><span class="text_icon2 bg_palebrown u-mr5">任意</span>電話番号</dt>
  <dd>
    <label><input type="text" placeholder="例：00000000000"></label>
  </dd>
</dl>

<dl class="formItemGroup u-maxw500">
  <dt><span class="text_icon2 bg_rosepink u-mr5">必須</span>電話番号</dt>
  <dd>
    <label><input type="text" placeholder="例：00000000000" class="is-error"></label>
    <p class="error">半角英数で入力してください。</p>
  </dd>
</dl>

<dl class="formItemGroup u-maxw500">
  <dt>電話番号</dt>
  <dd>
    <label><input type="text" placeholder="例：00000000000" disabled="disabled"></label>
  </dd>
</dl>

Check box、Check mark

チェックボックス

チェック済み
空欄
マウスオーバー
非活性
エラー

<dl class="formItemGroup">
  <dt>チェックボックス</dt>
  <dd>
    <ul>
      <li><label><input type="checkbox" checked="checked"> チェック済み</label></li>
      <li><label><input type="checkbox"> 空欄</label></li>
      <li><label><input type="checkbox"> マウスオーバー</label></li>
      <li><label><input type="checkbox" disabled="disabled"> 非活性</label></li>
      <li><label><input type="checkbox" class="is-error"> エラー</label></li>
    </ul>
  </dd>
</dl>

ラジオボタン

チェック済み
空欄
マウスオーバー
非活性
エラー

<dl class="formItemGroup">
  <dt>ラジオボタン</dt>
  <dd>
    <ul>
      <li><label><input type="radio" name="radiodummy1" checked="checked"> チェック済み</label></li>
      <li><label><input type="radio" name="radiodummy1"> 空欄</label></li>
      <li><label><input type="radio" name="radiodummy1"> マウスオーバー</label></li>
      <li><label><input type="radio" name="radiodummy1" disabled="disabled"> 非活性</label></li>
      <li><label><input type="radio" name="radiodummy1" class="is-error"> エラー</label></li>
    </ul>
  </dd>
</dl>

Text

本文本文本文本文本文本文本文本文
文本文本文本文本文本文本文本文

<p>本文本文本文本文本文本文本文本文<br>文本文本文本文本文本文本文本文</p>

【注意】

<p class="noteText">【注意】</p>

注釈注釈注釈注釈注釈

<p class="annotation">注釈注釈注釈注釈注釈</p>

強調

<em>強調</em>

注意喚起

<em class="note">注意喚起</em>

テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト

<ul class="bulletsList">
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
</ul>

テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
- テキストテキストテキストテキストテキスト
- テキストテキストテキストテキストテキスト
- テキストテキストテキストテキストテキスト
- テキストテキストテキストテキストテキスト

<ul class="bulletsList">
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト
    <ul>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
      <li>テキストテキストテキストテキストテキスト</li>
    </ul>
  </li>
</ul>

テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト

<ol class="numberList">
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
</ol>

テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト

<ol class="numberList2">
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
  <li>テキストテキストテキストテキストテキスト</li>
</ol>

注意事項注意事項注意事項注意事項注意事項
注意事項注意事項注意事項注意事項注意事項
注意事項注意事項注意事項注意事項注意事項

<ul class="attention">
  <li>注意事項注意事項注意事項注意事項注意事項</li>
  <li>注意事項注意事項注意事項注意事項注意事項</li>
  <li>注意事項注意事項注意事項注意事項注意事項</li>
</ul>

テキストリンク

test

<p><a href="#">テキストリンク</a></p>

<p><a class="triangle" href="#">test</a></p>

3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！
異国情緒にあふれ、和洋中の文化が入り混じる長崎、
屈指の温泉地であり黒豚や黒毛和牛など「黒グルメ」もおいしい鹿児島。
首都圏と九州を繋ぐ路線は、福岡・奄美線と合わせ、これで4路線に。3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！
異国情緒にあふれ、和洋中の文化が入り混じる長崎、
屈指の温泉地であり黒豚や黒毛和牛など「黒グルメ」もおいしい鹿児島。
首都圏と九州を繋ぐ路線は、福岡・奄美線と合わせ、これで4路線に。

<div class="iayoutPatternImageLeft">
  <figure><img src="/application/themes/peach/assets/images/dummy/pic_sample01.png" alt=""></figure>
  <div class="txtArea">
    <p>3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！<br>異国情緒にあふれ、和洋中の文化が入り混じる長崎、<br>屈指の温泉地であり黒豚や黒毛和牛など「黒グルメ」もおいしい鹿児島。<br>首都圏と九州を繋ぐ路線は、福岡・奄美線と合わせ、これで4路線に。3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！<br>異国情緒にあふれ、和洋中の文化が入り混じる長崎、<br>屈指の温泉地であり黒豚や黒毛和牛など「黒グルメ」もおいしい鹿児島。<br>首都圏と九州を繋ぐ路線は、福岡・奄美線と合わせ、これで4路線に。</p>
  </div>
</div>

<div class="iayoutPatternImageRight">
  <figure><img src="/application/themes/peach/assets/images/dummy/pic_sample01.png" alt=""></figure>
  <div class="txtArea">
    <p>3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！<br>異国情緒にあふれ、和洋中の文化が入り混じる長崎、<br>屈指の温泉地であり黒豚や黒毛和牛など「黒グルメ」もおいしい鹿児島。<br>首都圏と九州を繋ぐ路線は、福岡・奄美線と合わせ、これで4路線に。3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！<br>異国情緒にあふれ、和洋中の文化が入り混じる長崎、<br>屈指の温泉地であり黒豚や黒毛和牛など「黒グルメ」もおいしい鹿児島。<br>首都圏と九州を繋ぐ路線は、福岡・奄美線と合わせ、これで4路線に。</p>
  </div>
</div>

機内持ち込みの手荷物について

<div class="MainImageBlock">
  <figure class="view_pc"><img src="/application/themes/peach/assets/images/dummy/ogp_1200x628_sample.gif" alt="PC版バナー"></figure>
  <figure class="view_sp"><img src="/application/themes/peach/assets/images/dummy/tbnsp_750x900_sample.gif" alt="SP版バナー"></figure>
</div>
<h1>機内持ち込みの手荷物について</h1>

Tab

<ul class="tabIndex three">
  <li class="active"><span>変更/取り消し/払い戻し</span></li>
  <li><span>欠航・大幅遅延発生時の<br>振替/払い戻し</span></li>
  <li><span>欠航・大幅遅延発生時の<br>振替/払い戻し</span></li>
</ul>

<ul class="tabIndex two">
  <li class="active"><span>変更/取り消し/払い戻し</span></li>
  <li><span>欠航・大幅遅延発生時の<br>振替/払い戻し</span></li>
</ul>

Status bar

フライト
選択
お客様
情報
オプション
最終確認
・支払い

<ol class="statusBar">
  <li class="is-passed"><span>フライト<br class="view_sp">選択</span></li>
  <li class="is-current"><span>お客様<br class="view_sp">情報</span></li>
  <li><span>オプション</span></li>
  <li><span>最終確認<br class="view_sp">・支払い</span></li>
</ol>

Separate

<hr class="dividing">

<hr class="contents">

[Peach メールマガジン配信設定]

<div class="bgBox -full -beige">
  <div class="bgBox_content">
    <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
    <p class="mt20">[Peach メールマガジン配信設定]</p>
  </div>
</div>

<div class="bgBox -full -pink">
  <div class="bgBox_content">
    <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
    <p class="mt20">[Peach メールマガジン配信設定]</p>
  </div>
</div>

[Peach メールマガジン配信設定]

<div class="bgBox -beige">
  <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
  <p class="mt20">[Peach メールマガジン配信設定]</p>
</div>

<div class="bgBox -pink">
  <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
  <p class="mt20">[Peach メールマガジン配信設定]</p>
</div>

	姓	名	性別	座席
1 大人	SORANO	MOMOKO	女性	未指定

<table class="infoStatus">
  <thead>
    <tr>
      <th class="-number"></th>
      <td class="-name">姓</td>
      <td class="-name">名</td>
      <td class="-gender">性別</td>
      <td class="-seat">座席</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <dl class="infoStatus_person">
          <dt>1</dt>
          <dd>
            <img src="/application/themes/peach/assets/images/common/icon/darkbrown/icon_adult.svg" alt="" width="54" height="54">
            大人
          </dd>
        </dl>
      </th>
      <td>SORANO</td>
      <td>MOMOKO</td>
      <td>女性</td>
      <td><em>未指定</em></td>
    </tr>
  </tbody>
</table>

Table

テキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキスト	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="basicTable -spScroll">
    <table>
      <tbody>
        <tr>
          <th class="u-minw150">テキスト</th>
          <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
        <tr>
          <th class="u-minw150">テキスト</th>
          <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
        <tr>
          <th class="u-minw150">テキスト</th>
          <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        </tr>
      </tbody>
    </table>
  </div>

	テキスト	テキスト	テキスト
テキストテキストテキストテキスト	テキスト	テキスト	テキスト
テキストテキストテキストテキスト	テキスト	テキスト	テキスト
テキストテキストテキストテキスト	テキスト	テキスト	テキスト

<div class="specialTable -spScroll">
    <table>
      <thead>
        <tr>
          <th class="-empty"></th>
          <th class="-radius1">テキスト</th>
          <th>テキスト</th>
          <th class="-radius2">テキスト</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="-radius1">テキストテキスト<br>テキストテキスト</th>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
        </tr>
        <tr>
          <th>テキストテキスト<br>テキストテキスト</th>
          <td>テキスト</td>
          <td>テキスト</td>
          <td>テキスト</td>
        </tr>
        <tr>
          <th class="-radius4">テキストテキスト<br>テキストテキスト</th>
          <td>テキスト</td>
          <td>テキスト</td>
          <td class="-radius3">テキスト</td>
        </tr>
      </tbody>
    </table>
  </div>

	ミニマム	スタンダード	スタンダードプラス
発券手数料詳細・料金を見る	有料	無料	無料
便変更詳細・料金を見る	不可	不可	無料
機内持ち込み手荷物 2個合計 7kg 以内詳細・料金を見る	無料	無料	無料

<div class="specialTable -spScroll">
    <table>
      <thead>
        <tr>
          <th class="-empty"></th>
          <th class="u-color-ivory u-bg-blue80 -radius1">ミニマム</th>
          <th class="u-color-ivory u-bg-rosepink">スタンダード</th>
          <th class="u-color-ivory u-bg-darkbrown80 -radius2">スタンダードプラス</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="-radius1">発券手数料<br><span class="btn_small u-mt5"><a href="">詳細・料金を見る</a></span></th>
          <td>有料</td>
          <td class="u-bg-palepink70"><em>無料</em></td>
          <td><em>無料</em></td>
        </tr>
        <tr>
          <th>便変更<br><span class="btn_small u-mt5"><a href="">詳細・料金を見る</a></span></th>
          <td class="u-bg-blue20">不可</td>
          <td>不可</td>
          <td><em>無料</em></td>
        </tr>
        <tr>
          <th class="-radius4">機内持ち込み手荷物<br><small>2個合計 7kg 以内</small><br><span class="btn_small u-mt5"><a href="">詳細・料金を見る</a></span></th>
          <td><em>無料</em></td>
          <td><em>無料</em></td>
          <td class="u-bg-lightbeige40 -radius3"><em>無料</em></td>
        </tr>
      </tbody>
    </table>
  </div>

<table class="tableType1">
    <tbody><tr>
      <th>便名</th>
      <th>出発</th>
      <th>到着</th>
    </tr>
    <tr>
      <td>MM555</td>
      <td>9:00</td>
      <td>14:15</td>
    </tr>
  </tbody></table>

<div class="tableType2">
  <table>
    <tbody>
      <tr>
        <th>便名</th>
        <td>3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！</td>
      </tr>
      <tr>
        <th>出発</th>
        <td>3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！</td>
      </tr>
      <tr>
        <th>到着</th>
        <td>3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！3月29日、東京(成田)－長崎/鹿児島線がそれぞれ就航します！</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="tableType3">
  <table>
    <thead>
      <tr>
        <th class="th_type1" rowspan="2">国内線<br>料金一覧</th>
        <th colspan="3">インターネットで予約</th>
        <th colspan="3">コンタクトセンターで予約</th>
        <th colspan="3">空港カウンターで予約</th>
      </tr>
      <tr>
        <th class="th_type2">ミニマム</th>
        <th class="th_type3">スタンダード</th>
        <th class="th_type4">スタンダードプラス</th>
        <th class="th_type2">ミニマム</th>
        <th class="th_type3">スタンダード</th>
        <th class="th_type4">スタンダードプラス</th>
        <th class="th_type2">ミニマム</th>
        <th class="th_type3">スタンダード</th>
        <th class="th_type4">スタンダードプラス</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="tb_th" colspan="10">各種手数料各種手数料</th>
      </tr>
      <tr>
        <th>新規予約手数料</th>
        <td colspan="3">無料</td>
        <td colspan="3">￥600</td>
        <td colspan="3">￥600</td>
      </tr>
      <tr>
        <th>支払手数料</th>
        <td colspan="3">無料</td>
        <td colspan="3">￥600</td>
        <td colspan="3">￥600</td>
      </tr>
      <tr>
        <th>支払手数料</th>
        <td colspan="3">無料</td>
        <td colspan="3">￥600</td>
        <td colspan="3">￥600</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="tableType4">
  <table>
    <thead>
      <tr>
        <th class="th_type1">国内線料金一覧</th>
        <th class="th_type2">ミニマム</th>
        <th class="th_type3">スタンダード</th>
        <th class="th_type4">スタンダードプラス</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="tb_th" colspan="4">各種手数料各種手数料</th>
      </tr>
      <tr>
        <th>新規予約手数料</th>
        <td colspan="3">無料</td>
      </tr>
      <tr>
        <th>支払手数料</th>
        <td colspan="3">無料</td>
      </tr>
      <tr>
        <th>支払手数料</th>
        <td colspan="3">無料</td>
      </tr>
    </tbody>
  </table>
</div>

Accordion

便の変更はできますか？: テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<dl class="box_definition js-acWrap">
 <dt class="js-acBtn">便の変更はできますか？</dt>
 <dd class="js-acCont">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>

便の変更はできますか？: テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<dl class="box_definition -attention js-acWrap">
 <dt class="js-acBtn">便の変更はできますか？</dt>
 <dd class="js-acCont">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>