@charset 'UTF-8';
html {
	font-size: 62.5%;

	overflow-y: scroll;
}

html {
	font-family: sans-serif;

	-webkit-text-size-adjust: 100%; 
	    -ms-text-size-adjust: 100%;
}

body {
	margin: 0;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: auto | grayscale;
 -webkit-font-feature-settings: 'palt' 1; /* for Android 4.4*/
 font-feature-settings: 'palt' 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block;
}

audio, canvas, progress, video {
	display: inline-block;

	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;

	height: 0;
}

[hidden], template {
	display: none;
}

a {
	background-color: transparent;
}

a:active, a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b, strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;

	margin: .67em 0;
}

mark {
	color: #000000; 
	background: #ffff00;
}

small {
	font-size: 80%;
}

sub, sup {
	font-size: 75%;
	line-height: 0;

	position: relative;

	vertical-align: baseline;
}

sup {
	top: -.5em;
}

sub {
	bottom: -.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	-moz-box-sizing: content-box;
	     box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code, kbd, pre, samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button, input, optgroup, select, textarea {
	font: inherit;

	margin: 0; 

	color: inherit;
}

button {
	overflow: visible;
}

button, select {
	text-transform: none;
}

button, html input[type='button'], input[type='reset'], input[type='submit'] {
	cursor: pointer; 

	-webkit-appearance: button;
}

button[disabled], html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	padding: 0; 

	border: 0;
}

input {
	line-height: normal;
}

input[type='checkbox'], input[type='radio'] {
	box-sizing: border-box;
	padding: 0;
}

input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
	height: auto;
}

input[type='search'] {
	-webkit-box-sizing: content-box;
	   -moz-box-sizing: content-box;
	        box-sizing: content-box; 

	-webkit-appearance: textfield;
}

input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	margin: 0 2px;
	padding: .35em .625em .75em; 

	border: 1px solid #c0c0c0;
}

legend {
	padding: 0; 

	border: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-spacing: 0; 
	border-collapse: collapse;
}

td, th {
	padding: 0;
}

