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

   .css --- 

   * Filename:            .css
   * Description:         
   * Version:             0.0.1 (Tue. Sep. 25, 2012 14:38:07)
   * Website:             http://localhost/
   * Author:              ryuma <ryuma (at) about (dot) me>
   * This Repository:     git@bitbucket.org/ryuma

   == Structure ================================================================

   * Page width:          0px
   * Number of columns:   0 columns

   Copyright (C) ryuma All rights reserved. Powered by emacs.

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

/*

- lv ... level の略 階層がどの程度まであるか指定しています。

- n  ... number の略 そのタグの現れた数を表します。

- cl ... column の略 

*/

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


   戦略的な周年事業の共通のスタイル
   Common


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

/*
   =============================================================================

   機能一覧

   =============================================================================
*/

.box-right {/* 右へフロートする機能 (IE対策付き) */
  float: right;
  width: 300px;
  /*display: inline;*/
}
.box-right-m {/* 右へフロートする機能 (IE対策付き) */
  float: right;
  width: 407px;
  /*display: inline;*/
}
.box-right-mi {/* 右へフロートする機能 (IE対策付き) */
  float: right;
  width: 227px;
  /*display: inline;*/
}

.box-left {/* 左へフロートする機能 (IE対策付き) */
  float: left;
  width: 300px;
  /*display: inline;*/
}
.box-left-m {/* 左へフロートする機能 (IE対策付き) */
  float: left;
  width: 407px;
  /*display: inline;*/
}
.box-left-mi {/* 左へフロートする機能 (IE対策付き) */
  float: left;
  width: 227px;
  /*display: inline;*/
}

.clearfix:after {/* 親ボックスを作成せずにフロートの回り込みの解除をする機能 */
  content: "."; display: block; clear: both; height: 0px; overflow: hidden;
}

.clear {/* 回り込みを解除する機能 */
  clear: both; 
}

.invisible {/* コンテンツを隠し高さも0にすることでブラウザで表示した場合にもともとコンテンツがないように表現する機能 */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 0;
}

 a:link {/* 未訪問のリンクのデフォルトのスタイルをおこなう機能 */
}

 a:visited {/* 訪問済みのデフォルトのスタイルをおこなう機能 */
}

 a:hover {/* ポイント（マウスオーバー）時のデフォルトのスタイルをおこなう機能 */
}

 a:active {/* 選択中のデフォルトのスタイルをおこなう機能 */
}

.mb20 {/* 下部に20pxの余白を入れる機能 */
  margin-bottom: 20px;
}

.mb40 {/* 下部に40px余白を入れる機能 */
  margin-bottom: 40px;
}

/*
   =============================================================================

   ナビゲーション

   =============================================================================
*/

/* トップページのナビゲーションのスタイル */
#toppagenav {
  width: 700px;
  height: 70px;
  margin: 0; padding: 0;
  background: url(../../original/img/common/nav.png) no-repeat 0 0;
}

#toppagenav:after {/* 親ボックスを作成せずにフロートの回り込みの解除をする機能 */
  content: "."; display: block; clear: both; height: 0px; overflow: hidden;
}

/* メニューを横一列に並べる */
#toppagenav li {
  float: left;
  display: inline;
}

/* アンカーをブロックにしてリンク内のテキストを非表示にする */
#toppagenav a {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  height: 70px;
}

/* ナビゲーションのサイズ */
.nav-about a,
.nav-purpose a,
.nav-service a,
.nav-effect a{
  width: 117px;
}
.nav-merit a,
.nav-flow a{
  width: 116px;
}

