@charset "utf-8";

@media only screen and (max-width: 640px) {

/*============================
#mainPanelArea
============================*/
#mainPanelArea { min-width: inherit; height: 280px; position: relative; margin-top: 0; }
#mainPanelArea .pad {}
#mainPanelArea .pad ul {}
#mainPanelArea .pad ul li { min-width: inherit; height: 280px; text-indent: -9999px; position: relative; }
#mainPanelArea .pad ul li.panel01 { background: url(../../imageFile/top/panel_01.png) no-repeat center; background-size: cover; }
#mainPanelArea .pad ul li.panel02 { background: url(../../imageFile/top/panel_02.png) no-repeat center; background-size: cover; }
#mainPanelArea .pad ul li.panel03 { background: url(../../imageFile/top/panel_03.png) no-repeat center; background-size: cover; }
#mainPanelArea .pad ul li.panel04 { background: url(../../imageFile/top/panel_04.png) no-repeat center; background-size: cover; }
#mainPanelArea .pad ul li::after { position: absolute; content: ""; left: 0; top: 110px; width: 100%; height: 60px; background: url(../../imageFile/top/mainTitle_bg.png) no-repeat center; background-size: auto 60px; z-index: 9999; }
#mainPanelArea .number { position: absolute; left: 0; top: 205px; width: 100%; height: 25px; background: url(../../imageFile/top/image_since.png) no-repeat center; background-size: contain; text-indent: -9999px; }
#mainPanelArea .bx-wrapper .bx-pager { position: absolute; bottom: 10px; }
#mainPanelArea .bx-wrapper .bx-pager.bx-default-pager a { background: rgba(255,255,255,.5); text-indent: -9999px; display: block; width: 30px; height: 3px; margin: 0 5px; outline: 0; border-radius: 0; }
#mainPanelArea .bx-wrapper .bx-pager.bx-default-pager a:hover,
#mainPanelArea .bx-wrapper .bx-pager.bx-default-pager a.active { background: rgba(0,0,0,.5); }
#mainPanelArea .bx-wrapper .bx-controls-direction {}
#mainPanelArea .bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}
.bx-wrapper .bx-prev { left: -40px!important; background: url(../../imageFile/global/icon_arrow_gr_return.svg) no-repeat center!important; background-size: 20px auto!important; }
.bx-wrapper .bx-next { right: -40px!important; background: url(../../imageFile/global/icon_arrow_gr.svg) no-repeat center!important; background-size: 20px auto!important; }

/*============================
#bannerArea
============================*/
#bannerArea { min-width: inherit; padding-top: 0;  background: url(../../imageFile/top/concept_bg.png) repeat-x; background-size: cover; }
#bannerArea .pad { width: inherit; margin: 0 auto; text-align: center; }
#bannerArea .pad .concept { padding: 30px 20px 0; }
#bannerArea .pad .concept .conceptTitle { font-size: 1.25em; line-height: 1.5; }
#bannerArea .pad .concept p { text-align: left; padding: 0; line-height: 1.5; margin-top: 10px; }
#bannerArea .pad .bannerContents { width: inherit; margin: 30px 0 0; }
#bannerArea .pad .bannerContents ul {}
#bannerArea .pad .bannerContents ul li { float: none; text-align: center; }
#bannerArea .pad .bannerContents ul li a { display: block; width: inherit; height: 120px; }
#bannerArea .pad .bannerContents ul li a .bannerTitle { font-size: 1.75em; color: #fff; padding-top: 30px; }
#bannerArea .pad .bannerContents ul .shopBanner a { height: 120px; background: url(../../imageFile/top/shop_menu_bg.png)no-repeat center; background-size: cover; }
#bannerArea .pad .bannerContents ul .shopBanner a p { margin-top: 10px; font-size: 0.875em; line-height: 1.2; }
#bannerArea .pad .bannerContents ul .shopBanner a p br { display: none; }
#bannerArea .pad .bannerContents ul .aboutBanner a { height: 120px; background: url(../../imageFile/top/aboutUs_menu_bg.png)no-repeat center; background-size: cover; }
#bannerArea .pad .bannerContents ul .aboutBanner a p { margin-top: 10px; font-size: 0.875em; line-height: 1.5; }
#bannerArea .pad .bannerContents ul .historyBanner a { height: 120px; background: url(../../imageFile/top/history_menu_bg.png)no-repeat center; background-size: cover; }
#bannerArea .pad .bannerContents ul .historyBanner a p { margin-top: 10px; font-size: 0.875em; line-height: 1.5; }


/*============================
#commitmentsArea
============================*/
#commitmentsArea { margin-top: 45px; padding: 0; }
#commitmentsArea .pad {}
#commitmentsArea .pad .mainTitle { text-align: center; }
#commitmentsArea .pad .mainTitle .subTitle { margin-top: -10px; margin-left: 0; color: #9d9d9d; font-size: 0.875em; }
#commitmentsArea .pad ul {}
#commitmentsArea .pad ul li { margin-top: 20px; }
#commitmentsArea .pad ul li:first-child { margin-top: 0; }
#commitmentsArea .pad ul .leftContent { background-color: #f7f7f7; padding: 20px; }
#commitmentsArea .pad ul .leftContent .inner { width: inherit; margin: 0 auto;  }
#commitmentsArea .pad ul .inner .commitment01 { padding: 0; }
#commitmentsArea .pad ul .inner .commitment02 { padding: 0; }
#commitmentsArea .pad ul .inner .commitment03 { padding: 0; }
#commitmentsArea .pad ul .leftContent .inner .commitmentLeft { float: right; width: inherit; width: 40%; padding: 0 0 20px 20px; }
#commitmentsArea .pad ul .leftContent .inner .commitmentLeft img { width: 100%; }
#commitmentsArea .pad ul .leftContent .inner .commitmentRight { float: none ; width: inherit; box-sizing: border-box; }
#commitmentsArea .pad ul .leftContent .inner .commitmentRight .number { font-size: 1.75em; }
#commitmentsArea .pad ul .leftContent .inner .commitmentRight .title { margin-top: 5px; font-size: 1.25em; line-height: 1.125; font-weight: bold; }
#commitmentsArea .pad ul .leftContent .inner .commitmentRight p { margin-top: 10px; line-height: 1.5; font-size: 0.875em; }
#commitmentsArea .pad ul .rightContent { padding: 20px; }
#commitmentsArea .pad ul .rightContent .inner { width: inherit; margin: 0 auto; }
#commitmentsArea .pad ul .rightContent .inner .commitmentRight { float: right; width: inherit; width: 40%; padding: 0 0 20px 20px; }
#commitmentsArea .pad ul .rightContent .inner .commitmentRight img { width: 100%; }
#commitmentsArea .pad ul .rightContent .inner .commitmentLeft { float: none; width: inherit; box-sizing: border-box; }
#commitmentsArea .pad ul .rightContent .inner .commitmentLeft .number { font-size: 1.75em; font-weight: bold; color: #a04e4a; }
#commitmentsArea .pad ul .rightContent .inner .commitmentLeft .title { margin-top: 10px; line-height: 1.125; font-size: 1.25em; font-weight: bold; }
#commitmentsArea .pad ul .rightContent .inner .commitmentLeft p { margin-top: 10px; line-height: 1.5; font-size: 0.875em; } 

}