@charset "UTF-8";

/* @group 全サイト共通
===========================================================================
===========================================================================
*/

/* @group ブラウザ・リセット
===========================================================================
*/

/* @group レイアウト
---------------------------------------------------------------------------
*/

body, div, p, blockquote, pre,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
table, th, td,
embed, object {
	margin: 0px;
	padding: 0px;
	text-align: left;
}

table, th, td, img { border: 0px; }

.left  { float: left;  }
.right { float: right; }

/* @end */


/* @group タイポグラフィー
---------------------------------------------------------------------------
*/

* {
	font-style: normal;
	font-weight: normal;
	font-variant:normal;
	text-decoration: none;
	vertical-align: baseline;
}

b, strong { 
	/* font-weight: bold; */
	font-weight: 700;
 }
i, em, var { font-style: italic; }
u { text-decoration: underline; }
s, strike { text-decoration: line-through; }
tt, pre, code, kbd, samp { font-family: monospace; }
abbr, acronym { border-bottom: 1px dotted #000; } 

ins { text-decoration: none; }
del { text-decoration: line-through; }

sub { vertical-align: sub;}
sup { vertical-align: super; }

/* @end */


/* @group その他
---------------------------------------------------------------------------
*/

table {
	border-collapse: collapse;
	border-spacing: 0px;
	border: 0px;
}
th,td {
	border: 0px;
	empty-cells: hide;
	vertical-align: middle;
}
th img, td img { vertical-align: middle; }
caption, th { text-align: left; }

img { border: 0px; }

a img { cursor: pointer; }
a img { text-decoration: none !important; }

hr {
	height: 0px;
	padding: 0px;
	border-style: solid;
	border-width: 0px 0px 1px;
}

/* @end */
/* @end */


/* @group 共通設定
===========================================================================
*/

/* Firefoxでswfなどを縦100%でレンダリングさせる場合、「height: 100%;」が必要。 */
/* html, body { height: 100%; } */


/* 縦スクロールバーを強制表示。 */
html { overflow-y: scroll; }

/* IE6のquirkモードで margin: auto; によるセンタリングができないバクの対策。
後続の子ブロック要素で text-align: center; を指定して左寄せに戻す必要あり。
ただし、そもそもquirksモードに入らなければよい。 */
/* body { text-align: center; } */

/* FireFoxでembed要素、Operaでobject要素の下に余白ができてしまう問題を回避。 */
object, embed { vertical-align: top; }


/* @group Clearfix
---------------------------------------------------------------------------
*/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; }
.clearfix { min-height: 1px; }
* html .clearfix { display: inline-block; } /* IE5以前のみ */
/*\*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /**/ /* Mac版IEから隠す */

/* @end */
/* @end */


/* @group プリンター関連
===========================================================================
*/

/* プリント時以外は表示しない要素。 */
.printOnly { display : none; }

/* プリンタ用指定 */
@media print {

	/* overflowにvisible以外を指定した要素も印刷されるように。 */
	/* * { overflow: visible; } */

	/* プリントされず、レイアウトからも消える要素。 */
	.noPrint { display: none; }

	/* プリントされないものの、レイアウトには影響を与える要素（単なる非表示）。 */
	.noPrintContent { visibility: hidden; }

	/* プリント時以外は表示しない要素。＝プリント時のみ表示する要素。 */
	.printOnly                      { display: block; }
	span.printOnly, label.printOnly { display: inline; }
	table.printOnly                 { display: table; }
	tr.printOnly                    { display: table-row; }
	td.printOnly, th.printOnly      { display: table-cell; }

}

/* @end */

/* @end */

/* @group タイポグラフィー
===========================================================================
===========================================================================
*/

/* @group 共通設定
===========================================================================
*/

/* @group フォント・フェイス
---------------------------------------------------------------------------
*/

html[lang='en'] body, *[lang='en'], *:lang(en), .alphanum {
/*	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Verdana', sans-serif; */
	font-family: 'Perpetua', 'Cardo', serif;
}

html[lang='ja'] body, *[lang="ja"], *:lang(ja) {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'Arial', 'Verdana', sans-serif;
/*	font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro W3', 'Hiragino Mincho Pro', 細明朝, リュウミンL, 'メイリオ', 'Meiryo', 'ＭＳ Ｐ明朝', 'Times New Roman', serif;*/
/*	font-family: 'ヒラギノ丸ゴ Pro W4', 'Hiragino Maru Gothic Pro W4', 'Hiragino Maru Gothic Pro', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'Verdana', sans-serif;*/
}

