@charset "utf-8";


/* -------------------------------------------------------------
    MV
-------------------------------------------------------------- */
#maruwash .underttl-area .img-wrap img {
	object-position: 0 45%;
}

@media screen and (max-width: 768px) {
	.underttl-area .deco-img {
        bottom: 120px;
        right: 8%;
    }
	.underttl-area .img-wrap img {
		object-position: 0 20%;
	}
}
	
/* -------------------------------------------------------------
    泡のかざり
-------------------------------------------------------------- */
.message-about-wrap {
	position: relative;
}

.message-about-wrap .deco-img {
	position: absolute;
}

.message-about-wrap .deco-img.deco01 {
	top: -130px;
	left: -100px;
}

.message-about-wrap .deco-img.deco02 {
	top: 13%;
	right: 120px;
	z-index: -1;
}
.message-about-wrap .deco-img.deco03 {
	top: 13%;
	right: -100px;
	z-index: -1;
}

.fuwa-target {
  display: block;
  height: auto;
}

/* Animation */
.fuwa-target {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}


@media screen and (max-width: 768px) {
	.message-about-wrap .deco-img.deco01 {
		top: -70px;
		left: -30px;
	}
	.message-about-wrap .deco-img.deco01 img {
		width: 100px
	}

	.message-about-wrap .deco-img.deco02 {
		top: 28%;
		right: 40px;
	}
	.message-about-wrap .deco-img.deco02 img {
		width: 50px
	}
	.message-about-wrap .deco-img.deco03 {
		top: 28%;
		right: -30px;
	}
	.message-about-wrap .deco-img.deco03 img {
		width: 100px
	}


}

/* -------------------------------------------------------------
    メッセージ
-------------------------------------------------------------- */
/*テキスト*/
.top-message-area {
	text-align: center;
	margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
	.top-message-area {
		margin-bottom: 40px;
	}
	
	.top-message-area .txt {
		text-align: left;
	}

}
	


/* -------------------------------------------------------------
    マルウォッシュとは
-------------------------------------------------------------- */
.maruwash-about-area {
	display: flex;
	align-items: center;
	gap: 90px;	
	margin-bottom: 80px;
}

.maruwash-about-area .img-wrap {
	border-radius: 30px;
	overflow: hidden;
}

.maruwash-about-area .img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


@media screen and (max-width: 768px) {
	.maruwash-about-area {
		gap: 20px;
		flex-direction: column-reverse;
		margin-bottom: 40px;
	}
	
	.maruwash-about-area .img-wrap {
		height: 200px;
	}
	
}

/* -------------------------------------------------------------
    キャンペーン
-------------------------------------------------------------- */
.maruwash-campaign-area {
	background: url("../img/yellow-slash-bg.png") #fff99c no-repeat center / cover;
	padding: 60px;
	border-radius: 100px;
	margin-bottom: 80px;
}

.maruwash-campaign-area .ttt-area .ttl {
	margin: 0 auto 40px;
	text-align: center;
	z-index: -1;
}


/*概要*/
.maruwash-campaign-area .overview-service-wrap {
    max-width: 1200px;
	margin: 0 auto;
}

.maruwash-campaign-area .overview {
    background-color: #fff;
	border-radius: 30px;
	border: solid 3px #00AEEF;
	padding: 20px 40px;
	margin-bottom: 20px;
}

.maruwash-campaign-area table {
    width: 100%;
    border-collapse: collapse;
}

.maruwash-campaign-area table tbody tr {
    border-bottom: solid 1px #00AEEF;
	display: flex;
    align-items: center;
}
.maruwash-campaign-area table tbody tr:last-child {
    border-bottom: none;
}

.maruwash-campaign-area table tbody th {
    font-size: 1.8rem;
    width: 250px;
    text-align: left;
    padding: 25px 25px 25px;
    display: flex;
    align-items: center;
	position: relative;
}
.maruwash-campaign-area table tbody th:first-child {
    font-size: 1.7rem;
}

.maruwash-campaign-area table tbody tr th::before {
    content: "\f007";
    font: 900 1.6rem / 1 'Font Awesome 5 Free';
    position: absolute;
    color: #0F75BC;
    margin-right: 5px;
	left: 0;
}
.maruwash-campaign-area table tbody tr.calendar th::before {
    content: "\f073";
}
.maruwash-campaign-area table tbody tr.option th::before {
    content: "\f06b";
}

.maruwash-campaign-area table tbody td {
    font-size: 1.8rem;
    line-height: 1.6;
    font-weight: 500;
    padding: 25px 25px 25px 0;
    width: 100%;
}

