@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

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

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

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

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

body, input, select, textarea {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Lucida Grande", Meiryo, メイリオ, Roboto, "Droid Sans", sans-serif;
}

body {
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

div, h1, h2, h3, h4, h5, h6, p, dt, dd, caption, th, td, article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
  text-align: left;
}

address, caption, cite, code, dfn, var {
  font-style: normal;
  font-weight: normal;
}

/* チェック・ラジオ・テキスト入力 */
input[type=checkbox],
input[type=radio],
input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=telephone],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
textarea {
  margin: 0;
  vertical-align: middle;
}

/* ボタン・セレクト */
input[type=button],
input[type=file],
input[type=image],
input[type=reset],
input[type=submit],
select {
  margin: 0;
  vertical-align: middle;
}

/* Firefox hack */
@-moz-document url-prefix() {
  select {
    margin-left: 1px;
  }
}
li {
  list-style: none;
}

em {
  font-style: normal;
}

/* [[ color ]] */
/* -------------------------------------------- */
/* -------------------------------------------- */
/* [[ $main_color ]] */
/* h2（headline-square）の背景色・h3（headline-leftBorder）のボーダーとサブタイトル・各所強調色 など */
/* -------------------------------------------- */
/* [[ sub color ]] */
/* h4（headline-bar）のカラー など */
/* -------------------------------------------- */
/* [[ accent color ]] */
/* entryボタン・class名「.accent」のテキスト・guidelineのheadline用マーカー など */
/* -------------------------------------------- */
/* [[ accordion_utility-btn color ]] */
/* アコーディオン開閉ボタン */
/* 文字色 */
/* アウトラインの色 */
/* 背景色 */
/* -------------------------------------------- */
/* [[ offer color ]] */
/* イベント終了案内および参加特典部分のボーダー色・背景色 */
/* 見出しの文字色 */
/* アウトラインの色 */
/* 背景色 */
/* -------------------------------------------- */
/* [[ timetable color ]] */
/* タイムテーブルのパーツ色 */
/* 「X回目」の背景色とボーダー各所 */
/* 「XX：XX START」の背景色 */
/* -------------------------------------------- */
/* [[ entry jobList color ]] */
/* 企業一覧へのリンクボタン */
/* [[ mixin ]] */
/* -------------------------------------------- */
/* [[ breakpoints ]] */
/*doc
---
title: breakpoints
name: breakpoints
category: config
parent: mixin
---

*breakpointsの呼び出し*

ブレークポイント860px以下の書き方

```css
@include breakpoint(pc) {
		color: #000;
}
```

ブレークポイント640px以下の書き方

```css
@include breakpoint(sp) {
		color: #000;
}
```
*/
/* [[ extend ]] */
/* -------------------------------------------- */
/* [[ clear fix ]] */
/*doc
---
title: extend-clearfix
name: extend-clearfix
category: config
parent: extend
---

*clearfixの呼び出し*

```css
.test{
		@extend %extend_clearfix;
}
```
*/
/* [[ twig仕様 ]] */
/*doc
---
title: period
name: period
category: config
---

*時限管理*

* `isBeforePeriod` ：2018年10月20日18：00「まで」表示したいなー

```twig
{% if assist.isBeforePeriod('201810201800') %}
		<p class="text">2018年10月20日18：00まで、このソースを表示します＼(^_^)／</p>
{% endif %}
```

* `isAfterPeriod` ：2018年10月20日18：00「以降」表示したいなー

```twig
{% if assist.isAfterPeriod('201810201800') %}
		<p class="text">2018年10月20日18：00以降、このソースを表示します(・ω・)</p>
{% endif %}
```

* `isPeriod` ：2018年10月20日18：00「から」2018年10月30日18：00「まで」表示したいなー

```twig
{% if assist.isPeriod('201810201800', '201810301800') %}
		<p class="text">2018年10月20日18：00から2018年10月30日18：00まで、このソースを表示します(｀_´)ゞ</p>
{% endif %}
```

* ※ コンパイルする場合は記号がバッティングするので `{%` と `%}` に置換用の変数を使う。中身の書き方は同じ。

```twig
{{ config.codeStart }} if assist.isBeforePeriod('201810201800') {{ config.codeEnd }}
		<p class="text">2018年10月20日18：00まで、このソースを表示します＼(^_^)／</p>
{{ config.codeStart }} endif {{ config.codeEnd }}
```
*/
/* [[ body ]] */
body {
  color: #666;
  background-image: url(../image/bg.gif);
  background-color: #eee;
  background-repeat: repeat-y;
  background-position: center top;
}
@media screen and (max-width: 860px) {
  body {
    background-image: none;
    background-color: transparent;
  }
}

/* [[ .contents ]] */
.contents {
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
}

/* [[ .header ]] */
/*
.header {
}
*/
/* -------------------------------------------- */
/* [[ siteName ]] */
/*doc
---
title: 01-siteName
name: 01-siteName
category: layout
parent: header
---

*リファラーが以下のいずれかの場合：ロゴを表示する*

* アルキタ
* アルキタ学生バイト
* ジョブキタ
* シゴトガイド総合
* 旭川シゴトガイド
* 函館シゴトガイド
* 苫小牧・室蘭シゴトガイド
* 千歳・恵庭シゴトガイド
* 十勝シゴトガイド
* 釧路シゴトガイド
* 北見・網走・紋別シゴトガイド
* 小樽シゴトガイド
* 岩見沢・滝川シゴトガイド
* しゅふきた
* オタルナビ

```html_example
<p id="siteName" class="haj siteName"><strong class="siteNameItem-emphasis"><img class="siteNameImg" src="https://secure.haj.co.jp/hajsite_common/haj_site_logo/sitelogo_1_1_24.png" alt="アルキタ" title="アルキタ" /></strong><span class="siteNameItem">からのご案内</span></p>
```

*リファラーが以下のいずれかの場合：テキストでHAJの社名を表示する*

* その他

```html_example
<p id="siteName" class="haj siteName"><strong class="siteNameItem-emphasis">HAJ 株式会社 北海道アルバイト情報社</strong><span class="siteNameItem">からのご案内</span></p>
```
*/
#siteName.arukita {
  /* アルキタ */
}

#siteName.jobkita {
  /* ジョブキタ */
}

#siteName.hrs {
  /* ジョブキタ紹介 */
}

#siteName.sgw {
  /* シゴトガイド総合 */
}

#siteName.sg-ash {
  /* 旭川シゴトガイド */
}

#siteName.sg-hkd {
  /* 函館シゴトガイド */
}

#siteName.sg-tmk {
  /* 苫小牧・室蘭シゴトガイド */
}

#siteName.sg-cts {
  /* 千歳・恵庭シゴトガイド */
}

#siteName.sg-tkc {
  /* 十勝シゴトガイド */
}

#siteName.sg-ksr {
  /* 釧路シゴトガイド */
}

#siteName.sg-ktm {
  /* 北見・網走・紋別シゴトガイド */
}

#siteName.sg-otr {
  /* 小樽シゴトガイド */
}

#siteName.otr {
  /* アルキタオタルナビ */
}

#siteName.sg-iwt {
  /* 岩見沢・滝川シゴトガイド */
}

#siteName.shufukita {
  /* しゅふきた */
}

#siteName.haj {
  /* 株式会社 北海道アルバイト情報社 */
}