/* ポイント時と選択時の位置をずらす */
#toppagenav .nav-about a:hover,
#toppagenav .nav-about a.active {
  background: url(../../original/img/common/nav.png) no-repeat 0 -70px;
}
#toppagenav .nav-purpose a:hover,
#toppagenav .nav-purpose a.active {
  background: url(../../original/img/common/nav.png) no-repeat -117px -70px;
}
#toppagenav .nav-service a:hover,
#toppagenav .nav-service a.active {
  background: url(../../original/img/common/nav.png) no-repeat -234px -70px;
}
#toppagenav .nav-effect a:hover,
#toppagenav .nav-effect a.active {
  background: url(../../original/img/common/nav.png) no-repeat -351px -70px;
}
#toppagenav .nav-merit a:hover,
#toppagenav .nav-merit a.active {
  background: url(../../original/img/common/nav.png) no-repeat -468px -70px;
}
#toppagenav .nav-flow a:hover,
#toppagenav .nav-flow a.active {
  background: url(../../original/img/common/nav.png) no-repeat -584px -70px;
}

/*
   =============================================================================

   レイアウト

   =============================================================================
*/

/* ナビゲーション */
#main-nav {
}

/* 大枠 */
#main-content {
  background-color: #f2f2ee;
  width: 700px;
  margin-bottom: 10px; /* ページトップへのリンクの余白 */
}

/* コンテンツの中枠 */
.container {
  width: 660px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 10px;
  padding-bottom: 40px;
}

/* コンテンツのセクション１ */
.container .lv1 {}

/* コンテンツのセクション２ */
.container .lv1 .lv2 {
  background: #fff;
  padding: 40px 10px 40px;
/*  border: 1px solid red;*/
}

/*
   =============================================================================

   ページタイトル

   =============================================================================
*/

/* h2 でタイトルに利用されているもののデフォルトのスタイル */
h2.title {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 151px;
  height: 21px;
  background: url(../../original/img/common/h2_title.gif) no-repeat;
}

/* h3 でタイトルに利用されているもののデフォルトのスタイル */
h3.title {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 660px;
  padding-bottom: 20px;
}

/* h4 でタイトルに利用されているもののデフォルトのスタイル */
h4.title {
  font-size: 150%;
  font-weight: bold;
  color: #666666;
  /*text-indent: 100%;*/
 /* white-space: nowrap;*/
  overflow: hidden;
  margin-bottom: 20px;
}

/* h5 でタイトルに利用されているもののデフォルトのスタイル */
h5.title {
/*
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
*/
  /* margin-bottom: 20px; */
}

/* h6 でタイトルに利用されているもののデフォルトのスタイル */
h6.title {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 20px;
}

/*
   =============================================================================

   お問い合わせのボタン

   =============================================================================
*/

#contact-area {
  width: 660px;
  background-color: #f2f2ee;
  margin-top: 40px;
  padding: 0;
  border: none;
}

.button {
  width: 500px;
  height: 68px;
  margin-right: auto;
  margin-left: auto;
}

.button a {
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 500px;
  height: 68px;
  background: url(../../original/img/common/contact_bt_syunen.png) no-repeat 0 0;
}

.button a:hover {
  background-position: 0 -68px;
}


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


  戦略的な周年事業のトップページ
  Top Page


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

/*
   =============================================================================

   レイアウト

   =============================================================================
*/

/* レイアウトを上書き */
body.home div.lv1 div.lv2.section {
  padding-top: 25px;
  padding-bottom: 25px;
  margin-bottom: 20px;
}

body.home div.lv1 div.lv2.section.n2 {
  margin: 0; padding: 0;
  background-color: #f2f2ee;
}

/*
   =============================================================================

   ページタイトル

   =============================================================================
*/

body.home h3.title {
  height: 235px;
  background: url(../../original/img/home/h3_title.jpg) no-repeat;
}

body.home h4.title.n1 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 550px;
  height: 30px;
  background: url(../../original/img/home/h4_title.png) no-repeat;
  margin-bottom: 10px;
}

body.home h4.title.n2 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  height: 0;
}

/*
   =============================================================================

   コンテンツ

   =============================================================================
*/

/* タグを追加せずに回り込みを解除する */
#bottompagenav:after {
  content: ".";
  display: block;
  clear: both;
  height: 0px;
  overflow: hidden;
}

/* 大枠 */
#bottompagenav {
  width: 660px;
}

