@charset "UTF-8";

/* layout class
---------------------------------------------------------------*/

/* clearfix */
.clearfix:after {
	content: " ";
	clear: both;
	display: block;
	line-height: 0;
	height: 0;
	visibility: hidden;
	font-size: 0.1em;
	line-height: 0;
}
.clearfix {
	zoom: 1;
}

/* ## 基本のレイアウトモジュール
<table style="width:100%;">
<tr><td><b>section-bクラス</b><br>section要素を使用するようなコンテンツレベルで使用するクラス。<br>
<table style="width:100%;">
<tr><td><b>rowクラス</b><br>行単位（横100%）で使用するクラス。</td></tr>
<tr><td><b>rowクラス</b><br>各section-bクラス・rowクラスの間はマージンの設定をおこなっている。</td></tr>
</table>
</td></tr>
</table>
```
<div class="container">
	<section class="section-b">
		<h2 class="ttl-b">h2 見出し</h2>
		<div class="row">
			<table><tr><th>rowクラス</th></tr></table>
		</div>
		<div class="row">
			<table><tr><th>rowクラス</th></tr></table>
		</div>
	</section>
	<div class="section-b">
		<div class="row">
			<table><tr><th>rowクラス</th></tr></table>
		</div>
		<div class="row">
			<table><tr><th>rowクラス</th></tr></table>
		</div>
	</div>
</div>
```
*/

.container {
	width: 940px;
	margin: 0 auto;
}
.row {
	margin: 20px 0;
}
.row:first-child {
	margin-top: 0;
}
.row:last-child {
	margin-bottom: 0;
}
.container:before,
.container:after,
.row:before,
.row:after {
	content: " ";
	display: table;
}
.container:after,
.row:after {
	clear: both;
}
.container,
.row {
	*zoom: 1;
}
.row--full {
	width: 100%;
}

.section-a {
}
.section-b {
}
.section-b+.section-b {
	margin-top: 40px;
}
.section-b-body {
	padding: 20px;
	border: 1px solid #ccc;
}
.section-c+.section-c {
	margin-top: 30px;
}

/*
## グリッドシステム
今使っていない気がするので要確認

```
<div class="container">
	<div class="row">
		<div class="grid_6 alpha">grid_6</div>
		<div class="grid_6 omega">grid_6</div>
	</div>
	<div class="row">
		<div class="grid_4 alpha">grid_4</div>
		<div class="grid_4">grid_4</div>
		<div class="grid_4 omega">grid_4</div>
	</div>
	<div class="row">
		<div class="grid_3 alpha">grid_3</div>
		<div class="grid_3">grid_3</div>
		<div class="grid_3">grid_3</div>
		<div class="grid_3 omega">grid_3</div>
	</div>
	<div class="row">
		<div class="grid_2 alpha">grid_2</div>
		<div class="grid_2">grid_2</div>
		<div class="grid_2">grid_2</div>
		<div class="grid_2">grid_2</div>
		<div class="grid_2">grid_2</div>
		<div class="grid_2 omega">grid_2</div>
	</div>
</div>
```
*/