.siteName {
  padding: 10px 20px;
}
@media screen and (max-width: 640px) {
  .siteName {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.siteNameItem {
  vertical-align: middle;
  color: #333;
  font-weight: bold;
  font-size: 12px;
}

.siteNameItem-emphasis {
  vertical-align: middle;
  padding-right: 5px;
  font-size: 0;
  line-height: 0;
}
#siteName.n-style .siteNameItem-emphasis, #siteName.haj .siteNameItem-emphasis {
  color: #333;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.5;
}

.siteNameImg {
  vertical-align: middle;
  height: 20px;
}

/* -------------------------------------------- */
/* [[ pageTitle ]] */
/*doc
---
title: 02-pageTitle
name: 02-pageTitle
category: layout
parent: header
---

*メインビジュアル*

altのサブタイトル・タイトルは変数管理。

```html_example
<h1 class="pageTitle"><img class="pageTitleImg" src="image/title.png" alt="サブタイトル タイトル" /></h1>
```
*/
.pageTitle {
  margin: 0 20px;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .pageTitle {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.pageTitleImg {
  width: 100%;
}

/* [[ .contentsMain ]] */
.contentsMain {
  padding-bottom: 60px;
}

/* -------------------------------------------- */
/* [[ chapter ]] */
/*doc
---
title: 03-chapter
name: 03-chapter
category: layout
parent: contentsMain
---

*chapter*

```html_example
<div class="chapter">
    ひとつめのchapterです＼(^_^)／
</div>
<div class="chapter">
    ふたつめのchapterです(゜_゜)
</div>
```
*/
.chapter {
  padding: 40px 20px 0 20px;
  /*! CREARFIX */
  zoom: 1;
}
.chapter:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
}
* html .chapter {
  display: inline-table;
  /*\*/
  display: block;
  /**/
}
@media screen and (max-width: 640px) {
  .chapter {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.chapter + .chapter {
  position: relative;
  padding-top: 43px;
  /* 3px = .section:before サイズ値 */
}
.chapter + .chapter:before {
  content: ".";
  font-size: 0;
  line-height: 0;
  display: block;
  position: absolute;
  top: 20px;
  left: 0px;
  width: 100%;
  height: 2px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #ccc;
  background: #e6e6e6;
}

/* [[ layoutパターン]] */
/* -------------------------------------------- */
/* [[ カラムレイアウト／3：1 = layout-column3to1 ]] */
/*doc
---
title: 04-layout-columnSet
name: 04-layout-columnSet
category: layout
parent: layout
---

*カラムレイアウト／1：3 = layout-column1to3*

```html_example
<div class="chapter">
    <div class="layout-column1to3">
        <h2 class="inner headline headline-square">
            <span class="headline_notes">サブタイトルとか</span>
            直接見出しを入れることもできるよ。
        </h2>
        <div class="inner">
            inner（メインカラムとして使う。）<br />
            ああああああああああああああああああああああああああああああああ
        </div>
    </div>
</div>
```

*カラムレイアウト／1：1 = layout-columnHalf*

```html_example
<div class="chapter">
    <div class="layout-columnHalf">
        <div class="inner">
            inner（サブカラムとして使う。）
            ああああああああああああああああああああああああああああああああ<br />
            ああああああああああああああああああああああああああああああああ<br />
            ああああああああああああああああああああああああああああああああ
        </div>
        <div class="inner">
            inner（メインカラムとして使う。）<br />
            ああああああああああああああああああああああああああああああああ
        </div>
    </div>
</div>
```

*カラムレイアウト／3：1 = layout-column3to1*

```html_example
<div class="chapter">
    <div class="layout-column3to1">
        <div class="inner">
            inner（メインカラムとして使う。）<br />
            あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
        </div>
        <div class="inner">
            inner（サブカラムとして使う。）
        </div>
    </div>
</div>
```
*/
.layout-column1to3 {
  /*! CREARFIX */
  zoom: 1;
  overflow: hidden;
}
.layout-column1to3:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
}
* html .layout-column1to3 {
  display: inline-table;
  /*\*/
  display: block;
  /**/
}
.layout-column1to3 .inner {
  float: left;
  width: 146px;
}
@media screen and (max-width: 640px) {
  .layout-column1to3 .inner {
    float: none;
    width: auto;
    margin-bottom: 20px;
  }
}
.layout-column1to3 .inner + .inner {
  float: right;
  width: calc(100% - 186px);
}
@media screen and (max-width: 640px) {
  .layout-column1to3 .inner + .inner {
    float: none;
    width: auto;
  }
}

.layout-columnHalf {
  /*! CREARFIX */
  zoom: 1;
  overflow: hidden;
}
.layout-columnHalf:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
}
* html .layout-columnHalf {
  display: inline-table;
  /*\*/
  display: block;
  /**/
}
.layout-columnHalf .inner {
  float: left;
  width: 48%;
}
@media screen and (max-width: 640px) {
  .layout-columnHalf .inner {
    float: none;
    width: auto;
    margin-bottom: 20px;
  }
}
.layout-columnHalf .inner + .inner {
  float: right;
}
@media screen and (max-width: 640px) {
  .layout-columnHalf .inner + .inner {
    float: none;
    width: auto;
  }
}

.layout-column3to1 {
  /*! CREARFIX */
  zoom: 1;
  overflow: hidden;
}
.layout-column3to1:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
}
* html .layout-column3to1 {
  display: inline-table;
  /*\*/
  display: block;
  /**/
}
.layout-column3to1 .inner {
  float: left;
  width: calc(100% - 186px);
}
@media screen and (max-width: 640px) {
  .layout-column3to1 .inner {
    float: none;
    width: auto;
    margin-bottom: 20px;
  }
}
.layout-column3to1 .inner + .inner {
  float: right;
  width: 146px;
}
@media screen and (max-width: 640px) {
  .layout-column3to1 .inner + .inner {
    float: none;
    width: auto;
  }
}

/* [[ .footer ]] */
.footer {
  padding: 10px 20px 20px 20px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #d6d6d6;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #d6d6d6;
  background: #f3f3f3;
}

/* -------------------------------------------- */
/* [[ officeData ]] */
/*doc
---
title: 05-officeData
name: 05-officeData
category: layout
parent: footer
---

*営業所データ：イベントを主催（？）する営業所の情報を出力*

よく使う営業所

* JJS（営業時間の終わりが18：00なので注意！）

```html_example
<dl class="officeData">
    <dt class="officeDataName"><a class="officeDataNameLinks" href="https://www.haj.co.jp/" target="_blank">HAJ 株式会社 北海道アルバイト情報社</a></dt>
    <dd class="officeDataItem">ジョブキタ人材サービス事業部</dd>
    <dd class="officeDataItem">北海道札幌市中央区南1条西6丁目20-1 ジョブキタビル2F</dd>
    <dd class="officeDataItem">TEL：0120-106-554</dd>
    <dd class="officeDataItem">受付／月〜金曜 9：00〜18：00（祝日除く）</dd>
</dl>
```

* 企画営業

```html_example
<dl class="officeData">
    <dt class="officeDataName"><a class="officeDataNameLinks" href="https://www.haj.co.jp/" target="_blank">HAJ 株式会社 北海道アルバイト情報社</a></dt>
    <dd class="officeDataItem">総合企画室</dd>
    <dd class="officeDataItem">北海道札幌市中央区南1条西6丁目20-1 ジョブキタビル6F</dd>
    <dd class="officeDataItem">TEL：011-223-3912</dd>
    <dd class="officeDataItem">受付／月〜金曜 9：00〜17：00（祝日除く）</dd>
</dl>
```

その他の営業所はHAJオフィシャルかチラシから情報を拾う。ただし社名部分「HAJ 株式会社 北海道アルバイト情報社」から変更しない。<br />
[HAJオフィシャル 部署一覧へ](https://www.haj.co.jp/official/company/section.php)

*/
.officeData {
  padding-top: 10px;
}

.officeDataName {
  color: #666;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}

.officeDataNameLinks {
  color: #666;
  text-decoration: none;
}

.officeDataItem {
  padding-top: 5px;
  color: #999;
  font-size: 10px;
  text-align: center;
}
.officeDataItem + .officeDataItem {
  padding-top: 0px;
}

/* -------------------------------------------- */
/* [[ copyRight ]] */
/*doc
---
title: 06-copyRight
name: 06-copyRight
category: layout
parent: footer
---

*コピーライト*

年号はjavascriptで自動更新。

```html_example
<p class="copyRight">Copyright(C)<script type="text/javascript">thisYear();</script> Hokkaido Arbeit Johosha co.,ltd. All Rights Reserved.</p>
```
*/
.copyRight {
  padding-top: 10px;
  color: #999;
  font-size: 10px;
  text-align: center;
}

/* [[ section：chapter内の区分 ]] */
/*doc
---
title: 02-section
name: 02-section
category: module
---

*chapter内の区分*

* class名 `section`
* 隣接セクション上にアキ `config.$m_XL`

```html_example
<div class="chapter">
    <div class="section">
        せくしょんせくしょんせくしょんせくしょんせくしょんせくしょんせくしょんせくしょんせくしょん
    </div>
    <div class="section">
        2つめのせくしょんせくしょんせくしょんせくしょんせくしょんせくしょんせくしょんせくしょんせくしょん
    </div>
</div>
```
*/
.section + .section {
  margin-top: 40px;
}

/* [[ navigation：ナビゲーション ]] */
/*doc
---
title: 03-navigation
name: 03-navigation
category: module
---

*ナビゲーション*

* class名 `ul` は `navigation` 、 `li` は `navigation_item`
* 上にアキ `config.$m_L`
* 概要ページが破壊的に長くなったときに使う。
* ナビゲーションの使用頻度が低いので、各ブロックデフォルトでid名を付加していません。使用時のみ、 `href` に従って `<div class="chapter">` にidを入れてください。（styleguideにないブロック名で展開する場合、各々で命名してOK）

```html_example
<div class="chapter">
    <ul class="navigation">
        <li class="navigation_item"><a href="#about">内容</a></li>
        <li class="navigation_item"><a href="#jobList">参加企業情報</a></li>
        <li class="navigation_item"><a href="#timetable">時間割</a></li>
        <li class="navigation_item"><a href="#entry">実施要項</a></li>
        <li class="navigation_item"><a href="#contact">お問い合わせ</a></li>
    </ul>
</div>
```
*/
.navigation {
  margin-top: 30px;
  padding: 9px 0;
  border: solid 1px #ccc;
  text-align: center;
  background: #f9f9f9;
  border-radius: 8px;
}
.navigation_item {
  display: inline-block;
  margin: 0;
  padding: 0 10px;
  border-top: none;
  font-size: 12px;
}
.navigation_item + .navigation_item {
  border-left: solid 1px #ccc;
}

/* [[ headline：見出し ]] */
/*doc
---
title: 04-headline
name: 04-headline
category: module
parent: headlineSet
---

*見出しデフォルトスタイル*

* class名 `headline`
* 見出しレベルに関わらず必ずつける。
* サブタイトルがあれば便利クラス `ex_notes` で囲む。

```html_example
<div class="chapter">
    <h2 class="headline"><span class="ex_notes">サブタイトルとか</span>見出し（これはh2）ああああああああああああ</h2>
    <h3 class="headline"><span class="ex_notes">サブタイトルとか</span>見出し（これはh3）ああああああああああああ</h3>
    <h4 class="headline"><span class="ex_notes">サブタイトルとか</span>見出し（これはh4）ああああああああああああ</h4>
</div>
```

*シンプル見出し*

* class名 `headline-simple`
* `headline` に付加する。
* 下にアキ `config.$m_L`
* サブタイトルがあれば便利クラス `ex_notes` で囲む。

```html_example
<div class="chapter">
    <h2 class="headline headline-simple">
        <span class="ex_notes">サブタイトルとか</span>
        シンプルなボールド見出しああああああああああああ
    </h2>
</div>
```

*スクエア（主にh2）*

* class名 `headline-square`
* `headline` に付加する。
* 2カラムレイアウトで使うのが基本。
* サブタイトルがあれば便利クラス `ex_notes` で囲む。

```html_example
<div class="chapter">
    <h2 class="headline headline-square">
        <span class="ex_notes">サブタイトルとか</span>
        スクエア見出し
    </h2>
</div>
```

*左にボーダーが入る見出し（主にh3）*

* class名 `headline-leftBorder`
* `headline` に付加する。
* 下にアキ `config.$m_L`
* サブタイトルがあれば便利クラス `ex_notes` で囲む。

```html_example
<div class="chapter">
    <h3 class="headline headline-leftBorder">
        <span class="ex_notes">サブタイトルとかあああああああああああ</span>
        左にボーダー見出しああああああああああ
    </h3>
</div>
```

*塗り見出し（主にh4）*

* class名 `headline-bar`
* `headline` に付加する。
* 下にアキ `config.$m_M`
* サブタイトルがあれば便利クラス `ex_notes` で囲む。

```html_example
<div class="chapter">
    <h4 class="headline headline-bar">
        <span class="ex_notes">サブタイトルとかあああああああああああ</span>
        塗り見出しああああああああああああああああ
    </h4>
</div>
```
*/
.headline {
  /*
  mixin 仕様箇所
  * h系の見出し
  * dlの見出し
  */
  color: #000;
  font-size: 14px;
  font-weight: bold;
  /* [[ .ex_notes ]] */
}
.headline .ex_notes {
  display: block;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .headline-simple ]] */
.headline-simple {
  /*
  mixin 仕様箇所
  * h系の見出し
  * dlの見出し
  */
  margin-bottom: 30px;
  font-size: 18px;
}
.headline-simple .ex_notes {
  color: #000;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .headline-square ]] */
.headline-square {
  padding: 20px 5px;
  border-width: 2px;
  border-style: solid;
  border-color: #e74383;
  /* ← configで変数管理 */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  background: #e74383;
  /* ← configで変数管理 */
  border-radius: 8px;
  box-shadow: inset -1px -1px 0px #fff, inset 1px -1px 0px #fff, inset -1px 1px 0px #fff, inset 1px 1px 0px #fff;
}
.headline-square .ex_notes {
  color: #fff;
}
@media screen and (max-width: 640px) {
  .headline-square {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .headline-leftBorder ]] */
.headline-leftBorder {
  /*
  mixin 仕様箇所
  * h系の見出し
  * dlの見出し
  */
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0 0 0 5px;
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: #ed70a1;
  /* ← configで変数管理 */
  color: #000;
  font-size: 21px;
}
.headline-leftBorder:first-child {
  margin-top: 0px;
}
.headline-leftBorder .ex_notes {
  color: #ed70a1;
  /* ← configで変数管理 */
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .headline-bar ]] */
.headline-bar {
  /*
  mixin 仕様箇所
  * h系の見出し
  * dlの見出し
  */
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 7px 10px;
  color: #fff;
  /* ← configで変数管理 */
  font-weight: bold;
  font-size: 14px;
  background-color: #148477;
  /* ← configで変数管理 */
  border-radius: 5px;
}
.headline-bar:first-child {
  margin-top: 0px;
}
.headline-bar .ex_notes {
  color: #333;
}

/* [[ container：よく使うハコ ]] */
/*doc
---
title: 05-container
name: 05-container
category: module
---

*よく使うハコ*

* class名 `container`
* 隣接すると上にアキ `config.$m_XS`

*イベント終了案内：通常*

```html_example
<div class="chapter">
    <div class="container">
        よく使うハコあああああああああああ
    </div>
    <div class="container">
        隣接すると上にアキつくよく使うハコあああああああああああ
    </div>
</div>
```
 */
/* -------------------------------------------- */
/* [[ .container ]] */
.container + .container {
  margin-top: 10px;
}

/* [[ offer：特別な案内 ]] */
/*doc
---
title: 05-offer
name: 05-offer
category: module
---

*特別な案内デフォルトスタイル*

* class名 `offer`
* 上にアキ `config.$m_S`

*イベント終了案内：通常*

```html_example
<div class="chapter">
    <div class="offer">
        <p class="text">こちらのイベントは終了しました。ありがとうございました。</p>
    </div>
</div>
```

*イベント終了案内：メルマガへ誘導する場合*

「○○○○メール」はメルマガのタイトル<br />
例：ジョブキタの場合は「ジョブキタメール」

```html_example
<div class="chapter">
    <div class="offer">
        <h3 class="headline">こちらのイベントは終了しました。</h3>
        <p class="text">次回の開催情報は決定次第、○○○○メールで配信いたします。ご希望の方は、<a href="URLURLURLURLURLURLURL" target="_blank">○○○○メール</a>にご登録ください。</p>
    </div>
</div>
```

*プレゼント：文言はそのときのチラシに合わせて。*

よくあるプレゼント

* 台所用品セット（食器用洗剤・ラップ・スポンジ等）
* おいしいお味噌
* 履歴書セット
* QUOカード 500円分
* おこめ券（1kg相当）
* オリジナルマグネット付クリップ

```html_example
<div class="chapter">
    <div class="offer">
        <h3 class="headline">ご来場いただいた方全員に！</h3>
        <p class="text">もれなく<strong>台所用品セット（食器用洗剤・ラップ・スポンジ等）</strong>をプレゼントいたします。</p>
    </div>
</div>
```

*プレゼント：アイキャッチを使う場合*

```html_example
<div class="chapter">
    <div class="offer">
        <h4 class="headline">参加者プレゼント</h4>
        <dl class="list ex_pause">
            <dt class="listItem-eyeCatch">特典1</dt>
            <dd class="listItem-eyeCatchDetail">特典あいうえおあああああああああああああああああああ</dd>
            <dt class="listItem-eyeCatch">特典2</dt>
            <dd class="listItem-eyeCatchDetail">特典あいうえおああああああああああああああああああああああああああああああああああああああああああああ</dd>
            <dt class="listItem-eyeCatch">特典3</dt>
            <dd class="listItem-eyeCatchDetail">特典あいうえおああああああああああああああああああああああああああああああああああああああああああああ</dd>
        </dl>
        <p class="text ex_line ex_line-dotted">本文あいうえおあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
        <p class="text ex_notes">補足文あいうえおあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
</div>
```
*/
/* -------------------------------------------- */
/* [[ .offer ]] */
.offer {
  overflow: hidden;
  zoom: 1;
  margin-top: 15px;
  padding: 15px;
  border-width: 4px;
  border-style: solid;
  border-color: #f5c6e2;
  /* ← configで変数管理 */
  border-radius: 8px;
  background: #ffeefe;
  /* ← configで変数管理 */
}
.offer .headline {
  color: #cb6ea5;
}
.offer .ex_line, .offer .ex_line ex_line-dotted {
  border-color: #f1b0d7;
  /* ← configで変数管理 */
}

/* [[ text：テキスト ]] */
/*doc
---
title: 06-text
name: 06-text
category: module
---

*pデフォルトスタイル*

* class名 `text`
* `<p>` に必ずつける。
* 隣接text上にアキ `config.$m_S`

*便利クラスはこちら*

* 上アキなくす `ex_noSpace`
* 上に実線 `ex_line`
* 上に点線 `ex_line ex_line-dotted`
* 補足文 `ex_notes`

```html_example
<div class="chapter">
    <p class="text">のーまる文章文章文章ぶんぶんぶんぶん<strong>太字にしたければすとろんぐ〜</strong>ぶんぶんぶんぶんぶん</p>
    <p class="text">隣接したら上にアキああああああああああああああ</p>
    <p class="text ex_noSpace">上アキなくすああああああああああああああ</p>
    <p class="text ex_line">便利クラスで下に実線ボーダー文章文章文章ぶんぶんぶん</p>
    <p class="text ex_line ex_line-dotted">便利クラスで下にドットボーダー文章文章文章ぶんぶんぶん</p>
    <p class="text ex_notes">便利クラスで補足文です文章文章文章ぶんぶんぶんぶん<strong>太字にしたければすとろんぐ〜</strong>ぶんぶんぶんぶん</p>
    <p class="text ex_notes ex_line ex_line-dotted">便利クラスの掛け合わせも可能です補足文×下にドットボーダー文章文章文章ぶんぶんぶんぶん<strong>太字にしたければすとろんぐ〜</strong>ぶんぶんぶんぶん</p>
</div>
```
*/
/* -------------------------------------------- */
/* [[ .text ]] */
.text {
  overflow: hidden;
  zoom: 1;
  font-size: 14px;
}
.text + .text {
  margin-top: 10px;
}

/* [[ list：リスト ]] */
/*doc
---
title: 07-list
name: 07-list
category: module
---

*リストデフォルトスタイル*

* リストのclass名 `list`
* リスト要素のclass名 `listItem`
* `<ul>` `<ol>` `<dl>` どれにでも使える。

*便利クラスはこちら*

* 上に実線 `ex_line`
* 上に点線 `ex_line ex_line-dotted`
* 補足文 `ex_notes`
* 囲み `ex_frame`

*ul・olのサンプル*

```html_example
<div class="chapter">
    <ul class="list">
        <li class="listItem"><span>●</span>えるあいえるあいえるあいえるあい</li>
        <li class="listItem ex_pause"><span>●</span>えるあいえるあいえるあいえるあい</li>
        <li class="listItem ex_line"><span>●</span>下に実線ボーダーえるあいえるあいえるあいえるあい</li>
        <li class="listItem ex_line ex_line-dotted"><span>●</span>下にドットボーダーえるあいえるあいえるあいえるあい</li>
    </ul>
</div>
```

```html_example
<!-- ▼囲みタイプ -->
<div class="chapter">
    <ul class="list ex_frame">
        <li class="listItem"><span>●</span>えるあいえるあいえるあいえるあい</li>
        <li class="listItem ex_pause"><span>●</span>えるあいえるあいえるあいえるあい</li>
        <li class="listItem ex_line"><span>●</span>上に実線ボーダーえるあいえるあいえるあいえるあい</li>
        <li class="listItem ex_line ex_line-dotted"><span>●</span>上にドットボーダーえるあいえるあいえるあいえるあい</li>
    </ul>
</div>
```

* `ul` に `list-inline` 追加して中身の `li` をインラインにする。企業名などを `／` 区切りで表示。

```html_example
<div class="chapter">
    <h4 class="headline headline-bar">このような企業が参加予定！</h4>
    <ul class="list list-inline">
        <li class="listItem">企業名などああああああ</li>
        <li class="listItem">企業名などああああああ</li>
        <li class="listItem">企業名などああああああ</li>
        <li class="listItem">企業名などああああああ</li>
        <li class="listItem">企業名などああああああ</li>
        <li class="listItem">企業名などああああああ</li>
        <li class="listItem">企業名などああああああ</li>
    </ul>
    <p class="text ex_notes">※株式会社 スパイラルは不参加となりました。</p>
</div>
```

*dlの場合*

* `dt` は見出しのスタイルが使える。
* `dt` の中の補足文（サブタイトル）にしたいテキストは便利クラス `ex_notes` で囲む。
* 2個目以降の `dt` は上にアキが付く。
* `dd` の上に実線はclass名 `ex_line` を付加する。
* `dd` の上に点線はclass名 `ex_line ex_line-dotted` を付加する。
* `dd` を補足文として扱う場合はclass名に `ex_notes` を付加する。

```html_example
<div class="chapter">
    <dl class="list">
        <dt class="listHeadline"><span class="ex_notes">サブタイトルもつけられますあああ</span>のーまるな見出しでぃーてぃー</dt>
        <dd class="listItem">でぃーでぃーでぃーでぃーあああああ</dd>
        <dd class="listItem ex_notes">補足文でぃーでぃーでぃーでぃーでぃーでぃー</dd>
        <dt class="listHeadline listHeadline-simple"><span class="ex_notes">サブタイトルもつけられますあああ</span>シンプルな見出しでぃーてぃー</dt>
        <dd class="listItem ex_pause">でぃーでぃーでぃーでぃーあああああ</dd>
        <dd class="listItem ex_notes">補足文でぃーでぃーでぃーでぃーでぃーでぃー</dd>
        <dt class="listHeadline listHeadline-leftBorder"><span class="ex_notes">サブタイトルもつけられますあああ</span>左にボーダー見出しでぃーてぃーでぃーてぃーでぃーてぃー</dt>
        <dd class="listItem ex_line ex_line-dotted"><span>●</span>ドットでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーあああああ</dd>
        <dd class="listItem ex_line ex_line-dotted"><span>●</span>ドットでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーあああああ</dd>
        <dt class="listHeadline listHeadline-bar"><span class="ex_notes">サブタイトルもつけられますあああ</span>塗り見出しでぃーてぃーでぃーてぃーでぃーてぃーでぃーてぃー</dt>
        <dd class="listItem ex_line"><span>●</span>そりっどでぃーでぃーでぃーでぃーでぃーでぃー</dd>
        <dd class="listItem ex_line"><span>●</span>そりっどでぃーでぃーでぃーでぃーでぃーでぃー</dd>
    </dl>
</div>
```

*dlの場合（つづき）*

* `dt` に `listItem-eyeCatch` 、 `dd` に `listItem-eyeCatchDetail` を付加してアイキャッチ風見出しに。

```html_example
<div class="chapter">
    <dl class="list">
        <dt class="listItem-eyeCatch">特典1</dt>
        <dd class="listItem-eyeCatchDetail">特典あいうえおあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd>
        <dt class="listItem-eyeCatch">特典2</dt>
        <dd class="listItem-eyeCatchDetail">特典あいうえおああああああああああああああああああああああああああああああああああああああああああああ</dd>
    </dl>
</div>
```

```html_example
<!-- ▼囲みタイプ -->
<div class="chapter">
    <dl class="list ex_frame">
        <dt class="listHeadline"><span class="ex_notes">サブタイトルもつけられますあああ</span>のーまるな見出しでぃーてぃー</dt>
        <dd class="listItem">でぃーでぃーでぃーでぃーあああああ</dd>
        <dd class="listItem ex_notes">補足文でぃーでぃーでぃーでぃーでぃーでぃー</dd>
        <dt class="listHeadline listHeadline-simple"><span class="ex_notes">サブタイトルもつけられますあああ</span>シンプルな見出しでぃーてぃー</dt>
        <dd class="listItem ex_pause">でぃーでぃーでぃーでぃーあああああ</dd>
        <dd class="listItem ex_notes">補足文でぃーでぃーでぃーでぃーでぃーでぃー</dd>
        <dt class="listHeadline listHeadline-leftBorder"><span class="ex_notes">サブタイトルもつけられますあああ</span>左にボーダー見出しでぃーてぃーでぃーてぃーでぃーてぃーでぃーてぃー</dt>
        <dd class="listItem ex_line ex_line-dotted"><span>●</span>ドットでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーあああああ</dd>
        <dd class="listItem ex_line ex_line-dotted"><span>●</span>ドットでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーでぃーあああああ</dd>
        <dt class="listHeadline listHeadline-bar"><span class="ex_notes">サブタイトルもつけられますあああ</span>塗り見出しでぃーてぃーでぃーてぃーでぃーてぃーでぃーてぃー</dt>
        <dd class="listItem ex_line"><span>●</span>そりっどでぃーでぃーでぃーでぃーでぃーでぃー</dd>
        <dd class="listItem ex_line"><span>●</span>そりっどでぃーでぃーでぃーでぃーでぃーでぃー</dd>
    </dl>
</div>
```

```html_example
<!-- ▼囲みタイプ -->
<div class="chapter">
    <dl class="list ex_frame">
        <dt class="listItem-eyeCatch">特典1</dt>
        <dd class="listItem-eyeCatchDetail">特典あいうえおあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd>
        <dt class="listItem-eyeCatch">特典2</dt>
        <dd class="listItem-eyeCatchDetail">特典あいうえおああああああああああああああああああああああああああああああああああああああああああああ</dd>
    </dl>
</div>
```

*olの場合*

* タイムテーブル用のソース

```html_example
<div class="chapter">
    <ol class="list list-timetable">
        <li class="listItem">
            <span class="number">1回目</span>
            <span class="time">25分間</span>
            <div class="box">
                <p>9：50<span>START</span></p>
            <!-- [/.box] --></div>
        </li>
        <li class="listItem">
            <span class="number">2回目</span>
            <span class="time">25分間</span>
            <div class="box">
                <p>10：25<span>START</span></p>
            <!-- [/.box] --></div>
        </li>
        <li class="listItem">
            <span class="number">3回目</span>
            <span class="time">25分間</span>
            <div class="box">
                <p>11：00<span>START</span></p>
            <!-- [/.box] --></div>
        </li>
        <li class="listItem">
            <span class="number">4回目</span>
            <span class="time">25分間</span>
            <div class="box">
                <p>11：35<span>START</span></p>
            <!-- [/.box] --></div>
        </li>
        <li class="listItem">
            <span class="number">5回目</span>
            <span class="time">25分間</span>
            <div class="box">
                <p>12：15<span>START</span></p>
            <!-- [/.box] --></div>
        </li>
        <li class="listItem">
            <span class="number">6回目</span>
            <span class="time">25分間</span>
            <div class="box">
                <p>12：50<span>START</span></p>
            <!-- [/.box] --></div>
        </li>
        <li class="listItem">
            <span class="number">7回目</span>
            <span class="time">25分間</span>
            <div class="box">
                <p>13：25<span>START</span></p>
            <!-- [/.box] --></div>
        </li>
    </ol>
</div>
```
*/
/* -------------------------------------------- */
/* [[ .list ]] */
.list {
  overflow: hidden;
  zoom: 1;
  margin-top: 20px;
}
.list .ex_frame {
  padding: 14px;
}

/* -------------------------------------------- */
/* [[ .listHeadline ]] */
.listHeadline {
  /*
  mixin 仕様箇所
  * h系の見出し
  * dlの見出し
  */
  color: #000;
  font-size: 14px;
  font-weight: bold;
  /* [[ .ex_notes ]] */
}
.listHeadline .ex_notes {
  display: block;
}
.listItem + .listHeadline {
  margin-top: 30px;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .headline-simple ]] */