/* １つのナビゲーションバナーのサイズなどを設定 */
#bottompagenav li {
  float: left;
  display: inline;
  width: 210px;
  height: 140px;
  margin-top: 0;
  margin-right: 15px;
  margin-bottom: 15px;
  padding: 0;
}
/* 右端にくるナビゲーションの設定 */
#bottompagenav li.end {
  margin-right: 0px;
}
/* 下部のナビゲーションの設定 */
#bottompagenav li.bottom {
  margin-bottom: 0px;
}
/* リンクのブロックにしてサイズを指定 */
#bottompagenav a {
  display: block;
  width: 210px;
  height: 140px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* ナビゲーション画像の指定 */
#bottompagenav li.nav-about a {
  background: url(../../original/img/home/nav_about.jpg) no-repeat 0 0;
}
#bottompagenav li.nav-purpose a {
  background: url(../../original/img/home/nav_purpose.jpg) no-repeat 0 0;
}
#bottompagenav li.nav-service a {
  background: url(../../original/img/home/nav_service.jpg) no-repeat 0 0;
}
#bottompagenav li.nav-effect a {
  background: url(../../original/img/home/nav_effect.jpg) no-repeat 0 0;
}
#bottompagenav li.nav-merit a {
  background: url(../../original/img/home/nav_merit.jpg) no-repeat 0 0;
}
#bottompagenav li.nav-flow a {
  background: url(../../original/img/home/nav_flow.jpg) no-repeat 0 0;
}

/* ポイント時の設定 */
#bottompagenav li.nav-about a:hover,
#bottompagenav li.nav-purpose a:hover,
#bottompagenav li.nav-service a:hover,
#bottompagenav li.nav-effect a:hover,
#bottompagenav li.nav-merit a:hover,
#bottompagenav li.nav-flow a:hover {
  background-position: 0 -140px;
}


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


  戦略的な周年事業とは
  About Page


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

/*
   =============================================================================

   レイアウト

   =============================================================================
*/

body.about .lv1 div.section.lv2.n1 {
  padding-bottom: 35px;
}

body.about .lv1 div.section.lv2.n2 {
  padding-top: 0px;
}


/*
   =============================================================================

   ページタイトル

   =============================================================================
*/

body.about h3.title {
  height: 130px;
  background: url(../../original/img/about/h3_title.jpg) no-repeat;
}

body.about h4.title.n1 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 20px;

  width: 235px;
  height: 60px;
  background: url(../../original/img/about/h4_title01.png) no-repeat;
}

body.about h4.title.n2 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 20px;

  width: 315px;
  height: 30px;
  background: url(../../original/img/about/h4_title02.png) no-repeat;
}

/*
   =============================================================================

   コンテンツ

   =============================================================================
*/

body.about .section.lv2.n1 {
  padding-bottom: 0; /* 1階層目のセクションの下パディングを削除して余白の調整する */
}

body.about .section div.box {
  width: 330px; /* 画像から見て左側の幅を設定 */
}


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


  周年事業の目的
  Purpose Page


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

/*
   =============================================================================

   レイアウト

   =============================================================================
*/
/* =============================================================================
   レイアウトを変更
   =============================================================================
*/
/* 2階層目のセクションの余白をリセット */
body.purpose .lv1 .lv2 {
  margin: 0; padding: 0;
  background-color: #fff;
}

/* 2階層目のボタンエリアの上部の余白をあける */
body.purpose .lv1 #contact-area {
  background-color: #f2f2ee;
  margin-top: 40px;
}

/* 3階層目の上部の余白をあけて背景色を変更する */
body.purpose .lv1 .lv2 div.lv3 {
  background-color: #fff;
  padding: 40px;
  margin: 0;
}

/* 3階層目のセクションの間の余白をリセット */
body.purpose .lv1 .lv2 div.lv3.section.n1 {
  padding-bottom: 0px;
}

/* 3階層目のセクションの間の余白をあける */
body.purpose .lv1 .lv2 div.lv3.section.n2 {
  padding-top: 35px;
}

/* IE6 */
* html body.purpose #main-content .lv1 .lv2 {
  margin: 0; padding: 0;  
}
* html body.purpose #main-content #contact-area {
  padding-top: 40px;
}