body, div, h1, h2, h3, h4, h5, h6, form, ul, li, ol, dl, dt, dd, p, fieldset, pre, code, legend, blockquote, figure {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

li {
	list-style: none;
}

pre {
	margin: 0;

	white-space: pre-wrap;
	word-wrap: break-word;
}

a:focus {
	outline: thin dotted;
}

q {
	quotes: none;
}

abbr[title] {
	border-bottom: 1px dotted;
}

code, samp, kbd {
	font-family: monospace, sans-serif;
}

mark {
	color: black;
	background-color: yellow;
}

sub {
	bottom: -.25em;
}

sup {
	top: -.5em;
}

img {
	line-height: 1;

	vertical-align: top; 

	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

caption {
	padding: 0;
}

th, td {
	padding: 0;
}

form {
	margin: 0;
}

fieldset {
	margin: 0;
	padding: 0;

	border: 0;
}

input::-moz-focus-inner, button::-moz-focus-inner {
	padding: 0;

	border: 0;
}

body {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.5;
}

@font-face {
	font-family: 'condenseicon';

	src: url("../font/CONDENSEicon.eot") format("embedded-opentype"),
		url("../font/CONDENSEicon.woff") format("woff"),
		url("../font/CONDENSEicon.ttf") format("truetype"),
		url("../font/CONDENSEicon.otf") format("opentype");
}
.opacity {
	opacity: .7;

	-ms-filter: 'alpha(opacity=70)'; 
	    filter: alpha(opacity=70);
}

.inline_block {
	display: inline-block;

	*display: inline;
	*zoom: 1;
}

.table_cell {
	display: table-cell;

	vertical-align: middle; 

	*display: inline;
	*zoom: 1;
}

.imgR {
	float: right;

	margin-bottom: 20px;
	margin-left: 20px;
}

.imgL {
	float: left;

	margin-right: 20px; 
	margin-bottom: 20px;
}

.imgC, .alignC {
	text-align: center;
}

.imgC {
	display: block;

	margin-right: auto;
	margin-bottom: 20px; 
	margin-left: auto;
}

.alignR {
	text-align: right;
}

a.hover--outline {
	position: relative;

	display: block;

	cursor: pointer;
}

a.hover--outline:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	content: '';
	transition: all .3s ease; 

	border: 1px solid #004ca3;
}

a.hover--outline img {
	width: 100%;
	height: auto;
}

a.hover--outline:hover:before {
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
}

.ts_none {
	text-shadow: none !important;
}

.bs_none {
	box-shadow: none !important;
}

.mt0 {
	margin-top: 0 !important;
}

.mb0 {
	margin-bottom: 0 !important;
}

.pt0 {
	padding-top: 0 !important;
}

.pb0 {
	padding-bottom: 0 !important;
}

.mt5 {
	margin-top: 5px !important;
}

.mb5 {
	margin-bottom: 5px !important;
}

.pt5 {
	padding-top: 5px !important;
}

.pb5 {
	padding-bottom: 5px !important;
}

.mt10 {
	margin-top: 10px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.pt10 {
	padding-top: 10px !important;
}

.pb10 {
	padding-bottom: 10px !important;
}

.mt15 {
	margin-top: 15px !important;
}

.mb15 {
	margin-bottom: 15px !important;
}

.pt15 {
	padding-top: 15px !important;
}

.pb15 {
	padding-bottom: 15px !important;
}

.mt20 {
	margin-top: 20px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.pt20 {
	padding-top: 20px !important;
}

.pb20 {
	padding-bottom: 20px !important;
}

.mt25 {
	margin-top: 25px !important;
}

.mb25 {
	margin-bottom: 25px !important;
}

.pt25 {
	padding-top: 25px !important;
}

.pb25 {
	padding-bottom: 25px !important;
}

.mt30 {
	margin-top: 30px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.pt30 {
	padding-top: 30px !important;
}

.pb30 {
	padding-bottom: 30px !important;
}

.mt35 {
	margin-top: 35px !important;
}

.mb35 {
	margin-bottom: 35px !important;
}

.pt35 {
	padding-top: 35px !important;
}

.pb35 {
	padding-bottom: 35px !important;
}

.mt40 {
	margin-top: 40px !important;
}

.mb40 {
	margin-bottom: 40px !important;
}

.pt40 {
	padding-top: 40px !important;
}

.pb40 {
	padding-bottom: 40px !important;
}

.mt45 {
	margin-top: 45px !important;
}

.mb45 {
	margin-bottom: 45px !important;
}

.pt45 {
	padding-top: 45px !important;
}

.pb45 {
	padding-bottom: 45px !important;
}

.mt50 {
	margin-top: 50px !important;
}

.mb50 {
	margin-bottom: 50px !important;
}

.pt50 {
	padding-top: 50px !important;
}

.pb50 {
	padding-bottom: 50px !important;
}

.mt55 {
	margin-top: 55px !important;
}

.mb55 {
	margin-bottom: 55px !important;
}

.pt55 {
	padding-top: 55px !important;
}

.pb55 {
	padding-bottom: 55px !important;
}

.mt60 {
	margin-top: 60px !important;
}

.mb60 {
	margin-bottom: 60px !important;
}

.pt60 {
	padding-top: 60px !important;
}

.pb60 {
	padding-bottom: 60px !important;
}

.mt65 {
	margin-top: 65px !important;
}

.mb65 {
	margin-bottom: 65px !important;
}

.pt65 {
	padding-top: 65px !important;
}

.pb65 {
	padding-bottom: 65px !important;
}

.mt70 {
	margin-top: 70px !important;
}

.mb70 {
	margin-bottom: 70px !important;
}

.pt70 {
	padding-top: 70px !important;
}

.pb70 {
	padding-bottom: 70px !important;
}

.mt75 {
	margin-top: 75px !important;
}

.mb75 {
	margin-bottom: 75px !important;
}

.pt75 {
	padding-top: 75px !important;
}

.pb75 {
	padding-bottom: 75px !important;
}

.mt80 {
	margin-top: 80px !important;
}

.mb80 {
	margin-bottom: 80px !important;
}

.pt80 {
	padding-top: 80px !important;
}

.pb80 {
	padding-bottom: 80px !important;
}

.mt85 {
	margin-top: 85px !important;
}

.mb85 {
	margin-bottom: 85px !important;
}

.pt85 {
	padding-top: 85px !important;
}

.pb85 {
	padding-bottom: 85px !important;
}

.mt90 {
	margin-top: 90px !important;
}

.mb90 {
	margin-bottom: 90px !important;
}

.pt90 {
	padding-top: 90px !important;
}

.pb90 {
	padding-bottom: 90px !important;
}

.mt95 {
	margin-top: 95px !important;
}

.mb95 {
	margin-bottom: 95px !important;
}

.pt95 {
	padding-top: 95px !important;
}

.pb95 {
	padding-bottom: 95px !important;
}

.mt100 {
	margin-top: 100px !important;
}

.mb100 {
	margin-bottom: 100px !important;
}

.pt100 {
	padding-top: 100px !important;
}

.pb100 {
	padding-bottom: 100px !important;
}

/*
# 全体レイアウト <!-- layout -->
bodyタグ直下に#pageを生成して、以下のようにレイアウトしています。  
・シングルカラム：`#page > #gHeader + #contents [ > .pageHead + .pageBody > .main ] +#gFooter`  
・2カラム：`#page > #gHeader + #contents [ > .pageHead + .pageBody > (.main.with--sub + .sub--grid) ] +#gFooter`  
※最大幅960pxは.wrapperクラスで、色設定は、_setting.scssでそれぞれ定義しています。
```
<div id="page">
	<div id="gHeader">
		<div class="wrapper wrapper--header">グローバルナビゲーション</div>
	</div>
	<div id="contents">
		<div class="pageHead">
			<div class="wrapper">
				<h1 class="page-title">ページタイトル</h1>
			</div>
		</div>
		<div class="pageBody">
			<div class="wrapper">
				<div class="main">
					<div class="blockBody">
					ページ本文</div>
				</div>
			</div>
			<div class="wrapper">
				<div class="main with--sub">
					ページ本文
				</div>
				<div class="sub--grid">サブカラム</div>
			</div>
		</div>
	</div>
	<div id="gFooter" class="gFooter">
		<div class="gFooter__nav">
			<div class="wrapper">グローバルフッター</div>
		</div>
		<div class="gFooter__copyright">
			<div class="gFooter__copyright__wrapper">コピーライト</div>
		</div>
	</div>
</div>
```
*/
#page {
	width: 100%;
	margin: 0 auto;

	background: #f7f7f5;
}

.wrapper {
	box-sizing: border-box;
	max-width: 960px;
	margin: 0 auto;
}

.pageHead {
	background: #e4eef9;
}

.pageBody {
	padding: 60px 0 100px;
}

.blockHead {
	position: relative;
}

.blockHead__wrapper {
	padding-right: 40px;
	padding-left: 40px;
}

.blockBody, .blockFoot {
	padding: 40px;
}

.blockBody .leadTxt {
	font-size: 16px;
	font-size: 1.6rem;
}

.main {
	border: 1px solid #eeeeee;
	background: #ffffff;
}
.main + .main {
	margin-top: 80px;
}
.main.with--sub {
	float: right;

	box-sizing: border-box;
	width: 75%;
	padding: 40px 39px;
}

.sub--grid {
	float: left;

	width: 200px;
}

.main__wrapper {
	box-sizing: border-box;
	max-width: 960px;
	margin: 0 auto;

	border: 1px solid #eeeeee; 
	background: #ffffff;
}

.search {
	position: relative;
}

.search:before {
	font-family: 'condenseicon'; 

	position: absolute;
	z-index: 5;
	top: 8%;
	left: 0;

	display: block;

	height: 100%;
	padding: 0 .4rem;

	content: '[';

	color: #000000;
}

.search__text {
	float: left;

	box-sizing: border-box;
	margin: 0;
	padding: 2px 0 2px 2.8rem;

	border: none;
}

.search__submit {
	float: left;

	margin: 0;
	padding: 2px 2.5rem;

	border: none;
	background: #e5e5e5;
}

.gHeader {
	border-top: 40px solid #004ca3;
	border-bottom: 2px solid #c4d1e1;
	background: #ffffff;
}
.gHeader.is--fixed {
	position: fixed;
	z-index: 100; 

	width: 100%;

	border-top: none;
	background: rgba(255, 255, 255, .96);
}

.gHeader__wrapper {
	position: relative;
	padding: 24px 0;
 padding-right: 80px;
}
.gHeader .siteLogo {
 width: 180px;
 margin: -11px 0;
}
.gHeader .siteLogo img {
 width: 100%;
 height: auto;
}
.gHeader .icon {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 width: 45px;
 height: 48px;
 margin: auto;
}
.gHeader .icon a {
 display: block;
 width: 100%;
 height: 100%;
}
.gHeader .icon img {
 width: auto;
 height: 100%;
}

.gHeader__head {
	float: left;
	max-width: 28%;
}

.gHeader__body {
	float: right;
}

.gHeader__utility {
	position: absolute;
	top: -32px;
	right: 0;
}

.is--fixed .gHeader__utility {
	display: none;
}

.gHeader__uNav, .gHeader__search {
	display: inline-block;

	vertical-align: middle;
}

.gHeader__search .search__text {
	width: 150px;
}

.gHeader__uNav li {
	display: inline-block;

	margin: 0;
	padding: 0;

	vertical-align: middle; 

	border-right: 1px solid #ffffff;
}

.gHeader__uNav li:last-child {
	border-right: none;
}

.uNav__item {
	font-size: 11px;
	font-size: 1.1rem;

	margin-right: 4px;
	padding: 4px 10px;

	transition: all .3s ease; 
	text-decoration: none;

	border-radius: 4px;
}

.uNav__item:link, .uNav__item:visited {
	color: #ffffff;
}

.uNav__item:hover {
	color: #00152d; 
	background: #e5e5e5;
}

.gHeader__gNav {
	width: 640px;
	text-align: right;
}
.gHeader__gNav ul {}
.gHeader__gNav li {
	font-size: 16px;
	font-size: 1.6rem; 
	display: inline-block;
	margin-left: 4%;
}


.gNav__item {
	position: relative;

	box-sizing: border-box;
	height: 72px;
	padding: 23px 0 2.2rem 2.4rem;

	transition: all .1s ease; 
	text-decoration: none;

	color: #313131;
}
.gNav__item:before {
	font-family: 'condenseicon'; 

	position: absolute;
	top: 32%;
	left: 0;

	display: block;

	color: #004ca3;
}

.gNav__item--products:before, .title--products:before {
	content: 'E';
}

.gNav__item--company:before, .title--company:before {
	content: 'Q';
}

.gNav__item--cmgallery:before, .title--cmgallery:before {
	content: ',';
}

.gNav__item--recruit:before, .title--recruit:before {
	content: '‰';
}

.is--active > .gNav__item, .gNav__item:hover, .is--products .gNav__item--products, .is--company .gNav__item--company, .is--cmgallery .gNav__item--cmgallery, .is--recruit .gNav__item--recruit {
	border-bottom: 6px solid #004ca3;
}

.gFooter__nav {
	border-bottom: 1px solid #51667b;
	background: #001d3d;
}

.gFooter__nav__wrapper {
	position: relative;

	display: table;

	width: 100%;
	margin: 0 auto;
	padding: 60px 0;
}

.gFooter__navUnit {
	display: table-cell;
}

.gFooter__navUnit a {
	display: inline-block;

	transition: all .3s ease; 
	text-decoration: none;

	color: #ffffff;
}

.gFooter__navUnit__title {
	padding: 4px 0;
}

.gFooter__item, .gFooter__item--products {
	position: relative;

	box-sizing: border-box;
	padding: 4px 10px 4px 18px;

	border-radius: 4px;
}

.gFooter__item:before, .gFooter__item--products:before {
	font-family: 'condenseicon';
	font-size: 8px;
	font-size: .8rem;

	position: absolute;
	top: 25%;
	left: 2%;

	content: 'ñ';
}

.gFooter__item:hover, .gFooter__item--products:hover {
	color: #00152d; 
	background: #e5e5e5;
}

.gFooter__navUnit--contents {
	width: 28.125%;
}

.gFooter__navUnit--products {
	width: 53.125%;
}

.gFooter__item {
	width: 98%;
}

.gFooter__item--products {
	float: left;

	width: 48%;
}

.gFooter__navUnit--company {
	width: 18.75%;
}

.gFooter__copyright {
	background-color: #ffffff;
}

.gFooter__copyright__wrapper {
	padding: 24px 0 40px;
}

.address--copyright {
	font-size: 10px;
	font-size: 1rem;
	font-style: normal;

	text-align: center;
}

.localNav ul + ul, .localNav .wrapper + .wrapper {
	margin-top: 40px;
}

.pageHead + .localNav {
	border-top: 4px solid #004ca3;
}

.localNav__item {
	text-decoration: none;
}

.localNav__item > span {
	font-size: 16px;
	font-size: 1.6rem;

	display: block;

	padding: .6875em .2em;

	transition: all .3s ease; 
	text-align: center;
	text-decoration: none;

	color: #004ca3;
	border: 1px solid #004ca3;
	background: #ffffff;
}

.pageHead + .localNav ul:first-child .localNav__item > span {
	border-top: none;
}

.localNav--vertical {
	margin-top: -10px;
}
.localNav--vertical .localNav__item {
	display: block;

	margin-top: 10px;
}

.localNav__item.is--negative > span {
	color: #939393; 
	border-color: #d6d6d6;
}

a.localNav__item:hover span, a.localNav__item span.is--active {
	text-decoration: none; 

	color: #ffffff;
	background: #004ca3;
}

.localNav--name.grid--fill {
	margin-right: -10px;
	margin-left: -10px;
}
.localNav--name .grid__item {
	padding-right: 10px;
	padding-left: 10px;
}

.pagerNav {
	position: relative;

	height: 2em;
	margin-top: 40px;
}
.pagerNav .pagerNav__item--home {
	position: absolute;
	left: 0; 

	display: inline-block;
}
.pagerNav .pagerNav__item--prev {
	position: absolute;
	right: 27%; 

	display: block;
}
.pagerNav .pagerNav__item--next {
	position: absolute;
	right: 0;
}
.pagerNav span.pagerNav__item--prev, .pagerNav span.pagerNav__item--next {
	padding: .2em; 

	color: #979797;
}

/*
#アコーディオン <!-- accordion -->
・アコーディオンのコントローラーと開閉するコンテンツに、それぞれクラスを付与。  
・`.accordion__unit > .accordion__unit__head`：コントローラー  
・ `.accordion__unit > .accordion__unit__body`：開閉コンテンツ 
アコーディオンの開閉は、share/scripts/function.js で定義。
```
<div class="accordion__unit">
	<h2 class="accordion__unit__head">マスクに関するよくある質問</h2>
	<div class="accordion__unit__body">
		<article class="entryBody">
			<div class="faq__unit__question">
				<h3 class="faq__unit__question--title">レギュラーサイズとは普通のサイズではないのですか？　他社製品と比べると大きいようですが。</h3>
			</div>
			<div class="faq__unit__answer">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				<dl class="faq__unit--extra">
					<dt>対象製品</dt>
					<dd>○○○○●　○○○○●</dd>
				</dl>
			</div>
		</article>
	</div>
</div>
```
*/
.accordion__unit .accordion__unit__head, .accordion__unit .accordion__unit__secondary {
	position: relative;

	cursor: pointer;
}
.accordion__unit .accordion__unit__head:after, .accordion__unit .accordion__unit__secondary:after {
	font-family: 'condenseicon';

	position: absolute;

	content: 'û'; 

	color: #004ca3;
}
.accordion__unit.is--active .accordion__unit__head:after, .accordion__unit .accordion__unit__secondary.is--active:after {
	content: 'ñ';
}

/*
 # ボタン <!--btn-->
・`.btn`：背景色とテキストカラーを定義

```
<div class="btn">ボタン</div>
```
## 　アイコン付き <!-- btn--ico -->
・`.btn--ico`で、paddingとプレフィックス用のcondenseiconとスペース（通常時と:hover）を定義
```
<a class="btn btn--ico" href="#">アイコン付きボタンのベース</a>
```
## 　リンク <!-- bn--link -->
・`.btn--link` で右向き「＞」を付与  
・prefixの位置・サイズ（通常時と:hover時）を定義
```
<a class="btn btn--ico btn--link" href="#">リンクボタン</a>
```
## 　お問い合わせ <!-- btn--to-contact -->
・`.btn--to-contact`：やや大きめ  
・prefixの位置・サイズ（通常時と:hover時）を定義
```
<a class="btn btn--ico btn--to-contact" href="#">商品に関するお問い合わせはこちらボタン</a>
```
## 　閉じるボタン <!-- btn--close -->
・`.btn--close`
```
<a class="btn btn--ico btn--close" href="#">閉じるボタン</a>
```
*/
.btn {
	line-height: 1;

	box-sizing: border-box;

	cursor: pointer; 
	text-decoration: none;

	color: #ffffff;
	border-width: 2px;
	border-style: solid;
	border-color: #004ca3;
	border-radius: 4px;
	background-color: #004ca3;
}
.btn:hover {
	transition: all .3s ease;
}

.btn--ico {
	font-size: 14px;
	font-size: 1.4rem;

	position: relative;

	display: inline-block;

	box-sizing: border-box;
	padding: 10px 20px;

	vertical-align: middle; 

	box-shadow: 0 3px 2px -2px rgba(0, 51, 118, .8);
}
.btn--ico:before {
	font-family: 'condenseicon';
	line-height: 1;

	position: absolute;
	top: 25%;
	left: 1em;

	height: 100%;

	transition: all .3s linear .1s; 
	text-align: center;

	color: #ffffff;
	border: 1px solid #ffffff;
}
.btn--ico:hover, .companyList .grid__item:hover .btn--ico, .mainPanel__item:hover .btn--ico, .productsList .grid__item:hover .btn--ico {
	color: #004ca3; 
	background: #ffffff;
}
.btn--ico:hover:before, .companyList .grid__item:hover .btn--ico:before, .mainPanel__item:hover .btn--ico:before, .productsList .grid__item:hover .btn--ico:before {
	left: 1.4em;

	color: #004ca3; 
	border-color: #004ca3;
}

.btn--link {
	padding-left: 2.5em;
}
.btn--link:before {
	font-size: 11px;
	font-size: 1.1rem;

	box-sizing: border-box;
	width: 18px;
	height: 18px;
	padding-top: 2.5px;

	content: 'ú';
	text-align: center;
	vertical-align: middle; 

	border-radius: 9px;
}
.btn--46wide {
	min-width: 290px;
}
.btn--link.btn--46wide {
	padding-left: 35px;
}
.btn--ico.btn--46wide:before {
	left: 10px;
}

.btn--to-contact {
	font-size: 20px;
	font-size: 2rem; 

	padding: 27px 25px 27px 2.5em;
}
.btn--to-contact:before {
	font-size: 14px;
	font-size: 1.4rem;

	top: 36%;

	box-sizing: border-box;
	width: 24px;
	height: 24px;
	padding-top: 3px;
	padding-left: 1px;

	content: 'ú';
	text-align: center; 

	border-radius: 12px;
}

.btn--toTop {
	position: absolute;
	top: -45px;
	right: 0;

	width: 30px;
	height: 30px;
}
.btn--toTop:hover {
	margin-top: -6px;

	opacity: .7;
}
.btn--toTop span {
	display: block;
	overflow: hidden; 

	white-space: nowrap;
	text-indent: 100%;
}
.btn--toTop:after {
	font-family: 'condenseicon';
	font-size: 20px;
	font-size: 2rem; 

	position: absolute;
	top: 12%;
	left: 10%;

	content: 'ü';

	color: #ffffff;
}

.btn--blockHead {
	position: absolute;
	top: 37%;
	right: 40px;
}

.btn--blockFoot {
	text-align: center;
}

.btn--close {
	padding-left: 2.5em;
}
.btn--close:before {
	content: 'ò'; 

	border: none;
}
.btn--close:hover:before {
	left: 1em;
}

.btn--full {
	width: 100%;
}

/*
# リンクテキスト <!-- link -->
・テキストリンクに、アイコンを付与する。  
・`.link`をベースに、link--** で拡張する。  
・テキストにprefixとhover処理を共通設定
```
<div class="link">リンク</div>
```

## 　戻る <!-- link--prev -->
・`.link--prev`：「＜」を付与
```
<a class="link link--prev" href="#">前へ</a>
```

## 　外部リンク <!-- link--external -->
・`.link--external`：テキストの右に外部リンクアイコンを付与  
※targetウィンドウはfunction.jsで付与するので、指定不要
```
<a class="link link--external" href="#">次へ</a>
```
*/
.link {
	position: relative;

	padding: .2em .2em .2em 1.2em;

	transition: all .3s ease; 
	text-decoration: none;

	color: #004ca3;
}
.link:before {
	font-family: 'condenseicon';
	line-height: 1;

	position: absolute;
	top: 20%;
	left: 0;

	content: 'ú';
	transition: all .3s linear .1s; 
	text-align: center;
}
.link:hover {
	color: #00152d; 
	border-radius: 4px;
	background: #e5e5e5;
}
.link:hover:before {
	left: .2em;
}

.link--blockHead {
	position: absolute;
	top: 37%;
	right: 40px;
}

.link--next {
	position: relative;

	padding: .2em 1.4em .2em .2em;

	transition: all .3s ease; 
	text-decoration: none;

	color: #004ca3;
}
.link--next:after {
	font-family: 'condenseicon';
	line-height: 1;

	position: absolute;
	top: 20%;
	right: .4em;

	content: 'ú';
	transition: all .3s linear .1s; 
	text-align: center;
}
.link--next:hover {
	color: #00152d; 
	border-radius: 4px;
	background: #e5e5e5;
}
.link--next:hover:after {
	right: .2em;
}

.link--home, .link--prev {
	position: relative;

	padding: .2em .2em .2em 1.4em;

	transition: all .3s ease; 
	text-decoration: none;

	color: #004ca3;
}
.link--home:before, .link--prev:before {
	font-family: 'condenseicon';
	line-height: 1;

	position: absolute;
	top: 20%;
	left: .2em;

	transition: all .3s linear .1s; 
	text-align: center;
}
.link--home:hover, .link--prev:hover {
	color: #00152d; 
	border-radius: 4px;
	background: #e5e5e5;
}
.link--home:hover:before, .link--prev:hover:before {
	left: 0;
}

.link--home:before {
	content: 'é';
}

.link--prev:before {
	content: 'ù';
}

.link--external {
	position: relative;

	padding-right: 1.6em;
}
.link--external:after {
	font-family: 'condenseicon';
	line-height: 1;

	padding-left: .4em;

	content: 'ì';
}

/*
# エントリー <!-- entry -->
`.entrytag`：トピックス＆ニュース詳細ページなど、エントリーで制作する部分に共通設定を準備する
```
<div class="entryBody entrytag">
	<div class="entry__block">
		<p>pタグで本文を表示。</p>
		<p>pタグで本文を表示。</p>
		<p>pタグで本文を表示。</p>
		<ul>
			<li>リストタグ</li>
			<li>リストタグ</li>
		</ul>
	</div>
</div>
```
*/
.entryBody {
	font-size: 14px;
	font-size: 1.4rem; 

	margin-bottom: 4em;
}
.entryBody:last-child {
	margin-bottom: 0;
}
.entryBody p, .entryBody ul, .entryBody ol {
	line-height: 1.571428; 

	margin-bottom: 1.2em;
}
.entryBody p:last-child, .entryBody ul:last-child, .entryBody ol:last-child {
	margin-bottom: 0;
}
.entryBody li {
	margin-bottom: .6em;
}
.entryBody li ul {
	margin-top: .6em;
}
.entryBody li li:last-child {
	margin-bottom: 0;
}

/*
# ユニット <!-- unit -->
・`.unit`：主にウェブページ用の共通設定  
・`.unit__title`  
・`unit__body`  
・`.unit__body > .unit__subTitle`
```
<div class="entryBody unit">
	<h1 class="unit__title">ユニットタイトル</h1>
	<div class="unit__body">
		<h2 class="unit__subTitle">ユニットサブタイトル</h2>
		<p>pタグで本文を表示。</p>
		<p>pタグで本文を表示。</p>
		<p>pタグで本文を表示。</p>
	</div>
</div>
<div class="entryBody unit">
	<h1 class="unit__title">ユニットタイトル</h1>
	<div class="unit__body">
		<h2 class="unit__subTitle">ユニットサブタイトル</h2>
		<p>pタグで本文を表示。</p>
		<p>pタグで本文を表示。</p>
		<p>pタグで本文を表示。</p>
	</div>
</div>
```
*/
.unit + .unit {
	margin-top: 60px;
}
.unit .unit__head {
	position: relative;
}
.unit .unit__head .link--unitHead {
	font-size: 13px;
	font-size: 1.3rem; 

	position: absolute;
	top: 12%;
	right: 0;
}
.unit .unit__title {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: normal; 

	margin-bottom: 40px;
	padding-bottom: .4em;

	border-bottom: 2px solid #004ca3;
}
.unit .unit__title a {
	text-decoration: none; 

	color: #313131;
}
.unit .unit__subTitle {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: normal; 

	margin-bottom: 20px;
}
.unit .unit__subTitle a {
	text-decoration: none; 

	color: #313131;
}
.unit .unit__body + .unit__body {
	margin-top: 40px;
}

.contactList.grid--fill {
	margin-right: -20px;
	margin-left: -20px;
}
.contactList .grid__item {
	padding-right: 20px;
	padding-left: 20px;
}

/*
#フォーム<!-- form -->
・A-formのデフォルトcssを上書き
*/
.entryBody .aform-header {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: normal; 

	border-color: #22ad38;
}
.entryBody .aform-content {
	box-sizing: border-box;
	padding: 20px;

	border: 1px solid #eeeeee;
}
.entryBody .aform-content dl {
	margin: 16px 0;
	padding: 16px 0;

	border-bottom: 1px solid #eeeeee;
}
.entryBody .aform-content dl:first-child {
	margin-top: 0;
	padding-top: 0;
}
.entryBody .aform-content dl:last-child {
	border-bottom: none;
}
.entryBody .aform-content dt {
	font-weight: normal; 

	width: 32%;
}
.entryBody .aform-content dd {
	padding-left: 35%;
}
.entryBody .aform-content dl dt .required {
	position: relative;

	margin-left: 16px;
}
.entryBody .aform-content .aform-label img {
	display: none;
}
.entryBody .aform-content .aform-name-ul li, .entryBody .aform-content .aform-kana-ul li {
	display: inline-block;
}
.entryBody .aform-content .aform-name-ul li input, .entryBody .aform-content .aform-kana-ul li input {
	width: 10em;
	margin-left: .4em;
}
.entryBody .aform-content .aform-name-ul li + li, .entryBody .aform-content .aform-kana-ul li + li {
	padding-left: 1em;
}
.entryBody .aform-content .aform-input {
	margin: .4em 0;
}
.entryBody .aform-content .submit {
	background: transparent;
}

/*
# グリッド［mod］ <!-- grid -->
12等分に切り分けたgrid__itemを設定。
```
<div class="grid">
	<div class="grid__item grid__item--6">2等分</div>
	<div class="grid__item grid__item--6">2等分</div>
</div>
```
## 　ガター有 <!-- grid--fill -->
`.grid--fill`で拡張。ガターの幅と全体幅に応じて、`.grid--fill`の左右にネガティブマージンを、`.grid--item`を拡張して左右のpaddingを設定する。
```
<div class="wrapper companyList">
	<div class="grid grid--fill">
		<a href="profile/index.html" class="grid__item grid__item--6 companyList__unit">
			<dl class="grid__item__panel">
				<dt class="companyList__unit__head">会社概要</dt>
				<dd class="companyList__unit__body">
					<p>白元アース株式会社の会社概要です。</p>
					<div class="btn btn--ico btn--link">会社概要を見る</div>
				</dd>
			</dl>
		</a>
		<a href="philosophy/index.html" class="grid__item grid__item--6 companyList__unit">
			<dl class="grid__item__panel">
				<dt class="companyList__unit__head">企業理念</dt>
				<dd class="companyList__unit__body">
					<p>白元アース株式会社の企業理念です。</p>
					<div class="btn btn--ico btn--link">企業理念を見る</div>
				</dd>
			</dl>
		</a>
	</div>
</div>
```
*/
.grid__item {
	float: left;

	box-sizing: border-box;
	width: 16.667%;
}

.grid__item__panel, .grid__item__panel--list {
	transition: all .3s ease; 

	border: 1px solid #eeeeee;
	background: #ffffff;
}

.grid__item__panel:hover {
	border-color: #004ca3;
}

.grid__item--1 {
	width: 8.333%;
}

.grid__item--2 {
	width: 16.667%;
}

.grid__item--3 {
	width: 25%;
}

.grid__item--4 {
	width: 33.333%;
}

.grid__item--5 {
	width: 41.666%;
}

.grid__item--6 {
	width: 50%;
}

.grid__item--7 {
	width: 58.333%;
}

.grid__item--8 {
	width: 66.666%;
}

.grid__item--9 {
	width: 75%;
}

.grid__item--10 {
	width: 83.33%;
}

.grid__item--11 {
	width: 91.666%;
}

.grid__item--12 {
	width: 100%;
}

.grid__item--011 {
	width: 9.090909090909091%;
}

/*
# 商品画像［mod］ <!-- imgUnit -->
・`.imgUnit`：画像をボーダーで囲む  
・+`.imgUnitL`：左寄せ  
・+`.imgUnitR`：右寄せ  
※主に商品画像の掲載用
```
<div class="imgUnit imgUnitL">
	<img src="http://placehold.it/350x150">
</div>
```
# 本文画像［mod］ <!-- imgSet -->
・`.imgSet`：本文中の画像に余白を取ってボーダーで囲む  
・+`.imgUnitL`：左寄せ  
・+`.imgUnitR`：右寄せ  
・+`.imgSet__caption`：画像キャプション  
※画像幅を取得して、imgSetへのその幅の付与は、function.jsで設定
```
<figure class="imgSet imgUnitL">
	<img src="http://placehold.it/350x150">
	<figcaption class="imgSet__caption">キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。</figcaption>
</figure>
```
*/
.imgUnit {
	box-sizing: border-box;
	width: 100%;

	border: 1px solid #eeeeee;
}
.imgUnit.imgUnitL {
	float: left;
}
.imgUnit.imgUnitR {
	float: right;
}
.imgUnit > img {
	display: block;

	margin-right: auto;
	margin-left: auto;
}

.with--start-button {
	position: relative;

	display: block;

	transition: all .3s ease;
}
.with--start-button:hover {
	opacity: .7;
}
.with--start-button:after {
	position: absolute;
	top: 44px;
	left: 280px; 

	overflow: hidden;

	content: url(../img/ico_start.png);
}
.with--start-button:after:hover:after {
	opacity: .7;
}

.imgSet {
	padding: 16px;

	border: 1px solid #eeeeee;
}
.imgSet.imgUnitL {
	float: left;
}
.imgSet.imgUnitR {
	float: right;
}
.imgSet > img {
	display: block;

	max-width: 608px;
	margin-right: auto;
	margin-left: auto;
}
.imgSet > .imgSet__caption {
	font-size: 11px;
	font-size: 1.1rem; 

	margin-top: 1em;
}

/*
# dl, ul <!-- list -->
リストタグ各種設定

## 　商品の使い方<!-- dataList001 -->
```
<dl class="list dataList001">
<dt>標準使用量</dt>
<dd>●洋服ダンス（５００L）に２個</dd>
</dl>
```

## 　商品のサイズ<!-- dataList002 -->
```
<table class="dataTable">
	<tbody>
		<tr>
			<th>サイズ（mm）</th>
			<td>
				<dl class="list dataList002">
					<dt class="dataList__title"><span class="dataList__title--name">パッケージ</span><span class="dataList__titl--unit">（縦×高さ×奥行）</span></dt>
					<dd class="dataList__body">120×190×60</dd>
				</dl>
				<dl class="list dataList002">
					<dt class="dataList__title"><span class="dataList__title--name">本体</span><span class="dataList__titl--unit">（縦×高さ×奥行）</span></dt>
					<dd class="dataList__body">-</dd>
				</dl>
			</td>
		</tr>
	</tbody>
</table>
```
## 　役員リスト<!-- dataList003 -->
```
<table class="dataTable">
	<tbody>
		<tr>
			<th>役員</th>
			<td>
				<dl class="list dataList003">
					<dt class="dataList__title">代表取締役社長</dt>
					<dd class="dataList__body">吉村一人</dd>
				</dl>
				<dl class="list dataList003">
					<dt class="dataList__title">取締役</dt>
					<dd class="dataList__body">赤松良浩</dd>
				</dl>
				<dl class="list dataList003">
					<dt class="dataList__title">取締役</dt>
					<dd class="dataList__body">三塚 剛</dd>
				</dl>
				<dl class="list dataList003">
					<dt class="dataList__title">取締役</dt>
					<dd class="dataList__body">三枚銅 正悟</dd>
				</dl>
				<dl class="list dataList003">
					<dt class="dataList__title">取締役</dt>
					<dd class="dataList__body">降矢良幸</dd>
				</dl>
				<dl class="list dataList003">
					<dt class="dataList__title">常勤監査役</dt>
					<dd class="dataList__body">行田敏久</dd>
				</dl>
				<dl class="list dataList003">
					<dt class="dataList__title">監査役</dt>
					<dd class="dataList__body">田中精一</dd>
				</dl>
			</td>
		</tr>
	</tbody>
</table>
```
## 　リンクリスト<!--link-list -->
・主にサイトマップ用  
・`.link-list__item`：リストのアイテムをinline-blockで並べる  
・リンクテキスト`.link`と併用することで、UIを共通化
```
<ul class="link-list">
	<li itemprop="name" class="link-list__item"><a class="link" href="../index.html" itemprop="url">トップページ</a></li>
	<li itemprop="name" class="link-list__item"><a class="link" href="../topics/index.html" itemprop="url">トピックス＆ニュース一覧</a></li>
	<li itemprop="name" class="link-list__item"><a class="link" href="../campaign/index.html" itemprop="url">キャンペーン一覧</a></li>
	<li itemprop="name" class="link-list__item"><a class="link" href="../cmgallery/index.html" itemprop="url">CMギャラリー一覧</a></li>
	<li itemprop="name" class="link-list__item"><a class="link" href="index.html" itemprop="url">サイトマップ</a></li>
	<li itemprop="name" class="link-list__item"><a class="link" href="../privacy/index.html" itemprop="url">個人情報保護方針</a></li>
	<li itemprop="name" class="link-list__item"><a class="link" href="../contact/index.html" itemprop="url">お問い合わせ</a></li>
</ul>
```
## 　リンクリスト拡張<!-- list--ico -->
・主に商品情報トップページ用  
・`list--ico`：hover時の背景色なし、リストアイテムを縦積み
```
<ul class="list">
	<li class="list--ico list--link list__item"><a href="deodrize/roid/index.html">ニオイがつかないミセスロイド</a></li>
	<li class="list--ico list--link list__item"><a href="deodrize/floralroid/index.html">フローラルミセスロイド</a></li>
	<li class="list--ico list--link list__item"><a href="deodrize/roidcrystal/index.html">ミセスロイドクリスタル</a></li>
</ul>
```
## 　リストマーカー各種<!-- list--** -->
・`list--num__item`：カウントアップ　※ol > li で用いる  
・`list--disc__item`：ディスクリスト  
・`list--latinlower__item`：アルファベットリスト　　※ol > li で用いる
```
<ol class="list">
<li class="list--num__item">カウントアップリスト</li>
<li class="list--num__item">カウントアップリスト</li>
<li class="list--disc__item">ディスクリスト</li>
<li class="list--disc__item">ディスクリスト</li>
<li class="list--latinlower__item">アルファベットリスト</li>
<li class="list--latinlower__item">アルファベットリスト</li>
</ol>
```
*/
.dataList001 + .dataList001 {
	margin-top: 1em;
}
.dataList001 > dt {
	font-weight: bold;
}

.dataList002 {
	display: table;

	width: 100%;
}
.dataList002 > dt, .dataList002 dd {
	display: table-cell;
}
.dataList002 > dt {
	width: 60%;
}

.dataList__title--name {
	display: inline-block;

	width: 5.4em;
}

.dataList__title--unit {
	display: inline-block;
}

.dataList003 {
	display: table;

	width: 100%;
}
.dataList003 > dt, .dataList003 dd {
	display: table-cell;
}
.dataList003 > dt {
	width: 30%;
}

.link-list li:nth-child(n+2) > .unit__subTitle {
	margin-top: 20px;
}

.link-list__item {
	display: inline-block;

	margin: 0 20px 20px;
}

.list--ico {
	position: relative; 

	box-sizing: border-box;
}
.list--ico.list__item {
	margin-top: .4em;
}
.list--ico.list__item:first-child {
	margin-top: 0;
}
.list--ico.list__item a {
	display: inline-block;

	padding-left: 18px;

	transition: all .3s ease; 
	text-decoration: none;
}
.list--ico.list__item a:before {
	font-family: 'condenseicon';

	position: absolute;
	top: -4%;
	left: 0;

	content: 'ú';
	transition: all .3s linear .1s;
}
.list--ico.list__item a:hover:before {
	left: .3em;
}

.list--topics .list__item {
	border-bottom: 1px solid #eeeeee;
}
.list--topics .list__item:last-child {
	border-bottom: none;
}
.list--topics .list__item a {
	position: relative;
	z-index: 2;

	display: block;
	overflow: hidden; 

	box-sizing: border-box;
	width: 100%;
	padding: 8px 4px;

	text-decoration: none;

	color: #313131;
}
.list--topics .list__item a:after {
	position: absolute;
	z-index: -1;
	top: 0;
	left: -100%;

	display: block;

	width: 100%;
	height: 100%;

	content: '';
	transition: left ease .3s;
}
.list--topics .list__item a:hover:after {
	top: 0;
	left: 0;

	background: #eeeeee;
}

.list--num__item {
	position: relative;
  	display: table;
	width: 100%;
	padding-left: 2em;
	counter-increment: count;
	box-sizing: border-box;
}
.list--num__item:before {
	position: absolute;
	top: 0;
	left: 0;
	display: marker;
	content: '(' counter(count) ') ';
}
.list--num__label {
  display: table-cell;
	width: 18%;
	white-space: nowrap;
}
.list--num__body {
	display: table-cell;
	width: 82%;
}
.list--num__body .list--num__item {
    counter-increment: none;
	padding-left: 0;
}
.list--num__body .list--num__item::before {
    content: none;
}


.list--disc__item {
	position: relative;

	padding-left: 2em;
}
.list--disc__item:before {
	position: absolute;
	left: 0;

	display: marker;

	content: '・ ';
}

.list--latinlower__item {
	list-style: lower-alpha inside;
}

.list--note__item {
	font-size: 11px;
	font-size: 1.1rem;
}

/*
# タブ［mod］ <!-- tab -->
・`.tabPanel > .tab__controll + .tab__body`：基本形  
・`.tab__controll__item`：タブのコントローラー
・`.tab__body > .tab__body__unit`：開閉するコンテンツ
※タブのコントローラーにaタグでリンクを混ぜることもできる  
・設定したタブコントローラーとタブ本文の数をそろえる。  
・タブの切り替えは、share/scripts/function.js で定義。
```
<div class="tabPanel">
	<ul class="tab__controll grid">
		<li><span class="tab__controll__item is--active grid__item grid__item--4">商品の特徴</span></li>
		<li><span class="tab__controll__item grid__item grid__item--4">商品の使い方</span></li>
		<li><a class="tab__controll__item grid__item grid__item--4" href="../../faq.html#floralroid">よくある質問</a></li><!-- アンカーリンクの指定は直上（サブカテゴリ）のディレクトリ名 -->
	</ul>
	<section class="tab__body">
		<div class="tab__body__unit">
			タブその1
		</div>
		<div class="tab__body__unit">
			タブその2
		</div>
	</section>
</div>
```
*/
.tabPanel .tab__controll {
	margin-bottom: 30px;
}

.tab__controll__item {
	font-size: 16px;
	font-size: 1.6rem;

	padding: .6875em 0;

	cursor: pointer;
	transition: all .3s ease; 
	text-align: center;
	text-decoration: none;

	color: #004ca3;
	border: 1px solid #004ca3;
	background: #ffffff;
}
.tab__controll__item:hover, .tab__controll__item.is--active {
	text-decoration: none; 

	color: #ffffff;
	background: #004ca3;
}

.tab__body {
	font-size: 14px;
	font-size: 1.4rem;
}
.tab__body p {
	margin-bottom: 1em;
}
.tab__body p:last-child {
	margin-bottom: 0;
}

/*
# 表組み<!-- table -->
・`.dataTable`：table幅は100%
・th、td の幅と余白を設定  
・thの背景色を設定
```
<table class="dataTable">
	<tr>
		<th>希望小売価格</th>
		<td>750円（税別）</td>
	</tr>
	<tr>
		<th>内容量</th>
		<td>4個</td>
	</tr>
</table>
```
*/
.dataTable {
	width: 100%;
}
.dataTable th, .dataTable td {
	padding: .4em 2em;

	border-bottom: 10px solid #ffffff;
}
.dataTable tr:last-child th, .dataTable tr:last-child td {
	border-bottom: none;
}
.dataTable th {
	font-weight: normal; 

	width: 25%;

	background-color: #f7f7f5;
}

.dataTable002 th, .dataTable002 td {
	padding: .4em 2em;

	border-bottom: 10px solid #ffffff;
}
.dataTable002 tr:last-child th, .dataTable002 tr:last-child td {
	border-bottom: none;
}
.dataTable002 th {
	font-weight: normal;

	width: 36%;

	text-align: left; 

	background-color: #f7f7f5;
}

.dataTable002 p + .innerTable {
  margin-top: -1em;
}
.dataTable002 .innerTable {
  border-top: 1px solid #888;
  border-left: 1px solid #888;
  width: 100%;
  margin-bottom: 1.2em;
}
.dataTable002 .innerTable th {
  background-color: transparent;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  width: 30%;
  padding: 0.4em 1em;
}
.dataTable002 .innerTable td {
  border-bottom: none;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  padding: 0.2em 1em;
}
.dataTable002 .innerTable td.cellBinding {
  border-bottom: 1px dotted #888;
}
.dataTable002 .innerTable tr:last-child th,
.dataTable002 .innerTable tr:last-child td {
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
}
.dataTable002 .innerTable strong {
  font-size: 16px;
  font-size: 1.6rem;
}
.dataTable002 .innerTable small {
  font-size: 12px;
  font-size: 1.2rem;
  display: inline;
}

.dataTable002 .innerImage {
  margin-bottom: 1.2em;
}
/*
# パンくずリスト <!-- breadcrumb -->
・`.breadcrumb`：.pageHead直下に配置  
・幅は.wrapperで定義
・`.path`
・`.breadcrumb__item`：text-decorationを制御
・`.current`
```
<div class="breadcrumb">
	<div class="wrapper">
		<span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
			<a itemprop="url" class="breadcrumb__home" href="../../../index.html"><span itemprop="title">Top</span></a>
		</span>
		<span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
			<span class="path">&gt;</span>
			<a itemprop="url" itemscope="" class="breadcrumb__item" href="../../index.html">商品情報</a>
		</span>
		<span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
			<span class="path">&gt;</span>
			<strong class="breadcrumb__item current" itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""><span itemprop="title" itemscope="">衣類用防虫剤、消臭、芳香剤</span></strong>
		</span>
	</div>
</div>
```
*/
.breadcrumb {
	padding-top: .2em;
	padding-bottom: .2em;

	background: #004ca3;
}
.breadcrumb a, .breadcrumb span, .breadcrumb strong {
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: normal;
	line-height: 1;

	text-decoration: none;
	text-transform: uppercase; 

	color: #ffffff;
}
.breadcrumb a:hover {
	text-decoration: underline;
}
.breadcrumb .path {
	padding-right: .2em;
	padding-left: .2em;

	vertical-align: calc(10%);
}

.companyList .grid--fill {
	margin-right: -20px;
	margin-left: -20px;
}
.companyList .grid__item {
	padding-right: 20px;
	padding-left: 20px;

	text-decoration: none; 

	color: #313131;
}
.companyList .companyList__unit:nth-child(n+3) {
	margin-top: 40px;
}
.companyList .companyList__unit__head {
	font-size: 20px;
	font-size: 2rem;

	padding: 10px 20px;

	text-align: center; 

	border-bottom: 2px solid #004ca3;
}
.companyList .companyList__unit__body {
	font-size: 14px;
	font-size: 1.4rem; 

	padding: 30px;
}
.companyList .companyList__unit__body .btn--ico {
	float: right;

	margin-top: 3em;
}

.company .dataTable th {
	width: 38%;

	text-align: left;
}

.faq__unit {
	margin-bottom: 16px;
}
.faq__unit:last-child {
	margin-bottom: 0;
}
.faq__unit.is--active {
	margin-bottom: 40px;
}
.faq__unit .faq__unit__head {
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: normal;
	line-height: 1; 

	padding: 24px 0 24px 20px;

	background: #e4eef9;
}
.faq__unit .faq__unit__head:after {
	font-size: 30px;
	font-size: 3rem; 

	top: 30%;
	right: .4em;
}
.faq__unit .faq__unit__head + .faq__unit__body {
	padding: 16px 16px 16px 24px;
}
.faq__unit .faq__unit__category {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: normal;
	line-height: 1; 

	display: inline-block;

	padding: 12px 40px 12px 10px;

	color: #ffffff;
	background: #004ca3;
}
.faq__unit .faq__unit__category:after {
	font-size: 16px;
	font-size: 1.6rem;

	top: 30%;
	right: .9em;

	color: #ffffff;
}
.faq__unit .faq__unit__category + .faq__unit__body {
	padding-bottom: 16px;
}
.faq__unit .faq__unit__body {
	font-size: 16px;
	font-size: 1.6rem; 

	padding-left: 1.6em;
}
.faq__unit .faq__unit__body .entryBody {
	margin-bottom: 0;
}
.faq__unit .faq__unit__body .entryBody + .entryBody, .faq__unit .faq__unit__body .entryBody + .faq__unit {
	margin-top: 32px;
}

.faq__unit__question {
	font-weight: bold; 

	position: relative;

	margin-top: 20px;
	margin-bottom: 20px;
}
.faq__unit__question:before {
	font-weight: bold;

	position: absolute;
	left: -1.6em;

	content: 'Q.';
}

.faq__unit__answer {
	position: relative;
}
.faq__unit__answer:before {
	position: absolute;
	left: -1.6em;

	content: 'A.';
}

.faq__unit--extra {
	display: table;

	margin-top: 10px;
}
.faq__unit--extra > dt, .faq__unit--extra dd {
	font-size: 14px;
	font-size: 1.4rem; 

	display: table-cell;

	padding-top: .2em;
	padding-bottom: .2em;
}
.faq__unit--extra > dt {
	padding-right: .4em;
	padding-left: .4em;

	background: #eeeeee;
}
.faq__unit--extra dd {
	padding-left: 12px;
}

.faq__foot {
	text-align: center;
}
.faq__foot .faq__foot__head {
	font-size: 20px;
	font-size: 2rem; 

	margin-bottom: 40px;
}
.faq__foot .notice {
	margin-top: 40px;
}

.mainPanel {
	box-sizing: border-box;

	border-bottom: 4px solid #c4d1e1;
	background-image: url(../img/bg_mainPanel.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.mainPanel.preview {
	background-image: url(../img/bg_mainPanel_preview.jpg);
}

.mainPanel__head {
	background: rgba(255, 255, 255, .4);
}
.mainPanel__head .blockTitle {
	font-size: 20px;
	font-size: 2rem;

	padding: 30px 0;

	text-align: center;

	color: #004ca3;
}

.mainPanel__body {
	box-sizing: border-box;
	padding-top: 40px;
}
.mainPanel__body .mainPanel__unit .wrapper {
	width: 840px;
	margin: 0 auto;
}

.mainPanel__item {
	position: relative;

	display: block;
	float: left;

	width: 400px;
	margin-right: 40px;

	text-decoration: none;
}
.mainPanel__item:last-child {
	margin-right: 0;
}
.mainPanel__item:hover img {
	opacity: .7;

	-ms-filter: 'alpha(opacity=70)'; 
	    filter: alpha(opacity=70);
}
.mainPanel__item .mainPanel__item__head {
	font-size: 22px;
	font-size: 2.2rem;

	text-align: center; 

	background: rgba(255, 255, 255, .8);
}
.mainPanel__item .mainPanel__item__body {
	box-sizing: border-box;
	height: 280px;
	padding: 24px 0 16px;

	text-align: center; 

	background: rgba(255, 255, 255, .6);
}
.mainPanel__item .mainPanel__item__body .mainPanel__item__content {
	margin-bottom: 20px;
}
.mainPanel__item .mainPanel__item__body .mainPanel__item__content img {
	display: inline-block;
}

.mainPanel__item--special {
	width: 100%;
}

.products__head, .recruit__unit .recruit__unit__head {
	box-sizing: border-box;
	padding: 14px 0;

	color: #434343; 
	border-bottom: 2px solid;
}

.products__body .products__body__outline .products__body__txt {
	float: right; 

	width: 490px;
}
.products__body .products__body__outline .products__body__txt .dataTable th, .products__body .products__body__outline .products__body__txt .dataTable td {
	font-size: 12px;
	font-size: 1.2rem;
}
.products__body .products__body__outline .products__body__img {
	width: 350px;
}
.products__body .products__body__outline .products__body__img img {
	max-width: 348px;
	height: auto;
}
.products__body .products__body__outline + .products__body__detail {
	margin-top: 60px;
}

.productsList .grid--fill {
	margin-right: -20px;
	margin-left: -20px;
}
.productsList .grid__item {
	margin-top: 40px;
	padding-right: 20px;
	padding-left: 20px;

	text-decoration: none;

	color: #313131;
}

.productsList__unit__head {
	font-size: 20px;
	font-size: 2rem;
	font-weight: normal;

	padding: 10px 20px;

	text-align: center;
}
.productsList__unit__head.is--archive {
	box-sizing: border-box;
	padding-right: 0;
	padding-left: 0;

	color: #434343; 
	border-bottom: 2px solid;
}
.productsList__unit__head.is--archive a {
	display: block;

	text-decoration: none; 

	color: #434343;
}

.productsList__unit__body {
	padding: 20px;
}
.productsList__unit__body .productsList__unit__body--name {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: normal;

	display: block;

	margin-bottom: .8em;

	text-align: center;
}
.productsList__unit__body .productsList__unit__body--txt {
	float: right;

	box-sizing: border-box;
	width: 240px;
}
.productsList__unit__body .productsList__unit__body--txt .txt {
	font-size: 14px;
	font-size: 1.4rem; 

	margin-bottom: 1.57em;
}
.productsList__unit__body .productsList__unit__body--txt .btn--ico {
	display: block;

	width: 9.6em;
	margin-right: auto;
	margin-left: auto;
}
.productsList__unit__body .productsList__unit__body--img {
	float: left;

	box-sizing: border-box;
	width: 160px;
}
.productsList__unit__body .productsList__unit__body--img img {
	max-width: 158px;
	height: auto;
}

.is--products.xIndex .productsList {
	margin-top: -60px;
}
.is--products.xIndex .productsList .productsList__unit__body {
	padding-top: 30px;
	padding-bottom: 30px;
}
.is--products.xIndex .productsList .productsList__unit__body--img > img {
	height: auto;
}

.productsList--category .grid--fill {
	margin-right: -15px;
	margin-left: -15px;
}
.productsList--category .grid__item {
	width: 330px;
	height: 300px;
	padding-right: 15px;
	padding-left: 15px;
}
.productsList--category .productsList__unit {
	position: relative;
}
.productsList--category .productsList__unit:hover img {
	transition: all .3s ease; 
	transform: scale(1.1, 1.1);
}
.productsList--category .productsList__unit:hover .productsList--category__unit {
	transform: translateY(0); 

	opacity: 1;
}
.productsList--category .productsList__unit:hover .productsList--category__unit li {
	transition: all .3s linear .2s; 

	opacity: 1;
}
.productsList--category .productsList__unit:hover .productsList--category__unit li:nth-child(2) {
	transition-delay: .3s;
}
.productsList--category .productsList__unit:hover .productsList--category__unit li:nth-child(3) {
	transition-delay: .4s;
}
.productsList--category .productsList__unit:hover .productsList--category__unit li:nth-child(4) {
	transition-delay: .5s;
}
.productsList--category .productsList__unit:hover .productsList--category__unit li:nth-child(5) {
	transition-delay: .6s;
}
.productsList--category .productsList__unit:hover .productsList--category__unit li:nth-child(6) {
	transition-delay: .7s;
}
.productsList--category .productsList__unit__body {
	box-sizing: border-box;
	height: 248px;
}
.productsList--category .productsList__unit__body img {
	display: block;

	margin-right: auto;
	margin-left: auto;
}
.productsList--category .productsList--category__unit {
	position: absolute;
	bottom: 0;
	left: 16px;

	box-sizing: border-box;
	width: 298px;
	height: 247px;
	padding: 20px 24px;

	transition: all .3s ease;
	transform: translateY(-60px);

	opacity: 0;
}
.productsList--category .productsList--category__unit li {
	opacity: 0;
}
.productsList--category .productsList--category__unit .list__item, .productsList--category .productsList--category__unit .list__item a {
	font-size: 14px;
	font-size: 1.4rem; 

	color: #ffffff;
}
.productsList--category .productsList--category__unit .list__item:hover, .productsList--category .productsList--category__unit .list__item a:hover {
	color: #313131;
}

.theme--spacecare .productsList--category__unit {
	background: rgba(230, 180, 34, .9);
}

/* 2018.08.28 update */
.theme--care .productsList--category__unit {
/*	background: rgba(233, 84, 107, .9);*/
	background: rgba(0, 203, 16, .85);
}

.theme--deodrize .productsList--category__unit {
	background: rgba(234, 85, 50, .9);
}

/* 2018.08.28 update */
.theme--dollcare .productsList--category__unit {
/*	background: rgba(0, 175, 236, .85);*/
	background: rgba(255, 0, 0, 0.85);
}

.theme--dehumidification .productsList--category__unit {
	background: rgba(170, 207, 82, .85);
}

.theme--insecticide .productsList--category__unit {
	background: rgba(0, 169, 95, .85);
}

/* 2018.08.28 update */
.theme--warmer .productsList--category__unit {
/*	background: rgba(0, 173, 169, .85);*/
	background: rgb(255, 128, 0, .85);
}

.theme--bathlab .productsList--category__unit {
	background: rgba(0, 175, 236, .85);
}

.theme--sanitation .productsList--category__unit {
	background: rgba(24, 127, 196, .85);
}

.theme--medical .productsList--category__unit {
	background: rgba(77, 67, 152, .85);
}

.theme--nonsmell .productsList--category__unit {
	background: rgba(166, 74, 151, .85);
}

.theme--personalcare .productsList--category__unit {
	background: rgba(232, 82, 152, .85);
}

.theme--freshhand .productsList--category__unit {
	background: rgba(234, 85, 50, .85);
}

.products__category {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: normal;
}

.products__series {
	display: inline-block;

	margin-bottom: .8em;
	padding: .2em .4em;
}
.products__series a {
	text-decoration: none; 

	color: #ffffff;
}

.products__name {
	font-size: 20px;
	font-size: 2rem;
	line-height: 1.6; 

	margin-bottom: 1.6em;
}

.products__body__unit + .products__body__unit {
	margin-top: 30px;
}
.products__body__unit .products__body__unitTitle {
	font-size: 20px;
	font-size: 2rem; 

	margin-bottom: .6em;
}

/*
# タイトル<!-- title -->
・`.page-title` クラスで文字サイズを設定
```
<h1 class="page-title">ページタイトル</h1>
```

・`.title--ico.title--**`
```
<div class="pageHead">
	<div class="wrapper">
		<h1 class="page-title title--ico title--products">商品情報</h1>
		<h1 class="page-title title--ico title--company">会社情報</h1>
		<h1 class="page-title title--ico title--cmgallery">CMギャラリー</h1>
		<h1 class="page-title title--ico title--recruit">採用情報</h1>
		<h1 class="page-title title--ico title--topics">トピックス&amp;ニュース</h1>
		<h1 class="page-title title--ico title--sitemap">サイトマップ</h1>
		<h1 class="page-title title--ico title--privacy">個人情報保護方針</h1>
		<h1 class="page-title title--ico title--search">サイト内検索結果</h1>
		<h1 class="page-title title--ico title--contact">お問い合わせ</h1>
	</div>
</div>
```
*/
.page-title {
	font-size: 30px;
	font-size: 3rem;
	font-weight: normal;
	line-height: 1; 

	margin: 5.3rem 0;

	color: #004ca3;
}
.page-title.title--ico {
	padding-left: 1.6em;
}

.block-title {
	font-size: 30px;
	font-size: 3rem;
	font-weight: normal; 

	color: #434343;
}

.main .block-title {
	margin-bottom: 40px;
}

.entryTitle {
	font-size: 30px;
	font-size: 3rem;
	font-weight: normal; 

	margin-bottom: .2em;
}
.entryTitle > span {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: normal; 

	padding-left: 1em;
}

.unit-title {
	font-size: 18px;
	font-size: 1.8rem; 

	margin-bottom: .8em;

	color: #004ca3;
}

.sub-title {
	font-size: 14px;
	font-size: 1.4rem; 

	margin-bottom: .6em;
}

.title--ico {
	position: relative;

	padding-left: 1.2em;
}
.title--ico:before {
	position: absolute;
	left: 0;
}

.title--products:before, .title--company:before, .title--cmgallery:before, .title--recruit:before, .title--topics:before, .title--campaign:before, .title--sitemap:before, .title--privacy:before, .title--search:before, .title--contact:before {
	font-family: 'condenseicon';
	font-size: 108%; 

	top: -2px;

	color: #004ca3;
}

.title--topics:before {
	content: 'I';
}

.title--campaign:before {
	content: '/';
}

.title--sitemap:before {
	content: 'ˇ';
}

.title--privacy:before {
	content: 'n';
}

.title--search:before {
	content: '[';
}

.title--contact:before {
	content: 'F';
}

.pickup--index {
	box-sizing: border-box;
	padding: 50px 0;

	border-bottom: 1px solid #eeeeee; 
	background: #ffffff;
}

.pickup__title {
	display: none;
}

.pickup__body .grid--fill {
	margin-right: -20px; 
	margin-left: -20px;
}
.pickup__body .grid__item {
	padding-right: 20px;
	padding-left: 20px;
}

/*
#トピックス&ニュース<!-- topics -->
※キャンペーンにも適用  
## トップページ<!-- topicsatsite-index -->
・`.wrapper--topics`クラスで、背景白のブロックを作る。  
・`.topicsHead`クラスで、上部ボーダー付きのタイトルボックスを作る。
```
<div class="wrapper wrapper--topics">
	<div class="topicsHead blockHead">
		<h2 class="block-title title--ico title--topics">トピック＆ニュース</h2>
		<div class="btn--blockHead">
			<a class="btn btn--ico btn--link" href="topics/index.html">一覧を見る</a>
		</div>
	</div>
</div>
```
・`.topicsBody`
*/
.topicsHead {
	padding-top: 40px;

	border-top: 3px solid #c4d1e1;
}

.wrapper--topics {
	position: relative;

	border: 1px solid #eeeeee; 
	background: #ffffff;
}
.wrapper--topics:after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	content: ''; 

	border-top: 3px solid #000000;
}

.topics__item__body {
	display: table;

	box-sizing: border-box;
	width: 100%;
}
.topics__item__body .list--topics__item__meta, .topics__item__body .list--topics__item__content {
	display: table-cell;

	vertical-align: top;
}
.topics__item__body .list--topics__item__meta {
	width: 8em;
}
.topics__item__body .list--topics__item__content .topics__title {
	font-size: 14px;
	font-size: 1.4rem;
}

.topics--new:after {
	font-size: 11px;
	font-size: 1.1rem;

	display: inline-block;

	margin-left: 1em;
	padding: .2em .4em;

	content: 'NEW!'; 
	vertical-align: middle;

	color: #ffffff;
	border-radius: 4px;
	background: #ff0000;
}

.topics--index {
	padding: 50px 0;
}

.topics--index .blockHead {
	padding-right: 40px;
	padding-bottom: 36px;
	padding-left: 40px;

	border-bottom: 1px solid #eeeeee;
}
.topics--index .topics__item__body {
	padding: 22px 36px;
}

.topics__category {
	line-height: 1; 

	display: inline-block;

	margin: 0 0 .3em;
	padding: 6px 10px;

	color: #ffffff;
}
.topics__category.topics__category--campaign {
	background: #de4767;
}
.topics__category.topics__category--topics {
	background: #5ba998;
}
.topics__category.topics__category--release {
	background: #0d519e;
}

.is--topics .main {
	border-top: 3px solid #c4d1e1;
}
.is--topics .topicsBody {
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;
}

.topics__head {
	margin-bottom: 40px;
	padding-bottom: 20px;

	border-bottom: 1px solid #eeeeee;
}
.topics__head .topics__item__head__meta {
	display: inline-block;

	margin-left: 20px;
}
.topics__head .entryTitle {
	font-size: 20px;
	font-size: 2rem; 

	margin-top: 10px;
}

.brandInfo {
	box-sizing: border-box;
	padding: 40px 0;

	background-color: #eeeeee;
}

.brandInfo__title {
	margin: 0 0 30px;

	text-align: center;
}

.brandInfo__body .grid-fill {
	margin-right: -20px; 
	margin-left: -20px;
}
.brandInfo__body .grid__item {
	padding-right: 10px;
	padding-left: 10px;
}

.contactInfo {
	box-sizing: border-box;
	padding: 40px 0 100px;

	background-color: #ffffff;
}
.contactInfo .grid--fill {
	margin-right: -20px;
	margin-left: -20px;
}
.contactInfo .grid__item {
	padding-right: 20px;
	padding-left: 20px;
}

.contactInfo__title--index {
	font-size: 26px;
	font-size: 2.6rem;
	font-weight: normal;

	margin: 0 0 30px; 

	color: #434343;
}

.poison-ic {
	box-sizing: border-box;
	padding: 20px;

	border: 1px solid #313131;
}

.poison-ic--index {
	float: right; 

	width: 460px;
}

.poison-ic__head {
	font-size: 18px;
	font-size: 1.8rem; 

	margin: 0 0 .8em;

	color: #004ca3;
}

.poison-ic__name {
	font-size: 13px;
	font-size: 1.3rem;
	font-weight: bold; 

	position: relative;

	padding-left: 1.2em;
}

.poison-ic__name:before {
	position: absolute;
	left: 0; 

	content: '■';

	color: #004ca3;
}

.poison-ic__item {
	display: table;
}

.poison-ic__place, .poison-ic__tell {
	display: table-cell;
}

.poison-ic__place {
	width: 4em;
}

.recruit__unit .recruit__unit__head {
	border-color: #004ca3;
}
.recruit__unit .recruit__unit__title {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: normal;
}
.recruit__unit .recruit__unit__body .notice {
	font-size: 16px;
	font-size: 1.6rem;

	margin-bottom: 120px;
}

.sitemapList .unit__body li:nth-child(n+2) {
	margin-top: 40px;
}

.ut-clearfix, .wrapper, #contents, .main__wrapper, .gHeader__wrapper, .gFooter__nav__wrapper, .entry__block, .entryBody, .unit .unit__body, .grid, .companyList .companyList__unit__body, .mainPanel__body .mainPanel__unit .wrapper, .products__body .products__body__outline, .productsList__unit__body {
	*zoom: 1;
}
.ut-clearfix:before, .wrapper:before, #contents:before, .main__wrapper:before, .gHeader__wrapper:before, .gFooter__nav__wrapper:before, .entry__block:before, .entryBody:before, .unit .unit__body:before, .grid:before, .companyList .companyList__unit__body:before, .mainPanel__body .mainPanel__unit .wrapper:before, .products__body .products__body__outline:before, .productsList__unit__body:before, .ut-clearfix:after, .wrapper:after, #contents:after, .main__wrapper:after, .gHeader__wrapper:after, .gFooter__nav__wrapper:after, .entry__block:after, .entryBody:after, .unit .unit__body:after, .grid:after, .companyList .companyList__unit__body:after, .mainPanel__body .mainPanel__unit .wrapper:after, .products__body .products__body__outline:after, .productsList__unit__body:after {
	display: table; 

	content: '';
}
.ut-clearfix:after, .wrapper:after, #contents:after, .main__wrapper:after, .gHeader__wrapper:after, .gFooter__nav__wrapper:after, .entry__block:after, .entryBody:after, .unit .unit__body:after, .grid:after, .companyList .companyList__unit__body:after, .mainPanel__body .mainPanel__unit .wrapper:after, .products__body .products__body__outline:after, .productsList__unit__body:after {
	clear: both;
}

.is--hidden {
	overflow: hidden;
}

.is--active {
	display: block;
}

.is--hide {
	display: none;
}

.is--note {
	font-size: 11px;
	font-size: 1.1rem;
}

.is--alert {
	color: #ff0000;
}

.is--enlarge {
	font-size: 28px;
	font-size: 2.8rem;
}

.ut-skipNav {
	position: absolute;
	left: -999px;
}

.is--uppercase {
	text-transform: uppercase;
}

#noscriptError {
	padding: .8em;

	background: #333333;
}
#noscriptError .error__body {
	font-weight: bold; 

	color: #ffcc00;
}
#noscriptError .error__element {
	text-align: center;
}

