@charset "utf-8";
/* ==========================================================================
   header
   ========================================================================== */
.header__rhythm02 {
	display: block;
	width: 160px;
	position: absolute;
	top: 10px;
	right: 4%;
	background-image: none !important;
}
.header__rhythm02 img {
	width: 100%;
}
@media screen and (min-width: 768px) {
	.header__container {
		border: 0;
	}
	.header__rhythm02 {
		width: 196px;
    height: 25px;
	}
}


.header__logo {
	display: flex;
	align-items: center;
	width: auto;
	padding-top: 7px;
	padding-bottom: 0;
}
@media screen and (min-width: 768px) {
	.header__logo {
		display: block;
		padding-top: 20px;
	}
}


/* ==========================================================================
   ダスキンのある暮らし
   ========================================================================== */
.keyvisual {
	width: 100%;
	height: 40vw;
	background-image: url(/special/images/bgi_keyvisual_sp.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
.keyvisual img {
	display: block;
	width: 100%;
}
.keyvisual__copy-lead,
.keyvisual__title,
.keyvisual__instagram {
	text-align: right;
	margin-left: auto;
	margin-right: 5%;
}
.keyvisual__copy-lead {
	width: calc(440/750*100%);
	padding-top: 12%;
}
h1.keyvisual__title {
	width: calc(450/750*100%);
	padding-top: 3%;
	padding-bottom: 3%;
}
.keyvisual__instagram {
	width: calc(420/750*100%);
}
@media screen and (min-width: 768px) {
	.keyvisual {
		height: 320px;
		background-image: url(/special/images/bgi_keyvisual_2x.png);
		background-color: #ffffff;
		background-size: cover;
	}
	.keyvisual__wrap {
		max-width: 1020px;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}
	.keyvisual__copy-lead,
	.keyvisual__title,
	.keyvisual__instagram {
		margin-right: 50px;
	}
	.keyvisual__copy-lead {
		width: calc(420px + 35px);
		padding-top: 92px;
		padding-right: 65px;
	}
	h1.keyvisual__title {
		width: 530px;
		padding-top: 18px;
		padding-bottom: 24px;
	}
	.keyvisual__instagram {
		width: 480px;
	}
}
@media screen and (min-width: 1350px) {
	.keyvisual {
		background-size: contain;
	}
}



/* ==========================================================================
   はじめてのダスキン・インスタ バナー
   ========================================================================== */
.service_bnr {
	background-color: #FFFFFF;
	padding-bottom: 15px;
}
.service_bnr-inner {
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 5px;
	padding-left: 5px;
}
.service_bnr-item {
	max-width: calc(570/750*100%);
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
}
.service_bnr-item img {
	width: 100%;
}
@media screen and (min-width: 768px) {
	.service_bnr {
		padding-bottom: 30px;
	}
	.service_bnr-inner {
		display: flex;
		y-content: space-between;
		max-width: 1019px;
		gin-right: auto;
		margin-left: auto;
		padding-right: 25px;
		padding-left: 25px;
	}
	.service_bnr-item {
		padding-top: 30px;
		flex-basis: 44%;
		max-width: 44%;
	}
}
/* ==========================================================================
   サービス一覧
   ========================================================================== */
.logo_murinakutuduku {
	text-align: center;
	width: 65%;
	margin-top: 1.4em;
	margin-right: auto;
	margin-bottom: .4em;
	margin-left: auto;
}
.logo_murinakutuduku img {
	width: 100%;
}
.service__ttl {
	font-size: 1.8rem;
	text-align: center;
  margin-top: 20px;
	margin-bottom: .3em;
}
.service {
	padding: 0 0 20px;
	background-color: #e6e4dd;
}
@media screen and (min-width: 768px) {
	.service {
		padding-top: 10px
	}
	.logo_murinakutuduku {
		width: 300px;
	}
	.service__ttl {
		font-size: 2.0rem;
		margin-bottom: .5em;
	}
}

.pickup_bnr {
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
.pickup_bnr a img {
	width: 100% !important;
}
.pickup_bnr a {
	padding-top: 10px;
	border: none;
}
@media screen and (min-width: 768px) {
	.pickup_bnr {
		display: flex;
		justify-content: space-between;
		max-width: 1019px;
		margin-right: auto;
		margin-left: auto;
		padding-bottom: 25px;
	}
	.pickup_bnr a {
		flex-basis: 49.2%;
		max-width: 49.2%;
	}
}
.service__list {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	max-width: 1019px;
	margin-right: 5px;
	margin-left: 5px;
}
.service__item {
	align-self: stretch;
	align-items: stretch;
	padding: 5px;
}
.service__item.col-1 {
	flex-grow: 0;
	width: 50%;
}
.service__item.col-2 {
	flex-grow: 1;
	width: 100%;
}
.service__link {
	position: relative;
	display: block;
	height: 100%;
	/*background-color: #ff0000;*/
	border: 5px solid #fff;
	overflow: hidden;
}
.service__link:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	display: block;
	width: 18px;
	height: 18px;
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
}
.service__link.basic3:after {
	background-image: url(/special/images/icon_angle-right_basic3.svg);
}
.service__link.siro:after {
	background-image: url(/special/images/icon_angle-right_siro.svg);
}
.service__link.sponge:after {
	background-image: url(/special/images/icon_angle-right_sponge.svg);
}
.service__link.air:after {
	background-image: url(/special/images/icon_angle-right_air.svg);
}
.service__link.merrymaids:after {
	background-image: url(/special/images/icon_angle-right_merrymaids.svg);
}
.service__link.cockroach:after {
	background-image: url(/special/images/icon_angle-right_terminix.svg);
}
.service__link.terminix:after {
	background-image: url(/special/images/icon_angle-right_terminix.svg);
}
.service__link.totalgreen:after {
	background-image: url(/special/images/icon_angle-right_totalgreen.svg);
}
.service__link.prune:after {
	background-image: url(/special/images/icon_angle-right_prune.svg);
}
.service__link.housecleaning:after {
	background-image: url(/special/images/icon_angle-right_housecleaning.svg);
}
.service__link.tokojirami:after {
	background-image: url(/special/images/icon_angle-right_tokojirami.svg);
}
.service__link.rat:after {
	background-image: url(/special/images/icon_angle-right_rat.svg);
}
.service__photo {
	width: 100%;
}
.service__link:hover .service-description {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
@media screen and (max-width: 767px) {
	.service__caption {
		position: absolute;
		bottom: 2px;
		left: 0;
		width: 100%;
		font-size: 1.3rem;
		color: #333;
		line-height: 1;
		letter-spacing: -.05em;
		text-align: center;
		text-indent: -1em;
		background-color: #fff;
	}
	.service__caption.siro {
		font-size: 1.2rem;
	}
	.service__caption.totalgreen {
		font-size: 1.1rem;
	}
	.service__caption.prune {
		font-size: 1.1rem;
	}
	.service-description {
		position: absolute;
		bottom: 16px;
		left: 0;
		width: 100%;
		padding: .7em 0 .3em;
		text-transform: none;
		font-size: 1.1rem;
		color: #333;
		line-height: 1.2;
		text-align: center;
		background-color: #fff;
	}
}
@media screen and (min-width: 768px) {
	.service__list {
		margin-right: 10px;
		margin-left: 10px;
	}
	.service__item {
		padding: 8px;
	}
	.service__item.col-1 {
		width: 33.33%;
	}
	.service__item.col-2 {
		width: 66.66%;
	}
	.service__link:after {
		width: 32px;
		height: 32px;
	}
	.service__caption {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 53px;
		font-size: 2.0rem;
		color: #333;
		line-height: 3;
		letter-spacing: -.05em;
		text-align: center;
		text-indent: -1em;
		background-color: #fff;
	}
	.service__caption.totalgreen {
		font-size: 1.7rem;
		line-height: 3.5;
	}
	.service__caption.housecleaning {
		font-size: 1.7rem;
		line-height: 3.5;
	}
	.service__caption--small {
		font-size: 94%;
	}
	.service-description {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 1em .5em;
		text-transform: none;
		font-size: 1.5rem;
		color: #fff;
		line-height: 1.5;
		text-align: center;
		background-color: #fff;
		-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
		transition: opacity 0.35s, transform 0.35s;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0);
		opacity: 0;
	}
	.service-description.basic3 {
		background-color: #d4075d;
	}
	.service-description.siro {
		background-color: #8aba29;
	}
	.service-description.sponge {
		background-color: #d70765;
	}
	.service-description.air {
		background-color: #498fcb;
	}
	.service-description.merrymaids {
		background-color: #d50080;
	}
	.service-description.cockroach {
		background-color: #ea5432;
	}
	.service-description.terminix {
		background-color: #ea5432;
	}
	.service-description.totalgreen {
		background-color: #00a040;
	}
	.service-description.prune {
		background-color: #7bb331;
	}
	.service-description.housecleaning {
		background-color: #53b3d9;
	}
	.service-description.tokojirami {
		background-color: #ea5432;
	}
	.service-description.rat {
		background-color: #ea5432;
	}
}
@media screen and (min-width: 970px) {
	.service__list {
		margin-right: auto;
		margin-left: auto;
	}
	.service__item.col-1 {
		width: 25%;
	}
	.service__item.col-2 {
		width: 50%;
	}
}
/* ==========================================================================
   暮らしフォト
   ========================================================================== */
.kurashiphoto__container {
	max-width: 1019px;
	margin-right: 10px;
	margin-left: 10px;
}
.kurashiphoto__title {
	width: 100%;
	height: 145px;
	height: 22.65vw;
	background-image: url(/special/images/ttl_kurashiphoto_sp.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 76.55%;
	background-color: #896243;
	overflow: hidden;
	text-indent: 200%;
	white-space: nowrap;
}
.kurashiphoto__hash {
	width: 100%;
	height: 92px;
	height: 14.37vw;
	font-size: 1.5rem;
	line-height: 2;
	text-align: center;
	background-image: url(/special/images/bgi_kurashiphoto_hash_2x.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: auto 34.78%;
}
.kurashiphoto__hash-slash {
	font-size: 110%;
}
@media screen and (min-width: 768px) {
	.kurashiphoto__title {
		height: 104px;
		background-image: url(/special/images/ttl_kurashiphoto_2x.png);
		background-size: auto 68.26%;
	}
	.kurashiphoto__hash {
		height: 76px;
		font-size: 2.4rem;
		line-height: 1.7;
		background-image: url(/special/images/bgi_kurashiphoto_hash_2x.png);
		background-size: auto 34.21%;
	}
	.kurashiphoto__hash-slash {
		font-size: 120%;
		margin-right: .3em;
		margin-left: .2em;
	}
}
.kurashiphoto #vtdr_body .vtdr_contents > .inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}
.kurashiphoto #vtdr_body .vtdr_contents .vtdr_image_list {
	float: none;
	width: 50%;
	margin-right: 0;
	margin-bottom: 0;
	border-width: 5px;
	border-style: solid;
	border-color: #fff;
}
.kurashiphoto #vtdr_body #more {
	width: 98%;
	height: 48px;
	background: #fff;
	border: 1px solid #d3d3d3;
	border-radius: 0;
	font-size: 16px;
	color: #313131;
	line-height: 2.7em;
}
.kurashiphoto #vtdr_body #more:hover {
	font-weight: 800;
	background-color: #d3d3d3;
}
.kurashiphoto__alert {
	display: none;
	margin-bottom: 100px;
	font-size: 18px;
}
@media screen and (min-width: 768px) {
	.kurashiphoto__container {
		margin-right: auto;
		margin-left: auto;
	}
	.kurashiphoto #vtdr_body .vtdr_contents .vtdr_image_list {
		width: 25%;
		border-width: 8px;
	}
	.kurashiphoto #vtdr_body .vtdr_contents div img:hover {
		opacity: .7;
		filter: alpha(opacity=70);
		-webkit-transition: opacity .4s ease-in;
		-moz-transition: opacity .4s ease-in;
		-ms-transition: opacity .4s ease-in;
		transition: opacity .4s ease-in;
	}
	.kurashiphoto #vtdr_body .vtdr_insta_logo {
		top: 12px;
		left: 12px;
	}
	.kurashiphoto #vtdr_body #more {
		height: 54px;
		font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		font-size: 20px;
	}
	#vtdr_body #vtdr_modal_inner {
		padding: 50px;
	}
	#vtdr_body #vtdr_modal_product_thumbimg li {
		width: 50%;
	}
}