/* IE7 */
*:first-child+html body.purpose .lv1 .lv2 div.lv3 {
  margin: 10px;
}
*:first-child+html body.purpose #main-content .lv1 .lv2 {
  margin: 0; padding: 0;  
}
*:first-child+html body.purpose #main-content #contact-area {
  padding-top: 40px;
}

/*
   =============================================================================

   ページタイトル

   =============================================================================
*/

body.purpose h3.title {
  height: 130px;
  background: url(../../original/img/purpose/h3_title.jpg) no-repeat;
}

body.purpose h4.title.n1 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 20px;
  width: 277px;
  height: 60px;
  background: url(../../original/img/purpose/h4_title.png) no-repeat;
}

body.purpose h5.title {
  margin-top: 40px;
  width: 660px;
  height: 130px;
  background: url(../../original/img/purpose/h5_title.jpg) no-repeat;
  text-indent: -99999px;
}

body.purpose h6.title.n1 {
  width: 442px;
  height: 26px;
  background: url(../../original/img/purpose/h6_title01.png) no-repeat;
}

body.purpose h6.title.n2 {
  width: 275px;
  height: 26px;
  background: url(../../original/img/purpose/h6_title02.png) no-repeat;
}

/*
   =============================================================================

   コンテンツ

   =============================================================================
*/

/* =============================================================================
   その他の余白の設定
   =============================================================================
*/

/* タイトルとテキスト周りの余白の設定 */
body.purpose .section div.box {
  width: 330px; /* 画像から見て左側の幅を設定 */
  padding: 40px 0px 35px 20px;
}

/* 画像周りの余白の設定 */
body.purpose .section .section img.box-right {
  padding: 40px 20px 35px 0;
}

/* 変革の画像の位置を設定 */
body.purpose .section .section img#image-revo {
  display: block;
  width: 620px;
  height: 210px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 40px;
  background-color: #fff;
}

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


  サービス内容
  Service Page


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

/*
   =============================================================================

   レイアウト

   =============================================================================
*/
/* =============================================================================
   レイアウトを変更
   =============================================================================
*/

/* 2階層目のセクションの余白をリセット */
body.service .lv1 .lv2.section {
  margin: 0; padding: 0;
}

/* 3階層目のセクションの余白をリセット */
body.service .lv1 .lv2 .lv3.section {
  margin: 0; padding: 0;
  background-color: #f2f2ee; /* 3階層目の上部の余白をあけて背景色を変更する */
  padding-top: 40px;
}

/*
   =============================================================================

   ページタイトル

   =============================================================================
*/

body.service h3.title {
  width: 660px;
  height: 130px;
  background: url(../../original/img/service/h3_title.jpg) no-repeat;
}

body.service h4.title.n1 {
  width: 320px;
  height: 60px;
  background: url(../../original/img/service/h4_title.png) no-repeat;
}

body.service h5.title.n1 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;

  width: 300px;
  height: 100px;
  background: url(../../original/img/service/h5_title01.png) no-repeat;
}

body.service h5.title.n2 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;

  width: 300px;
  height: 100px;
  background: url(../../original/img/service/h5_title02.png) no-repeat;
}


/*
   =============================================================================

   コンテンツ

   =============================================================================
*/
/* =============================================================================
   その他の余白の設定
   =============================================================================
*/
/* タイトルとテキスト周りの余白の設定 */
body.service .lv1 .lv2 div.box {
  width: 330px; /* 画像から見て左側の幅を設定 */
  padding: 40px 0px 40px 20px;
}

/* 画像周りの余白の設定 */
body.service .lv1 .lv2.section img.box-right {
  padding: 40px 20px 40px 0;
}

body.service .lv1 .lv2 .lv3.section div.box {
  margin: 0;
  padding: 40px 0px 40px 0px;
  background-color: #fff;
  width: 300px;
}

body.service .lv1 .lv2 .lv3.section div.box-left {
  padding-right: 10px;
  padding-left: 20px;
}
body.service .lv1 .lv2 .lv3.section div.box-right {
  padding-right: 20px;
  padding-left: 10px;
}


/* IE6 */
* html body.service .lv1 .lv2 .lv3.section {
  padding-top: 30px;
}