.maruwash-campaign-area .attend {
	text-align: right;
	font-size: 1.2rem;
}

/*サービス内容*/
.maruwash-campaign-area .service {
    display: flex;
	gap: 20px;
}

.maruwash-campaign-area .service li {
    background-color: #fff;
	border-radius: 30px;
	border: solid 3px #00AEEF;
	padding: 20px 40px;
	position: relative;
}

.maruwash-campaign-area .service li .ttl {
    font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 20px;
	width: 80%;
}

.maruwash-campaign-area .service li .catch {
    font-size: 2rem;
}

/*元料金*/
.price-area {
	padding: 20px;
	background-color: #FFFB8B;
	text-align: center;
	position: absolute;
	width: 100px;
	height: 100px;
	top: 10px;
	right: 10px;
	border-radius: 50px;
	display: flex;
    align-items: center;
    justify-content: center;
}

.price-area .txt {
	font-size: 1.2rem;
	font-weight: 700;
	color: #0F75BC;
}

.price-area .txt span {
	font-size: 1.6rem;
	line-height: 1;
}

/*LINEボタン*/
.cmn-btn.line {
    width: 320px;
}

.cmn-btn.line .cmn-btn-link {
    border: #06C655 2px solid;
}

.cmn-btn.line .cmn-btn-txt {
    color: #06C655;
}
.cmn-btn.line:hover .cmn-btn-txt {
    color: #fff;
}
.cmn-btn.line a {
    z-index: 5;
}

.cmn-btn.line a::before {
    color: #06C655;
}
.cmn-btn.line:hover a::before {
    color: #fff;
}

.cmn-btn.line img {
    border: #06C655 2px solid;
	border-radius: 30px;
	position: absolute;
	left: 10px;
}

.cmn-btn.line .cmn-btn-link::after {
    background: #06C655;
	z-index: -1;
}

@media screen and (max-width: 768px) {
	.maruwash-campaign-area {
		background: url("../img/yellow-slash-bg.png")no-repeat center / cover;
		padding: 40px 20px;
		border-radius: 50px;
		margin-bottom: 40px;
	}

	.maruwash-campaign-area .ttt-area .ttl {
		margin: 0 auto 20px;
		text-align: center;
	}


	/*概要*/
	.maruwash-campaign-area .overview-service-wrap {
		max-width: 100%;
		margin: 0 auto;
	}
	
	.maruwash-campaign-area .overview {
		border-radius: 20px;
		padding: 5px 20px 10px;
		margin-bottom: 10px;
	}

	.maruwash-campaign-area table {
		width: 100%;
		border-collapse: collapse;
	}

	.maruwash-campaign-area table tbody tr {
		border-bottom: solid 1px #00AEEF;
		display: flex;
		align-items: center;
	}
	.maruwash-campaign-area table tbody tr:last-child {
		border-bottom: none;
	}

	.maruwash-campaign-area table tbody th {
		font-size: 1.6rem;
		width: 150px;
		text-align: left;
		padding: 15px 5px 15px 20px;
		display: flex;
		align-items: center;
		position: relative;
	}
	.maruwash-campaign-area table tbody th:first-child {
		font-size: 1.6rem;
	}

	.maruwash-campaign-area table tbody tr th::before {
		font: 900 1.5rem / 1 'Font Awesome 5 Free';
	}

	.maruwash-campaign-area table tbody td {
		font-size: 1.6rem;
		line-height: 1.5;
		padding: 15px 0px 15px 0;
	}

	.maruwash-campaign-area .attend {
		text-align: left;
		font-size: 1.2rem;
	}

	/*サービス内容*/
	.maruwash-campaign-area .service {
		flex-direction: column;
		gap: 10px;
	}

	.maruwash-campaign-area .service li {
		border-radius: 20px;
		padding: 20px 20px;
	}

	.maruwash-campaign-area .service li .ttl {
		font-size: 1.9rem;
		margin-bottom: 20px;
		width: 70%;
	}

	.maruwash-campaign-area .service li .catch {
		font-size: 1.7rem;
	}

	/*元料金*/
	.price-area {
		padding: 20px;
		width: 80px;
		height: 80px;
	}

	.price-area .txt {
		font-size: 1rem;
	}

	.price-area .txt span {
		font-size: 1.2rem;
		line-height: 1;
	}

	/*LINEボタン*/
	.cmn-btn.line {
		margin-top: 20px;
	}
	.cmn-btn.line {
		width: 100%;
	}
}



/* -------------------------------------------------------------
    4つの特徴
-------------------------------------------------------------- */
.maruwash-feature-area {
	margin-bottom: 80px;
}

