@charset "UTF-8";
@media screen and (min-width:641px) {/* page-top　（ページタイトル）
-------------------------------------*/
#top_main_box {
	background: #0075c1;
}
.top_main_box_in {
	background: #0075c1;
	width: 1160px;
	margin: 0 auto;
	overflow: hidden;
}
.top-slider {
	width: 805px;
	height: 485px;
	float: left;
	margin: 20px 0 15px 30px;
	background: url(../images/index/bg_slider.jpg) top right no-repeat;
	position:relative;
}
.top-slider .bx-wrapper .bx-prev {
    left: -30px;
    background: url(images/dx-icon-01.jpg) no-repeat;
	background-position: 0 0;
}

.top-slider .bx-wrapper .bx-next {
    right: -25px;
    background: url(images/dx-icon-02.jpg) no-repeat;
	background-position: 0 0;
}
.top-slider .bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 190px;
	width: 30px;
	height: 99px;
	margin-top: 0;
	padding: 0;
    outline: 0;
	text-indent: -9999px;
    z-index: 9997;
}
.top-slider .bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.top-slider .bx-wrapper .bx-next:hover {
	background-position: 0 0;
}

/* campaign
-------------------------------------*/
.cmp_box {
	background: #005e9b;
	padding: 20px;
	position: relative;
	width: 300px;
	float: right;
	margin: 20px 10px 20px 0;
}
.cmp_box_in {
	border: 4px solid #ffc600;
	background: url(../images/common/bg_stripe.jpg);
	padding: 130px 16px 7px 16px;
	min-height: 445px;
}
.cmp_box h2 {
	position: absolute;
	top: -6px;
	left: 0;
}
.cmp_box figure {
	width: 220px;
	height: 150px;
	border: 4px solid #e60012;
	background: #fff;
}
.cmp_box p:nth-child(2) {
	background: #0b0909;
	padding: 8px 5px;
	color: #fff;
	width: 220px;
	font-size: 12px;
	line-height: 1.2;
	margin-bottom: 10px;
}
.cmp_box p:nth-child(3) {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 10px;
}
.cmp_box p:nth-child(3) a {
	text-decoration: underline;
}
.cmp_box .btn {}
.cmp_box .btn a {
	text-decoration: none;
	color: #fff;
	font-size: 12px;
	display: block;
	background: #e60012;
	padding: 8px 5px;
	border: 2px solid #eb6100;
	text-align: center;
}

/* tokka
-------------------------------------*/
#tokka {
	background-image: url(../images/index/bg_tokka01.jpg), url(../images/index/bg_tokka02.jpg);
	background-repeat: no-repeat, repeat;
	background-position: top center, 0 0;
}
#tokka .tokka_in {
	width: 1100px;
	margin: 0 auto;
	background-image: url(../images/index/bg_tokka03.png), url(../images/index/bg_tokka04.jpg);
	background-repeat: no-repeat, repeat;
	background-position: top center, 0 0;
	padding: 0 40px 30px;
	position: relative;
}
#tokka h1 img {
	vertical-align: top;
}
#tokka p.read {
	color: #fff;
	font-weight: bold;
	position: absolute;
	top: 110px;
	left: 445px;
	font-size: 14px;
}
#tokka ul.toilet,
#tokka ul.kitchen,
#tokka ul.washbasin,
#tokka ul.bath {
	width: 240px;
}
#tokka ul a {
	text-decoration: none;
}
#tokka ul ul {
	background: #fff100;
	width: 240px;
	padding: 20px 10px;
}
#tokka ul ul li {
	background: #fff;
	padding: 10px 0 0 0;
	margin-bottom: 10px;
}
#tokka ul li h2 {
	font-size: 0;
}
#tokka ul ul figure {
	width: 200px;
	height: 140px;
	border: 3px solid #afafaf;
	margin: 0 10px 10px 10px;
}
#tokka ul ul dl {
	line-height: 1.4;
}
#tokka ul ul dl dt {
	font-size: 12px;
	margin: 10px 10px 5px 10px;
	height: 2.5em;
	overflow: hidden;
}
#tokka ul ul dl dt:before {
	content: '■';
	font-size: 12px;
}
#tokka ul ul dl dd:nth-child(2) {
	font-size: 14px;
	margin: 10px 10px 30px 10px;
	text-decoration: underline;
	height: 2.6em;
	overflow: hidden;
}
#tokka ul ul dl dd:last-child {
	position: relative;
	background: #e60012;
	text-align: right;
	font-size: 17px;
	font-weight: bold;
	word-break: break-all;
	padding-left: 48px !important;
}
#tokka ul ul a dl dd:last-child {
	color: #fff;
	padding: 5px;
}
#tokka ul ul dl dd:last-child img {
	position: absolute;
	bottom: 5px;
	left: 5px;
}

