@charset "utf-8";

/* ****************************************************

layout.css
-----------------------------------
1: header
2: main
3: footer
-----------------------------------
ex: brand-box-layout
ex: clearfix

***************************************************** */

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

	com: border-box

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

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

	1: header

================================ */
#headerContainer {
	background: url(../images/com_bg01.gif) 0 100% repeat-x;
}
#headerContainer #globalHeader {
	width: 940px;
	margin: 0 auto;
	padding: 9px 0 20px 23px;
}
#headerContainer #globalHeader #logoFlashWrap {
	float: left;
	height: 50px;
}
#headerContainer #globalHeader #logoFlashWrap #logoFlash h1 {
	margin-top: 0;
}
#headerContainer #globalHeader .utilityLink {
	float: right;
	margin-top: 20px;
}
#headerContainer #globalHeader .utilityLink li {
	float: left;
	margin-right: 5px;
}

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

	2: main

================================ */
#mainContainer #mainContents {
	width: 920px;
	margin: 0 auto;
	/*padding-bottom: 80px;*/
}
#mainContainer #mainContents #globalNav li {
	float: left;
}
#mainContainer #mainContents #breadcrumbNav {
	padding: 9px 0;
}
#mainContainer #mainContents #breadcrumbNav ul li {
	padding-left: 20px;
	background: url(../images/com_ic03.png) 8px 0.4em no-repeat;
	float: left;
	font-size: 12px;
	font-size: 1.2rem;
}
#mainContainer #mainContents #breadcrumbNav ul li:first-child {
	padding-left: 0;
	background: none;
}
#mainContainer #mainContents section {
	margin-top: 20px;
}
#mainContainer #mainContents section > *:first-child {
	margin-top: 0;
}
#mainContainer #mainContents .inner {
	margin-top: 0;
	padding-top: 20px
}
#mainContainer #mainContents .inner > section {
	margin-top: 20px;
}
#mainContainer #mainContents .acSection {
	margin-top: 50px;
}
#mainContainer #mainContents .acSection .inner > *:first-child {
	margin-top: 0;
}
#mainContainer #mainContents .troubleIntro {
	margin-top: 25px;
	padding: 25px 15px 15px;
	border: 1px solid #e8d07e;
	border-radius: 6px;
	background: #fff5d1;
}
#mainContainer #mainContents .troubleIntro .headLine {
	text-align: center;
}
#mainContainer #mainContents .troubleIntro .headLine img {
	margin: 0 auto;
}
#mainContainer #mainContents .troubleIntro .figureColWrap .col {
	float: left;
	width: 434px;
	margin-top: 25px;
	text-align: center;
}
#mainContainer #mainContents .troubleIntro .figureColWrap .col figcaption {
	margin-top: 15px;
	font-size: 10px;
	font-size: 1.0rem;
	text-align: center;
}
#mainContainer #mainContents .troubleIntro .balloonArea {
	position: relative;
	margin: 55px 0 0;
	padding: 18px 15px 15px;
	border: 1px solid #e8d07e;
	border-radius: 6px;
	background: #ffeca5;
}
#mainContainer #mainContents .troubleIntro .balloonArea:before {
	position: absolute;
	top: -33px;
	left: 210px;
	width: 26px;
	height: 33px;
	content: "";
	background: url(../../images/index_bg04.png) 0 0 no-repeat;
}
#mainContainer #mainContents .troubleIntro .balloonArea .figureColWrap .col {
	width: 414px;
	margin-top: 0;
}
#mainContainer #mainContents .troubleIntro .balloonArea .figureColWrap .col:first-child {
	margin-right: 28px;
}
#mainContainer #mainContents .troubleIntro .caption {
	font-size: 11px;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
}
#mainContainer #mainContents .sticklePoint {
	margin-top: 20px;
}
#mainContainer #mainContents .sticklePoint .headLine {
	padding-top: 20px;
	background: url(../../images/index_bg01.gif) 0 0 repeat-x;
	font-size: 17px;
	font-size: 1.7rem;
	font-weight: bold;
}
#contents .sticklePoint .point01 .headLine {
	padding-top: 0;
	background: none;
}
#mainContainer #mainContents .sticklePoint .headLine + * {
	margin-top: 10px;
}
#mainContainer #mainContents .sticklePoint .point01,
#mainContainer #mainContents .sticklePoint .point02,
#contents .sticklePoint .point03,
#contents .sticklePoint .point04 {
	padding-bottom: 20px;
	padding-left: 140px;
}
#mainContainer #mainContents .sticklePoint .point01 {
	margin-top: 0;
	background: url(../../images/index_ic03.png) 20px 0 no-repeat;
}
#mainContainer #mainContents .sticklePoint .point02 {
	background: url(../../images/index_ic04.png) 20px 0 no-repeat;
}
#mainContainer #mainContents .sticklePoint .point03 {
	background: url(../../images/index_ic05.png) 20px 0 no-repeat;
}
#mainContainer #mainContents .sticklePoint .point03 .aC.mt15 img {
	margin: 0 auto;
}
#mainContainer #mainContents .sticklePoint .point04 {
	background: url(../../images/index_ic06.png) 20px 0 no-repeat;
}
#mainContainer #mainContents .sticklePoint .point04 .headLine {
	background: none;
}
#mainContainer #mainContents .sticklePoint .point04 .colWrap {
	background: url(../../images/index_bg01.gif) 0 0 repeat-x;
}
#mainContainer #mainContents .sticklePoint .point04 .colWrap .colText {
	float: left;
	width: 540px;
}
#mainContainer #mainContents .sticklePoint .point04 .colWrap .figure {
	float: left;
	margin-top: 15px;
}
#mainContainer #mainContents .sticklePoint .stickleBtn {
	margin-top: 10px;
}
#mainContainer #mainContents .symptomsList .col .headLine {
	text-align: center;
}
#mainContainer #mainContents .symptomsList .col {
	display: inline-block;
	width: 24.5%;
	margin-top: 50px;
	vertical-align: top;
}
#mainContainer #mainContents .symptomsList .col.upper {
	width: 32.9%;
	margin-top: 30px;
}
#mainContainer #mainContents .symptomsList .col .headLine {
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: bold;
}
#mainContainer #mainContents .symptomsList .col .headLine span {
	font-size: 16px;
	font-size: 1.6rem;
}
#mainContainer #mainContents .twoCol {
	clear: both;
}
#mainContainer #mainContents .twoCol .col {
	float: left;
	width: 440px;
	margin-top: 20px;
}
#mainContainer #mainContents .twoCol .col:nth-child(2n) {
	margin-left: 40px;
}
.figureCol01 {
	clear: both;
	margin-top: 20px;
}
.figureCol01 .imgL {
	float: left;
}
.figureCol01 .imgL figure,
.figureCol01 .imgR figure {
	margin-top: 20px;
}
.figureCol01 .imgR {
	float: right;
	margin-left: 20px;
}
.figureCol01 .text {
	padding-left: 19px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.figureCol01 .text p {
	position: relative;
	width: 220px;
	margin-top: 0;
	padding: 20px 18px;
	background: #ffffff;
	border: 2px #bbbbbb solid;
	border-radius: 15px;
	letter-spacing: -0.5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.figureCol01 .text p:before {
	position: absolute;
	top: 50px;
	left: -19px;
	width: 19px;
	height: 22px;
	content: "";
	background: url(../../images/index_il17.png) 0 0 no-repeat;
}
.figureCol01 .text.break {
	overflow: hidden;
}

.figureCol01.type02 {
	padding-bottom: 10px;
	background: url(/common-files/images/com_bg03.gif) 0 100% repeat-x;
}


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

	3: footer

================================ */
#footerContainer #globalFooter {
	width: 920px;
	margin: 0 auto;
}
.pageTop {
	text-align: right;
}
.pageTop a {
	padding-left: 18px;
	background: url(../images/com_ic05.png) 2px 2px no-repeat;
	background-size: 11px 12px;
	color: #000000;
	font-size: 10x;
	font-size: 1.0rem;
}
#footerContainer #globalFooter #brandNav {
	position: relative;
	border-top: 2px solid #8e8e8e;
	background: url(../images/footer_bg02.gif) 0 100% no-repeat
}
#footerContainer #globalFooter #brandNav .headLine02 {
	margin-top: 15px;
	padding: 0;
	background: none;
	font-size: 15px;
	font-size: 1.5rem;
}
#footerContainer #globalFooter #brandNav .headLine02 a {
	padding-left: 25px;
	background: url(../images/footer_ic02.png) 0 0.3em no-repeat;
	color: #444444;
	font-weight: bold;
}
#footerContainer #globalFooter #brandNav .headLine02 a {
	padding-left: 25px;
	background: url(../images/footer_ic02.png) 0 0.3em no-repeat;
	color: #444444;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: bold;
}
#footerContainer #globalFooter #brandNav .inner {
	width: 620px;
	margin-top: 0;
	padding: 15px 25px;
}
#footerContainer #globalFooter #brandNav li {
	float: left;
	width: 25%;
}
#footerContainer #globalFooter #brandNav li a {
	padding-left: 15px;
	background: url(../images/com_ic06.png) 0 0.25em no-repeat;
	font-size: 13px;
	font-size: 1.3rem;
}
#footerContainer #globalFooter #brandNav #brandProduct {
	position: absolute;
	right: 40px;
	bottom: 0;
}
#footerContainer .footerLink {
	clear: both;
	background: #ffffff url(../images/footer_bg01.gif) 0 0 repeat-x;
}
#footerContainer .footerUtility {
	width: 920px;
	margin: 0 auto;
	padding: 5px 0 50px;
}
#footerContainer .footerUtility .linkType02 {
	float: left;
	margin-top: 10px;
	font-size: 13px;
	font-size: 1.3rem;
}
#footerContainer .footerUtility .copyright {
	float: right;
	margin-top: 0;
}
.recommendArea {
	padding: 15px;
	border: 1px solid #8e8e8e;
	border-radius: 6px;
}
.recommendArea .headLine {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
}
.recommendArea .headLine + * {
	margin-top: 10px;
}
.recommendArea .defList dt {
	margin-top: 10px;
	font-weight: bold;
}
.linkType02 a .icon {
	width: 16px;
	height: 15px;
	margin: 0 0 5px 5px;
}

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

	brand-box-layout