/* grid system */
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16 {
  /*display: inline;*/
  display: block;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.row .grid_1 { width: 60px; }
.row .grid_2 { width: 140px; }
.row .grid_3 { width: 220px; }
.row .grid_4 { width: 300px; }
.row .grid_5 { width: 380px; }
.row .grid_6 { width: 460px; }
.row .grid_7 { width: 540px; }
.row .grid_8 { width: 620px; }
.row .grid_9 { width: 700px; }
.row .grid_10 { width: 780px; }
.row .grid_11 { width: 860px; }
.row .grid_12 { width: 940px; }

/* 左右の余白の解除 */
.alpha { margin-left: 0; }
.omega { margin-right: 0; }

/* 左側の空白項目数 */
.row .prefix_1 { padding-left: 80px; }
.row .prefix_2 { padding-left: 160px; }
.row .prefix_3 { padding-left: 240px; }
.row .prefix_4 { padding-left: 320px; }
.row .prefix_5 { padding-left: 400px; }
.row .prefix_6 { padding-left: 480px; }
.row .prefix_7 { padding-left: 560px; }
.row .prefix_8 { padding-left: 640px; }
.row .prefix_9 { padding-left: 720px; }
.row .prefix_10 { padding-left: 800px; }
.row .prefix_11 { padding-left: 880px; }

/* 右側の空白項目数 */
.row .suffix_1 { padding-right: 80px; }
.row .suffix_2 { padding-right: 160px; }
.row .suffix_3 { padding-right: 240px; }
.row .suffix_4 { padding-right: 320px; }
.row .suffix_5 { padding-right: 400px; }
.row .suffix_6 { padding-right: 480px; }
.row .suffix_7 { padding-right: 560px; }
.row .suffix_8 { padding-right: 640px; }
.row .suffix_9 { padding-right: 720px; }
.row .suffix_10 { padding-right: 800px; }
.row .suffix_11 { padding-right: 880px; }

.row .push_1 { left: 80px; }
.row .push_2 { left: 160px; }
.row .push_3 { left: 240px; }
.row .push_4 { left: 320px; }
.row .push_5 { left: 400px; }
.row .push_6 { left: 480px; }
.row .push_7 { left: 560px; }
.row .push_8 { left: 640px; }
.row .push_9 { left: 720px; }
.row .push_10 { left: 800px; }
.row .push_11 { left: 880px; }

.row .pull_1 { left: -80px; }
.row .pull_2 { left: -160px; }
.row .pull_3 { left: -240px; }
.row .pull_4 { left: -320px; }
.row .pull_5 { left: -400px; }
.row .pull_6 { left: -480px; }
.row .pull_7 { left: -560px; }
.row .pull_8 { left: -640px; }
.row .pull_9 { left: -720px; }
.row .pull_10 { left: -800px; }
.row .pull_11 { left: -880px; }

@media screen and (max-width:740px) {
	.wrap {
		width: 100%;
		overflow: hidden;
	}
	.container {
		width: 100%;
		margin: 0 auto;
	}
	.row {
		width: 94%;
		margin: 20px 0;
		margin-left: 3%;
		margin-right: 3%;
/*		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
*/	}
	.row .sp-row_1 {
		width: 100%;
		float: none;
		margin: 20px 0 0;
	}
	.sp-row_1:first-child {
		margin-top: 0;
	}
	.section-b+.section-b {
		margin-top: 20px;
	}
}

/* 共通クラス
---------------------------------------------------------------*/

/* header class */
#global-header {
	padding: 10px 0;
}
#global-header .container {
	position: relative;
}
.logo {
	width: 230px;
	float: left;
	margin: 0;
	line-height: 1;
}
.logo a:hover {
	opacity: 1;
}
.global-header__sub-group {
	width: 282px;
	float: left;
	/*float: right;*/
	margin-left: 20px;
}
.man_link {
	width: 228px;
	float: left;
	margin-right: 10px;
}
.logo_cibic {
	width: 43px;
	float: left;
	margin-top: 17px;
	line-height: 1;
}
.header_sns {
	position: absolute;
	right: 0;
	bottom: -6px;
	min-width: 308px;
	text-align: right;
}
.header_lang {
	position: absolute;
	font-size:12px;
	right: 0;
	bottom: -6px;
	min-width: 308px;
	text-align: right;
}
.header_lang li {
	display:inline-block;
	padding-right:15px;
	background:url(../img/blank_ico.gif)no-repeat right 0.2em;
	margin-left:15px;
}
.header_lang li span img {
	padding-right:5px;
}

.header_sns .sns_list li {
	display: inline-block;
	margin-left: 10px;
}
.sns_list .mixi {
}
.sns_list .twitter {
}
.sns_list .facebook {
	overflow: hidden;
}
.sns_list .facebook iframe {
	overflow:hidden;
	width:115px;
	height:21px;
	border:none;
}