/* reason
-------------------------------------*/
#reason {
	margin-bottom: 20px;
}
#reason ul {
	overflow: hidden;
}
#reason ul li {
	float: left;
	width: 242px;
	margin-right: 12px;
	background: #0075c1;
}
#reason ul li:last-child {
	margin-right: 0;
}
#reason ul li p {
	font-size: 14px;
	color: #fff;
	padding: 10px 10px 20px 10px;
	line-height: 1.4;
}

/* menu
-------------------------------------*/
#menu {
	background: url(../images/index/bg_menu.jpg);
	border: 1px solid #0b0909;
	position: relative;
	margin-bottom: 10px;
}
#menu h1 {
	margin: -20px 0 10px 0;
}
#menu p.read {
	position: absolute;
	top: 90px;
	left: 230px;
	font-size: 14px;
	font-weight: bold;
}
#menu ul {
	width: 710px;
	margin: 0 auto;
}
#menu ul li {
	width: 134px;
	background: #0075c1;
	color: #fff;
	text-align: center;
	font-size: 12px;
	margin-bottom: 20px;
	position: relative;
}
#menu ul li:nth-child(1),
#menu ul li:nth-child(2),
#menu ul li:nth-child(3),
#menu ul li:nth-child(4) {
	width: 170px;
	font-size: 14px;
}
#menu ul li:after {
	content: url(../images/index/icon_coner.png);
	position: absolute;
	font-size: 0;
	bottom: 0;
	right: 0;
}
#menu ul li img {
	margin-bottom: 10px;
}
#menu ul li a {
	color: #fff;
	display: block;
	padding: 4px 0 15px 0;
}

/* komikomi
-------------------------------------*/
#komikomi {
	margin-bottom: 20px;
}
#komikomi h1 {
	font-size: 0;
}
#komikomi p {
	border: 1px solid #6f6f6f;
	border-top: 0;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}
#komikomi p a {
	display: block;
	padding: 15px 10px 20px;
}
#komikomi p a:after {
	content: '▶ ▶';
	color: #e60012;;
}

/* sos
-------------------------------------*/
#sos {
	margin-bottom: 40px;
}
.sos_in {
	background-color: #0061a3;
	background-image: url(../images/index/bg_sos03.png), url(../images/index/bg_sos02.jpg);
	background-position: 511px bottom, 0 0;
	background-repeat: no-repeat, repeat-x;
	overflow: hidden;
}
#sos h1 {
	float: left;
	width: 285px;
}
#sos ul {
	float: right;
	width: 445px;
	padding: 20px 0 0 0;
}
#sos ul li {
	background: url(../images/common/icon_check.png) 0 0 no-repeat;
	font-size: 18px;
	color: #fff;
	font-weight: bold;
	padding: 10px 10px 10px 40px;
	letter-spacing: 0.5px;
}
#sos p {
	margin-top: -23px;
}