.listHeadline-simple {
  /*
  mixin 仕様箇所
  * h系の見出し
  * dlの見出し
  */
  margin-bottom: 30px;
  font-size: 18px;
  margin-bottom: 20px;
}
.listHeadline-simple .ex_notes {
  color: #000;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .listHeadline-leftBorder ]] */
.listHeadline-leftBorder {
  /*
  mixin 仕様箇所
  * h系の見出し
  * dlの見出し
  */
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0 0 0 5px;
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: #ed70a1;
  /* ← configで変数管理 */
  color: #000;
  font-size: 21px;
  margin-bottom: 20px;
  color: #e74383;
  font-size: 16px;
}
.listHeadline-leftBorder:first-child {
  margin-top: 0px;
}
.listHeadline-leftBorder .ex_notes {
  color: #ed70a1;
  /* ← configで変数管理 */
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .listHeadline-bar ]] */
.listHeadline-bar {
  /*
  mixin 仕様箇所
  * h系の見出し
  * dlの見出し
  */
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 7px 10px;
  color: #fff;
  /* ← configで変数管理 */
  font-weight: bold;
  font-size: 14px;
  background-color: #148477;
  /* ← configで変数管理 */
  border-radius: 5px;
}
.listHeadline-bar:first-child {
  margin-top: 0px;
}
.listHeadline-bar .ex_notes {
  color: #333;
}