@media screen and (max-width:740px) {
	.logo {
		width: 35%;
		margin-left: 3%;
		float: left;
	}
	.global-header__sub-group {
		width: 60%;
		float: right;
		margin-left: 0;
	}
	.man_link {
		width: 75%;
		margin-right: 3%;
	}
	.logo_cibic {
		width: 15%;
		margin-top: 13px;
		margin-right: 3%;
	}
	.header_sns {
		display: none;
	}

	.header_lang {
		display:none;
	}
}

/* global nav class */
#global-nav {
	background: rgba(0, 0, 0, 0) url("../img/global-nav_bg.png") repeat scroll 0 0;
	border-top: 3px solid #99e2cf;
	border-bottom: 3px solid #99e2cf;
}
.global-nav_list {
	display: table;
	margin: 0;
	padding: 0;
	list-style: none;
}
.global-nav_list li {
	width: 14.28%;
	height: 56px;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0) url("../img/global-nav_list_bg.png") no-repeat scroll 0 0;
	padding: 5px;
	font-size: 13px;
	font-size: 1.3rem;
	color: #001531;
	line-height: 1.4;
}
.global-nav_list li:last-child {
	background: url(../img/global-nav_list_bg_last.png) 0 0 no-repeat;
}
.global-nav_list li a {
	display: table-cell;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 150px;
	height: 46px;
	margin: 5px;
	border-radius: 4px;
	vertical-align: middle;
	color: #001531;
	text-align: center;
	text-decoration: none;
}
.global-nav_list .global-nav_list__online-shop a {
}
.global-nav_list li a.active,
.global-nav_list li a:hover {
	opacity: 1;
	background-color: rgba(204,236,228,0.8);
	/*font-weight: bold;*/
}
.global-nav_list .global-nav_list__online-shop {
}
.global-nav_list .global-nav_list__online-shop a {
	background: url(../img/global-nav_list_bg--online-shop_off.png) 0 0 no-repeat;
}
.global-nav_list .global-nav_list__online-shop a:hover {
	background: rgba(204,236,228,0.8) url(../img/global-nav_list_bg--online-shop_on.png) 0 0 no-repeat;
}
.no-link {
	display: table-cell;
	width: 150px;
	height: 46px;
	color: #aaa;
	vertical-align: middle;
	text-align: center;
}
.global-nav_list .global-nav_list__online-shop a {
}

@media screen and (max-width:740px) {
	#global-nav {
		border-bottom: 3px solid #99e2cf;
		-webkit-background-size: 2px 40px;
		background-size: 2px 40px;
	}
	.global-nav_list li {
		width: 25%;
		height: 40px;
		/*height: 50px;*/
		padding: 3px;
		background: url(../img/global-nav_list_bg_sp.png) right center no-repeat;
		font-size: 11px;
		font-size: 1.1rem;
		line-height: 1.2;
	}
	.global-nav_list li.sp_border {
		border-bottom: 1px solid #ccc;
	}

	.global-nav_list li:last-child {
		background: none;
	}
	.global-nav_list li:nth-child(1),
	.global-nav_list li:nth-child(2) {
		border-top: 1px solid #fff;
	}
	.global-nav_list li:nth-child(1),
	.global-nav_list li:nth-child(2),
	.global-nav_list li:nth-child(3) {
		width: 33.33%;
	}
	.global-nav_list li a {
		width: 32%;
		height: 34px;
	}
	.global-nav_list .global-nav_list__online-shop a {
		width: 25%;
		background: url(../img/global-nav_list_bg--online-shop_sp_off.png) center center no-repeat;
		-webkit-background-size: contain;
		        background-size: contain;
	}
	.global-nav_list .global-nav_list__online-shop a:hover {
		background: rgba(214,221,233,0.8) url(../img/global-nav_list_bg--online-shop_sp_on.png) center center no-repeat;
		-webkit-background-size: contain;
		        background-size: contain;
	}
	.global-nav_list li span {
		height: 34px;
	}
}