/* top_btm_area
-------------------------------------*/
#top_btm_area {
	background-image: url(../images/common/bg_giza.png), url(../images/common/bg_stripe2.jpg);
	background-position: bottom center,0 0;
	background-repeat: repeat-x, repeat;
	padding: 40px 0;
	overflow: hidden;
}
.top_btm_in {
	width: 1000px;
	margin: 0 auto;
}
#top_btm_area .top_btm_l {
	float: left;
	width: 220px;
	margin-right: 30px;
}
#top_btm_area .top_btm_c {
	float: left;
	width: 500px;
	margin-right: 30px;
}
#top_btm_area .top_btm_r {
	float: left;
	width: 220px;
}
/*company*/
#top_btm_area #company {
	background: #fff;
	font-size: 14px;
	line-height: 1.6;
}
#top_btm_area #company address {
	padding: 23px 15px 0;
}
#top_btm_area #company dl {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #b2b2b2;
}
#top_btm_area #company dl dt {
	font-weight: bold;
}
#top_btm_area #company ul {
	padding: 0 15px;
	overflow: hidden;
}
#top_btm_area #company ul li {
	background: url(../images/common/arrow01.jpg) 0 8px no-repeat;
	padding: 5px 0 15px 24px;
	font-size: 14px;
	width: 50%;
	float: left;
}
/*case*/
#top_btm_area #case {
	position: relative;
}
#top_btm_area #case .case_in {
	background: url(../images/common/bg_stripe3.jpg);
	padding: 15px;
	font-size: 12px;
	line-height: 1.4;
	/*min-height: 210px;*/
	padding-top: 180px;
}
#top_btm_area #case .case_in .figure {
	width: 420px;
	height: 180px;
	position: absolute;
	top: 62px;
	left: 40px;
}
#top_btm_area .case_before {
	width: 160px;
	height: 120px;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px #6f6f6f;
	float: left;
}
#top_btm_area .case_after {
	width: 240px;
	height: 180px;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px #6f6f6f;
	float: right;
}
#top_btm_area .case_before:after {
	content: url(../images/common/arrow02.png);
	position: absolute;
	top: 130px;
	left: 50px;
}
/*blog*/
#top_btm_area #blog {
	background: #fff;
	margin-bottom: 15px;
}
#top_btm_area .blog_in {
	width: 218px;
	height: 280px;
	overflow-x: hidden;
	overflow-y: auto;
}
#top_btm_area .blog_in ul {
	margin: 10px;
}
#top_btm_area .blog_in ul li {
	margin-bottom: 10px;
	padding-bottom:10px;
	border-bottom:1px dotted #b2b2b2;
	line-height: 1.4;
	font-size: 12px;
}
#top_btm_area .blog_in ul li span {
	color: #eb6100;
	display: block;
	margin-bottom:3px;
}

/* top_msg_area
-------------------------------------*/
#top_msg_area {
	background: #0075c1;
}
.top_msg_in {
	width: 1000px;
	margin: 0 auto;
	padding: 40px 0;
	overflow: hidden;
	position: relative;
}
#top_msg_area .msg_l,
#top_msg_area .msg_r{
	color: #fff;
	width: 490px;
	background: #005d9c;
	border: 1px solid #0599d9;
	box-shadow:0px 0px 15px 10px #015289 inset;
	-moz-box-shadow:0px 0px 15px 10px #015289 inset;
	-webkit-box-shadow:0px 0px 15px 10px #015289 inset;
}
#top_msg_area h2 {
	padding: 20px;
	border-bottom: 1px solid #0599d9;
	font-size: 16px;
	font-weight: bold;
}
#top_msg_area .msg_l p {
	padding: 20px;
	font-size: 12px;
	line-height: 1.6;
}
#top_msg_area .msg_r p {
	padding: 20px;
	font-size: 12px;
	line-height: 1.6;
	width: 490px;
	position: absolute;
	top: 100px;
	right: 0;
	z-index: 100;
}
#top_msg_area img.chizu {
	position: absolute;
	top: 20px;
	right: 0;
	z-index: 99;
}




}