/* -------------------------------------------- */
/* [[ .listItem ]] */
.listItem {
  margin-top: 10px;
  font-size: 14px;
}
.listItem:first-child {
  margin-top: 0px;
}
.list-inline .listItem {
  display: inline;
}
.list-inline .listItem:before {
  content: "／";
  padding-right: 5px;
  color: #cccccc;
}
.list-inline .listItem:first-child:before {
  content: none;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .listItem-eyeCatch ]] */
.listItem-eyeCatch {
  float: left;
  clear: both;
  width: 18%;
  margin-bottom: 6px;
  border: solid 1px #e74383;
  /* ← configで変数管理 */
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  color: #e74383;
  /* ← configで変数管理 */
  font-size: 12px;
  text-align: center;
  background-color: #fff;
}
@media screen and (max-width: 860px) {
  .listItem-eyeCatch {
    width: 28%;
  }
}
@media screen and (max-width: 640px) {
  .listItem-eyeCatch {
    width: 32%;
  }
}
@media screen and (max-width: 400px) {
  .listItem-eyeCatch {
    float: none;
    width: auto;
    margin-top: 15px;
  }
  .listItem-eyeCatch:first-child {
    margin-top: 0px;
  }
}
.listItem-eyeCatch:last-child {
  margin-bottom: 0px;
}

