/* CSS Document */
@charset "utf-8";
/*レスポンシブ　tab*/
@media screen and (max-width:768px){
	html {
		font-size: 8px;
	}
	body {
		max-width: 960px;
	}
	.container {
		max-width: 80%;
		margin: auto;
		padding: 5rem 0;
		background-color: #ffffff;
	}
	.contact-bnr p {
		font-size: 2.4rem;
		font-weight: 600;
		text-align: center;
	}
	.blue {
		color: #57C5B6;
	}
	.contact-bnr-flex {
		display: flex;
		justify-content: center;
		gap: 4rem;
		align-items: baseline;
	}
	.tel a {
		display: block;
		color: #333;
		font-size: 4rem;
	}
	.tel p:hover {
		color: #555454;
		text-decoration: underline;
	}
	.section-title {
		width: 80%;
		margin: 3rem auto;
		background-color: #69402E;
		outline: 1px dashed #BDA99B;
		outline-offset: -4px;
		padding: 1rem 0;
	}
	.section-title p {
		text-align: center;
		font-size: 3rem;
		color: #fff;
		font-weight: 600;
	}
	.section-title p span {
		font-size: 5rem;
		color: #F5E371;
	}
	/*ヘッダー*/
	#header {
		height: 45vh;
		position: relative;
	}
	#header::before {
	content:"";
	width: 220px;
	height: 40px;
	background:url("../img/logo.png");
	background-size: cover;
	position: absolute;
	bottom: 2rem;
	right: 2rem;
}
	/*こんなお悩みありますか*/
	#section01 {
		padding: 5rem 0;
	}
	.section01-title p {
		font-size: 4.8rem;
		white-space: nowrap;
	}
	.whitning-movie iframe {
		width: 70rem;
		height: 39.5rem;
		border-radius: 2rem;
	}	
	
	
	/*当院のポイント*/
	.point {
		width: 80%;
	}
	.point-text {
		width: 98%;
	}
	.point-text p {
		font-size: 2.4rem;
	}
	.point1-img {
		width: 80%;
		margin: auto;
	}
	.point2-img {
		width: 80%;
		margin: auto;
	}
	.point3-img {
		width: 80%;
		margin: auto;
		display: flex;
	}
	.point3-img img {
		width: 100%;
	}


	/*よくあるご質問*/
	#section03 {
		background-image: url("../img/bg02.png");
		background-size: cover;
		padding: 10rem 0;
	}
	.qa-flex {
		width: 80%;
		flex-direction: column;
		margin: auto;
	}
	.qa {
		width: 90%;
		margin: auto;
	}
	.qa-a p {
		font-size: 2.4rem;
	}
	
	
	/*当院のホワイトニングの紹介*/
	.menu {
		width: 95%;	
	}
	.menu-inner {
		width: 95%;
	}
	.merit-wrapper {
		gap: 1rem;
		flex-wrap: wrap;
	}
	.mini-title {
		width: 90%;
	}
	.expo {
		width: 90%;
	}
	.office-merit{
		width: 90%;
	}
	.merit-item {
		width: 45%;
	}
	.menu-card {
		width: 90%;
	}
	.menu-price {
	width: 90%;
}
	.graph {
		width: 90%;
		margin: 3rem auto;
	}
	.graph-memo {
		font-size: 2.4rem;
		font-family: "游ゴシック";
		margin-bottom: 2rem;
		font-weight: 600;
	}
	.while {
		width: 100%;
		margin: 5rem auto 2rem auto;
		background-image: url("../img/bg05.jpg");
		background-size: cover;
		padding: 1.6rem 0;
	}
	.while-txt {
		margin-bottom: 1rem;	
	}
	.while-txt p {
		font-size: 4rem;
		font-weight: 600;
		text-align: center;
	}
	.while-memo p {
		font-size: 3rem;
		font-weight: 600;
		text-align: center;
	}
	.while-memo p span {
		font-size: 3.6rem;
	}
	
	/*ご安心ください*/
	.sec05-txt-bg::after {
		width: 50%;
	}

	/*治療の流れ*/
	.section06-message {
		width: 80%;
	}
	.section06-message-bg {
		font-size: 3.2rem;
	}
	.section06-message-sm {
		font-size: 2.4rem;
	}
	.section06-message-bg::after {
		display: none;
	}
	.flow-wrapper {
		width: 85%;
	}
	.flow {
		flex-direction: column;
	}
	.flowno {
		width: 100%;
	}
	.flow-index {
		width: 100%;
	}
	.cash {
		width: 80%;
		margin: 3rem auto;
	}
	.cash-icon-wrap {
		width: 90%;
		margin: 2rem auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.cash-icon-wrap p {
		font-size: 2rem;
		text-align: center;
		color: #fff;
		font-family: "游ゴシック";
		font-weight: 600;
	}
	.cash-icon {
		width: 32%;
		background-color: #ffa500;
		padding: 1rem 0;
		border-radius: 3rem;
	}
	.credit-icon {
		width: 32%;
		background-color: #1e90ff;
		padding: 1rem 0;
		border-radius: 3rem;
	}
	.loan-icon {
		width: 32%;
		background-color: #2e8b57;
		padding: 1rem 0;
		border-radius: 3rem;
	}
	.flow-movie iframe {
		width: 70rem;
		height: 39.5rem;
		border-radius: 2rem;
	}	
	/*Q&A*/
	.qa-wrapper {
		width: 85%;
		margin: 5rem auto;
		text-align: center
	}
	.qa-content {
		width: 90%;
		margin: 0 auto 5rem auto;
	}
	.qa-content img {
		width: 100%;
	}
	.note {
		width: 80%;
		margin: 3rem auto;
	}
	.note img {
		width: 100%;
	}


	/*フッター*/
	#footer {
		background-color: rgba(250,240,230,0.5);
	}
	.footer-left p {
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	}
	.footer-flex {
		padding: 1rem;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.footer-left,
	.footer-right {
		width: 49%;
	}
	.footlogo {
		width: 80%;
		margin: auto;
	}
	.footlogo img {
		width: 100%;
	} 
	.adress {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		margin: 3rem 0;
	}
	.adress p {
		font-size: 2rem;
	}
	.time-table img {
	 width: 95%;
	}
	.table-memo {
		width: 100%;
		font-size: 1.8rem;
		margin-top: 1rem;
	}
	.timetable::before {
		content:"";
		width: 130px;
		height: 23px;
		background: url("../img/logo.png");
		background-size: cover;
		position: absolute;
		bottom:-25px;
		right: 0;
	}
	.footer-right iframe {
		width: 100%;
		height: 40vh
	}
	.bnr-space {
		height: 10rem;
	}
	.bnr-box {
		width: 100%;
		padding: 1rem 0;
		text-align: center;
		background-color: rgba(255,255,255,0.8);
		position: fixed;/*←絶対位置*/
		bottom: 0; /*下に固定*/
	}
}