@media screen and (max-width: 640px) {/* page-top　（ページタイトル）
-------------------------------------*/
p.h_menu {
    top: 12vw;
}
p.h_tel {
    top: 12vw;
}
p.h_mail {
    top: 12vw;
}
#top_main_box {
	background: #0075c1;
}
.top_main_box_in {
	background: #0075c1;
	margin: 0 auto;
	overflow: hidden;
}
.top-slider {
	background: url(../images/index/bg_slider.jpg) top right no-repeat;
	position:relative;
}
.top-slider .bx-wrapper .bx-prev {
    left: 0;
    background: url(images/dx-icon-01.jpg) no-repeat;
    background-position: 0 0;
    background-size: cover;
}

.top-slider .bx-wrapper .bx-next {
    right: 0;
    background: url(images/dx-icon-02.jpg) no-repeat;
    background-position: 0 0;
    background-size: contain;
}
.top-slider .bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	width: 4vw;
	height: 13vw;
	margin-top: -7vw;
	padding: 0;
	outline: 0;
	text-indent: -9999px;
	z-index: 9997;
}
.top-slider .bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.top-slider .bx-wrapper .bx-next:hover {
	background-position: 0 0;
}

/* campaign
-------------------------------------*/
.cmp_box {
	background: #005e9b;
	padding: 2vw;
	position: relative;
}
.cmp_box_in {
	border: 4px solid #ffc600;
	background: url(../images/common/bg_stripe.jpg);
	padding: 24vw 2vw 2vw 2vw;
}
.cmp_box h2 {
	position: absolute;
	top: -6px;
	left: 0;
	padding: 0 2vw;
}
.cmp_box figure {
	width: 100%;
	height: 50vw;
	border: 4px solid #e60012;
	background: #fff;
}
.cmp_box p:nth-child(2) {
	background: #0b0909;
	padding: 8px 5px;
	color: #fff;
	width: 100%;
	font-size: 12px;
	line-height: 1.2;
	margin-bottom: 10px;
}
.cmp_box p:nth-child(3) {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 10px;
}
.cmp_box p:nth-child(3) a {
	text-decoration: underline;
}
.cmp_box .btn {}
.cmp_box .btn a {
	text-decoration: none;
	color: #fff;
	font-size: 12px;
	display: block;
	background: #e60012;
	padding: 8px 5px;
	border: 2px solid #eb6100;
	text-align: center;
}

/* tokka
-------------------------------------*/
#tokka {
	background-image: url(../images/index/sp_tokka_bg.png);
	background-repeat: no-repeat;
	background-position: top;
	padding-top: 49vw;
	background-size: contain;
}
#tokka .tokka_in {
	margin: 0 auto;
	background-image: url(../images/index/bg_tokka03.png), url(../images/index/bg_tokka04.jpg);
	background-repeat: no-repeat, repeat;
	background-position: top center, 0 0;
	padding: 0 3vw 6vw;
	position: relative;

}
#tokka h1 img {
	vertical-align: top;
}
#tokka h1 img:first-child{
	width: 36%;
	padding: 2vw 0;
	}
#tokka h1 img:last-child{
	width: 57%;
	padding: 1vw 0;
	}
#tokka .ten-ce {
    flex-wrap: wrap;
}
#tokka .ten-ce li {width: 48%;margin-bottom: 2vw;}