.listItem-eyeCatchDetail {
  float: right;
  width: 80%;
  margin-bottom: 5px;
}
@media screen and (max-width: 860px) {
  .listItem-eyeCatchDetail {
    width: 66%;
  }
}
@media screen and (max-width: 640px) {
  .listItem-eyeCatchDetail {
    width: 62%;
  }
}
@media screen and (max-width: 400px) {
  .listItem-eyeCatchDetail {
    float: none;
    width: auto;
  }
}
.listItem-eyeCatchDetail:last-child {
  margin-bottom: 0px;
}

/* -------------------------------------------- */
/* [[ .list-timetable ]] */
.list-timetable {
  padding: 0px 40px;
  text-align: center;
  /* -------------------------------------------- */
  /* [[ .number ]] */
  /* -------------------------------------------- */
  /* [[ .time ]] */
  /* -------------------------------------------- */
  /* [[ .box ]] */
  /* -------------------------------------------- */
  /* [[ .listItem ]] */
}
@media screen and (max-width: 640px) {
  .list-timetable {
    padding: 0px 20px;
  }
}
.list-timetable .number {
  display: block;
  width: 100%;
  border-radius: 6px 6px 0 0/6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0/6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0/6px 6px 0 0;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  background-color: #F90;
  /* ← configで変数管理 */
}
.list-timetable .time {
  display: block;
  margin-top: 5px;
  color: #000000;
  text-align: center;
}
.list-timetable .time:before {
  content: "←";
}
.list-timetable .time:after {
  content: "→";
}
.list-timetable .box {
  margin: 5px;
  padding: 5px;
  border: solid 1px #F90;
  /* ← configで変数管理 */
  color: #000000;
  font-weight: bold;
  background-color: #FFE;
  /* ← configで変数管理 */
}
.list-timetable .box p {
  text-align: center;
}
.list-timetable .box span {
  display: block;
  color: #F90;
  /* ← configで変数管理 */
}
.list-timetable .listItem {
  display: inline-block;
  width: 130px;
  margin: 0 0 10px 0;
  padding: 0 0 0 0;
  border: solid 1px #F90;
  /* ← configで変数管理 */
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}
@media screen and (max-width: 640px) {
  .list-timetable .listItem {
    width: 40%;
  }
}