@media screen and (max-width:390px){
	html {
		font-size: 6px;
	}
	.sp-only {
		display: block;
	}
	.container {
		max-width: 95%;
	}
	.contact-bnr p {
		font-size: 2.4rem;
		font-weight: 600;
		text-align: center;
	}
	.blue {
		color: #57C5B6;
	}
	.contact-bnr-flex {
		display: flex;
		justify-content: center;
		gap: 4rem;
		align-items: baseline;
	}
	.tel a {
		display: block;
		color: #333;
		font-size: 4rem;
	}
	.tel p:hover {
		color: #555454;
		text-decoration: underline;
	}

	/*ヘッダー*/
	#header {
		background: url("../img/sp-mv.png");
		height: 50vh;
		background-size: cover;
		background-position: center;
	}
	#header::before {
	content:"";
	width: 160px;
	height: 30px;
	background:url("../img/logo.png");
	background-size: cover;
	position: absolute;
	bottom: 2rem;
	right: 2rem;
}
	.h-bar-inner {
		align-items: center;
	}
	.header-left a img {
		width: 34rem;
	}
	.contact-btn {
		width: 20rem;
		border-radius: 6px;
		padding: 1rem 0;
	}
	.contact-btn a {
		font-size: 1.8rem;
	}
	.section-title {
		width: 90%;
		margin: 3rem auto;
		background-color: #69402E;
		outline: 1px dashed #BDA99B;
		outline-offset: -4px;
		padding: 1rem 0;
	}
	.section-title p {
		text-align: center;
		font-size: 3rem;
		color: #fff;
		font-weight: 600;
	}
	.section-title p span {
		font-size: 5rem;
		color: #F5E371;
	}
	/*こんなお悩みありますか*/
	#section01 {
		background-image: url("../img/bg01.jpg");
		padding: 8rem 0 5rem 0;
	}
	.section01-title p {
		font-size: 3.2rem;
	}
	.whitning-movie iframe {
		width: 90%;
		height: 30rem;
		border-radius: 2rem;
	}	
	.section1-1 {
		width: 95%;
	}
	.section1-2 {
		width: 95%;
	}
	.section1-3 {
		width: 95%;
	}

	/*当院のポイント*/
	.section-title {
		width: 95%;
	}
	.point {
		width: 95%;
	}
	.point-title {
		margin-top: 5rem;
		text-align: center;
	}
	.point-text {
		width: 98%;
		margin: 5rem auto;
	}
	.point-text p {
		font-size: 1.8rem;
		letter-spacing: 0.1rem;
		line-height: 3rem;
	}
	.point3-img {
		width: 95%;
		flex-wrap: wrap;
	}

	/*よくあるご質問*/
	.qa-flex {
		width: 80%;
		flex-direction: column;
	}
	.qa {
		width: 100%;
		
	}

	/*当院のホワイトニングの紹介*/
	.menu {
		width: 95%;
		border: 8px solid rgba(250,240,230,1);
	}
	.border-ye {
		border: 8px solid #E6B422;
	}
	.mini-title p {
		font-size: 4rem;
	}
	.menu-title {
		padding: 1.6rem 0;
	}
	.menu-title p {
		font-size: 3.6rem;
	}
	.menu-inner {
		background-color: ffffff;
		width: 98%;
		margin: auto;
	}
	.menu-card {
		width: 95%;
	}
	.menu-card-title {
		font-size: 3.6rem;
	}
	
	.menu-content {
		width: 95%;
		margin: auto;
		justify-content: space-between;
		gap: 0;
	}
	.menu-content-flex p {
		color: #69402E;
		font-size: 2rem;
		text-align: center;
	}
	
	.menu-content-left {
		width: 60%;
		flex-direction: column;
	}
	.menu-content-right {
		width: 35%;
	}
	.menu-price {
		font-size: 3rem;
	}
	.ye-bg {
		font-size: 5rem;
	}
	.menu-card-memo {
		font-size: 2rem;
	}
	.expo {
		width: 90%;
		flex-direction: column;
		margin: auto;
	}
	.expo-img {
		width: 80%;
		margin: 0 auto 1rem auto;
	}
	.expo-txt {
		width: 100%;
	}
	.merit-item {
		width: 100%;
		padding: 1.6rem 0 1.6rem 1.6rem;
		box-shadow: 2px 2px 5px #ccc;
	}
	.fwb16 {
		font-size: 2.4rem;
	}
	.fwb16 span {
		font-size: 3.6rem;
		margin-right: 1rem;
	}
	.fwn12 {
		font-size: 1.8rem;
		margin-top: 1rem;
		width: 95%;
	}
	.office-merit ul {
		width: 100%;
	}
	.office-merit ul li {
		width: 50%;
	}
	.office-merit ul li p {
		font-size: 1.8rem;
	}
	.office-merit ul li img {
		width: 4rem;
	}
	.menu-price {
		width: 90%;
	}
	.price p {
		font-size:3.6rem;
		font-weight: 700;
		font-family: "游ゴシック Light", "游ゴシック Medium";
	}
	.price p span {
		font-size: 2rem;
		font-weight: 500;	
	}
	.contact {
		padding: 1rem;
	}
	.contact a {
		font-size: 2rem;
	}
		/*ご安心ください*/
	.sec05-txt {
		font-size: 2rem;
	}
	.sec05-txt-bg {
		font-size: 4rem;
	}
	.sec05-txt-bg span {
		font-size: 5rem;
	}
	.sec05-txt-bg::after {
		bottom: -1.6rem;
		border-bottom: 3rem solid rgba(229,42,136,0.3);
		width: 50%;
	}
	.sec05-txt {
		font-size: 2rem;
	}
	.section05-img {
		width: 90%;
	}
	.menu-item p {
		font-size: 2.2rem;
	}

	/*治療の流れ*/
	.section06-message-sm {
		font-size: 1.8rem;
		margin: 3rem auto;
	}
	.section06-message-bg {
		font-size: 2rem;
		font-weight: 600;
		line-height: 3rem;
		}
	.flow-wrapper {
		margin: auto;
		width: 95%;
	}
	.cash {
		width: 95%;
		margin: 3rem auto;
	}
	.cash-flex {
		flex-direction: column;
	}
	.cash-box {
		width: 98%;
	}
	.flow-movie iframe {
		width: 40rem;
		height: 22.5rem;
		border-radius: 2rem;
	}	

	/*Q&A*/
	.qa-wrapper {
		display: none;
	}
	.qa-spwrapper {
		width: 100%;
		margin: 5rem auto;
		text-align: center
	}
	.qa-spwrapper .qa-content img {
		width: 100%;
	}
	.qa-spwrapper .qa-content {
		width: 90%;
		margin: 0 auto 5rem auto;
	}
	
	.note {
		display: none;
	}
	.note img {
		width: 100%;
	}
	.notesp {
		width: 90%;
		margin: 3rem auto;
	}

	/*フッター*/
	#footer {
		background-color: rgba(250,240,230,0.5);
	}
	.footer-left p {
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	}
	.footer-flex {
		flex-direction: column;
		margin: 0 auto;
		gap:5rem;
	}
	.footer-left,
	.footer-right {
		width: 90%;
		margin: auto;
	}
	.footlogo {
		width: 80%;
		margin: auto;
	}
	.footlogo img {
		width: 100%;
	} 
	.adress {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		margin: 3rem 0;
	}
	.adress p {
		text-align: center;
		font-size: 2rem;
	}
	.time-table {
		width: 70%;
		margin: auto;
	}
	.table-memo::before {
	content:"";
	width: 150px;
	height: 30px;
	background: url("../img/logo.png");
	background-size: cover;
	position: absolute;
	bottom:-5px;
	right: 0;
}
	.time-table img {
	  width: 100%;
	}
	.table-memo {
		font-size: 1.8rem;
		margin-top: 1rem;
	}
	.footer-right iframe {
		width: 100%;
	}
	.bnr-space {
		height: 10rem;
	}
	.bnr-box {
		width: 100%;
		padding: 1rem 0;
		text-align: center;
		background-color: rgba(255,255,255,0.8);
		position: fixed;/*←絶対位置*/
		bottom: 0; /*下に固定*/
	}
	
	.graph {
		width: 95%;
		margin: 3rem auto;
	}
	.graph-memo {
		font-size: 2.4rem;
		font-family: "游ゴシック";
		margin-bottom: 2rem;
		font-weight: 600;
	}
	.while {
		width: 100%;
		margin: 5rem auto 2rem auto;
		background-image: url("../img/bg05.jpg");
		background-size: cover;
		padding: 1.6rem 0;
	}
	.while-txt {
		margin-bottom: 1rem;	
	}
	.while-txt p {
		font-size: 4rem;
		font-weight: 600;
		text-align: center;
	}
	.while-memo p {
		font-size: 3rem;
		font-weight: 600;
		text-align: center;
	}
	.while-memo p span {
		font-size: 3.6rem;
	}
}