#tokka p.read {
	color: #fff;
	font-weight: bold;
	font-size: 3.3vw;
	margin-bottom: 10px;
	text-align: center;
}
#tokka ul a {
	text-decoration: none;
}
#tokka ul ul {
	background: #fff100;
	width: 100%;
	padding: 2vw;
}
#tokka ul ul li {
	background: #fff;
	padding: 0;
	margin-bottom: 1vw;
	width: 100% !important;
}
#tokka ul li h2 {
	font-size: 0;
}
#tokka ul ul figure {
	width: 100%;
	height: 31vw;
	border: 3px solid #afafaf;
	box-sizing: border-box;
}
#tokka ul ul dl {
	line-height: 1.4;
}
#tokka ul ul dl dt {
	font-size: 12px;
	margin: 10px 10px 5px 10px;
	height: 2.5em;
	overflow: hidden;
}
#tokka ul ul dl dt:before {
	content: '■';
	font-size: 12px;
}
#tokka ul ul dl dd:nth-child(2) {
	font-size: 14px;
	margin: 10px 10px 30px 10px;
	text-decoration: underline;
	height: 2.6em;
	overflow: hidden;
}
#tokka ul ul dl dd:last-child {
	position: relative;
	background: #e60012;
	text-align: right;
	font-size: 17px;
	font-weight: bold;
	word-break: break-all;
	padding-left: 48px !important;
}
#tokka ul ul a dl dd:last-child {
	color: #fff;
	padding: 5px;
}
#tokka ul ul dl dd:last-child img {
	position: absolute;
	bottom: 5px;
	left: 5px;
}

/* reason
-------------------------------------*/
#reason {
	margin-bottom: 40px;
}
#reason ul {
	overflow: hidden;
}
#reason ul li {
	background: #0075c1;
	margin-bottom: 20px;
	margin-top: 10px;
}
#reason ul li:last-child {
	margin-right: 0;
}
#reason ul li p {
	font-size: 14px;
	color: #fff;
	padding: 10px 10px 20px 10px;
	line-height: 1.4;
}

/* menu
-------------------------------------*/
#menu {
	background: url(../images/index/bg_menu.jpg);
	border: 1px solid #0b0909;
	position: relative;
	margin-bottom: 20px;
}
#menu h1 {
	margin: -20px 0 10px 0;
}
#menu p.read {
	font-size: 14px;
	padding: 1vw 3vw;
	font-weight: bold;
	line-height: 1.6;
}
#menu ul {
	width: 100%;
	margin: 0 auto;
	padding: 0 3vw;
	justify-content: space-around;
}
#menu ul li {
	width: 32%;
	background: #0075c1;
	color: #fff;
	text-align: center;
	font-size: 12px;
	margin-bottom: 20px;
	position: relative;
}
#menu ul li:nth-child(1),
#menu ul li:nth-child(2),
#menu ul li:nth-child(3),
#menu ul li:nth-child(4) {
	width: 48%;
	font-size: 14px;
}
#menu ul li:after {
	content: url(../images/index/icon_coner.png);
	position: absolute;
	font-size: 0;
	bottom: 0;
	right: 0;
}
#menu ul li img {
	margin-bottom: 10px;
}
#menu ul li a {
	color: #fff;
	display: block;
	padding: 4px 0 15px 0;
}

/* komikomi
-------------------------------------*/
#komikomi {
	margin-bottom: 20px;
}
#komikomi h1 {
	font-size: 0;
}
#komikomi p {
	border: 1px solid #6f6f6f;
	border-top: 0;
	text-align: center;
	font-size: 4vw;
	font-weight: bold;
	line-height: 1.4;
}
#komikomi p a {
	display: block;
	padding: 2vw;
}
#komikomi p a:after {
	content: '▶ ▶';
	color: #e60012;;
}

/* sos
-------------------------------------*/
#sos {
	margin-bottom: 40px;
}
.sos_in {
	background-color: #0061a3;
	background-image: url(../images/index/bg_sos03.png), url(../images/index/bg_sos02.jpg);
	background-position: 511px bottom, 0 0;
	background-repeat: no-repeat, repeat-x;
	overflow: hidden;
}
#sos h1 {text-align: center;padding: 0 3vw;}
#sos ul {
	padding: 1vw 4vw 7vw;
}
#sos ul li {
	background: url(../images/common/icon_check.png) 0 0 no-repeat;
	font-size: 4vw;
	color: #fff;
	font-weight: bold;
	padding: 3vw  1vw  1vw 8vw;
}
#sos p {
	margin-top: -23px;
}

