/*================================
-250304 add　美容点滴療法ページ
=================================*/


.h2-wt {color: #fff; position: absolute; display: inline-block; bottom: 4vw; left: 19vw; font-size: 2vw; font-family: "Noto Serif JP", serif; font-weight: 400;}

.h2-wt:after {content: ''; position: absolute; left: -7vw; width: 15.5vw; height: 1px; background-color: #fff; bottom: 0; }

.h2-bk { color:#5D5D5D; position: absolute; display: inline-block; bottom: 4vw; right: 23vw; font-size: 2vw; font-family: "Noto Serif JP", serif; font-weight: 400;}

.h2-bk span {font-size: 1.5vw}

.h2-bk:after {content: ''; position: absolute; bottom: 0; right: -1.5vw; width: 15.5vw; height: 1px; background-color: #5D5D5D;}


.beauty-injection {font-family: "Noto Serif JP", serif; margin-top: 9px; width: 680px; float: right;}

.page_mv {position: relative; width: 100%; height: auto;}
	
.h2-beauty-injection { width: 100%; position: absolute; font-weight: bold; color: #fff; font-size: 2.5vw; left: 50%; top: 8vw; text-align: center; transform: translate(-50%, -50%); text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4); font-family: "Noto Serif JP", serif;}

.dot-gr {color: #5CC2B7; text-align: center; width: 650px; font-size: 30px; margin-top: 0;}

.dot-gr:after {content: ''; display: block; width: 280px; margin: 0 auto 0;  background-size: 20px 20px; background-repeat: repeat-x; padding-bottom: 40px; background-image: radial-gradient(circle, #5CC2B7 17%, transparent 17%);}

.txt01 {width: 670px; text-align: left; margin: 0 auto 50px;}

.txt01:last-child {margin:  20px auto 0;}

.txt02 { color: #fff; width: 620px; margin: auto; margin: 10px auto 70px;}

.txt03 { color: #fff; width: 620px; margin: 25px auto 55px;}

.txt04 {margin: 0 auto 40px; width: 560px;}

.dot-wt {color: #fff; text-align: center; margin: 30px auto 0; font-size: 20px;}

.dot-wt:after { content: ''; display: block; width: 200px; margin: 0 auto;  background-size: 20px 20px; background-repeat: repeat-x; padding-bottom: 20px; background-image: radial-gradient(circle, #fff 17%, transparent 17%);}

.bg-gr {background-color: #5CC2B7; position: relative; width: 660px; padding: 100px 10px 30px; margin: 150px auto 0;}

.bg-gr:last-of-type {margin: 80px auto; padding: 10px;}

.h2-img {background: url(../img/common/shiratama_pc.webp) no-repeat; width: 650px; background-size: 100%; background-position: center; position: absolute; height: 240px; top: 0; left: 50%; transform: translate(-50%, -50%);}

.h2-img h2 {color: #fff; font-weight: bold; text-shadow: 0 0 8px rgba(0, 0, 0, 0.5); position: absolute; top: 60px; left: 30px; font-size: 40px;}

.h2-img p { color: #fff; font-weight: bold; position: absolute; top: 130px; left: 30px; font-size: 20px;}

.h2-img02 {background: url(../img/common/vitamin_pc.webp) no-repeat; background-size: 100%; width: 650px; background-position: center; position: absolute; height: 240px; top: 0; left: 50%; transform: translate(-50%, -50%);}

.h2-img02 h2 {color: #fff; font-weight: bold; text-shadow: 0 0 8px rgba(0, 0, 0, 0.5); position: absolute; top: 60px; left: 30px; font-size: 40px;}

.h2-img02 p {color: #fff; font-weight: bold; position: absolute; top: 130px; left: 30px; font-size: 20px;}

.h3-bgyel {background-color: #FFF955; color: #22677D; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); font-weight: bold; text-align: center; border-radius: 10px; width: 470px; font-size: 22px; padding: 6px 0;}

.box-wt {position: relative; background-color: #fff; border-radius: 10px; width: 620px; margin: 70px auto; padding: 40px 0 10px;}

.yel-dot {display: flex; justify-content: flex-start; flex-flow: row wrap; width: 540px; margin: auto;}

.yel-dot li { width: 50%; margin-bottom: 25px; text-indent: -10px; padding-left: 10px;}
	
.yel-dot li:before { content: '●'; color: #EFE836; font-size: 10px; margin-right: 8px; vertical-align: middle; height: 18px; display: inline-block;}

.yel-line {background-color: #fff; width: 620px; margin: 0 auto 30px; padding: 30px 0;}

.yel-line li {width: 570px; margin: 0 auto 20px;}

.yel-line li:before {content: ''; border-right: 3px solid #EFE836; margin-right: 10px; height: 23px; vertical-align: middle; display: inline-block;}

.yel-line li:last-child {margin-bottom: 0;}

.yel-line em {font-style: normal; font-weight: bold;}

.yel-line span {display: block; padding-left: 1em;}

.risk {color: #fff; width: 600px; margin: auto}
	
.risk dt {margin: 0 0 10px; font-weight: bold;}

.risk dd {margin: 0 0 10px; font-size: 13px;}

.num1,.num2,.num3 {color: #22677D; font-size: 20px; font-weight: bold; width: 550px; margin: auto;}

.num1:before,.num2:before,.num3:before { background-size: 100%; background-position: center; display: inline-block; vertical-align: sub; width: 24px; height: 24px; margin-right: 8px;}

.num1:before {content: ''; background: url(../img/common/num1.svg) no-repeat;}

.num2:before {content: ''; background: url(../img/common/num2.svg) no-repeat;}

.num3:before {content: ''; background: url(../img/common/num3.svg) no-repeat;}

.num1:after,.num2:after,.num3:after {content: ''; display: block; width: 100%; margin: 5px auto; background-size: 10px 10px; background-repeat: repeat-x; padding-bottom: 10px; background-image: radial-gradient(circle, #22677D 17%, transparent 17%);}

.gr-line {width: 650px; font-size: 20px; color: #323232; margin: auto;}

.gr-line:before {content: ''; border-right: 3px solid #5CC2B7; margin-right: 10px; height: 23px; vertical-align: middle; display: inline-block;}

.price-tb {font-family: "Noto Serif JP", serif; width: 95%; margin: 20px auto 40px; border: 0.8px solid #808080; border-collapse: collapse;}

.price-tb:last-of-type {margin: 20px auto 80px;}

.price-tb th {background-color: #5CC2B7; border-right: 0.8px solid #808080; color: #fff; width: 70%; text-align: center; padding: 10px 0; font-weight: normal;}

.price-tb td {background-color: #fff; width: 30%; text-align: center;}

@media all and (min-width: 768px) and (max-width: 1300px) {
	
	.h2-beauty-injection {font-size: 4vw;}
	
	.h2-wt {font-size: 2.8vw; bottom: 4vw; left: 20.5vw;}
	
	.h2-wt:after {left: -8.5vw; width: 20.5vw; }
	
	.h2-bk { font-size: 2.8vw; bottom: 4vw; right: 23.5vw;}
	
	.h2-bk span {font-size: 2vw;}

	.h2-bk:after {right: -2vw; width: 22vw;}
}




@media all and (min-width: 0px) and (max-width: 767px) {
	
	.beauty-injection { width: 100%; margin: 0 auto; float: none;}
	
	.h2-beauty-injection {font-size: 5vw; left: 50%; top: 10vw; text-align: center; transform: translate(-50%, -50%); text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);}
	
	.h2-beauty-injection span {font-size: 3.8vw;}
	
	.h2-wt {font-size: 3.5vw; bottom: 7vw; left: 27.5vw;}
	
	.h2-wt:after {left: -8.5vw; width: 23vw; height: 0.5px;}
	
	.h2-bk { font-size: 3.5vw; bottom: 7vw; right: 23.5vw;}
	
	.h2-bk span {font-size: 3vw;}

	.h2-bk:after {right: -2vw; width: 28vw; height: 0.5px;}
	
	

	
	.dot-gr {font-size: 4.5vw; margin-top: 10vw; width: 100%;}
	
	.dot-gr:after {width: 200px; margin: 0 auto 5vw;  background-size: 20px 20px;}
	
	.dot-wt {font-size: 4.5vw;}
	
	.dot-wt:after {width: 200px; background-size: 20px 20px;}
	
	.txt01 {width: 90vw; margin: 0 auto 15vw;}
	
	.txt01:last-child {margin:  20px auto 0;}
	
	.txt02 { width: 90vw; margin: 1vw auto 15vw; }

	.txt03 { width: 90vw; margin: 20vw auto 5vw;}

	.txt04 {margin: 0 auto 40px; width: 80vw;}
	
	.bg-gr {padding: 10vw 0; margin: 30vw 0 0; width: 100%;}
	
	.box-wt {border-radius: 10px; width: 90vw; margin: 15vw auto; padding: 10vw 0 5vw;}
	
	.h2-img {background: url(../img/common/shiratama.webp) no-repeat; background-size: 100%; height: 55vw; width: 95vw;}
	
	.h2-img h2 {top: 5vw; left: 7.7vw; font-size: 8vw;}
	
	.h2-img p {width: 12vw; top: 20vw; left: 18vw; font-size: 4vw; writing-mode: vertical-rl;}
	
	.h2-img02 {width: 95vw; background: url(../img/common/vitamin.webp) no-repeat; background-size: 100%; background-position: center; position: absolute; height: 50vw; top: 0; left: 50%; transform: translate(-50%, -50%);}
	
	.h2-img02 h2 {top: 1vw; left: 7.7vw; font-size: 8vw;}
	
	.h2-img02 p {top: 14vw; left: 14vw; font-size: 4vw;  writing-mode: vertical-rl;}
	
	.h2-img02 p span {display: block; font-size: 6vw;}
	
	.h3-bgyel { border-radius: 10px; width: 85vw; font-size: 4.5vw; padding: 2vw;}
	
	.yel-dot {display: block; width: 75vw;}
	
	.yel-dot li { width: 100%;}
	
	.yel-dot li:before { content: '●'; color: #EFE836; font-size: 10px; margin-right: 8px; vertical-align: middle; height: 18px; display: inline-block;}
	
	.yel-line {padding: 7vw 0; width: 90vw; margin: auto;}
	
	.yel-line li {margin-bottom: 6.8vw; width: 80vw;}
	
	.yel-line li:before {border-right: 3px solid #EFE836; margin-right: 10px; height: 23px;}
	
	.risk {padding: 10vw 5vw; width: 95vw;}
	
	.risk dt {margin: 2.9vw 0; font-weight: bold;}
	
	.risk dd {font-size: 2.7vw;}
	
	.num1,.num2,.num3 {font-size: 4vw; width: 80vw;}
	
	.num1:before,.num2:before,.num3:before {background-size: 100%; background-position: center; width: 5vw; height: 5vw; margin-right: 5px;}
	
	.num1:after,.num2:after,.num3:after {margin: 1vw auto 2vw; background-size: 10px 10px; padding-bottom: 2vw;}
	
	.gr-line {width: 90vw; font-size: 4vw;}
	
	.gr-line li:before {border-right: 3px solid #EFE836; margin-right: 10px; height: 23px;}
	
	.price-tb {width: 90vw;}
	
	.price-tb th {width: 50%; padding: 3vw 0;}
	
	.price-tb td {width: 40%;}
	
	.img-bottom { width: 95vw; margin: 5vw auto;}

}