.error__body {
	font-weight: bold; 

	color: #ffcc00;
}

.error__element {
	text-align: center;
}

#browserError {
	position: fixed;
	z-index: 10000;

	width: 100%;
	height: 100%;
	padding: 64px 0;

	background: rgba(255, 255, 255, .8);
}
#browserError .wrapper {
	position: relative;
}
#browserError .error__element {
	font-size: 16px;
	font-size: 1.6rem;

	position: absolute;
	top: 0;
	right: 0;
	left: 0;

	box-sizing: border-box;
	width: 640px;
	height: 320px;
	margin: auto;
	padding: 64px;

	text-align: center; 

	border: 1px solid #eeeeee;
	background: #000000;
}
#browserError p + p {
	margin-top: 64px;
}

.error--404 .error--404__head {
	margin-bottom: 80px;
}
.error--404 .error--404__head .title {
	font-size: 90px;
	font-size: 9rem;
	line-height: 1; 

	color: #cccccc;
}
.error--404 .error--404__head .lead {
	margin-top: .2em;
}
.error--404 .error--404__body p {
	margin-bottom: 40px;
}
.error--products {
    padding: 100px 60px;
}
.error--products .title {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: normal;
    color: #004ca3;
}
.error--products a {
    margin-top: 100px;
}
.theme--spacecare .products__head, .theme--spacecare .recruit__unit .recruit__unit__head, .recruit__unit .theme--spacecare .recruit__unit__head, .theme--spacecare .productsList__unit__head, .theme--roid .products__head, .theme--roid .recruit__unit .recruit__unit__head, .recruit__unit .theme--roid .recruit__unit__head, .theme--roid .productsList__unit__head, .theme--paramoth .products__head, .theme--paramoth .recruit__unit .recruit__unit__head, .recruit__unit .theme--paramoth .recruit__unit__head, .theme--paramoth .productsList__unit__head, .theme--toiletball .products__head, .theme--toiletball .recruit__unit .recruit__unit__head, .recruit__unit .theme--toiletball .recruit__unit__head, .theme--toiletball .productsList__unit__head {
	border-color: #e6b422;
}
.theme--spacecare .products__series, .theme--roid .products__series, .theme--paramoth .products__series, .theme--toiletball .products__series {
	background-color: #e6b422;
}