.maruwash-feature-area .feature-list {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

.maruwash-feature-area .feature-list li {
	width: calc(100% / 4 - 20px);
	background-color: #EFF4FA;
	border-radius: 30px;
	padding: 30px;
	display: flex;
    flex-direction: column;
    align-items: center;
}

.maruwash-feature-area .feature-list li .icon-area {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-color: #fff;
    position: relative;
	margin-bottom: 20px;
}

.maruwash-feature-area .feature-list li .icon-area img {
    max-width: 100px;
    max-height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.maruwash-feature-area .feature-list li .ttl {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 15px;
}


@media screen and (max-width: 1400px) {
	
}

@media screen and (max-width: 768px) {
	.maruwash-feature-area {
		margin-bottom: 40px;
	}

	.maruwash-feature-area .feature-list {
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 20px;
		gap: 5px 5px;
	}

	.maruwash-feature-area .feature-list li {
		width: calc(100% / 2 - 5px);
		border-radius: 30px;
		padding: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.maruwash-feature-area .feature-list li .icon-area {
		width: 100px;
		height: 100px;
		margin-bottom: 10px;
	}

	.maruwash-feature-area .feature-list li .icon-area img {
		max-width: 75px;
		max-height: 75px;
	}

	.maruwash-feature-area .feature-list li .ttl {
		font-size: 1.8rem;
		margin-bottom: 10px;
	}
}




/* -------------------------------------------------------------
    料金表
-------------------------------------------------------------- */
.maruwash-price-area {
	margin-bottom: 100px;
}

.maruwash-price-area .table01 {
	margin: 40px auto 50px;
}

.car-wash-table {
	width: 100%;
	border-collapse: collapse;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	overflow: hidden;
}

.car-wash-table thead {
	background-color: #00B3F0;
	color: #fff;
	text-align: left;
}

.car-wash-table .table-header {
	padding: 20px;
}

.car-wash-table .table-header .title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-right: 20px;
}

.car-wash-table td {
	padding: 20px;
	background-color: #f7fafe;
	border-bottom: 1px solid #e0e0e0;
	vertical-align: top;
}

.car-wash-table td:last-child {
	font-size: 2rem;
	text-align: right;
	font-weight: 700;
}

.car-wash-table td span {
	font-size: 1.2rem;
	margin-left: 30px;
}


.car-wash-table tbody tr:last-child td {
	border-bottom: none;
}

.car-wash-table tbody tr:nth-child(odd) td {
  background-color: #f7fafe; /* 明るい水色（そのまま） */
}

.car-wash-table tbody tr:nth-child(even) td {
  background-color: #ffffff; /* 白 */
}


@media screen and (max-width: 1400px) {
	
}

@media screen and (max-width: 768px) {
	.maruwash-price-area {
		margin-bottom: 40px;
	}

	.maruwash-price-area .table01 {
		margin: 20px auto;
	}

	.car-wash-table {
		width: 100%;
		border-collapse: collapse;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
		border-radius: 8px;
		overflow: hidden;
	}

	.car-wash-table thead {
	}

	.car-wash-table .table-header {
		padding: 15px;
	}

	.car-wash-table .table-header .title {
		font-size: 2rem;
		margin-right: 0px;
		line-height: 1.4;
	}
	.car-wash-table .table-header .subtitle {
		font-size: 1.3rem;
	}
	
	.car-wash-table tr {
		line-height: 1.3;
	}

	.car-wash-table td {
		padding: 15px;
		width: 70%;
	}

	.car-wash-table td:last-child {
		font-size: 1.8rem;
		text-align: right;
		font-weight: 700;
		vertical-align: middle;
	}

	.car-wash-table td span {
		font-size: 1rem;
		margin-left: 0px;
	}

}



/* -------------------------------------------------------------
    お客様の声
-------------------------------------------------------------- */
.maruwash-voice-area {
	background: url("../img/blue_bg01.png") no-repeat top center / cover;
	border-radius: 100px;
	padding: 80px 0;
	margin-bottom: 80px;
}

.maruwash-voice-area .voice-list {
	display: flex;
	justify-content: center;
	gap:20px;
}

.maruwash-voice-area .voice-list li {
	background-color: #fff;
	border-radius: 30px;
	padding: 30px 30px 50px;
	width: 580px;
	position: relative;
}

.maruwash-voice-area .voice-list li .img-wrap {
	width: 100%;
	height: 250px;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 30px;
}

.maruwash-voice-area .voice-list li .img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.maruwash-voice-area .voice-list li .catch {
	font-size: 2rem;
	text-align: center;
}

.maruwash-voice-area .voice-list li .name {
	font-size: 1.4rem;
	position: absolute;
	bottom: 20px;
	right: 30px;
}

@media screen and (max-width: 1400px) {
	
}

@media screen and (max-width: 768px) {
	.maruwash-voice-area {
		border-radius: 50px;
		padding: 40px 20px;
		margin-bottom: 40px;
	}

	.maruwash-voice-area .voice-list {
		display: flex;
		justify-content: center;
		flex-direction: column;
		gap:10px;
	}

	.maruwash-voice-area .voice-list li {
		border-radius: 30px;
		padding: 20px 20px 40px;
		width: 100%;
	}

	.maruwash-voice-area .voice-list li .img-wrap {
		width: 100%;
		height: 150px;
		border-radius: 20px;
		overflow: hidden;
		margin-bottom: 20px;
	}

	.maruwash-voice-area .voice-list li .img-wrap img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.maruwash-voice-area .voice-list li .catch {
		font-size: 1.8rem;
	}

	.maruwash-voice-area .voice-list li .name {
		font-size: 1.2rem;
		bottom: 10px;
		right: 20px;
	}
}



/* -------------------------------------------------------------
    流れ
-------------------------------------------------------------- */
.flow-area .flow-list {
	margin-top: 40px;
	position: relative;
}

@media screen and (max-width: 768px) {
	
	.flow-area .flow-list {
		margin-top: 20px;
	}

}


/* -------------------------------------------------------------
    車サイズ確認
-------------------------------------------------------------- */
.size-area {
	margin: 0 auto 80px;
}

.size-area .select-wrap {
	display: flex;
	gap: 40px;
	justify-content: center;
	align-items: center;
	padding: 20px 0 0;
}
.size-area select {
	width: 300px;
	max-width: 100%;
	padding: 15px;
	margin: 10px;
	font-size: 1.6rem;
	border: 2px solid #333;
	border-radius: 5px;
	background: #fff;
	text-align: center;
	font-weight: 500;
}
.size-area #result-wrapper {
	position: relative;
	/*min-height: 100px;*/
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}
.size-area #result-text {
	font-size: 3.4rem;
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
	line-height: 1.4;
}
.size-area #result {
	font-size: 3.4rem;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
}
.size-area .size-highlight {
	font-size: 4rem;
	font-weight: bold;
	color: #00AEEF;
}