/* [[ image：画像 ]] */
/*doc
---
title: 08-image
name: 08-image
category: module
---

*画像（幅いっぱい）*

* 画像を入れる枠のclass名 `imageSet`
* 画像（ `<img>` ）のclass名 `imageItem`
* 画像にフレームを入れたいときは `imageItem-frame` を付加。

*シンプル*

```html_example
<div class="chapter">
    <p class="text">ほんぶんとかが入ったりにゃあああああああああああああああああああああああああああん</p>
    <div class="imageSet">
        <p class="text">ほんぶんとかが入ったりにゃあああああああああああああああああああああああああああん</p>
        <div class="imageSetParts">
            <img class="imageItem" src="https://images.pexels.com/photos/65006/pexels-photo-65006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="ねこ：幅いっぱい画像サンプル" />
        </div>
        <p class="text">ほんぶんとかが入ったりにゃあああああああああああああああああああああああああああん</p>
        <p class="text ex_notes">キャプションが入ったりにゃあああああああああああああああああああああああああああん</p>
    </div>
</div>
```

*フレームあり*

```html_example
<div class="chapter">
    <p class="text">ほんぶんとかが入ったりにゃあああああああああああああああああああああああああああん</p>
    <div class="imageSet">
        <p class="text">ほんぶんとかが入ったりにゃあああああああああああああああああああああああああああん</p>
        <div class="imageSetParts">
            <img class="imageItem imageItem-frame" src="https://images.pexels.com/photos/65006/pexels-photo-65006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="ねこ：幅いっぱい画像サンプル" />
        </div>
        <p class="text ex_notes">キャプションが入ったりにゃあああああああああああああああああああああああああああん</p>
        <p class="text">ほんぶんとかが入ったりにゃあああああああああああああああああああああああああああん</p>
    </div>
</div>
```

*画像（回り込み）*

* 回り込みの親のclass名 `imageSet-wraparound` ( + `imageSet-vertically` で画面幅狭まったときに回り込み解除)
* floatをかけるブロック `imageSetParts` （デフォルト幅ハーフ／ + `-main` & + `-sub` で幅大小）
* 画像（ `<img>` ）のclass名 `imageItem`
* 画像にフレームを入れたいときは `imageItem-frame` を付加。

*画像（回り込み／デフォルトはハーフ&ハーフ）*

```html_example
<div class="chapter">
    <div class="imageSet imageSet-wraparound">
        <div class="imageSetParts">
            <img class="imageItem imageItem-frame" src="https://images.pexels.com/photos/65006/pexels-photo-65006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="ねこ：幅いっぱい画像サンプル" />
        </div>
        <div class="imageSetParts">
            <p class="text">ほんぶんとかが入ったりあああああああああああああああああああああああああああ</p>
        </div>
    </div>
</div>
```

*画像（回り込み／main & sub で大小）*

```html_example
<div class="chapter">
    <div class="imageSet imageSet-wraparound">
        <div class="imageSetParts imageSetParts-main">
            <img class="imageItem" src="https://images.pexels.com/photos/65006/pexels-photo-65006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="ねこ：幅いっぱい画像サンプル" />
            <img class="imageItem imageItem-frame" src="https://images.pexels.com/photos/65006/pexels-photo-65006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="ねこ：幅いっぱい画像サンプル" />
            <p class="text">画像が複数入ったりテキストが入っても大丈夫ぅぅぅほんぶんとかが入ったりあああああああああああああああああああああああああああ</p>
        </div>
        <div class="imageSetParts imageSetParts-sub">
            <p class="text">ほんぶんとかが入ったりあああああああああああああああああああああああああああ</p>
            <img class="imageItem imageItem-frame" src="https://images.pexels.com/photos/65006/pexels-photo-65006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="ねこ：幅いっぱい画像サンプル" />
        </div>
    </div>
</div>
```

*画像（回り込み／幅狭くなったら縦積み）*

```html_example
<div class="chapter">
    <div class="imageSet imageSet-wraparound imageSet-vertically">
        <div class="imageSetParts imageSetParts-sub">
            <img class="imageItem" src="https://images.pexels.com/photos/65006/pexels-photo-65006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="ねこ：幅いっぱい画像サンプル" />
            <img class="imageItem imageItem-frame" src="https://images.pexels.com/photos/65006/pexels-photo-65006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="ねこ：幅いっぱい画像サンプル" />
            <p class="text">画像が複数入ったりテキストが入っても大丈夫ぅぅぅほんぶんとかが入ったりあああああああああああああああああああああああああああ</p>
        </div>
        <div class="imageSetParts imageSetParts-main">
            <p class="text">ほんぶんとかが入ったりあああああああああああああああああああああああああああ</p>
            <img class="imageItem imageItem-frame" src="https://images.pexels.com/photos/65006/pexels-photo-65006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="ねこ：幅いっぱい画像サンプル" />
        </div>
    </div>
</div>
```
*/
/* -------------------------------------------- */
/* [[ .image ]] */
/*
.imageSet {
}
*/
.imageSet-wraparound {
  /*! CREARFIX */
  zoom: 1;
}
.imageSet-wraparound:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
}
* html .imageSet-wraparound {
  display: inline-table;
  /*\*/
  display: block;
  /**/
}

/* -------------------------------------------- */
/* [[ .imageSetParts ]] */
.imageSetParts .headline-bar {
  margin-top: 0;
}
.imageSetParts + .text {
  margin-top: 10px;
}

.imageSet-wraparound .imageSetParts {
  float: left;
  width: 49%;
}
.imageSet-wraparound .imageSetParts-main {
  width: 70%;
}
.imageSet-wraparound .imageSetParts-sub {
  width: 28%;
}
.imageSet-wraparound .imageSetParts + .imageSetParts {
  float: right;
}

@media screen and (max-width: 640px) {
  .imageSet-vertically .imageSetParts {
    float: none;
    width: 100%;
  }
  .imageSet-vertically .imageSetParts-main {
    width: 100%;
  }
  .imageSet-vertically .imageSetParts-sub {
    width: 100%;
  }
  .imageSet-vertically .imageSetParts + .imageSetParts {
    float: none;
    margin-top: 10px;
  }
}

/* -------------------------------------------- */
/* [[ .imageItem ]] */
.imageItem {
  display: block;
  width: 100%;
}
.imageItem + .imageItem, .imageItem + .text, .text + .imageItem {
  margin-top: 10px;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .imageItem-frame ]] */
.imageItem-frame {
  padding: 5px;
  border: solid 1px #ccc;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);
  -webkit-box-sizing: border-box;
  background-color: #fff;
}

/* [[ accordion・ui-accordion：開閉する要素 ]] */
/*doc
---
title: 09-accordion
name: 09-accordion
category: module
---

*開閉ブロック（ボタンなし）*

* `ui-accordion` はjs用のclass
* `accordion` はスタイル用のclass
* `accordion_item` の中身は何でも入れられる

```html_example
<div class="chapter">
    <div class="container accordion ui-accordion">
        <div>
            <div class="accordion_header ui-accordion-switch" data-href="item1">
                <p class="accordion_headline"><strong>見出し文字（例えば企業名とかが入る）</strong></p>
            </div>
            <div id="item1" class="accordion_item ui-accordion-item">
                aaa<br />
                aaa<br />
                aaa<br />
                aaa<br />
                aaa<br />
            </div>

            <div class="accordion_header ui-accordion-switch ex_pause" data-href="item2">
                <p class="accordion_headline"><strong>見出し文字（例えば企業名とかが入る）</strong><br />
                複数行にも対応ああああああああああああああ<br />
                あああああああああああああああああああああああああああああああ<br />
                <span class="ex_notes">補足分もイケるああああああああああああああああ</span></p>
            </div>
            <div id="item2" class="accordion_item ui-accordion-item">
                <dl class="list">
                    <dt class="listItem-eyeCatch">所在地</dt>
                    <dd class="listItem-eyeCatchDetail">所在地ああああああああああああああああああああああああああああああああああああああ</dd>
                    <dt class="listItem-eyeCatch">嬉しいポイント</dt>
                    <dd class="listItem-eyeCatchDetail">ポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんと</dd>
                </dl>
            </div>

            <div class="accordion_header ui-accordion-switch ex_pause" data-href="item3">
                <p class="accordion_headline"><strong>見出し文字（例えば企業名とかが入る）</strong></p>
            </div>
            <div id="item3" class="accordion_item ui-accordion-item">
                <dl class="list">
                    <dt class="listItem-eyeCatch">所在地</dt>
                    <dd class="listItem-eyeCatchDetail">所在地ああああああああああああああああああああああああああああああああああああああ</dd>
                    <dt class="listItem-eyeCatch">嬉しいポイント</dt>
                    <dd class="listItem-eyeCatchDetail">ポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんと</dd>
                </dl>
            </div>
        </div>
    </div>
</div>
```

*開閉ブロック（ボタンあり）*

* class名 `accordion` に `accordion-btnType` を付加する。

```html_example
<div class="chapter">
    <div class="container accordion accordion-btnType ui-accordion">
        <div>
            <div class="accordion_header ui-accordion-switch" data-href="btnType-item1">
                <p class="accordion_headline"><strong>見出し文字（例えば企業名とかが入る）</strong></p>
                <b class="accordion_utility-btn">もっと見る</b>
            </div>
            <div id="btnType-item1" class="accordion_item ui-accordion-item">
                aaa<br />
                aaa<br />
                aaa<br />
                aaa<br />
                aaa<br />
            </div>

            <div class="accordion_header ui-accordion-switch ex_pause" data-href="btnType-item2">
                <p class="accordion_headline"><strong>見出し文字（例えば企業名とかが入る）</strong></p>
                <b class="accordion_utility-btn">もっと見る</b>
            </div>
            <div id="btnType-item2" class="accordion_item ui-accordion-item">
                <dl class="list">
                    <dt class="listItem-eyeCatch">所在地</dt>
                    <dd class="listItem-eyeCatchDetail">所在地ああああああああああああああああああああああああああああああああああああああ</dd>
                    <dt class="listItem-eyeCatch">嬉しいポイント</dt>
                    <dd class="listItem-eyeCatchDetail">ポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんと</dd>
                </dl>
            </div>

            <div class="accordion_header ui-accordion-switch ex_pause" data-href="btnType-item3">
                <p class="accordion_headline"><strong>見出し文字（例えば企業名とかが入る）</strong><br />
                複数行にも対応ああああああああああああああ<br />
                あああああああああああああああああああああああああああああああ<br />
                <span class="ex_notes">補足分もイケるああああああああああああああああ</span></p>
                <b class="accordion_utility-btn">もっと見る</b>
            </div>
            <div id="btnType-item3" class="accordion_item ui-accordion-item">
                <dl class="list">
                    <dt class="listItem-eyeCatch">所在地</dt>
                    <dd class="listItem-eyeCatchDetail">所在地ああああああああああああああああああああああああああああああああああああああ</dd>
                    <dt class="listItem-eyeCatch">嬉しいポイント</dt>
                    <dd class="listItem-eyeCatchDetail">ポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんとポイントぽいんと</dd>
                </dl>
            </div>

            <div class="accordion_header accordion_header-close ex_pause">
                <p class="accordion_headline"><strong>見出し文字（例えば企業名とかが入る）</strong></p>
                <b class="accordion_utility-btn">終了しました</b>
            </div>
        </div>
    </div>
</div>
```
*/
/* -------------------------------------------- */
/* [[ .accordion ]] */
/*
.accordion{

}
*/
/* -------------------------------------------- */
/* [[ .accordion_header ]] */
.accordion_header {
  /*! CREARFIX */
  zoom: 1;
  position: relative;
}
.accordion_header:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
}
* html .accordion_header {
  display: inline-table;
  /*\*/
  display: block;
  /**/
}
.accordion_item + .accordion_header {
  margin-top: 10px;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ accordion_btn：アコーディオン見出し]] */
