@charset "utf-8";
/* ============================================================
  shared.css
---------------------------------------------------------------

0. fonts
1. base
2. structure
3. module
4. home
5. contents shared
6. lens
7. frame
8. campaign

===============================================================
0.  fonts
============================================================ */

/* ============================================================
1.  base
============================================================ */
html {
	height: 100%;
	min-height: 100%;
	overflow-x:hidden;
	overflow-y:auto;
}
body {
	height: 100%;
	background-color: #fff;
}
body, select, input, textarea {
	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', Arial, Verdana, sans-serif;
	color: #222;
	font-size: 12px;
	/*letter-spacing: 1px;*/
	line-height: 1.7;
}
a {
	/*color: #0066cc;*/
	text-decoration: none;
	-webkit-transition: color 150ms ease-in-out;
	-moz-transition: color 150ms ease-in-out;
	-ms-transition: color 150ms ease-in-out;
	-o-transition: color 150ms ease-in-out;
	transition: color 150ms ease-in-out;
}
a:hover,
a:active {
	/*color: #56a7d2;*/
	/*text-decoration: underline;*/
}



/* ============================================================
2.  structure
============================================================ */
/**
 * wrapper
 */
#wrapper {
	background-color: #fff;
	position: relative;
	z-index: 0;
	height: 100%;
}
body > #wrapper {
	height: auto;
	min-height: 100%;
}

/**
 * contents
 */
#contents {
	position: relative;
	padding-top: 65px; /* header height */
	padding-bottom: 27px; /* footer height */
	width: 100%;
}

/**
 * header
 */
#header {
	background: url(../img/bg-header.png) repeat-x bottom;
	/*position: absolute;*/
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 72px;
}
#header .inner {
	background-color: #fff;
	position: relative;
	width: 960px;
	height: 65px;
	margin: 0 auto;
	padding: 0 20px;
}
#header h1 {
	float: left;
	margin-top: 11px;
}
#header h1 a {
	background: url(../img/logo.gif?131015) no-repeat;
	display: block;
	width: 189px;
	height: 42px;
	text-indent: -9999px;
}
#header .campaign {
	float: right;
	margin-top: 17px;
}
/**
 * キャンペーン中
 */
#header .campaign {
	margin-top: 0;
}
#header .campaign a {
	background: url(../img/campaign_over.jpg) no-repeat;
	display: block;
	width: 211px;
	height: 65px;
}
#header .campaign a:hover img {
	display: none;
}

/**
 * レディース製品へ
 */
#header #go_ladies {
	float: right;
	margin-top: 0px;
}
#header #go_ladies img {
	vertical-align: top;
	margin-top: 30px;
	width: 100px;
	height: 13px;
}
#header #go_ladies a {
	background: url(../img/go_ladies_ov.gif?v2) 0 30px no-repeat;
	display: block;
	width: 100px;
	height: 65px;
}
#header #go_ladies a:hover img {
	display: none;
}


/**
 * gloval nav
 */
#gnav {
	position: absolute;
	top: 14px;
	left: 365px;
}
#gnav li { float: left; }
#gnav li a {
	display: block;
	padding: 0 14px 10px;
}
#gnav li a:hover,
#gnav li.current a {
	background: url(../img/bg-gnav.gif) no-repeat 50% bottom;
}


/**
 * footer
 */
#footer {
	background: url(../img/bg-footer.png) repeat-x top;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	margin-top: -33px;
	height: 33px;
}
#footer .inner {
	position: relative;
	width: 960px;
	height: 27px;
	margin: 0 auto;
	padding: 6px 20px 0;
	font-size: 10px;
}
#footer p {
	float: left;
	line-height: 27px;
}
#footer nav a {
	/*font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;*/
	display: inline-block;
	margin: 0 3px;
	color: #222;
}
#footer nav a:hover { color: #999; }
#footer nav a:first-child { margin-left: 0; }
#footer nav a:last-child { margin-right: 0; }
#footer p.copy { float: right; }



/* ============================================================
3.  module
============================================================ */
/**
 * overlay
 */