html[lang='zh'] body, *[lang='zh'], *:lang(zh) {
	font-family: '微软雅黑', '黑体', sans-serif;
/*	font-family: '宋体', serif;*/
/*	font-family: '幼圆', sans-serif;*/
}


* html body { /* for IE6 */
/*	font-family: 'メイリオ', 'Arial', 'Verdana', 'ＭＳ Ｐゴシック', sans-serif; */
	font-family: 'メイリオ', 'Times New Roman', 'ＭＳ Ｐ明朝', 細明朝, リュウミンL, serif;
}


/* @end */


/* @group フォント・サイズ
---------------------------------------------------------------------------
*/

body { font-size: 15px; }
* html body { font-size: 93.75%; } /* for IE6 */
body { line-height: 1.74em; } 

h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
	font-weight: bold;
}

table { font-size: inherit; }

sub { font-size: 80%; }
sup { font-size: 80%; }

big   { font-size: 110%; }
small { font-size: 90%; }
/* @end */


/* @group 文字色
---------------------------------------------------------------------------
*/

body { color: #f5f5f5; }
a { text-decoration: none; }
a:link { color: #7F2860; text-decoration: none ; }
a:visited { color: #7F2860; text-decoration: none; }
a:link:hover,  a:visited:hover  { 
	color: #7F2860;
	text-decoration: underline;
 }
a:link:active, a:visited:active { color: #7F2860; }
a:link:focus,  a:visited:focus  { color: #7F2860; }

/* @end */


/* @group 段落関連
---------------------------------------------------------------------------
*/

p, ul, ol, dl, blockquote,
div.para {
	margin-bottom: 20px;
}
div.para p,
div.para ul,
div.para ol,
div.para dl,
div.para blockquote {
	margin-top: 0px;
	margin-bottom: 0px;
}
.lastP { margin-bottom: 0px; }

/* hr は b や small などと同じく見栄えを制御するもので、文書を意味的に構造化するものではない。
意味的に区切るには div を使用する。 */
hr {
	height: 0px;
	margin: 40px 0px;
	border-color: #ccc;
}

/* @end */

/* @end */


/* @group 必要に応じて使用
===========================================================================
*/

/* @group 文字スタイル
---------------------------------------------------------------------------
*/

/* 全角カッコを囲む：カッコ内の級数を下げ、前後を字詰めする */
span.paren {
	font-size: 0.92em; /* 11px */
	line-height: 1.82em; /* 20px */
}
html[lang='ja'] span.paren {
	margin-right: -0.5em;
	margin-left: -0.5em;
}
html[lang='ja'] .alphanum span.paren,
html[lang='ja'] *[lang='en'] span.paren,
html[lang='ja'] *:lang(en) span.paren {
	margin-right: 0em;
	margin-left: 0em;
}
* html body span.paren { /* for ie6: MS P ゴシック、MS P 明朝 */
	margin-right: 0em;
	margin-left: 0em;
}

/* アステリスクを囲む：たいていのフォントで見づくなるため Verdana 10px に決め打ち */
span.aster {
	font-family: 'Verdana',sans-serif;
	font-size: 10px;
}

/* ©（©）を囲む：たいていのフォントで見づくなるため Verdana 10px に決め打ち */
span.copyright {
	font-family: 'Verdana',sans-serif;
	font-size: 10px;
}

/* @end */


/* @group 段落スタイル等
---------------------------------------------------------------------------
*/
/* メニュー等：リスト要素を使用するが箇条書きが不要の場合 */
.menu, .menu ul, .menu ol {
	list-style-type: none;
	margin-bottom: 0px;
}

.menu a {
	text-decoration: none;
}

/* 注記 */
.note {
	font-size: 0.92em; /* 11px */
	line-height: 1.82em; /* 20px */
	color: #ccc;
}

/* ボタン風 */
.button {
	margin-right: 10px;
	padding: 3px 5px;
	border-radius: 5px;
	font-size: 0.92em /* 11px */ ;
	background-color: #e6e6e6;
}
.button a,
.button a:link,
.button a:visited,
.button a:hover,
.button a:active,
.button a:link:visited,
.button a:link:hover,
.button a:link:active {
	text-decoration: none;
	color: #666;
}

/* @end */

/* @end */

/* @end */


/* @group レイアウト
===========================================================================
===========================================================================
*/

/* @group [1] 基本レイアウト
===========================================================================

+-------------------------------------+
| #upper                              |
|                                     |
| +---------------------------------+ |
| | #header                         | |
| +---------------------------------+ |
|                                     |
| +---------------------------------+ |
| | #menu                           | |
| +---------------------------------+ |
|                                     |
| +---------------------------------+ |
| | #bodier                         | |
| | +-----------------------------+ | |
| | | #inner                      | | |
| | | +-------------------------+ | | |
| | | | .story                  | | | |
| | | | +------+ +------------+ | | | |
| | | | | .sub | | .main      | | | | |
| | | | |      | |            | | | | |
| | | | |      | |            | | | | |
| | | | |      | |            | | | | |
| | | | |      | |            | | | | |
| | | | +------+ +------------+ | | | |
| | | +-------------------------+ | | |
| | +-----------------------------+ | |
| +---------------------------------+ |
|                                     |
+-------------------------------------+

+-------------------------------------+
| #lower                              |
| +---------------------------------+ |
| | #footer                         | |
| +---------------------------------+ |
+-------------------------------------+

*/



/* @group 縦方向
---------------------------------------------------------------------------
lowerを画面下部に貼り付かせる。（cf. http://www.cssstickyfooter.com/）
*/

html, body, div#upper { height: 100%; }

body > div#upper {
	height: auto;
	min-height: 100%;
}

div#bodyer {
	padding-bottom: 53px; /* フッターの高さ */
}

div#lower {
	position: relative;
	height: 53px; /* フッターの高さ */
	margin-top: -53px; /* フッターの高さ（-） */
	clear: both;
}

/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec)*/
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/*
#upper内にコンテンツを追加する場合は、#bodyerよりも上に追加する。
#bodyerより下には、高さのあるコンテンツを追加することはできない。
#lower内にはコンテンツを追加できるが、#lowerの高さは決め打ちであることに注意。
*/

/* @end */


/* @group Z軸方向
---------------------------------------------------------------------------
*/
div#header { z-index: 20; }
div#bodyer { z-index: 10; }
div#menu   { z-index: 30; }
div#footer { z-index: 20; }

/* @end */


/* @group 横方向
---------------------------------------------------------------------------
*/

div#upper, div#lower {
	width: 100%;
}