@media screen and (max-width: 768px) {
	
	.size-area {
		margin: 50px auto 30px;
	}

	.size-area .select-wrap {
		display: block;
		padding: 10px 0 0;
	}
	.size-area .select-wrap label {
		display: block;
		padding: 0 0 10px;
	}
	.size-area select {
		width: 100%;
		max-width: 100%;
		padding: 15px;
		margin: 0 0 20px;
		text-align: left;
	}
	.size-area #result-wrapper {
		margin-top: 0;
	}
	.size-area #result-text {
		font-size: 2.2rem;
		margin-bottom: 10px;
	}
	.size-area #result {
		font-size: 2.2rem;
	}
	.size-area .size-highlight {
		font-size: 2.8rem;
	}

}


/* -------------------------------------------------------------
    洗車実績
-------------------------------------------------------------- */
.gallery-area  {
    background: url("../img/blue_bg01.png") no-repeat top center / cover;
	border-radius: 100px;
	padding: 80px 0;
	margin-bottom: 80px;
}

.gallery-area .gallary {
    display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.gallery-area .gallary li {
    width: calc((100% - 60px) / 4);
    margin: 40px 0 0;
}

.gallery-area .gallary a {
    position: relative;
    display: block;
    width: 100%;
}

.gallery-area .gallary .photo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
	overflow: hidden;
    width: 100%;
    height: 335px;
}

.gallery-area .gallary .photo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: unset;
}

.gallery-area .gallary i {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    width: 30px;
    height: 30px;
    color: #fff;
    background: #0f75bc;
    align-items: center;
    justify-content: center;
}


.gallery-area .photo-caption {
	font-size: 2rem;
	font-weight: 700;
	color: #0f75bc;
	margin-top: 15px;
}


@media screen and (max-width: 1400px) {
	
}

@media screen and (max-width: 768px) {
	.gallery-area  {
		border-radius: 50px;
		padding: 40px 0;
		margin-bottom: 40px;
	}

	.gallery-area .gallary {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.gallery-area .gallary li {
		width: calc((100% - 10px) / 2);
		margin: 10px 0 0;
	}
	
	.gallery-area .gallary .photo-item {
		width: 100%;
		height: 150px;
	}

	.gallery-area .photo-caption {
		font-size: 1.6rem;
		margin-top: 10px;
	}
}