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

   .css --- 

   * Filename:            .css
   * Description:         
   * Version:             0.0.1 (Fri. Sep. 27, 2012 16:04:49)
   * 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; display: inline;
}

.box-left {/* 左へフロートする機能 (IE対策付き) */
  float: left;
  width: 330px;
  /*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(../../koujyoukengaku/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;
  width: 100px;
}

/* ポイント時と選択時の位置をずらす */
#toppagenav .nav-about a:hover,
#toppagenav .nav-about a.active {
  background: url(../../koujyoukengaku/img/common/nav.png) no-repeat 0 -70px;
}
#toppagenav .nav-future a:hover,
#toppagenav .nav-future a.active {
  background: url(../../koujyoukengaku/img/common/nav.png) no-repeat -100px -70px;
}
#toppagenav .nav-effect a:hover,
#toppagenav .nav-effect a.active {
  background: url(../../koujyoukengaku/img/common/nav.png) no-repeat -200px -70px;
}
#toppagenav .nav-produce a:hover,
#toppagenav .nav-produce a.active {
  background: url(../../koujyoukengaku/img/common/nav.png) no-repeat -300px -70px;
}
#toppagenav .nav-service a:hover,
#toppagenav .nav-service a.active {
  background: url(../../koujyoukengaku/img/common/nav.png) no-repeat -400px -70px;
}
#toppagenav .nav-flow a:hover,
#toppagenav .nav-flow a.active {
  background: url(../../koujyoukengaku/img/common/nav.png) no-repeat -500px -70px;
}
#toppagenav .nav-success a:hover,
#toppagenav .nav-success a.active {
  background: url(../../koujyoukengaku/img/common/nav.png) no-repeat -600px -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 div.section.lv1 div.section.lv2 {
  background: #fff;
  padding: 40px 20px 40px;
  margin-bottom: 20px;

/* border: 1px solid blue; */
}

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

   ページタイトル

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

/* h2 でタイトルに利用されているもののデフォルトのスタイル */
h2.title {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 151px;
  height: 21px;
  background: url(../../koujyoukengaku/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(../../koujyoukengaku/img/common/contact_bt_koujyoukengaku.png) no-repeat 0 0;
}

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


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


  工場見学最適化のトップページ
  Top Page


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

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

   レイアウト

   =============================================================================
*/
/* レイアウトを上書き */
/* 上下とコンテンツとの間の余白と下部の余白を変更 */
body.home .container div.lv1 div.section.lv2.n1 {
  padding-top: 25px;
  padding-bottom: 25px;
  margin-bottom: 20px;
}

/* 背景色を変更にして余白を消す */
body.home .container div.lv1 div.section.lv2.n2 {
  margin: 0; padding: 0;
  background-color: #f2f2ee;
}

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

   ページタイトル

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

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

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

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

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

   コンテンツ

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

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

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

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

/* ナビゲーション画像の指定 */
#bottompagenav li.nav-about a {
  background: url(../../koujyoukengaku/img/home/nav_about.jpg) no-repeat 0 0;
}
#bottompagenav li.nav-future a {
  background: url(../../koujyoukengaku/img/home/nav_future.jpg) no-repeat 0 0;
}
#bottompagenav li.nav-effect a {
  background: url(../../koujyoukengaku/img/home/nav_effect.jpg) no-repeat 0 0;
}
#bottompagenav li.nav-produce a {
  background: url(../../koujyoukengaku/img/home/nav_produce.jpg) no-repeat 0 0;
}
#bottompagenav li.nav-service a {
  background: url(../../koujyoukengaku/img/home/nav_service.jpg) no-repeat 0 0;
}
#bottompagenav li.nav-flow a {
  background: url(../../koujyoukengaku/img/home/nav_flow.jpg) no-repeat 0 0;
}
#bottompagenav li.nav-success a {
  background: url(../../koujyoukengaku/img/home/nav_success.jpg) no-repeat 0 0;
}

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

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


  工場見学とは
  About Page


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

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

   レイアウト

   =============================================================================
*/
/* レイアウトを上書き */
body.about .container div.lv1 div.section.lv2.n1 {
  padding-bottom: 35px;
  margin-bottom: 0;
}

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

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

   ページタイトル

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

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

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

body.about h4.title.n2 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 20px;
  width: 295px;
  height: 60px;
  background: url(../../koujyoukengaku/img/about/h4_title02.png) no-repeat;
}

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

   コンテンツ

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

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

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

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


  工場見学のこれから
  Future Page


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

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

   レイアウト

   =============================================================================
*/
/* レイアウトを上書き */
body.future .container div.lv1 div.section.lv2.n1 {
  padding-bottom: 35px;
  margin-bottom: 0;
}

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

body.future .container div.lv1 div.section.lv2.n3 {
  padding-top: 10px;
  padding-bottom: 25px;
}

/* IE6 */
* html body.future .container {
}

/* IE7 */
*:first-child+html body.future .container {
}

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

   ページタイトル

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

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

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