div#header {
	width: 100%;
}

div#bodyer, div#footer {

/* レイアウトの横幅（可変：auto / 固定：960px） */
	width: 960px;
	min-width: 720px;

/* レイアウトのセンタリング */
	margin-left: auto;
	margin-right: auto;
}

div#bodyer {
	overflow: hidden;
}

div#bodyer div#inner {
/* ↓グローバルな左カラムの幅 + 余白 */
	margin-left : 0px;
/* ↓グローバルな右カラムの幅 + 余白 */
/*	margin-right: 200px;*/
}

/* ＊グローバルなカラムは、#menu内のul要素を絶対配置して作成。 */

/*
div.story内のローカルな2カラム・レイアウト：

div.story内に、div.main／div.subの2つのカラムを配置。
div.main内にはdiv.innerが必須。

配置は下記の2パターンがある。

配置：[main][sub]　｜　div.storyに付加するクラス名：.main_sub　｜　div.story内のdiv要素の記述順序：div.main div.sub
配置：[sub][main]　｜　div.storyに付加するクラス名：.sub_main　｜　div.story内のdiv要素の記述順序：div.sub div.main


「レイアウトの横幅」が「可変」の場合は、div.mainが可変となる。div.subの幅は常に固定。
「レイアウトの横幅」が「固定」の場合は、div.mainの幅は「div.storyの幅 - div.sub」で規定される（明示的な指定は不要）。

div.story（階）は#inner内に複数段重ねることが可能。
その場合は各div.storyごとにid（#contents, #extra 等）を設定して、カラムのレイアウトもそれぞれ下記のパターンのように設定すればよい。

div.storyはdiv.main内にネストすることが可能。
その場合は各div.mainごとにid（#main 等）を設定して、カラムのレイアウトもそれぞれ下記のパターンのように設定すればよい。
*/

