@charset "utf-8";

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

	タブレットのみ適応

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

@media only screen and (max-width: 768px) and (min-width: 641px){

	.dsp_smt { display: none; }

	#header .contact .fukidashi img {

		width: 300px;

	}

	#header .contact .fukidashi02 img {

		width: 90px;

	}

	#header .contact .tbs_fixed .tel .ruby {

    right: 260px!important;

	}

	#header .contact .tbs_fixed .tel .ruby {

    position: absolute;

    top: 72px!important;

	}

	/*--------------------------------------------------

		トップページ

	--------------------------------------------------*/

	#top_service_area .box dl.w4 dd ul li:nth-of-type(4n) {

		margin-right: 5px;

	}

	#top_greeting.flex .photo {

	

	}

	#top_taisetsu .in .seesaa img {

		position: absolute;

		top: 30px;

	}

}

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

	タブレット・スマホに適応

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

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

	.dsp_hp { display: none; }



	/* ヘッダ */

	#header #fixed {

		position: fixed;

		top: 0;

		left: 0;

		width: 100%;

		height: 50px;

		padding: 0;

		background: #3B80D8;

		z-index: 9997;

	}

	#header .in {

		height: auto;

	}

	#header h1 {

		padding-left: 5px;

		font-size: 11px;

		margin-bottom: 0;

	}

	#header h1.title {

		height: 50px;

		padding-left: 10px;

	}

	#header .ttl {

		padding-left: 5px;

	}

	#header .ttl img {

		width: auto;

		max-height: 28px;

	}

	#header .contact .tbs_fixed {

		overflow: hidden;

		position: relative;

	}

	#header .contact .tbs_fixed:before {

		display: block;

		content: "";

		height: 100%;

		width: 30px;

		position: absolute;

		top: -180px;

		left: 0;

		background-color: #fff;

		opacity: 0;

		transform: rotate(45deg);

		animation: reflection 2.5s ease-in-out infinite;

		-webkit-transform: rotate(45deg);

		-webkit-animation: reflection 2.5s ease-in-out infinite;

		-moz-transform: rotate(45deg);

		-moz-animation: reflection 2.5s ease-in-out infinite;

		-ms-transform: rotate(45deg);

		-ms-animation: reflection 2.5s ease-in-out infinite;

		-o-transform: rotate(45deg);

		-o-animation: reflection 2.5s ease-in-out infinite;

	}

	@keyframes reflection {

		0% {

			transform: scale(0) rotate(45deg);

			opacity: 0; }

		80% {

			transform: scale(0) rotate(45deg);

			opacity: 0.5; }

		81% {

			transform: scale(4) rotate(45deg);

			opacity: 1; }

		100% {

			transform: scale(50) rotate(45deg);

			opacity: 0; }

	}

	@-webkit-keyframes reflection {

		0% {

			-webkit-transform: scale(0) rotate(45deg);

			opacity: 0; }

		80% {

			-webkit-transform: scale(0) rotate(45deg);

			opacity: 0.5; }

		81% {

			-webkit-transform: scale(4) rotate(45deg);

			opacity: 1; }

		100% {

			-webkit-transform: scale(50) rotate(45deg);

			opacity: 0; }

	}

	@-moz-keyframes reflection {

		0% {

			-moz-transform: scale(0) rotate(45deg);

			opacity: 0; }

		80% {

			-moz-transform: scale(0) rotate(45deg);

			opacity: 0.5; }

		81% {

			-moz-transform: scale(4) rotate(45deg);

			opacity: 1; }

		100% {

			-moz-transform: scale(50) rotate(45deg);

			opacity: 0; }

	}

	@-ms-keyframes reflection {

		0% {

			-ms-transform: scale(0) rotate(45deg);

			opacity: 0; }

		80% {

			-ms-transform: scale(0) rotate(45deg);

			opacity: 0.5; }

		81% {

			-ms-transform: scale(4) rotate(45deg);

			opacity: 1; }

		100% {

			-ms-transform: scale(50) rotate(45deg);

			opacity: 0; }

	}

	@-o-keyframes reflection {

		0% {

			-o-transform: scale(0) rotate(45deg);

			opacity: 0; }

		80% {

			-o-transform: scale(0) rotate(45deg);

			opacity: 0.5; }

		81% {

			-o-transform: scale(4) rotate(45deg);

			opacity: 1; }

		100% {

			-o-transform: scale(50) rotate(45deg);

			opacity: 0; }

	}

	#header .contact .tbs_fixed {

		border-top: 1px solid #77a7e4;

		position: fixed;

		bottom: 0;

		left: 0;

		right: 0;

		z-index: 100;

		background: #fff;

		justify-content: center;

		padding: 5px 0;

	}

	#header .contact .tbs_fixed .tel {

		margin-left: 30px;

	}

	#header .contact .tbs_fixed .tel .no,

	#header .contact .tbs_fixed .tel .txt {

		color: #FFF !important;

	}

	#header .contact .tbs_fixed {

		background: rgba(234, 17, 33, 0.8);

	}

	#header .contact .tbs_fixed .tel .txt {

		margin-bottom: 0;

		/*padding-left: 35px;*/

		position: relative;

		top: 5px;

		left: 75px;

		font-weight: bold;

		font-size: 11px;

		line-height: 1;

		color: #f2585f;

	}

	#header .contact .tbs_fixed .tel .ruby {

		position: absolute;

		/*left: calc(50% + 160px);*/

		top: 30px;

		color: #fcee21;

		font-weight: bold;

	}

	#header .contact .tbs_fixed .tel_icon {

		position: relative;

		top: -5px;

		background: #FFF;

		width: 50px;

		height: 50px;

		margin-right: 5px;

		border-radius: 50%;

		padding: 5px 4px 5px 6px;

		box-sizing: border-box;

	}

	#header .contact .tbs_fixed .tel .ruby {

		right: 278px;

	}

	#header .contact .tbs_fixed .tel_icon img {

		width: 28px;

		height: auto;

	}

	#header .contact .tbs_fixed .tel .no {

		/*font-size: 25px;*/

		font-size: 34px;

		font-weight: bold;

		color: #f2585f;

	}

	#header .contact .tel02 a {

		position: absolute;

		top: 0;

		right: 44px;

		display: block;

		width: 46px;

		height: 50px;

		padding: 0 5px;

		box-sizing: border-box;

		/* 縦方向中央揃え */

		display: flex;

		align-items: center;

		justify-content: center;

	}

	/*#header .contact a img {

		max-width: 25px;

		height: auto;

	}*/

	#header .contact .btn {

		padding-right: 46px;

	}

	#header .contact .tel02 span {

		display: none;

	}

	#page_title {

		padding-top: 50px;

	}

	#sub_ttl {

		margin-top: -50px;

	}

	#sub_ttl img {

		height: 200px;

	}

	/* コンテナ */

	#container {

		/* padding-top: 25px; */

	}

	#container h3.sub {

		margin-bottom: 30px;

		font-size: 25px;

	}

	.main {

		padding-left: 15px;

		padding-right: 15px;

	}

	#main, #navi {

		clear: both;

		padding-bottom: 30px;

	}

	/* フッター */

	#footer {

		padding-bottom: 73px;

	}

	#footer .flex > .in {

		display: block;

		max-width: 100%;

		padding: 60px 0 0;

	}

	#footer .flex > .in .box {

		margin: 0 auto 20px;

	}

	#footer .flex > .in .box dl dd {

		justify-content: center;

	}

	#footer .footer_menu {

		display: block;

	}

	#footer .footer_menu > ul > li:not(.box_flex):after, #footer .footer_menu ul li.box_flex ul li:after {

		display: none;

	}

	#footer .footer_menu > ul {

		padding: 0 15px;

		background: #77a7e4;

	}

	#footer .footer_menu > ul:last-of-type {

		background: #46b7a7;

	}

	#footer .footer_menu ul li {

		border-bottom: 1px solid #fff;

		padding-left: 0;

	}

	#footer .footer_menu ul li:last-of-type {

		border-bottom: none;

	}

	#footer .footer_menu ul li a {

		display: block;

		padding: 5px;

		background: url(../img/icon_arrow_w.png) no-repeat right 20px center;

	}

	#footer .footer_menu ul li.box_flex {

		padding-left: 0;

	}

	#footer .footer_menu ul li.box_flex ul {

		margin-right: 0;

		padding: 0;

	}

	#footer .footer_menu ul li.box_flex ul:first-of-type li:last-of-type {

		border-bottom: 1px solid #fff;

	}



	#copyright {

		height: 30px;

		line-height: 30px;

		font-size: 10px;

	}

	/* パンくずリスト */

	#page_navi {

		margin-bottom: 20px;

		padding-top: 15px;

		font-size: 11px;

	}

	/* 枠のマージン・パディング */

	.mb { margin-bottom: 40px; }

	.pt { padding-top: 40px; }

	.pb { padding-bottom: 40px; }

	/* アンカーリンク用上部スペース */

	.pad_anchor {

		margin-top: -50px;

		padding-top: 50px;

	}

	#sub_links ul {

		/* flex-wrap: wrap; */

	}

	#sub_links ul li {

		width: calc(100% / 8);

		box-sizing: border-box;

	}

	#sub_links ul li a {

		padding: 0;

		width: 100%;

		font-size: 12px;

		text-align: center;

	}

	/*--------------------------------------------------

		トップページ

	--------------------------------------------------*/

	#top_campaign .box {

		width: 100%;

		margin-top: 30px;

		padding: 20px;

	}

	#top_campaign .box .mpr {

		text-align: center;

	}

	#top_campaign .box .mpr .bg_silver {

		font-size: 38px;

	}

	#top_greeting.flex .txt2 {

		font-size: 17px;

	}

	#top_service:before {

		background-size: 40% auto;

	}

	#top_service .list .box {

		width: 49%;

		margin-bottom: 20px;

	}

	#top_service .list .box .img {

		text-align: center;

	}

	.notice {

		padding: 20px;

	}

	.notice ul li {

		font-size: 18px;

	}

	#top_point {

		display: block;

	}

	#top_point .alert {

		width: 100%;

	}

	#top_point .alert .logo {

		padding: 50px 0 15px;

	}

	#top_point .alert .logo img {

		width: 100px;

	}

	#top_point .alert .txt {

		padding-bottom: 40px;

	}

	#top_point .point_area {

		width: 100%;

		padding-left: 0;

	}

	#top_point .point_area .msg {

		font-size: 27px;

	}

	#top_point .point_area .msg .fm {

		font-size: 35px;

	}

	#top_point .point_area .msg .maru {

		font-size: 45px;

	}

	#top_point .point_area .list {

		margin-right: 0;

	}

	#top_point .point_area .txt {

		padding-right: 100px;

		padding-bottom: 15px;

		font-size: 25px;

		margin-bottom: 0;

	}

	#top_point .point_area .mazu {

		position: relative;

		writing-mode: unset;

		top: auto;

		right: auto;

		-ms-writing-mode: unset;

		transform: unset;

		font-size: 25px;

		line-height: 1.4;

	}

	#top_point .point_area .mazu02 {

		padding-bottom: 20px;

	}

	#top_point .point_area .mazu02 .red {

		font-size: 30px;

	}

	#top_point .point_area .list dl {

		width: 33%;

	}

	/*#top_taisetsu {

		margin: 30px 0 80px;

	}*/

	#top_taisetsu .in .txt {

		font-size: 20px;

	}

	#top_taisetsu .in .txt .fm {

		font-size: 28px;

	}

	#top_taisetsu .in .seesaa img {

		width: 50px;

	}

	.common_contact {

		display: none;

	}

	/*.common_contact .ribbon {

		width: 95%;

		margin-bottom: 0;

	}

	.common_contact .img {

		display: none;

	}

	.common_contact .bg_white {

		padding: 20px;

	}

	.common_contact .bg_white .img_txt {

		margin-bottom: 20px !important;

	}

	.common_contact .bg_white .box_flex .txt {

		font-size: 20px;

	}

	.common_contact .bg_white .box_flex .tel a img {

		width: 36px;

	}

	.common_contact .bg_white .box_flex .tel a .no {

		font-size: 45px;

	}

	.common_contact .bg_white .box_flex .tel a .ruby {

		top: -49px;

		right: -5px;

		font-size: 17px;

		letter-spacing: 12px;

	}*/

	#top_anshin .box {

		width: 100%;

		padding: 20px;

	}

	#top_anshin .box .area {

		width: 100px;

		height: 100px;

		font-size: 30px;

		padding-top: 15px;

	}

	#top_anshin .box .img {

		right: 0;

	}

	#top_anshin .box .img img {

		width: 100px;

	}

	#top_anshin .box .txt {

		font-size: 20px;

	}

	#top_anshin .box .txt .fm {

		font-size: 30px;

	}

	#top_anshin .box dl {

		width: 33%;

	}

	#top_anshin .box dl dt {

		font-size: 18px;

	}

	#top_repeat .label {

		font-size: 25px;

	}

	#top_repeat .list:after{

		content:"";

		display:block;

		width: 33%;

		height:0;

	}

	#top_repeat dl {

		width: 33%;

	}

	#top_work:before {

		background-size: 30% auto;

	}

	#top_work h3.sub span {

		padding: 0 15px 10px

	}

	#top_work .box {

		width: 24%;

		margin-bottom: 30px;;

	}

	#top_work .box .head {

		font-size: 20px;

	}

	#top_work .box .bg_gray {

		padding: 10px;

	}

	#top_work .box .bg_gray .before {

		margin-bottom: 30px;

	}

	#top_work .box .bg_gray .before::before {

		bottom: -49px;

	}

	#top_work .box .bg_gray .before img {

		box-sizing: border-box;

		padding: 5px;

	}

	#top_work .more {

		margin: 25px 0;

	}

	#top_work .more a {

		line-height: 60px;

		font-size: 25px;

		width: 360px;

	}

	#top_maker ul,

	#top_card ul {

		padding: 10px 10px 1%;

	}

	#top_maker ul li,

	#top_card ul li {

		width: 32%;

		margin-bottom: 1%;

	}

	#top_flow h3 {

		margin-bottom: 50px;

	}

	#top_flow .box {

		width: 49%;

		padding: 3px;

		margin-bottom: 20px;

	}

	#top_flow .box .in {

		padding: 10px;

	}

	#top_flow .box .in .step .maru {

		width: 60px;

		height: 60px;

		font-size: 15px;

	}

	#top_flow .box .in .step {

		margin-bottom: 0;

	}

	#top_flow .box .in .step .maru .no {

		font-size: 28px;

	}

	#top_flow .box .in .img {

		margin-bottom: 10px;

	}

	#top_flow .box .in h3.sub {

		margin-bottom: 15px;

	}

	#top_flow .box .in .txt {

		font-size: 12px;

	}

	#top_faq:before {

		background-size: 30% auto;

	}

	#top_faq h3.sub span {

		padding: 0 20px 10px;

	}

	#top_faq dl {

		padding-bottom: 10px;

		margin-bottom: 15px;

	}

	#top_faq dl dt {

		font-size: 16px;

		padding: 10px;

		margin-bottom: 10px;

	}

	#top_faq dl dt img {

		width: 40px;

		margin-right: 10px;

	}

	#top_faq dl dd {

		font-size: 12px;

		padding: 0 10px;

	}

	#top_faq dl dd b {

		font-size: 14px;

	}

	#top_service_area .box dl, #top_service_area .box dl.w4 {

		width: 100%;

		margin-bottom: 15px;

	}

	#top_service_area .box dl:last-of-type {

		margin-bottom: 0;

	}

	#top_service_area .box dl dd {

		padding: 10px;

	}

	#top_service_area .box dl dd ul li {

		margin: 0 5px 5px;

		width: 80px;

	}



	/*WP記事内営業地域*/

	#top_service_area .box dl.work {

		width: 100%;

	}

	/*--------------------------------------------------

		サービス案内

	--------------------------------------------------*/



	/*トイレのトラブル*/

	#toilet:before {

		background-size: 20% auto;

	}

	#toilet .trouble {

		width: 85%;

	}

	#toilet .trouble .ttl {

		font-size: 20px;

		line-height: 1.2;

		padding: 8px 0;

	}

	#toilet .trouble .ttl::before {

		width: 100px;

		right: 0px;

	}

	#toilet .trouble .toilet::before {

		height: 101px;

		top: -45px;

	}

	#toilet .trouble .kitchen::before {

		height: 101px;

		top: -45px;

	}

	#toilet .trouble .bath::before {

		height: 88px;

		top: -30px;

	}

	#toilet .trouble .drainage::before {

		width: 67px;

		height: 96px;

		top: -36px;

	}

	#toilet .trouble .water_supply::before {

		height: 122px;

		top: -60px;

	}

	#toilet .trouble .water_storage::before {

		height: 99px;

		top: -40px;

	}

	#toilet .trouble .water_heater::before {

		height: 112px;

		top: -56px;

	}

	#toilet .trouble .pump::before {

		height: 105px;

		top: -46px;

	}

	#toilet .trouble .ttl span {

		font-size: 40px;

	}

	#trouble_list .box {

		width: 48%;

		padding: 20px;

		margin-bottom: 30px;

	}

	#trouble_list .box .ttl {

		font-size: 22px;

		margin-bottom: 7px;

	}

	#trouble_list .box .ttl.long {

		font-size: 20px;

	}

	#trouble_list .box .ttl::before {

		width: 22px;

		height: 24px;

		top: 3px;

	}

	#trouble_list .box .price {

		padding: 14px 20px;

		font-size: 15px;

	}

	#trouble_list .box .price .fm {

		font-size: 28px;

	}

	#trouble_list .box .price .yen {

		font-size: 20px;

	}

	#trouble_cause_list .box {

		width: 48%;

		margin-bottom: 28px;

		padding-bottom: 16px;

	}

	#trouble_cause_list .last_box {

		width: 100%;

	}

	#trouble_cause_list .box .ttl {

		font-size: 21px;

		padding: 16px 0;

	}

	#trouble_cause_list .box .ttl span {

		font-size: 25px;

	}

	#trouble_cause_list .box .txt1 {

		font-size: 15px;

		padding: 15px 15px 0 15px;

	}

	#trouble_cause_list .box .txt1 .category {

		font-size: 12px;

	}

	#trouble_cause_list .box .txt1 .type {

		font-size: 15px;

	}

	#trouble_cause_list .box .txt2 {

		font-size: 12px;

		padding: 15px 15px 0 15px;

	}

	#trouble_cause_list .box .txt2 .type {

		font-size: 15px;

	}

	h3.sub2 {

		font-size: 26px;

		margin-bottom: 7px;

	}

	h3.sub2::before,

	h3.sub2::after {

		width: 55px;

		height: 50px;

	}

	h3.sub2 span b {

		font-size: 35px;

	}

	#trouble_cause {

		margin-bottom: 50px;

	}

	#trouble_cause .in {

		padding: 35px 20px;

	}

	#trouble_cause .txt_box {

		width: 60%;

		padding-top: 14px;

	}

	#trouble_cause .txt_box dl {

		margin-bottom: 20px;

	}

	#trouble_cause .txt_box dt {

		height: 40px;

		padding: 0 0 14px 44px;

		font-size: 16px;

		border-bottom: 4px dotted #ccc;

		margin-bottom: 14px;

	}

	#trouble_cause .txt_box dt::before {

		width: 40px;

		height: 40px;

	}

	#trouble_cause .txt_box dt .no {

		top: -1px;

		left: 12px;

		font-size: 24px;

	}

	#trouble_cause .txt_box dt b {

		font-size: 22px;

	}

	#trouble_cause .img_box {

		padding-top: 14px;

		width: 38%;

	}

	#trouble_cause .img_box img {

		width: 250px;

		height: auto;

	}

	#toilet .common_contact {

		margin-top: 50px;

	}

	/*--------------------------------------------------

		お問い合せ

	--------------------------------------------------*/

	#mailform .tbl {

		border-bottom: 1px solid #BBB;

	}

	#mailform .tbl th,

	#mailform .tbl td {

		display: block;

		width: auto;

		border-bottom: none;

	}

	#mailform .tbl input[type="text"],

	#mailform .tbl textarea {

		font-size: 120%;

	}

	#mailform .btn input {

		width: 120px;

	}



/*--------------------------------------------------

	会社案内・アクセス

--------------------------------------------------*/

	#company th,

	#company td {

		display: block;

		width: 100%;

		box-sizing: border-box;

	}

/*------------------------------------------------*/

}