body.future h4.title.n2 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 20px;
  width: 314px;
  height: 60px;
  background: url(../../koujyoukengaku/img/future/h4_title02.png) no-repeat;
}

body.future h4.title.n3 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 0;
  width: 620px;
  height: 65px;
  background: url(../../koujyoukengaku/img/future/h4_title03.png) no-repeat;
}

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

   コンテンツ

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

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

body.future div.lv2.section.n3 div.box {
  width: 405px;
}

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


  最適化の効果
  Effect Page


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

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

   レイアウト

   =============================================================================
*/
/* レイアウトを上書き */
body.effect .container div.lv1 div.section.lv2.n1 {}

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

   ページタイトル

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

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

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

body.effect h4.title.n2 {
  width: 620px;
  height: 40px;
  background: url(../../koujyoukengaku/img/effect/h4_title02.png) no-repeat;
  margin-bottom: 0;
}

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

   コンテンツ

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

/* IE6 */
* html body.future .container {
}

/* IE7 */
*:first-child+html body.future .container {
}

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


  広告代理店のプロデュース
  Produce Page


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

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

   レイアウト

   =============================================================================
*/
/* レイアウトを上書き */
body.produce .container div.lv1 div.section.lv2.n1 {
}

body.produce .container div.lv1 div.section.lv2.n2 {
}

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

   ページタイトル

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

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

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

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

   コンテンツ

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

/* セクションの２階層目の１コ目のボックスのタイトルとテキスト周りの余白の設定 */
body.produce div.lv1 div.lv2.n1 div.box {
  width: 330px; /* 画像から見て左側の幅を設定 */
}

body.produce img#image-proceeds {
  display: block;
  width: 620px;
  height: 225px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 35px;/* 余白をあける */
  padding-bottom: 5px;/* 余白をあける */
}

body.produce img#iamge-chance {
  display: block;
  width: 485px;
  height: 50px;
  margin-right: auto;
  margin-left: auto;
}

body.produce .lv1 .section.lv2.n2 img {
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 15px;
}

body.produce img#image-when {
  display: block;
  width: 415px;
  height: 66px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 0;
}

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


  サービス内容
  Service Page


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

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

   レイアウト

   =============================================================================
*/
/* レイアウトを上書き */
body.service .container div.lv1 div.section.lv2.n1 {
}

/* IE6 */
* html body.service .container {
}

/* IE7 */
*:first-child+html body.service .container {
}

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

   ページタイトル

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

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

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

   コンテンツ

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

/* セクションの２階層目の１コ目のボックスのタイトルとテキスト周りの余白の設定 */
body.service div.lv1 div.lv2.n1 div.box.n1 {
  width: 330px; /* 画像から見て左側の幅を設定 */
}

body.service div.lv1 div.lv2.n1 div.box.n2 {
  width: 550px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 35px;
}

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


  最適化の流れ
  Flow Page


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

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

   レイアウト

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

body.flow div.lv1 div.lv2.n1 div.box.n1 {
  margin-bottom: 20px;
}

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

   ページタイトル

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

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

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

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

   コンテンツ

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

.flowbox {
  width: 525px;/* パディングを引いた値 */
  height: 50px;/* パディングを引いた値 */
  margin-bottom: 20px;
  padding-top: 40px;
  padding-right: 40px;
  padding-bottom: 0px;
  padding-left: 55px;
  line-height: 1.5;
}

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

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


  成功事例
  Success Page


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

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

   レイアウト

   =============================================================================
*/
/* レイアウトを上書き */
body.success .container div.lv1 div.section.lv2.n1 {
  padding-bottom: 35px;
  margin-bottom: 0;
}

body.success .container div.lv1 div.section.lv2.n2 {
  padding-top: 0;
}

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

   ページタイトル

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

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

body.success h4.title.n1 {
  width: 336px;
  height: 60px;
  background: url(../../koujyoukengaku/img/success/h4_title01.png) no-repeat;
  margin-top: 20px;
}

body.success h4.title.n2 {
  width: 358px;
  height: 60px;
  background: url(../../koujyoukengaku/img/success/h4_title02.png) no-repeat;
}

body.success h5.title.n1 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 620px;
  height: 65px;
  background: url(../../koujyoukengaku/img/success/image_no01_title.png) no-repeat;
  margin-top: 20px;
}

body.success h5.title.n2 {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 620px;
  height: 65px;
  background: url(../../koujyoukengaku/img/success/image_no02_title.png) no-repeat;
  margin-top: 20px;
}


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

   コンテンツ

   =============================================================================
*/
/* セクションの２階層目の１コ目のボックスのタイトルとテキスト周りの余白の設定 */
body.success div.lv1 div.lv2.n1 div.box {
  width: 430px;
}

body.success div.lv1 div.lv2.n2 div.box {
  width: 427px;
}

body.success div.lv1 div.lv2.n2 #image-example-top {
  width: 620px;
  height: 297px;
  margin-top: 20px;
}

body.success div.lv1 div.lv2.n2 #image-example-bottom {
  width: 620px;
  height: 538px;
}