@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://use.typekit.net/mzz3tbg.css');

/* 0928dual */
.office-inner{
    text-align: center;
    position: relative;
    max-width: 1358px;
    margin: 0 auto;
}
.p-whitening{
    margin-top: 32px;
}
@media (max-width: 767px){
    .p-whitening{
        margin-top: 16px;
    }
}

.p-whitening > .bnr_bridal {
	aspect-ratio: 732 / 284;
	margin: 0 auto;
	padding-top: 0;
}
@media (width > 768px) {
	.p-whitening > .bnr_bridal {
		max-width: 800px;
		aspect-ratio: 1600 / 470;
	}
}
.bnr_bridal img {
	width: 100%;
}

.dual{
    background-color: #c2e0f6;
    width: 100%;
  }
  .dual-inner{
    text-align: center;
    position: relative;
    max-width: 1358px;
    margin: 0 auto;
  }
  .dual-img{
    max-width: 120px;
    width: 100%;
    height: auto;
  }
  @media screen and (max-width:600px) {
    .dual-img{
    max-width: 100px;
  }
  }
  @media screen and (max-width:400px) {
    .dual-img{
    max-width: 75px;
  }
  }
  @media screen and (max-width:380px) {
    .dual-img{
    max-width: 70px;
  }
  }
  .dual-p__under{
    color: #9E7123;
    font-size: 14px;
    margin-top: 16px;
  }
  .home-wrap__flex{
    display: flex;
    justify-content: center;
  }
  .dual-wrap{
    margin-left: 30px;
  }
  .home-wrap{
    position: absolute;
    top:50%;
    left:40%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
  }
  @media screen and (max-width:767px) {
    .home-wrap{
    left:33%;
  }
  }
  @media screen and (max-width:550px) {
    .home-wrap{
    left:33%;
  }
  }
  .dual-li{
    display: flex;
    padding-left: 16px;
  }
  @media screen and (max-width:767px) {
    .dual-li{
        padding-left: 0px;
      }
  }
  .dual-span{
    display: flex;
    align-items: center;
    /* padding-right:16px; */
  }
  @media screen and (max-width:500px) {
    .dual-span{
    padding: 0 6px;
  }
  }
  @media screen and (max-width:450px) {
    .dual-span{
    padding: 0 3px;
  }
  }
  .dual-li-img{
    max-width: 30px;
    width: 100%;
    height: auto;
  }
  @media screen and (max-width:600px) {
    .dual-li-img{
      padding: 3px;
      max-width: 20px;
      }
  }
  .blue-fv__dual{
    font-size: 20px;
    color:#004ea2;
    font-weight: bold;
    text-align: center;
    user-select: none;
  }
  @media screen and (max-width:767px) {
    .blue-fv__dual{
    font-size: 16px;
  }
  }
  @media screen and (max-width:600px) {
    .blue-fv__dual{
    font-size: 14px;
  }
  } 
  @media screen and (max-width:400px) {
    .blue-fv__dual{
    font-size: 11.5px;
  }
  } 
  @media screen and (max-width:38px) {
    .blue-fv__dual{
    font-size: 11px;
  }
  } 
  .blue-fv-span__dual{
    font-size: 34px;
    color:#004ea2;
    font-weight: bold;
    line-height: 42px;
  }
  @media screen and (max-width:600px) {
    .blue-fv-span__dual{
    font-size: 24px;
    line-height: 32px;
  } 
  }
  @media screen and (max-width:400px) {
    .blue-fv-span__dual{
    font-size: 20px;
    line-height: 25px;
  } 
  }
  .home-img{
    display: block;
    max-width: 1358px;
  }
  @media screen and (max-width:767px) {
    .home-img{
    display:none;
  }
  }
  .home-img-sp{
    display: none;
  }
  @media screen and (max-width:767px) {
    .home-img-sp{
    display:block;
  }
  }
  .home-ml{
    margin-left: 16px;
  }
  @media screen and (max-width:500px) {
    .home-ml{
    margin-left: 10px;
  }
  }
  .home-mt{
    margin-top: 16px;
  }
  @media screen and (max-width:450px) {
    .home-mt{
    margin-top: 14px;
  }
  }
  .price_mv_note{
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
  }
  @media screen and (max-width:767px) {
    .price_mv_note{
      padding: 2px 0.75em;
  }
  }