=================================*/
.brand-box-layout {
	padding-top: 40px;
}
.brand-box-layout .box_inner {
	box-sizing: border-box;
	max-width: 900px;
	min-width: 800px;
	margin: 0 auto;
	position: relative;
	border: 1px solid #bcbcbc;
	padding: 30px;
	background-color: #ffffff;
}
.brand-box-layout .box_inner::before {
	display: block;
	position: absolute;
	width: 898px;
	height: 2px;
	top: 0;
	left: 0;
	background-color: #e60016;
	content: '';
}
.brand-box-layout .box-lead {
	margin-top: 0;
	text-align: center;
}
.brand-box-layout .box-lead > img {
	width: 316px !important;
}
.brand-box-layout .box_detail {
	margin-top: 30px;
}
.brand-box-layout .box_detail + * {
	margin-top: 0 !important;
}
.brand-box-layout .box-column-layout {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	justify-content: center;
}
.brand-box-layout .box-column-layout > .column-item:nth-of-type(n+2) {
	margin-left: 20px;
}
.brand-box-layout .box-column-layout > .column-item .image-link {
	display: block;
	width: 169px;
}
#contents .brand-box-layout img {
	width: auto;
}
.brand-box-layout[class*="bg-"] {
	padding-bottom: 40px;
}
@media print, screen and (min-width: 768px) {
	.brand-box-layout[class*="bg-"] + * {
		margin-top: 0 !important;
	}
	.brand-box-layout .box-column-layout > .column-item a.image-link {
		transition: opacity 0.4s ease;
	}
	.brand-box-layout .box-column-layout > .column-item a.image-link:hover {
		opacity: 0.6;
	}
}

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

	clearfix

=================================*/
#headerContainer #globalHeader:after,
#mainContainer #breadcrumbNav ul:after,
#mainContainer #globalNav:after,
#mainContainer .troubleIntro .figureColWrap:after,
.colWrap:after,
#mainContainer .twoCol:after,
#footerContainer #globalFooter #brandNav ul:after,
#footerContainer .footerUtility:after {
	content: "";
	display: block;
	clear: both;
}
#headerContainer #globalHeader,
#mainContainer #breadcrumbNav ul,
#mainContainer #globalNav,
#mainContainer .troubleIntro .figureColWrap,
.colWrap,
#mainContainer .twoCol,
#footerContainer #globalFooter #brandNav ul,
#footerContainer .footerUtility {
	zoom: 1;
}