/* [sub][main] パターン */
div.story.sub_main div.main {
	margin-left: -150px; /* サブカラムの幅（-） */
}
div.story.sub_main div.main div.inner {
	margin-right: 0px;
	margin-left: 150px; /* サブカラムの幅 */
}

div.story.sub_main div.sub {
	width: 150px; /* サブカラムの幅 */
	margin-left: 0px;
}



/* 以下、両パターンに共通の設定（変更不要） */

div.story {
	clear: both;
	overflow: hidden;
}

div.story div.main {
	float: left;
	width: 100%;
}

div.story div.sub {
	float: left;
	position: relative;
	z-index: 11;
}


/* @end */

/* @group 1カラム
---------------------------------------------------------------------------
*/

div.story.sub_main div.main.fullColumn {
    margin-left: 0;
}

div.story.sub_main div.main.fullColumn div.inner {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

div.story.sub_main div.main.fullColumn .section {
	padding-right: 0;
}

/* @end */

/* @group 背景
---------------------------------------------------------------------------
*/

body { 
	background: #000;
 }

#header { 
	background: #000;
 }

#footer { 
	background: #000;
 }

/* .sub { background: #ff5500; } */

/* .main { background: #fff; } */

/* @end */


/* @end */


/* @group [2] #header内のレイアウト
===========================================================================
*/

/* @group 基本レイアウト
---------------------------------------------------------------------------
*/

div#header {
	width: 960px;
	height: 90px;
	margin: auto;
}

div#header .inner {
	position: relative;
	width: 960px;
	height: 90px;
	margin: auto;
}


/* @end */

/* @group h1
---------------------------------------------------------------------------
*/
div#header h1 {
	position: absolute;
	top: 22px;
	left: 0px;
}


/* @end */


/* @group メニュー
---------------------------------------------------------------------------
*/

ul#menu {
	position: absolute;
	top: 51px;
	left: 151px;
	height: 15px;
	margin: 0;
}

ul#menu li {
	float: left;
	position: relative;
	height: 15px;
	margin-right: 16px;
	line-height: 15px;
	list-style-type: none;
}

ul#mailnews {
	position: absolute;
	top: 50px;
	right: 48px;
}

a#facebook {
	display: block;
	position: absolute;
	top: 51px;
	right: 0px;
}

a#language {
	display: block;
	position: absolute;
	top: 22px;
	right: 0px;
}

/* @end */

/* @group [3] #story内のレイアウト
===========================================================================
*/

.story { padding: 36px 0; }

.sub_main .main .section { padding-right: 48px; }

p { text-align: justify; }

.main .section p { letter-spacing: 1px; }

a {
	overflow: hidden;
	outline: none;
}

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

		Sub

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

.sub h2 { 
	margin-bottom: 26px;
	font-size: 12px;
	font-family: 'Perpetua Titleing MT', 'Cardo', serif;
 }

.sub ul { 
	list-style-type: none;
	line-height: 1.25em;
 }

.sub ul li a {
	color: #ffffff !important;
}

.sub ul ul { 
	padding-left: 30px;
 }
 
.sub ul a.active { 
	border-bottom: 1px #7F2860 solid;
 }

.sub ul a:hover { 
	border-bottom: 1px #7F2860 solid;
	text-decoration: none;
 }

#collection .sub ul li,
#collaboration .sub ul li,
#news .sub ul li { margin-bottom: 15px; }


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

		Main

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

/* Collection */

#collection .post { display: none; }

#collection .sub { width: 239px; }
#collection div.story.sub_main div.main { margin-left: -239px }
#collection .main .inner { margin-left: 239px; }

#information { 
	min-width: 240px;
	max-width: 540px;
	padding: 30px;
	color: #000;
 }

#information h3 { margin-bottom: 15px; }

#information .story { 
	margin-bottom: 15px;
	padding: 0; 
	text-align:justify;
	text-justify:inter-ideograph; 
 }

/* @end */

/* Collaboration */

#collaboration .main h2 { 
	display: table-cell;
	vertical-align: top;
	font-size: 16px;
 }

#collaboration .post { 
	display: none;
	margin-bottom: 100px;
 }