/* top_btm_area
-------------------------------------*/
#top_btm_area {
	background-image: url(../images/common/bg_giza.png), url(../images/common/bg_stripe2.jpg);
	background-position: bottom center,0 0;
	background-repeat: repeat-x, repeat;
	padding: 3vw;
	overflow: hidden;
}
.top_btm_in {
	margin: 0 auto;
}
#top_btm_area .top_btm_l {
	display: none;
}
#top_btm_area .top_btm_c {margin-bottom: 20px;}
#top_btm_area .top_btm_r {
	width: 100%;
}
/*company*/
#top_btm_area #company {
	background: #fff;
	font-size: 14px;
	line-height: 1.6;
}
#top_btm_area #company address {
	padding: 23px 15px 0;
}
#top_btm_area #company dl {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #b2b2b2;
}
#top_btm_area #company dl dt {
	font-weight: bold;
}
#top_btm_area #company ul {
	padding: 0 15px;
	overflow: hidden;
}
#top_btm_area #company ul li {
	background: url(../images/common/arrow01.jpg) 0 8px no-repeat;
	padding: 5px 0 15px 24px;
	font-size: 14px;
	width: 50%;
	float: left;
}
/*case*/
#top_btm_area #case {
	position: relative;
}
#top_btm_area #case .case_in {
	background: url(../images/common/bg_stripe3.jpg);
	padding: 3vw;
	font-size: 12px;
	line-height: 1.4;
	padding-top: 49vw;
}
#top_btm_area #case .case_in .figure {
	width: 94%;
	position: absolute;
	top: 16vw;
	left: 4px;
}
#top_btm_area .case_before {
	width: 31vw;
	height: 26vw;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px #6f6f6f;
	float: left;
}
#top_btm_area .case_after {
	width: 51vw;
	height: 160px;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px #6f6f6f;
	float: right;
}
#top_btm_area .case_before:after {
	content: url(../images/common/arrow02.png);
	position: absolute;
	top: 28vw;
	left: 2vw;
}
/*blog*/
#top_btm_area #blog {
	background: #fff;
	margin-bottom: 15px;
}
#top_btm_area .blog_in {
	height: 45vw;
	overflow-x: hidden;
	overflow-y: auto;
}
#top_btm_area .blog_in ul {
	margin: 2vw;
}
#top_btm_area .blog_in ul li {
	margin-bottom: 10px;
	padding-bottom:10px;
	border-bottom:1px dotted #b2b2b2;
	line-height: 1.4;
	font-size: 12px;
}
#top_btm_area .blog_in ul li span {
	color: #eb6100;
	display: block;
	margin-bottom: 2vw;
}

/* top_msg_area
-------------------------------------*/
#top_msg_area {
	background: #0075c1;
}
.top_msg_in {
	padding: 3vw;
	overflow: hidden;
	position: relative;
	display: block;
}
#top_msg_area .msg_l,
#top_msg_area .msg_r{
	color: #fff;
	background: #005d9c;
	border: 1px solid #0599d9;
	box-shadow:0px 0px 15px 10px #015289 inset;
	-moz-box-shadow:0px 0px 15px 10px #015289 inset;
	-webkit-box-shadow:0px 0px 15px 10px #015289 inset;
	margin-bottom: 4vw;
}
#top_msg_area h2 {
	padding: 3vw 2vw;
	border-bottom: 1px solid #0599d9;
	font-size: 4vw;
	font-weight: bold;
}
#top_msg_area .msg_l p {
	padding: 3vw;
	font-size: 12px;
	line-height: 1.6;
}
#top_msg_area .msg_r p {
	padding: 3vw;
	font-size: 12px;
	line-height: 1.6;
	z-index: 100;
}
#top_msg_area img.chizu {margin: 0 auto 10px;display: block;}




}