.accordion-btnType .accordion_headline {
  float: left;
  width: 76%;
  padding: 3px 0px;
}
@media screen and (max-width: 640px) {
  .accordion-btnType .accordion_headline {
    float: none;
    width: auto;
  }
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .accordion_utility-btn：アコーディオン開閉ボタン]] */
.accordion_utility-btn {
  float: right;
  width: auto;
  margin-top: 3px;
  padding: 2px 24px 2px 10px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  color: #999;
  font-weight: normal;
  font-size: 11px;
  text-decoration: none;
  border-radius: 30px;
  background: #fff url(../image/icon_open.png) no-repeat center right 8px;
  background-size: 14px auto;
}
.open .accordion_utility-btn {
  background: #fff url(../image/icon_close.png) no-repeat center right 8px;
  background-size: 14px auto;
}
.accordion_header-close .accordion_utility-btn {
  padding: 2px 10px;
  border-width: 1px 1px 1px 1px;
  border-color: #bbb;
  color: #fff;
  text-align: center;
  background: #aaa;
}
@media screen and (max-width: 640px) {
  .accordion_utility-btn {
    display: block;
    float: none;
    padding: 2px 10px;
    text-align: center;
  }
}

/* -------------------------------------------- */
/* [[ .accordion_item ]] */
/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ ui-accordion：開閉する要素 ]] */
.ui-accordion-item {
  display: none;
}

.ui-accordion-item.open {
  display: block;
}

.ui-accordion-switch {
  cursor: pointer;
}

/* [[ links：テキストリンク・申込ボタン ]] */
/*doc
---
title: 10-links
name: 10-links
category: module
---

*リンクボタン（汎用）*

```html_example
<div class="chapter">
    <div class="entry entry-close">
        <p class="text">「イベント名あああああああああああああああ」へのお申し込みは、4月23日(月)より開始予定です。</p>
    </div>

    <div class="entry entry-open">
        <p class="text">参加ご希望の方はフォームからお申し込みください。</p>
        <div class="links"><a class="links_btn" href="000000000000000000000000000000">参加を申し込む</a></div>
    </div>

    <div class="entry entry-close">
        <p class="text">上記イベントへの事前申込は締め切らせていただきました。<br />当日直接のご来場もOKです。<br />皆様のご来場をお待ちしております。</p>
    </div>

    <div class="entry entry-close">
        <p class="text">上記イベントへの事前申込は締め切らせていただきました。<br />皆様のご来場をお待ちしております。</p>
    </div>

    <div class="entry entry-close">
        <p class="text">こちらのイベントは終了しました。ありがとうございました。</p>
    </div>
</div>
```

*リンクボタン（企業一覧）*

```html_example
<div class="chapter">
    <div class="entry entry-close entry-jobList">
        <p class="text">「イベント名あああああああああああああああ」の参加企業一覧は、4月23日(月)より公開予定です。</p>
    </div>

    <div class="entry entry-open entry-jobList">
        <p class="text">合同企業説明会の参加企業はこちらからご確認ください。</p>
        <div class="links"><a class="links_btn" href="000000000000000000000000000000">参加企業一覧へ</a></div>
    </div>
</div>
```

*テキストリンク*

```html_example
<div class="chapter">
    <a href="000000000000000000000000000000">参加企業一覧へ</a>
</div>
```

*マップ系（よく使うマップリンク）*

```html_example
<div class="chapter">
    <p>ジョブキタプラザ<a href="https://goo.gl/maps/axag9wmBXpM2" target="_blank">【マップを見る】</a></p>
    <p>南2西6ビル<a href="https://goo.gl/maps/4XV3uBuZhjq" target="_blank">【マップを見る】</a></p>
    <p>EDiT<a href="https://goo.gl/maps/6qbMX5g3CK32" target="_blank">【マップを見る】</a></p>
</div>
```
*/
/* -------------------------------------------- */
/* [[ .entry ]] */
.entry {
  margin-top: 40px;
  border: solid 1px #ccc;
  border-radius: 8px;
}
.entry-open {
  display: table;
  width: 100%;
  padding: 10px;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.entry-open .text {
  display: table-cell;
  vertical-align: middle;
}
@media screen and (max-width: 640px) {
  .entry-open .text {
    display: block;
  }
}
.entry-close {
  padding: 10px;
}
.entry-close .text {
  color: #aaa;
  font-weight: bold;
  text-align: center;
}
.entry-jobList {
  margin-top: 10px;
}

/* -------------------------------------------- */
/* [[ .links ]] */
.links {
  display: table-cell;
  vertical-align: middle;
  width: 160px;
  padding-left: 10px;
}
@media screen and (max-width: 640px) {
  .links {
    display: block;
    width: auto;
    padding-top: 10px;
    padding-left: 0px;
  }
}

.links_btn {
  display: block;
  position: relative;
  padding: 10px;
  border-width: 0px 0px 4px 0px;
  border-style: solid;
  border-color: #9ba418;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  background: #b0ba1b;
  border-radius: 5px;
}
.entry-jobList .links_btn {
  border-color: #52951b;
  background: #5EAB1F;
}

/* -------------------------------------------- */
/* [[ a テキストリンク ]] */
a {
  color: #2288FF;
  text-decoration: underline;
}

/* [[ jobIcon：雇用形態アイコン ]] */
/*doc
---
title: 11-jobIcon
name: 11-jobIcon
category: module
---

*雇用形態アイコン*

* class名 `jobIcon`
* 合説参加企業を記載するときなどに使用。

*画像タイプ*

* 他のサイトでも使っているアイコンなので、画像自体に変更が入ったときの影響に注意！
* cssは独自で持っています。

```html_example
<div class="chapter">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_a.png" alt="アルバイト">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_b.png" alt="パート">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_d.png" alt="正社員">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_e.png" alt="準社員">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_f.png" alt="契約社員">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_g.png" alt="派遣">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_h.png" alt="紹介制">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_i.png" alt="期間従業員">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_j.png" alt="嘱託社員">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_k.png" alt="業務委託">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_l.png" alt="業務請負">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_m.png" alt="独立">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_n.png" alt="フランチャイズ">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_o.png" alt="代理店">
    <img class="jobIcon" src="https://image.haj.co.jp/hajsite_common/job_icon/job_c.png" alt="レギュラー">
</div>
```

*テキストタイプ*

* class名 `jobIcon-text` を付加する。
* 各アイコン固有のclass `jobIcon-x` を持つ。

```html_example
<div class="chapter">
    <span class="jobIcon jobIcon-text jobIcon-a" title="アルバイト・バイト">ア</span>
    <span class="jobIcon jobIcon-text jobIcon-b" title="パート">パ</span>
    <span class="jobIcon jobIcon-text jobIcon-d" title="正社員">正</span>
    <span class="jobIcon jobIcon-text jobIcon-e" title="準社員">準</span>
    <span class="jobIcon jobIcon-text jobIcon-f" title="契約社員">契</span>
    <span class="jobIcon jobIcon-text jobIcon-g" title="派遣">派</span>
    <span class="jobIcon jobIcon-text jobIcon-h" title="紹介制">紹</span>
    <span class="jobIcon jobIcon-text jobIcon-i" title="期間従業員">期</span>
    <span class="jobIcon jobIcon-text jobIcon-j" title="嘱託社員">嘱</span>
    <span class="jobIcon jobIcon-text jobIcon-k" title="業務委託">委</span>
    <span class="jobIcon jobIcon-text jobIcon-l" title="業務請負">請</span>
    <span class="jobIcon jobIcon-text jobIcon-m" title="独立">独</span>
    <span class="jobIcon jobIcon-text jobIcon-n" title="フランチャイズ">フ</span>
    <span class="jobIcon jobIcon-text jobIcon-o" title="代理店">代</span>
    <span class="jobIcon jobIcon-text jobIcon-c" title="レギュラー">レ</span>
</div>
```
*/
/* -------------------------------------------- */
/* [[ .jobIcon ]] */
.jobIcon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 3px;
  vertical-align: middle;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .jobIcon-text ]] */
.jobIcon-text {
  overflow: hidden;
  background-color: #ccc;
  border-radius: 3px;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .jobIcon-x ]] */
.jobIcon-a,
.jobIcon-b,
.jobIcon-i {
  background-color: #f60;
}

.jobIcon-d,
.jobIcon-e,
.jobIcon-f {
  background-color: #06c;
}

.jobIcon-g,
.jobIcon-h {
  background-color: #909;
}

.jobIcon-j,
.jobIcon-k,
.jobIcon-l,
.jobIcon-m,
.jobIcon-n,
.jobIcon-o {
  background-color: #090;
}