#overlay object { max-width: none; }
#overlay {
	background-color: #0b0b0b;
	position: absolute;
	z-index: 9999;
	width: 100%;
	height: 580px;
	display: none;
}
#overlay .inner {
	width: 960px;
	height: 400px;
	margin: 0 auto;
}
#overlay .video {
	width: 711px;
	height: 400px;
	background-color: #333;
	margin: 0 auto 15px;
}
#overlay .skip {
	width: 112px;
	margin: 0 auto;
}
#overlay .skip a {
	background: url(../img/video/btn-skip_over.gif) no-repeat 0 -30px;
	display: block;
	width: 112px;
	height: 28px;
	overflow: hidden;
}
#overlay .skip a:hover { background-position: 0 0 }
#overlay .skip a:hover img { display: none; }



/* ============================================================
4.  home
============================================================ */
#lens > h1,
#frame > h1 {
	position: absolute;
	z-index: 9999;
	text-align: center;
}
#lens .first,
#frame .first {
	position: absolute;
}
#lens .first .inner,
#frame .first .inner {
	width: 960px;
	height: 380px;
	margin: 0 auto;
	padding-top: 60px;
	text-align: center;
	overflow: hidden;
}
#lens .first .inner { background-color: #e5e5e5; }
#frame .first .inner { background-color: #050101; }
#lens .first .product,
#frame .first .product {
	margin-top: 25px;
}




/* ============================================================
5.  contents shared
============================================================ */
/* shared */
#lens, #frame, #campaign {
	overflow: hidden;
	position: fixed;
	width: 100%;
}
#lens section,
#frame section {
	position: absolute;
}
#lens section .inner,
#frame section .inner,
#campaign .inner {
	position: relative;
	z-index: 2;
	width: 960px;
	height: 410px;
	margin: 0 auto;
	/* overflow: hidden; */
}
#lens section .inner p,
#frame section .inner p {
	line-height: 2.5;
}
#lens section .inner p.lh_min,
#frame section .inner p.lh_min {
	line-height: 1.6;
	margin-bottom: 2px;
}
#lens section .inner p.lh_min_2,
#frame section .inner p.lh_min_2 {
	line-height: 2;
	margin-bottom: 2px;
}


/* clearfix */
#lens section .inner:before,
#lens section .inner:after,
#frame section .inner:before,
#frame section .inner:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}
#lens section .inner:after,
#frame section .inner:after { clear: both; }
#lens section .inner,
#frame section .inner { zoom: 1; }

/* nav */
div.next, div.prev, nav.cnav {
	display: none;
	position: absolute;
	z-index: 9999;
}
div.next a, div.prev a {
	background-repeat: no-repeat;
	display: block;
	width: 23px;
	height: 46px;
	text-indent: -9999px;
}
div.next {
	top: 50%;
	margin-left: -13px;
	margin-top: -23px;
}
div.prev {
	top: 50%;
	margin-top: -23px;
}
nav.cnav {
	bottom: 15px;
}
nav.cnav li { float: left; }
nav.cnav li a {
	background-repeat: no-repeat;
	background-position: 0 -30px;
	display: block;
	height: 30px;
	overflow: hidden;
}
nav.cnav li.current a,
nav.cnav li a:hover { background-position: 0 0 }
nav.cnav li.current img,
nav.cnav li a:hover img { display: none; }



/* ============================================================
6.  lens
============================================================ */
#lens {
	background-color: #e5e5e5;
	color: #050101;
}
#lens .footnote {
	font-size: 11px;
	color: #999;
}
#lens div.prev a {
	background-image: url(../img/lens/btn-prev.gif?v1);
}
#lens div.next a {
	background-image: url(../img/lens/btn-next.gif?v1);
}
#lens nav.cnav { width: 810px; }
#lens nav.cnav li.btn01 a {
	background-image: url(../img/lens/btn-01_over.png?v1);
	width: 154px;
}
#lens nav.cnav li.btn02 a {
	background-image: url(../img/lens/btn-02_over.png?v1);
	width: 124px;
}
#lens nav.cnav li.btn03 a {
	background-image: url(../img/lens/btn-03_over.png?v1);
	width: 200px;
}
#lens nav.cnav li.btn04 a {
	background-image: url(../img/lens/btn-04_over.png?v1);
	width: 172px;
}
#lens nav.cnav li.btn05 a {
	background-image: url(../img/lens/btn-05_over.png?v1);
	width: 157px;
}


/* debug */
/*#lens section .inner {
	background-color: #ccc;
}
*/

/* section01 */
#lens .section01 .inner > img {
	float: left;
	margin-top: 70px;
	margin-left: 30px;
}
#lens .section01 .inner div {
	float: right;
	width: 490px;
	margin-top: 80px;
	margin-right: 70px;
	text-align: center;
}
#lens .section01 h1 {
	margin-bottom: 40px;
}