/* IE7 */
*:first-child+html body.service .lv1 .lv2 div.lv3 {
  padding-top: 30px;
}

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


  周年事業の効果
  Effect Page


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

/*
   =============================================================================

   レイアウト

   =============================================================================
*/



/*
   =============================================================================

   ページタイトル

   =============================================================================
*/

body.effect h3.title {
  width: 660px;
  height: 130px;
  background: url(../../original/img/effect/h3_title.jpg) no-repeat;
}

body.effect h4.title.n1 {
  width: 319px;
  height: 60px;
  background: url(../../original/img/effect/h4_title.png) no-repeat;
}

/*
   =============================================================================

   コンテンツ

   =============================================================================
*/

/* タイトルとテキスト周りの余白の設定 */
body.effect .section div.box {
  width: 330px; /* 画像から見て左側の幅を設定 */
}

/* 変革の画像の位置を設定 */
body.effect .section .section img#image-vision {
  display: block;
  width: 620px;
  height: 100px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 35px;/* 余白をあける */
}

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


  周年事業のメリット
  Merit Page


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

/*
   =============================================================================

   レイアウト

   =============================================================================
*/
/* レイアウトを上書き */
body.merit .container .section .lv2.section {
  padding: 25px 13px 40px;
}

/*
   =============================================================================

   ページタイトル

   =============================================================================
*/
body.merit h3.title {
  width: 660px;
  height: 130px;
  background: url(../../original/img/merit/h3_title.jpg) no-repeat;
}

body.merit h4.title.n1 {
  width: 620px;
  height: 36px;
  background: url(../../original/img/merit/h4_title.png) no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/*
   =============================================================================

   コンテンツ

   =============================================================================
*/

/* メリット０１〜０３までのサイズを設定 */
body.merit .container .section > .lv2.section .box div.box-left {
  width: 407px;
}

/* メリット０４〜０６までのサイズを設定 */
body.merit .container .section > .lv2.section .box div.box-right {
  width: 407px;
}


/* IE6 */
* html body.merit #main-content .container .lv1 div.lv2.n1 {
  padding-bottom: 25px;
  margin-bottom: 20px;
}

/* IE7 */
*:first-child+html body.merit #main-content .container .lv1 div.lv2.n1 {
  padding-top: 25px;
  padding-bottom: 20px;
}

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


  周年事業のフロー
  Flow Page


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

/*
   =============================================================================

   レイアウト

   =============================================================================
*/

/*
   =============================================================================

   ページタイトル

   =============================================================================
*/

body.flow h3.title {
  width: 660px;
  height: 130px;
  background: url(../../original/img/flow/h3_title.jpg) no-repeat;
}

body.flow h4.title.n1 {
  width: 377px;
  height: 60px;
  background: url(../../original/img/flow/h4_title.png) no-repeat;
}

/*
   =============================================================================

   コンテンツ

   =============================================================================
*/

.flowbox {
  width: 520px;
  height: 50px;
  margin-bottom: 20px;
  padding-top: 40px;
  padding-left: 55px;
  padding-right: 45px;
  line-height: 1.5;
}

.flow01 {
  background: url(../../original/img/flow/flow01.png) no-repeat 0 0;
}
.flow02 {
  background: url(../../original/img/flow/flow02.png) no-repeat 0 0;
}
.flow03 {
  background: url(../../original/img/flow/flow03.png) no-repeat 0 0;
}
.flow04 {
  background: url(../../original/img/flow/flow04.png) no-repeat 0 0;
}
.flow05 {
  background: url(../../original/img/flow/flow05.png) no-repeat 0 0;
}
.flow06 {
  background: url(../../original/img/flow/flow06.png) no-repeat 0 0;
}
.flow07 {
  background: url(../../original/img/flow/flow07.png) no-repeat 0 0;
}
.flow08 {
  background: url(../../original/img/flow/flow08.png) no-repeat 0 0;
  margin-bottom: 0;
}



h5.titleNew {
	font-size: 133%;
	color: #666666;
	font-weight: bold;
	margin-bottom: 5px;
}