/* topic_path class */
.topic_path {
	padding: 5px 0;
	background-color: #ccece4;
	font-size: 12px;
	font-size: 1.2rem;
}
.topic_path li {
	float: left;
	color: #108d6f;
}
.topic_path li:after {
	content: "＞";
	padding: 0 5px;
}
.topic_path .last:after {
	content: "";
}
@media screen and (max-width:740px) {
	.topic_path {
		padding-left: 3%;
		padding-right: 3%;
		font-size: 10px;
		font-size: 1.0rem;
		line-height: 1.8;
	}
}

/* mainvisual class */
.mainvisual {
}
.mainvisual__products {
background-color: #ebf1f6;
}

/* main class */
#main {
	/*padding-bottom: 40px;*/
}
.main_body {
	margin-top: 30px;
	margin-bottom: 30px;
}
.sub-contents {
	/*margin: 20px 0;*/
	padding: 0 0 20px;
}


@media screen and (max-width:740px) {
	#main {
		/*padding-bottom: 20px;*/
	}
	.main_body {
		margin-top: 15px;
		margin-bottom: 30px;
	}
	.sub-contents {
		padding: 0 0 30px;
	}
}

/* footer class */
#global-footer {
	background-color: #ccece4;
	color: #108d6f;
}
.bnr-footer_woman {
}
.pagetop {
	margin: 0;
	text-align: right;
}
.pagetop a {
	color: #013270;
	text-decoration: none;
}
.footer_data {
}
.footer-nav {
}
.footer-nav_list {
	width: 300px;
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	font-size: 1.2rem;
	letter-spacing: -0.4em;
}
.footer-nav_list li {
	display: inline-block;
	letter-spacing: normal;
}
.footer-nav_list li+li:before {
	content: "｜";
	padding: 0 5px;
}
.footer-nav_list li:first-child {
	padding: 0;
}
.footer-nav_list a {
	color: #108d6f;
	text-decoration: none;
}
.copyright {
	margin: 20px 0;
	font-size: 12px;
	font-size: 1.2rem;
	text-align: right;
}

@media screen and (max-width:740px) {
	.pagetop {
		padding: 5px 3%;
		background-color: #fff;
	}
	.footer_sns {
		padding: 15px 0;
		border-top: 1px solid #ccc;
		background: #fff;
	}
	.footer_sns .sns_list {
		width: 100%;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	.footer_sns .sns_list li {
		display: inline-block;
		float: none;
	}

	.footer_lang {
		padding: 10px 0;
		border-top: 1px solid #ccc;
		background: #d6efe9;
	}

	.footer_lang ul.lang_inner {
	width:300px;
	margin:0 auto;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
	}

	.footer_lang li{
		display: inline-block;
		padding-right:15px;
	background:url(../img/blank_ico.gif)no-repeat right 0.2em;
	margin-left:15px;
	}

	.fb_iframe_widget > span {
	  vertical-align: baseline !important;
	}
	.footer-nav_list {
		width: 100%;
		float: none;
		margin: 10px 0;
		text-align: center;
	}
	.copyright {
		padding: 0 3%;
		text-align: center;
	}
}

#loader {
	width: 50px;
	height: 50px;
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -25px; /* heightの半分のマイナス値 */
	margin-left: -25px; /* widthの半分のマイナス値 */
	z-index: 100;
}

#fade {
	width: 100%;
	height: 100%;
	display: block;
	background-color: #FFFFFF;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 50;
	overflow: hidden;
}

/* sns footer class */
.snsFooter {
	text-align: center;
	color: #108d6f;
}
.snsFooter div {
	display: inline-block;
	vertical-align: middle;
	margin: 0px 5px 0px 0px;
}
.snsFooter div img {
	margin: 0px 5px;
}
@media screen and (max-width:740px) {
.snsFooter div img {
	width: 22px;
}
.snsFooter .ttl {
	display: block;
}
}