.xacount {
  color: #000000;
  max-width: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 30px auto 0;
  padding: 5px 4%;
}
.xacount:hover {
  text-decoration: none;
  opacity: .5;
}
.xacount_duskin {
  flex-basis: 48px;
	max-width: 48px;
  padding: 0 2px 5px;
  position: relative;
  z-index: 1;
}
.xacount_duskin::after {
  content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
  z-index: -1;
	transform: translate(-50%, -50%);
	width: 52px;
	height: 52px;
  border: 1px solid #A9A9A9;
  border-radius: 50%;
}
.xacount_txt {
  flex-basis: calc(70% - 48px);
	max-width: calc(70% - 48px);
  font-size: clamp(11.0929px, calc(100vw * 13 / 375), 17.3329px);
  font-weight: bold;
  text-align: center;
  padding: 0 2%;
}
.xacount_txt span {
  font-size: clamp(12.7995px, calc(100vw * 15 / 375), 19.9995px);
}
.xacount_btn {
  flex-basis: 30%;
	max-width: 30%;
  font-size: clamp(12.7995px, calc(100vw * 15 / 375), 19.9995px);
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  border: 1px solid #A9A9A9;
  border-radius: 100px;
  padding: 7px 0;
}
@media screen and (min-width: 768px) {
  .xacount {
    padding: 10px 0;
/*    background-color: #e6e4dd;*/
  }
  .xacount_duskin {
    flex-basis: 70px;
    max-width: 70px;
    padding: 0 5px 5px;
  }
  .xacount_duskin::after {
    width: 70px;
    height: 70px;
  }
  .xacount_txt {
    flex-basis: calc(66% - 70px);
	  max-width: calc(66% - 70px);
    font-size: 16px;
    line-height: 1.5;
    padding: 0 5px;
  }
  .xacount_txt span {
    font-size: 20px;
  }
  .xacount_btn {
    flex-basis: 34%;
	  max-width: 34%;
    font-size: 15px;
    padding: 14px 0;
  }
}