#collaboration .post .left { 
	width: 376px;
	padding-right: 50px;
 }

#collaboration .post.fullcolumn .left { 
	width: 362px;
	padding-right: 0;
	padding-bottom: 25px;
 }

#collaboration .post .right { 
	width: 336px !important;
 }

#collaboration .post.fullcolumn .right { 
	clear: both;
	width: 762px !important;
 }

#collaboration .post .right img { 
	display: none;
	
 }

#collaboration .pager { padding: 0; }

/* News */

#news #header,
#news #upper,
#news #bodyer,
#news #footer { width: 100%; }

#news #upper { background: #fff; }

#news #inner {
	width: 960px;
	margin: auto !important;
	color: #000;
}

#news .sub ul { padding-left: 0; }

#news .sub a { color: #000 !important; }

#news .post { 
	display: none;
	margin-bottom: 100px;
 }

#news .post .left { 
	width: 376px;
	padding-right: 50px;
 }

/* @end */

/* Profile */

#profile #header,
#profile #upper,
#profile #footer { width: 100%; }

#profileBody {
	width: 768px;
	min-height: 450px;
	margin: 0 auto;
	padding: 0;
	background: url('/_include-/_img/profile/profileBody.png') 0 0 repeat-y;
	color: #000;
}

#profileHeader {
	width: 768px;
	height: 30px;
	margin: 0 auto;
	background: transparent url('/_include-/_img/profile/profileHeader.png') 0 0 no-repeat;
}

#profile p { padding: 0 48px 10px 48px; }

#profileFooter {
	width: 768px;
	height: 30px;
	margin: 0 auto;
	background: transparent url('/_include-/_img/profile/profileFooter.png') 0 0 no-repeat;
}

/* @end */

/* Links */

#links #header,
#links #upper,
#links #bodyer,
#links #footer { width: 100%; }

#links #upper { background: #fff; }

#links .fullColumn .inner {
	width: 960px;
	margin: auto;
}

#links .section {
	height: 385px;
	min-height: 385px;
	background: #fff;
}

#links .unit {
	float: left;
	width: 137px;
	height: 82px;
	padding: 4px;
	margin-right: 18px;
	margin-bottom: 18px;
	background: #000;
}

#links .unit div { 
	display: table-cell;
	height: 80px;
	border: 1px #fff solid;
	text-align: center;
	vertical-align: middle;
	}
	
#links .unit div a {
	display: table-cell;
	width: 135px;
	height: 80px;
	font-size: 15px;
	color: #fff;
	vertical-align: middle;
 }
 
#links .unit div a:hover { text-decoration: none; }

#links .unit.last { margin-right: 0; }

/* @end */

/* Press */

#press #header,
#press #upper,
#press #footer { width: 100%; }

#press #upper { background: #131313; }

#press .sub { 
	height: 1px;
 }

#press .main .inner a { color: #F277A5; }

#press .left {
    padding-right: 50px;
    width: 376px;
}

#press .post {
	margin-bottom: 40px;
	cursor: pointer;
}

#press .right img { display: none; }

/* @end */

/* Contact */

#contact .sub { 
	height: 1px;
 }

#contact .main .section p a { color: #F277A5; }

/* @end */

/* Mailnews */

#mailNews form input {
	font-size: 14px;
	border: 1px #000 solid;
}

#mailNews form input.email {
	width: 250px;
	padding: 1px;
	font-family: sans-serif;
}

#mailNews form input.submit {
	background: #7F2860;
	color: #fff;
}

/* @end */

/* Press */

#terms-conditions #header,
#terms-conditions #upper,
#terms-conditions #footer { width: 100%; }

#terms-conditions #upper { 
	background: #cacaca;
	color: #000;
 }

/* @end */

/* @end */

/* @group [4] #footer内のレイアウト
===========================================================================
*/

/* @group 基本レイアウト
---------------------------------------------------------------------------
*/
div#footer {
	width: 960px;
	height: 53px;
}

div#footer .inner {
	position: relative;
	width: 960px;
	height: 53px;
	margin: auto;
}

div#footer .inner a {
	display: block;
	position: absolute;
	top: 20px;
}

div#footer .copyright {
	position: absolute;
	top: 20px;
	right: 0;
}


/* @end */


/* @end */

/* @end */