.theme--roid .products__head, .theme--roid .recruit__unit .recruit__unit__head, .recruit__unit .theme--roid .recruit__unit__head, .theme--roid .productsList__unit__head, .theme--paramoth .products__head, .theme--paramoth .recruit__unit .recruit__unit__head, .recruit__unit .theme--paramoth .recruit__unit__head, .theme--paramoth .productsList__unit__head, .theme--toiletball .products__head, .theme--toiletball .recruit__unit .recruit__unit__head, .recruit__unit .theme--toiletball .recruit__unit__head, .theme--toiletball .productsList__unit__head {
	border-color: #e9546b;
}
.theme--care .products__series, .theme--roid .products__series, .theme--paramoth .products__series, .theme--toiletball .products__series {
	background-color: #e9546b;
}

/* 2018.08.28 update */
.theme--care .products__head, .theme--care .recruit__unit .recruit__unit__head, .recruit__unit .theme--care .recruit__unit__head, .theme--care .productsList__unit__head {
	border-color: #00cb10;
}

.theme--deodrize .products__head, .theme--deodrize .recruit__unit .recruit__unit__head, .recruit__unit .theme--deodrize .recruit__unit__head, .theme--deodrize .productsList__unit__head, .theme--roid .products__head, .theme--roid .recruit__unit .recruit__unit__head, .recruit__unit .theme--roid .recruit__unit__head, .theme--roid .productsList__unit__head, .theme--paramoth .products__head, .theme--paramoth .recruit__unit .recruit__unit__head, .recruit__unit .theme--paramoth .recruit__unit__head, .theme--paramoth .productsList__unit__head, .theme--toiletball .products__head, .theme--toiletball .recruit__unit .recruit__unit__head, .recruit__unit .theme--toiletball .recruit__unit__head, .theme--toiletball .productsList__unit__head {
	border-color: #ea5532;
}
.theme--deodrize .products__series, .theme--roid .products__series, .theme--paramoth .products__series, .theme--toiletball .products__series {
	background-color: #ea5532;
}