.jobIcon-c {
  background-color: #9c0;
}

/* [[ guideline：実施要項 ]] */
/*doc
---
title: 12-guideline
name: 12-guideline
category: module
---

*実施要項*

* イベントページに必ず存在するのでこの書き方を踏襲してください。

```html_example
<div class="chapter">
    <div class="guideline">

        <h4 class="headline">開催日時</h4>

        <p>2018年11月28日（水）10：00〜15：50（最終受付15：10）<br />
            ※当イベントは時間割制となっています。</p>

        <h4 class="headline">参加資格</h4>

        <p>おおむね39歳位までの方であれば、どなたでもご参加いただけます。</p>

        <h4 class="headline">事前申込締切</h4>

        <p>2018年11月27日（火）17：00<br />
            事前登録されていない方も、当日会場にご来場いただければ入場可能です。</p>

        <h4 class="headline">備考</h4>

        <p>履歴書不要、入退場は自由です。</p>

        <h4 class="headline">会場</h4>

        <p><strong>ジョブキタプラザ</strong><br />
            札幌市中央区南1条西6丁目20-1 ジョブキタビル3F・4F・5F（3F受付）<br />
            地下鉄／東西線・南北線・東豊線「大通駅」1番出口より徒歩3分<br />
            札幌市電／西8丁目駅より徒歩2分<br />
            <span class="ex_notes">※駐車場・駐輪場はありません。公共交通機関をご利用ください。</span></p>

        <a href="https://goo.gl/maps/FxTbveaEL2aMPVve6" target="_blank">【マップを見る】</a>

        <p><strong>ジョブキタビル2F</strong><br />
            札幌市中央区南1条西6丁目20-1<br />
            地下鉄／東西線・南北線・東豊線「大通駅」1番出口より徒歩3分<br />
            札幌市電／西8丁目駅より徒歩2分<br />
            <span class="ex_notes">※駐車場・駐輪場はありません。公共交通機関をご利用ください。</span></p>

        <a href="https://goo.gl/maps/axag9wmBXpM2" target="_blank">【マップを見る】</a>

        <p><strong>イベントスペース EDiT（エディット）</strong><br />
            札幌市中央区南2条西6丁目13-1 南2西6ビル 地下1F<br />
            （仲通り北向き・The JOHNSON STOREさん裏）<br />
            地下鉄／東西線・南北線・東豊線「大通駅」1番出口より徒歩3分<br />
            札幌市電／西8丁目駅より徒歩2分<br />
            <span class="ex_notes">※駐車場・駐輪場はありません。公共交通機関をご利用ください。</span></p>

        <a href="https://goo.gl/maps/yKCPVyrMAsh3ZKFp8" target="_blank">【マップを見る】</a>

    </div>
</div>
```
*/
.guideline .headline {
  margin-top: 20px;
  padding: 0px;
  background-color: transparent;
  color: #000000;
}
.guideline .headline:first-child {
  margin-top: 0px;
}
.guideline .headline:before {
  content: "■";
  margin-right: 2px;
  color: #b0ba1b;
}
.guideline p {
  padding: 0px;
}
.guideline strong {
  color: #666;
}

/* [[ ex：便利class ]] */
/*doc
---
title: 01-ex
name: 01-ex
category: module
---

*何にでもあてられる便利class「ex_notes」*

* 補足文として使う

```html_example
<div class="chapter">
    <p class="ex_notes">補足文だよーあああああああああああああああああああああああああああああああああああ</p>
</div>
```

*何にでもあてられる便利class「ex_pause」*

* 一区切り入れたいときに使う

```html_example
<div class="chapter">
    <div>あああああああああああああああああああああああああああああああああああ</div>
    <div class="ex_pause">上にアキが入るよーあああああああああああああああああああああああああああああああああああ</div>
</div>
```

*何にでもあてられる便利class「ex_line」*

* ラインを入れたいときに使う

```html_example
<div class="chapter">
    <div class="ex_line">上にボーダーが入るよーあああああああああああああああああああああああああああああああああああ</div>
    <div class="ex_line ex_line-dotted">上に点線ボーダーが入るよーあああああああああああああああああああああああああああああああああああ</div>
</div>
```

*何にでもあてられる便利class「ex_attention」*

* 注意喚起が必要なときに使う

```html_example
<div class="chapter">
    <p class="ex_attention">注目してほしいテキストだよー<strong>太字にしたければすとろんぐ〜</strong>あああああああああああああああああああああああああああああああああああ</p>
</div>
```

*何にでもあてられる便利class「ex_cancel」*

* 打ち消し線

```html_example
<div class="chapter">
    <p class="ex_cancel">打ち消したいテキストだよー<strong>太字にしたければすとろんぐ〜</strong>あああああああああああああああああああああああああああああああああああ</p>
</div>
```

*何にでもあてられる便利class「ex_color」*

* 文字色をconfigで設定したカラーに変更する
* `ex_color-sub` を追加でサブカラーに変更
* `ex_color-accent` を追加でアクセントカラーに変更

```html_example
<div class="chapter">
    <p class="ex_color">デフォルトはメインカラーになりますああああああ<strong>太字にしたければすとろんぐ〜</strong>あああああああああああああああああああああああああああああああああああ</p>
    <p class="ex_color ex_color-sub">サブカラーにもなりますああああああ<strong>太字にしたければすとろんぐ〜</strong>あああああああああああああああああああああああああああああああああああ</p>
    <p class="ex_color ex_color-accent">アクセントカラーにもなりますああああああ<strong>太字にしたければすとろんぐ〜</strong>あああああああああああああああああああああああああああああああああああ</p>
</div>
```

*何にでもあてられる便利class「ex_mark」*

* テキストを特に強調したいときに使う

```html_example
<div class="chapter">
    <p class="text">注目してほしいテキストだよー<strong class="ex_mark">太字&背景色ありのてきすと〜</strong>あああああああああああああああああああああああああああああああああああ</p>
</div>
```

*何にでもあてられる便利class「ex_listMarker」*

* テキストの前に「■」が入る
* `ex_listMarker-circle` を追加で「●」に。
* 色は `config.$main_color`

```html_example
<div class="chapter">
    <p class="text ex_listMarker">りすとっぽいあしらいのテキストだよあああああああああああああああああああああああああああああああああああ</p>
    <p class="text ex_listMarker ex_listMarker-circle">りすとっぽいあしらいのテキストだよまるバージョンあああああああああああああああああああああああああああああああああああ</p>
</div>
```

*何にでもあてられる便利class「ex_frame」*

* 囲みたいときに使う

```html_example
<div class="chapter">
    <div class="ex_frame">
        カドマルボーダーでかこみますカドマルボーダーでかこみますカドマルボーダーでかこみますカドマルボーダーでかこみますカドマルボーダーでかこみますカドマルボーダーでかこみますカドマルボーダーでかこみますカドマルボーダーでかこみますカドマルボーダーでかこみますカドマルボーダーでかこみますカドマルボーダーでかこみます
        <p class="ex_frame">カドマルボーダーでかこみぴーだよああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
</div>
```
*/
/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .ex_notes ]] */
.ex_notes {
  font-size: 12px;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .ex_pause ]] */
.ex_pause {
  margin-top: 20px;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .ex_nonPause ]] */
.ex_nonPause {
  margin-top: 0;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .ex_line ]] */
.ex_line {
  margin-top: 10px;
  padding-top: 10px;
  border-style: solid;
  border-width: 1px 0px 0px 0px;
  border-color: #ccc;
}
.ex_line-dotted {
  border-style: dotted;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .ex_attention ]] */
.ex_attention {
  color: #f00;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .ex_cancel ]] */
.ex_cancel {
  text-decoration: line-through;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .ex_color ]] */
.ex_color {
  color: #e74383;
}
.ex_color-sub {
  color: #fff;
}
.ex_color-accent {
  color: #b0ba1b;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .ex_mark ]] */
.ex_mark {
  display: inline-block;
  margin: 0 5px;
  padding: 2px 10px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  color: #e42c74;
  /* ← configで変数管理 */
  font-weight: bold;
  font-size: 14px;
  background-color: #fff2e6;
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .ex_listMarker ]] */
.ex_listMarker {
  display: block;
  padding-left: 1.3em;
  text-indent: -1.3em;
}
.ex_listMarker:before {
  display: inline;
  content: "■";
  padding-right: 0.3em;
  color: #e74383;
}
.ex_listMarker-circle:before {
  content: "●";
}

/* ･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･-･- */
/* [[ .ex_frame ]] */
.ex_frame {
  padding: 14px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  border-radius: 8px;
}
.ex_frame .ex_frame {
  border-color: #ddd;
  border-radius: 5px;
}

.ui-accordion.ex_frame {
  margin-top: 10px;
}
.headline + .ui-accordion.ex_frame {
  margin-top: 0;
}

.date1025 .list,
.date1026 .list {
  margin-top: 5px;
}
/*# sourceMappingURL=style.css.map */