/* section02 */
#lens .section02 .inner > img {
	display: block;
	margin: 10px auto 20px;
}
#lens .section02 h1,
#lens .section02 p {
	width: 580px;
	margin: 0 auto; 
}
#lens .section02 h1 {
	margin-bottom: 15px;
}


/* section03 */
#lens .section03 .view {
	float: left;
	position: relative;
	width: 365px;
	height: 313px;
	margin-top: 50px;
	margin-left: 100px;
}
#lens .section03 .view li {
	position: absolute;
	top: 0;
	left: 0;
}
#lens .section03 .inner div {
	float: right;
	margin-top: 60px;
	margin-right: 100px;
}
#lens .section03 h1,
#lens .section03 p {
	margin-bottom: 15px;
}
#lens .section03 .switch {
	margin-bottom: 7px;
}
#lens .section03 .switch li { float: left; }
#lens .section03 .switch li a {
	background-repeat: no-repeat;
	display: block;
	height: 28px;
}
#lens .section03 .switch li.current img,
#lens .section03 .switch li a:hover img { display: none; }
#lens .section03 .switch li.btn01 a {
	background-image: url(../img/lens/section03/btn-01_over.gif);
	width: 156px;
}
#lens .section03 .switch li.btn02 a {
	background-image: url(../img/lens/section03/btn-02_over.gif);
	width: 151px;
}
#lens .section03 .switch + p {
	width: 320px;
	text-align: center;
	line-height: 1;
	font-size: 11px;
	color: #999;
}


/* section04 */
#lens .section04 .view {
	position: relative;
	width: 668px;
	height: 219px;
	margin: 20px auto 10px;
}
#lens .section04 .view li {
	position: absolute;
	top: 0;
	left: 0;
}
#lens .section04 .switch {
	width: 381px;
	margin: 0 auto 7px;
}
#lens .section04 .switch li { float: left; }
#lens .section04 .switch li a {
	background-repeat: no-repeat;
	display: block;
	height: 28px;
}
#lens .section04 .switch li.current img,
#lens .section04 .switch li a:hover img { display: none; }
#lens .section04 .switch li.btn01 a {
	background-image: url(../img/lens/section04/btn-01_over.gif);
	width: 191px;
}
#lens .section04 .switch li.btn02 a {
	background-image: url(../img/lens/section04/btn-02_over.gif);
	width: 190px;
}
#lens .section04 .switch + p {
	margin-bottom:  10px;
	text-align: center;
	line-height: 1;
	font-size: 11px;
	color: #999;
}
#lens .section04 h1,
#lens .section04 p,
#lens .section04 .footnote {
	width: 740px;
	margin: 0 auto 15px;
}


/* ============================================================
7.  frame
============================================================ */
#frame {
	background-color: #050101;
	color: #ccc;
}
#frame div.prev a {
	background: url(../img/frame/btn-prev.gif?v1) no-repeat;
}
#frame div.next a {
	background: url(../img/frame/btn-next.gif?v1) no-repeat;
}
#frame nav.cnav { width: 838px; }
#frame nav.cnav li.btn01 a {
	background-image: url(../img/frame/btn-01_over.png?v2);
	width: 137px;
}
#frame nav.cnav li.btn02 a {
	background-image: url(../img/frame/btn-02_over.png?v2);
	width: 258px;
}
#frame nav.cnav li.btn03 a {
	background-image: url(../img/frame/btn-03_over.png?v2);
	width: 108px;
}
#frame nav.cnav li.btn04 a {
	background-image: url(../img/frame/btn-04_over.png?v2);
	width: 180px;
}
#frame nav.cnav li.btn05 a {
	background-image: url(../img/frame/btn-05_over.png?v2);
	width: 155px;
}


/* debug */
/*#frame section .inner {
	background-color: #2b1616;
}*/


/* section01 */
#frame .section01 .inner div {
	float: right;
	margin-top: 70px;
	margin-right: 90px;
	text-align: center;
}
#frame .section01 h1 {
	margin-bottom: 50px;
}
#frame .section01 .bg {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 50%;
	height: 100%;
	min-height: 100%;
	margin-left: -470px;
}