/* 2018.08.28 update */
.theme--dollcare .products__head, .theme--dollcare .recruit__unit .recruit__unit__head, .recruit__unit .theme--dollcare .recruit__unit__head, .theme--dollcare .productsList__unit__head {
	/*border-color: #00afec;*/
	border-color: #f00;
}
.theme--dollcare .products__series {
	background-color: #00afec;
}

.theme--dehumidification .products__head, .theme--dehumidification .recruit__unit .recruit__unit__head, .recruit__unit .theme--dehumidification .recruit__unit__head, .theme--dehumidification .productsList__unit__head {
	border-color: #aacf52;
}
.theme--dehumidification .products__series {
	background-color: #aacf52;
}

.theme--insecticide .products__head, .theme--insecticide .recruit__unit .recruit__unit__head, .recruit__unit .theme--insecticide .recruit__unit__head, .theme--insecticide .productsList__unit__head {
	border-color: #00a95f;
}
.theme--insecticide .products__series {
	background-color: #00a95f;
}

/* 2018.08.28 update */
.theme--warmer .products__head, .theme--warmer .recruit__unit .recruit__unit__head, .recruit__unit .theme--warmer .recruit__unit__head, .theme--warmer .productsList__unit__head {
/*	border-color: #00ada9;*/
	border-color: #ff8000;
}
.theme--warmer .products__series {
	background-color: #00ada9;
}