.dual-p{
    color: #9E7123;
    margin-top: 32px;
    font-size: 10px;
    text-align: center !important;
}   
.dual-p-sp{
    color: #9E7123;
    margin-top: 40px;
    padding-left: 20px;
    font-size: 10px;
}
@media screen and (max-width:767px) {
    .dual-p-sp{
        padding-left: 16px;
    }
  }
  @media screen and (max-width:500px) {
    .dual-p-sp{
        padding-left: 6px;
        margin-top: 20px;
        font-size: 8px;
    }
  }
  @media screen and (max-width:400px) {
    .dual-p-sp{
        margin-top: 16px;
    }
  }
.dual-flex{
    display: flex;
}
@media screen and (max-width:767px) {
    .dual-flex{
        display: block;
    }
  }
  /* /0928dual */

#dualMv {
	/*
		色
	*/
	/* color */
	--cl-brand01: #004EA2;
	--cl-brand02: #007BC7;
	--cl-brand03: #EC6B81;
	
	--cl-brand01_20: rgb(from var(--cl-brand01) r g b / 0.2);
	--cl-brand01_65: rgb(from var(--cl-brand01) r g b / 0.65);
	
	--cl-gry01: #888888;
	--cl-gry02: #D9D9D9;
	
	--cl-gld01: #B67715;
	--cl-yel01: #A37F00;
	
	--cl-marker01: #FDFF95;
	
	--cl-bg01: #F7FAFF;
	--cl-bg02: #E9F3FF;
	--cl-bg03: #F6F6F1;
	--cl-bgPopup: rgb(from var(--cl-brand01) r g b / 0.5);
	
	--cl-line: #06C755;
	--cl-rakuten: #BF0000;
	--cl-yahoo: #FF0033;
	
	/* linear-gradient */
	--lg-blu01: linear-gradient(45deg, var(--cl-brand01), #009BFA);
	--lg-blu02: linear-gradient(to right, var(--cl-brand01), #379ACC);
	--lg-blu03: linear-gradient(to right, #0251D3, #2CB5FF 30%, #9FFCF9 70%, #D7FFF4);
	--lg-blu04: linear-gradient(45deg, #DCF0FF, #FFFFFF);
	
	--lg-pnk01: linear-gradient(45deg, #FF4767, #FF8C72);
	
	--lg-gld01: linear-gradient(35deg, var(--cl-gld01), #FBDB78 50%, var(--cl-gld01));
	
	
	/*
		フォント
	*/
	/* font-family */
	--ff-basic: 'Noto Sans JP', sans-serif;
	--ff-en: 'futura-pt', 'Noto Sans JP', sans-serif;
	
	/* font-size */
	--fs-basicNum: 14;
	--fs-smallerNum: 12;
	--fs-smallNum: 10;
	--fs-bigNum: 19;
	
	@media (width > 768px) {
		--fs-basicNum: 16;
		--fs-smallerNum: 14;
		--fs-smallNum: 12;
		--fs-bigNum: 28;
	}
	
	--fs-basic: calc(var(--fs-basicNum) * 1px);
	--fs-smaller: calc(var(--fs-smallerNum) * 1px);
	--fs-small: calc(var(--fs-smallNum) * 1px);
	--fs-big: calc(var(--fs-bigNum) * 1px);
	
	/* font-weight */
	--fw-regular: 400;
	--fw-book: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	
	/* letter-spacing */
	--ls-basic: 0.05em;
	
	/* line-height */
	--lh-basic: 2.0;
	--lh-small: 1.3;
	--lh-smaller: 1.8;
	
	
	/*
		幅・余白
	*/
	/* width */
	--w-design: 414;
	
	@media (width > 768px) {
		--w-design: 1440;
		
		--w-contentsNum: 1000;
		--w-contentsNarrowNum: 800;
		--w-contentsWideNum: 1200;
		
		--w-contents: calc(var(--w-contentsNum) * 1px);
		--w-contentsNarrow: calc(var(--w-contentsNarrowNum) * 1px);
		--w-contentsWide: calc(var(--w-contentsWideNum) * 1px);
	}
	
	/* padding */
	--pd-h: 5dvw;
	
	--pd-vSec: 100px;
	--pd-vGroup: 40px;
	--pd-vItem: 24px;
	--pd-vSmall: 10px;
	
	@media (width > 768px) {
		--pd-hNum: 50;
		
		--pd-h: calc(var(--pd-hNum) * 1px);
	
		--pd-vSec: 120px;
		--pd-vGroup: 60px;
		--pd-vItem: 40px;
		--pd-vSmall: 12px;
	}
	
	
	/*
		装飾
	*/
	/* border-radius */
	--br-basic: 12px;
	--br-small: 6px;
	
	@media (width > 768px) {
		--br-basic: 16px;
		--br-small: 8px;
	}
	
	/* box-shadow */
	--bs-basic: 0 0 20px 0 var(--cl-brand01_20);
	--bs-narrow: 0 0 6px 0 var(--cl-brand01_65);
	
	/* text-shadow */
	--ts-basic: 0 0 6px var(--cl-brand01_65);
	
	/* transition */
	--tr-basic: all 300ms ease;
	
	--tr-opacity: 0.7;
	
	
	margin: 0;
	padding: 0;
	color: var(--cl-brand01);
	font-family: var(--ff-basic);
	font-size: var(--fs-basic);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-basic);
	line-height: var(--lh-basic);
	
	* {
		font: inherit;
		letter-spacing: var(--ls-basic);
	}
	
	/* 画像 */
	img {
		display: block;
		width: 100%;
		height: auto;
	}
	
	
	@media (width <= 768px) {
		.pcOnly {
			display: none;
		}
	}
	
	@media (width > 768px) {
		.spOnly {
			display: none;
		}
	}
	
	
	.contentsInner {
		width: 100%;
		padding: 0 var(--pd-h);

		@media (width > 768px) {
			--baseWidthNum: var(--w-contentsNum);
			--w-contentsInner: calc(var(--baseWidthNum) + var(--pd-hNum) * 2);
			
			max-width: calc(var(--w-contentsInner) * 1px);
			margin: 0 auto;
			
			&.wide {
				--baseWidthNum: var(--w-contentsWideNum);
			}
		}
	}
	
	
	--w: 372;
	--h: 400;

	@media (width > 768px) {
		--w: 1200;
		--h: 550;
	}
	
	.mv {
		position: relative;
		aspect-ratio: var(--w) / var(--h);
		background: url(/service/whitening/dual/images/img_dw_fv_sp.webp) no-repeat center / cover;
		border-radius: var(--br-basic);
		overflow: hidden;
		
		@media (width > 768px) {
			background-image: url(/service/whitening/dual/images/img_dw_fv_pc.webp);
		}
	}
	
	.textContainer {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		white-space: nowrap;
		
		@media (width > 768px) {
			display: flex;
			align-items: flex-start;
			gap: clamp(33px, calc(40 / var(--w-contentsWideNum) * 100dvw), 40px);
			left: calc(101 / var(--w) * 100%);
			top: calc(192 / var(--h) * 100%);
			width: auto;
			height: auto;
		}
	}
	
	.titleArea {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(40 / var(--w-design) * 100dvw);
		position: absolute;
		left: 50%;
		top: calc(40 / var(--h) * 100%);
		width: calc((1 - 22 * 2 / var(--w)) * 100%);
		translate: -50% 0;
		
		@media (width > 768px) {
			flex: 0 0 auto;
			order: 1;
			gap: clamp(25px, calc(30 / var(--w-contentsWideNum) * 100dvw), 30px);
			position: static;
			width: fit-content;
			translate: none;
		}
		
		.title {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-weight: var(--fw-medium);
			
			.pre {
				font-size: calc(var(--fs-basicNum) / var(--w-design) * 100dvw);
				
				@media (width > 768px) {
					font-size: clamp(13px, calc(var(--fs-basicNum) / var(--w-contentsWideNum) * 100dvw), var(--fs-basic));
				}
			}
			
			.main {
				font-size: calc(var(--fs-bigNum) / var(--w-design) * 100dvw);
				line-height: var(--lh-smaller);
				
				@media (width > 768px) {
					font-size: clamp(23px, calc(var(--fs-bigNum) / var(--w-contentsWideNum) * 100dvw), var(--fs-big));
				}
			}
		}
		
		.featuresList {
			width: 100%;
			color: var(--cl-brand02);
			font-size: calc(var(--fs-basicNum) / var(--w-design) * 100dvw);
			font-weight: var(--fw-medium);
			line-height: 1.2;

			@media (width > 768px) {
				width: fit-content;
				font-size: clamp(11px, calc(var(--fs-smallerNum) / var(--w-contentsWideNum) * 100dvw), var(--fs-smaller));
				line-height: var(--lh-small);
			}
		}
		
		.feature {
			display: flex;
			align-items: center;
			gap: calc(10 / var(--w-design) * 100dvw);
			
			@media (width > 768px) {
				gap: clamp(8px, calc(10 / var(--w-contentsWideNum) * 100dvw), 10px);
			}
			
			&:nth-child(n+2) {
				margin-top: calc(8 / var(--w-design) * 100dvw);
			
				@media (width > 768px) {
					margin-top: clamp(5px, calc(6 / var(--w-contentsWideNum) * 100dvw), 6px);
				}
			}
			
			&::before {
				content: '';
				flex: 0 0 auto;
				display: block;
				width: calc(16 / var(--w-design) * 100dvw);
				aspect-ratio: 1;
				background: url("/common/images/ico_check.svg") no-repeat center / contain;
			
				@media (width > 768px) {
					width: clamp(13px, calc(16 / var(--w-contentsWideNum) * 100dvw), 16px);
				}
			}
		}
	}
	
	.casesNum {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: calc(12 / var(--w) * 100%);
		bottom: calc(52 / var(--h) * 100%);
		color: var(--cl-gld01);
		
		@media (width > 768px) {
			flex: 0 0 auto;
			position: static;
		}
		
		&::before,
		&::after {
			content: '';
			flex: 0 0 auto;
			display: block;
			width: calc(36 / var(--w-design) * 100dvw);
			aspect-ratio: 35 / 79;
			background: url("/common/images/img_leaves.svg") no-repeat center / contain;

			@media (width > 768px) {
				width: clamp(38px, calc(42 / var(--w-contentsWideNum) * 100dvw), 42px);
			}
		}
		
		&::after {
			scale: -1 1;
			
			@media (width > 768px) {
				margin-left: 2%;
			}
		}
		
		.textArea {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.title {
			margin-top: 5%;
			font-size: calc(var(--fs-basicNum) / var(--w-design) * 100dvw);
			font-weight: var(--fw-medium);
			line-height: var(--lh-basic);

			@media (width > 768px) {
				font-size: clamp(15px, calc(18 / var(--w-contentsWideNum) * 100dvw), 18px);
			}
		}

		.casesText {
			position: relative;
			margin-top: -6%;
			font-family: var(--ff-en);
			font-weight: var(--fw-medium);
			line-height: var(--lh-small);

			@media (width > 768px) {
				margin-top: -4%;
			}

			> * {
				display: inline-block;
				color: rgb(from #fdb74d r g b / 0.3);
				text-shadow: 0 -2px 0 #895a10;
			}

			.num {
				font-size: calc(50 / var(--w-design) * 100dvw);
				letter-spacing: 0;

				@media (width > 768px) {
					margin-right: 0.04em;
					font-size: clamp(50px, calc(60 / var(--w-contentsWideNum) * 100dvw), 60px);
					letter-spacing: -0.04em;
				}
			}

			.unit {
				font-size: calc(24 / var(--w-design) * 100dvw);

				@media (width > 768px) {
					font-size: clamp(23px, calc(var(--fs-bigNum) / var(--w-contentsWideNum) * 100dvw), var(--fs-big));
				}
			}

			.post {
				font-size: calc(18 / var(--w-design) * 100dvw);

				@media (width > 768px) {
					margin-left: -0.05em;
					font-size: clamp(18px, calc(22 / var(--w-contentsWideNum) * 100dvw), 22px);
				}
			}

			.note {
				font-size: calc(var(--fs-smallNum) / var(--w-design) * 100dvw);
				font-weight: var(--fw-bold);
				translate: 0 -100%;

				@media (width > 768px) {
					position: absolute;
					right: -1%;
					top: 23%;
					font-size: clamp(12px, calc(15 / var(--w-contentsWideNum) * 100dvw), 15);
					translate: none;
				}
			}
		}
	}
	
	.noteDetail {
		margin-top: var(--pd-vSmall);
		color: var(--cl-gry01);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}
}