/* section02 */
#frame .section02 .inner > img {
	float: left;
	margin-top: 10px;
	margin-left: 50px;
}
#frame .section02 .inner div {
	float: right;
	margin-top: 60px;
	margin-right: 40px;
}
#frame .section02 .inner div > img {
	margin-bottom: 50px;
}
#frame .section02 h1 {
	margin-bottom: 15px;
}


/* section03 */
#frame .section03 {
	letter-spacing: 1px;
}
#frame .section03 .inner .img {
	float: left;
	margin-left: 30px;
}
#frame .section03 .inner .pointer {
	position: absolute;
	z-index: 5;
	top: 120px;
	left: 238px;
}
#frame .section03 .inner div {
	float: right;
	margin-top: 120px;
	margin-right: 30px;
}
#frame .section03 h1 {
	margin-bottom: 15px;
}


/* section04 */
#frame .section04 .inner .pointer {
	position: absolute;
	z-index: 5;
	top: 155px;
	left: 265px;
}
#frame .section04 .inner div {
	float: right;
	position: relative;
	margin-top: 10px;
	margin-right: 50px;
}
#frame .section04 .inner div .img {
	margin-left: 40px;
	margin-bottom: 10px;
}
#frame .section04 .inner div .pointer {
	top: 140px;
	left: 353px;
}
#frame .section04 h1 {
	margin-bottom: 15px;
}
#frame .section04 .bg {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	margin-top: -355px;
	margin-left: -500px;
}


/* ============================================================
8.  campaign
============================================================ */
#campaign {
	background-color: #5c6b6b;
}
#campaign .inner {
	position: absolute;
}
#campaign .copy { margin: 0 0 45px 100px; }
#campaign .present { margin: 0 0 10px 130px; }
#campaign .present p { margin-bottom: 15px; }
#campaign .present .btn03 a {
	background: url(../img/campaign/btn-03_over.png) no-repeat 0 0;
	display: block;
	width: 276px;
	height: 34px;
}
#campaign .present .btn03 a:hover img {
	display: none;
}
#campaign .sub { margin: 0 0 6% 110px; }
#campaign .bg {
	position: absolute;
	top: 0;
	z-index: 0;
	max-width: none;
}
#campaign nav {
	margin: 0 0 30px 110px;
}
#campaign nav li {
	float: left;
}
#campaign nav li a {
	background-repeat: no-repeat;
	display: block;
	height: 28px;
	width: 137px;
}
#campaign nav li a:hover img {
	display: none;
}
#campaign nav li.btn01 a {
	background-image: url(../img/campaign/btn-01_over.png?v1);
}
#campaign nav li.btn02 a {
	background-image: url(../img/campaign/btn-02_over.png?v1);
}
/* clearfix */
#campaign nav ul:before,
#campaign nav ul:after {
	content: "\0020";
	display: block;
	height: 0;
	overflow: hidden;
}
#campaign nav ul:after { clear: both; }
#campaign nav ul { zoom: 1; }


/**
 * 2014/01/05 更新分
 */
#campaign .copy { margin-bottom: 30px; }
#campaign .copy img {
	width: 300px;
	height: auto;
}
#campaign .present {
	width: 360px;
	margin-left: 85px;
	text-align: center;
	color: #fff;
}
#campaign .present p {
	margin-bottom: 5px;
}
#campaign .present p:last-child {
	margin-bottom: 0;
	font-size: 10px;
	letter-spacing: 1px;
}
#campaign .btn04 {
	margin: 0 0 10px 110px;
}
#campaign .btn04 a {
	background: url(../img/campaign/btn-04_over.png?v1) no-repeat 0 0;
	display: block;
	width: 300px;
	height: 44px;
}
#campaign .btn04 a:hover img {
	display: none;	
}


/**
 * 2014/05/12 更新分
 */
#campaign ul.btns {
	margin: 0 0 0 110px;
}
#campaign ul.btns li {
	float: left;
}
#campaign ul.btns li a {
	background-repeat: no-repeat;
	display: block;
	height: 28px;
	width: 137px;
}
#campaign ul.btns li.btn05 a {
	width: 150px;
	height: 44px;
	background: url(../img/campaign/btn-05_over.png?v3);
}
#campaign ul.btns li.btn05 a:hover img {
	display: none;
}
#campaign ul.btns li.btn06 a {
	width: 150px;
	height: 44px;
	background: url(../img/campaign/btn-06_over.png?v3);
}
#campaign ul.btns li.btn06 a:hover img {
	display: none;
}