.theme--bathlab .products__head, .theme--bathlab .recruit__unit .recruit__unit__head, .recruit__unit .theme--bathlab .recruit__unit__head, .theme--bathlab .productsList__unit__head {
	border-color: #00afec;
}
.theme--bathlab .products__series {
	background-color: #00afec;
}

.theme--sanitation .products__head, .theme--sanitation .recruit__unit .recruit__unit__head, .recruit__unit .theme--sanitation .recruit__unit__head, .theme--sanitation .productsList__unit__head {
	border-color: #187fc4;
}
.theme--sanitation .products__series {
	background-color: #187fc4;
}

.theme--medical .products__head, .theme--medical .recruit__unit .recruit__unit__head, .recruit__unit .theme--medical .recruit__unit__head, .theme--medical .productsList__unit__head {
	border-color: #4d4398;
}
.theme--medical .products__series {
	background-color: #4d4398;
}

.theme--nonsmell .products__head, .theme--nonsmell .recruit__unit .recruit__unit__head, .recruit__unit .theme--nonsmell .recruit__unit__head, .theme--nonsmell .productsList__unit__head {
	border-color: #a64a97;
}
.theme--nonsmell .products__series {
	background-color: #a64a97;
}

.theme--personalcare .products__head, .theme--personalcare .recruit__unit .recruit__unit__head, .recruit__unit .theme--personalcare .recruit__unit__head, .theme--personalcare .productsList__unit__head {
	border-color: #e85298;
}
.theme--personalcare .products__series {
	background-color: #e85298;
}

