/* ------------------------------------------------------------

	フリーエリア・緊急エリア カスタマイズ用

------------------------------------------------------------ */


/* - 「緊急のお知らせ」エリア
---------------------------------------------------------------------- */
#emergency { margin-top: 20px; }

#emergency > .title {
    width: 940px;
    margin: 0 auto;
    background-color: #B71C1C;
    color: #fff;
    font-size: 2.4rem;
    padding: 5px;
    text-align: center;
    color: #FFF9C4;
    text-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

#emergency > .title i { margin-right: 0.3em; }

#emergency > .content {
    width: 940px;
    margin: 0 auto;
    border: 4px solid #B71C1C;
    border-top: none;
    padding: 15px;
}

#emergency > .content p.title {
    font-size: 2rem;
    border-bottom: 1px dashed #999;
    padding-bottom: 0.3em;
    color: #B71C1C;
}

#emergency > .content p.title i { margin-right: 0.3em; }

#emergency > .content > ul { }
#emergency > .content > ul > li { font-size: 0; }
#emergency > .content > ul > li + li { margin-top: 10px; }

#emergency > .content > ul > li > a {
    text-decoration: none;
    display: inline-block;
    font-size: 1.5rem;
}

#emergency > .content > ul > li > a span.inner { display: table; }

#emergency > .content > ul > li > a span.inner > span {
    display: table-cell;
    vertical-align: top;
}

#emergency > .content > ul > li > a span.inner > span.icon { padding-right: 0.4em; }
#emergency > .content > ul > li > a span.inner > span.icon i { color: #268300; }

.no-touch #emergency > .content > ul > li > a:hover span.inner > span.txt { text-decoration: underline; }

#emergency > .content > p { line-height: 1.6; }
#emergency > .content strong.red { color: #db0000; }


/* --- 青枠 --- */
#emergency.bluewaku > .title { background-color: #3b4df7; }
#emergency.bluewaku > .content { border: 4px solid #3b4df7; }
#emergency.bluewaku.narrow > .content { padding: 8px; }
#emergency.bluewaku > .content p.title { color: #3b4df7; }
#emergency.bluewaku > .content p > strong.nb { font-weight: normal; }

/* --- 赤枠（見出し無し） --- */
#emergency.redwaku > .title { background-color: #B71C1C; }
#emergency.redwaku > .content { border: 4px solid #B71C1C; }
#emergency.redwaku.narrow > .content { padding: 8px; }
#emergency.redwaku > .content p.title { color: #B71C1C; }
#emergency.redwaku > .content p > strong.nb { font-weight: normal; }

/* --- 青枠2（通常の見出しありの赤枠と見出し無しの青枠併記用） --- */
#emergency2 { margin-top: 20px; }

#emergency2 > .content {
    width: 940px;
    margin: 0 auto;
    border: 4px solid #3b4df7;
    border-top: none;
    padding: 15px;
}
#emergency2.bluewaku > .title { background-color: #3b4df7; }
#emergency2.bluewaku > .content { border: 4px solid #3b4df7; }
#emergency2.bluewaku.narrow > .content { padding: 8px; }
#emergency2.bluewaku > .content p.title { color: #3b4df7; }
#emergency2.bluewaku > .content > p { line-height: 1.6; }
#emergency2.bluewaku > .content p > strong.nb { font-weight: normal; }


/* - 上部フリーエリア（クイックメニュー下）（#free_area）
---------------------------------------------------------------------- */
#free_area > .content {
    width: 940px;
    margin: 20px auto;
    padding: 15px;
    background-color: #f5f5f5;/* --- 仮背景色 --- */
}




/* ------------------------------------------------------------
    強調
------------------------------------------------------------ */
strong.red { color: #c02; }
strong.blue { color: #3b4df7; }
strong.green { color: #098256; }