.theme--freshhand .products__head, .theme--freshhand .recruit__unit .recruit__unit__head, .recruit__unit .theme--freshhand .recruit__unit__head, .theme--freshhand .productsList__unit__head {
	border-color: #ea5532;
}
.theme--freshhand .products__series {
	background-color: #ea5532;
}

.theme--seasonal .products__head, .theme--seasonal .recruit__unit .recruit__unit__head, .recruit__unit .theme--seasonal .recruit__unit__head, .theme--seasonal .productsList__unit__head {
	border-color: #ec5141;
}
.theme--seasonal .products__series {
	background-color: #ec5141;
}







.earthGroupBox {
 margin-bottom: 60px;
}
.earthGroupBox > .title {
 text-align: center;
}
.earthGroupBox .units {
 position: relative;
 display: flex;
 flex-wrap: nowrap;
 flex-direction: row;
 justify-content: space-between;
 align-content: center;
 margin-top: 36px;
}
.earthGroupBox .unit {
 position: relative;
 display: flex;
 flex-direction: column;
 justify-content: center;
 flex-wrap: nowrap;
/* width: 31%;*/
 width: 225px;
 height: 225px;
 padding: 16px;
 box-sizing: border-box;
 z-index: 1;
}
.earthGroupBox .unit:after {
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 margin: auto;
 width: 100%;
 height: 100%;
/* background: url(/share/img/img_circle.svg) 50% 50% no-repeat;*/
 background-color: #c00;
 border-radius: 1000px;
 background-size: contain;
 z-index: -1;
}
.earthGroupBox .unit:nth-child(2) {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 margin: auto;
}
.earthGroupBox .unit:nth-child(1):after {
 background-color: rgba(204,229,255,0.5);
}
.earthGroupBox .unit:nth-child(2):after {
 background-color: rgba(196,227,243,0.5);
}
.earthGroupBox .unit:nth-child(3):after {
 background-color: rgba(210,247,247,0.5);
}


.earthGroupBox .unit + .unit {
 margin-top: 0;
}
.earthGroupBox .unit .unit__head {
 color: #004ca3;
 font-size: 2.0rem;
 font-weight: bold;
 line-height: 1.3;
 text-align: center;
}
.earthGroupBox .unit .unit__body {
 margin-top: 16px;
 font-size: 1.2rem;
 text-align: center;
}
.earthGroupBox .unit .unit__body p {
 line-height: 1.3;
}
.earthGroupBox .unit .unit__body span {
 display: block;
}
.earthGroupBox .unit .unit__body .jp {
 font-size: 1.2rem;
}
.earthGroupBox .unit .unit__body .en {
 font-size: 1.1rem;
}


/* 2018.09.07 update::緊急告知＠トップページ */
.block-news-information {
	padding-top: 50px;
	font-size: 1.6rem;
	line-height: 2;
}
.block-news-information__inner {
	padding: 2em 4em;
	background: #fff;
	border: 3px solid #c4d1e1;
}