/* CSS Document */
/* タブレット */
@media screen and (max-width:599px){
	body {
 	font-size: 4px;
 }
	.container {
		width: 500px;
		margin: 10px auto;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 20px 0;
	 }
	.contact-bnr {
		margin: auto;
	}
	.reserve-btn {
		background: linear-gradient(#F6B954,#F7D7A0);
		width: 400px;
		padding: 10px;
		border-radius: 5px;
		margin: auto;
	}
	.reserve-btn a {
		display: block;
		text-align: center;
		color: #ffffff;
		font-weight: 600;
		font-size: 20px;
	}
	.reserve-btn:hover {
		background: linear-gradient(#F3D093,#F6EBD9);
	}
	.bnr-tel {
		color: #54917F;
		font-size: 18px;
		font-weight: 600;
		margin-top: 5px;
		text-align: center;
	}
	.fa-phone {
		padding-right: 5px;
	}
	.contact-memo {
		text-align: center;
	}
	.section-title {
		width: 220px;
		height: 60px;
		background-image: url("../img/パス 1.png");
		background-size: cover;
		background-repeat: no-repeat;
		text-align: center;
		margin: 20px auto;
	}
	.section-title h4 {
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		padding-top: 20px;
	}
	.section-inner {
		margin: 30px auto 50px auto;
		max-width: 400px;
	}
	.text-box {
		width: 180px;
		margin-top: 5px;
	}
	.inner-text {
		font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.5px;
	}
	.section-img {
		width: 180px;
	}

	/*メインビジュアル*/
	.mainvisual {
		position: relative;
	}
	.info-bnr {
		display: none;
	}
	.info-bnr-sp {
		display: block;
		width: 250px;
		height: 80px;
		padding: 15px 20px;
		background-color: rgba(255,255,255,0.7);
		border-radius: 10px;
		position: absolute;
		top: 10px;
		left:10px;
	}
  .info-bnr-inner {
		margin: auto;
	}
	.sp-bnr-flex {
		display: flex;
		gap: 5px;
	}
	.header-logo {
		width: 120px;
	}
	.site-name {
		width: 100px;
		height: 16px;
		border-radius: 25px;
	}
 .site-name p {
		color: #ffffff;
		font-size: 3px;
		font-weight: 600;
		text-align: center;
		line-height: 16px;
	}
	.tel {
		font-size: 16px;
		color: #54917F;
		font-weight: 600;
		text-align: center;
	}
	.tel span {
		font-size: 12px;;
		color: #333333;
		font-weight: 400;
	}
	.bnr-text {
		text-align: center;
		font-size: 5px;
	}
	.info-bnr-inner a {
		font-size: 12px;
		text-align: center;
		margin-top: 10px;
	}
	.sp-bnr-link {
		text-align: center;
	}
	.sp-bnr-link a {
		display: inline-block;
		text-decoration: underline;
		font-size: 6px;
		color: #ECBD6E;
		font-weight: 600;
		text-align: center;
		margin: 5px auto;
	}
	.catch-copy-bnr {
		position: absolute;
		top: 140px;
		left: 16%;
	}
	.catch-copy {
		background-color: rgba(255,255,255,0.7);
		border-radius: 80px;
		padding: 10px 25px;
	}
	.catch-copy h1 {
		font-size: 24px;
		font-weight: 600;
		text-align: center;
		letter-spacing: 1px;
	}
	.big-pink,
	.big-blue,
	.big-black {
		font-size: 50px;
	}
	
	/*導入部分*/
	#introduction {
	margin: 50px auto;
	}
	.intro-inner {
		width: 80%;
		margin: auto;
	}
	.intro-title {
		margin-top: 10px;
	}
	.intro-title h2 {
		font-size: 20px;
	}
	.intro-flex {
		gap: 10px;
	}
	.intro-flex img {
		width: 50%;
	}
	.intro-list {
		width: 45%;
	}
	.intro-list li {
		padding: 10px 0;
		font-size: 14px;
	}
	.induction {
		padding: 15px 0 20px 0;;
	}
	.induction p {
		font-size: 16px;
	}
	.induction h3 {
		font-size: 20px;
		margin-top: 5px;
	}
	.triangle {
		border-top: 30px solid rgba(236,189,110,0.5);
		border-right: 40px solid transparent;
		border-left: 40px solid transparent;
		border-bottom: 40px solid transparent;
	}

	/*当院が選ばれる理由*/
	.feature ,
	.feature-row{
		gap: 15px;
		padding: 15px;
		margin-bottom: 20px;
	}
	.feature-title {
		gap: 10px;
		font-size: 12px;
	}
	.feature-title .green {
		color: #54917F;
		font-size: 22px;
	}
	
	/*診療内容*/
	.menu-title {
		font-size: 16px;
	}
	.icon-wrapper {
		gap: 50px;
		margin: 20px auto;
	}
	.menu-icon img {
		width: 80px;
		height: 80px;
	}
	.menu-icon p {
		margin-top: 10px;
		font-size: 10px;
	}
	.kids-dental {
		margin-bottom: 30px;
	}
	.ortho-message {
		width: 400px;
		margin: 30px auto;
		border: dashed 5px #ECBD6E;
		border-radius: 10px;
		padding: 15px 0;
	}
	.ortho-message p {
		width: 80%;
		font-size: 14px;
	}
	.ortho-merit {
		width: 400px;
		margin: 50px auto;
		border: solid 3px #ECBD6E;
		position: relative;
		padding: 30px 0;
	}
	.merit-title {
		width: 250px;
		padding: 10px 0;
		border-radius: 25px;
		position: absolute;
		top: -25px;
		left: 20%;
	}
	.merit-title p {
		font-size: 18px;
	}
	.merit-inner {
		text-align: center;
	}
	.merit-inner ul {
		width: 80%;
		margin: auto;
	}
	.merit-inner li {
		gap: 20px;
		padding: 15px 0;
	}
	.merit-inner p {
		font-size: 14px;
	}
	.merit-no {
		width: 50px;
		height: 50px;
	}
	.merit-no p {
		line-height: 50px;
		font-size: 20px;
	}

	/*治療の流れ*/
	.flow-wrapper {
		margin: 30px auto;
	}
	.flow-content {
		width: 360px;
		height: 120px;
		border: solid 5px #82D893;
	}
	.flow-title {
		margin-top: 10px;
	}
	.flow-title p {
		font-size: 16px;
	}
	.flow-inner {
		margin-top: 10px;
		gap: 20px;
	}
	.flow-inner img {
		width: 100px;
	}
	.flow-inner p {
		font-size: 14px;
		width: 200px;
		line-height: 14px;
		letter-spacing: 1px;
	}
	.arrow {
		text-align: center;
		margin: 5px auto;
	}
	.fa-arrow-down {
		color: #82D893;
		font-size: 30px;
	}
	/*ドクター紹介*/
	.doctor-flex {
		margin-top: 15px;
		gap: 15px;
	}
	.doctor-flex img {
		width: 180px;
	}
	.doctor-name {
		font-size: 16px;
	}
	.en {
		font-size: 8px;
		margin-left: 5px;
	}
	.career {
		margin-top: 20px;
	}
	.doctor-message {
		margin-top: 20px;
	}
	.doctor-message p {
		margin: 15px auto;
	}
	.message-big {
		font-size: 14px;
	}
	.message-big .big {
		font-size: 30px;
	}
	.message-mini {
		font-size: 4px;
		letter-spacing: 0.5px;
		line-height: 16px;
	}
	.movie {
		margin: 30px auto;
	}
	.movie p {
		font-size: 16px;
		letter-spacing: 2;
		margin-bottom: 15px;
	}
	.movie-tab {
		display: block;
		margin: auto;
		text-align: center;
	}
	.movie-pc {
		display: none;
	}
	

	/*フッター　医院情報*/
	#footer {
		margin-top: 30px;
	}
	.clinic-info {
		padding: 50px 0 0 0;
	}
	.footer-title {
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 15px;
	}
	.info-inner {
		max-width: 500px;
		flex-direction: column;
		margin: auto;
	}
	.info-left,
	.info-right {
		width: 90%;
}
	.info-left img {
		width: 450px;
	}
	.info-list {
		margin: 20px auto 0 auto;
	}
	.info-list ul {
		margin: auto;
	}
	.info-list li {
		margin-bottom: 15px;
		font-size: 16px;
	}
	.info-icon {
		width: 100px;
		padding: 5px 0
	}
	.info-icon p {
		font-size: 16px;
	}
	.official {
		padding: 5px 0;
		width: 400px;
		margin: 20px  auto;
	}
	.official a {
		font-size: 22px;
	}
	.time-table {
		margin: 10px auto;
	}
	.time-table th,
	.time-table td {
		font-size: 14px;
	}
	.tabel-memo {
		margin: auto;
	}
	.map {
		display: none;
	}
	.map-sp {
		display: block;
		margin-top: 20px;
	}

	.copyright {
		height: 20px;
	}
	.copyright p {
		text-align: center;
		color: #ffffff;
		font-size: 10px;
	}

}
/* スマホ */
@media screen and (max-width:391px){
	body {
		font-size: 4px;
	}
	.container {
		width: 360px;
		margin: 10px auto;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 20px 0;
	 }
	.contact-bnr {
		margin: auto;
	}
	.reserve-btn {
		background: linear-gradient(#F6B954,#F7D7A0);
		width: 300px;
		padding: 10px;
		border-radius: 5px;
		margin: auto;
	}
	.reserve-btn a {
		display: block;
		text-align: center;
		color: #ffffff;
		font-weight: 600;
		font-size: 20px;
	}
	.reserve-btn:hover {
		background: linear-gradient(#F3D093,#F6EBD9);
	}
	.bnr-tel {
		color: #54917F;
		font-size: 18px;
		font-weight: 600;
		margin-top: 5px;
		text-align: center;
	}
	.fa-phone {
		padding-right: 5px;
	}
	.contact-memo {
		text-align: center;
		font-size: 14px;
	}
	.section-title {
		width: 220px;
		height: 60px;
		background-image: url("../img/パス 1.png");
		background-size: cover;
		background-repeat: no-repeat;
		text-align: center;
		margin: 20px auto;
	}
	.section-title h4 {
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		padding-top: 20px;
	}
	.section-inner {
		margin: 30px auto 50px auto;
		width: 100%;
	}
	.text-box {
		width: 95%;
		margin-top: 3px;
	}
	
	.section-img {
		width: 45%;
	}
	.header-bar {
	height: 10px;
	padding: 0 10px;
	font-size: 4px;
}
.header-bar ul {
	display: flex;
	gap: 10px;
}
	
	
	/*メインビジュアル*/
	.mainvisual {
		position: relative;
	}
	.info-bnr {
		display: none;
	}
	.info-bnr-sp {
		max-width: 208px;
		height: 60px;
		padding: 5px 10px;
	}
	.header-logo {
		width: 60px;
	}
	.site-name {
		max-width: 100px;
		height: 12px;
	}
 .site-name p {
		font-size: 6px;
		line-height: 12px;
	}
	.tel {
		font-size: 8px;
	}
	.tel span {
		font-size: 4px;
	}
	.bnr-text {
		text-align: center;
		font-size: 5px;
	}
	.sp-bnr-link a {
		font-size: 8px;
	}
	.catch-copy-bnr {
		position: absolute;
		top: 100px;
		left: 15%;
	}
	.catch-copy {
		padding: 5px 20px;
	}
	.catch-copy h1 {
		font-size: 16px;
	}
	.big-pink,
	.big-blue,
	.big-black {
		font-size: 30px;
	}
	
	/*導入部分*/
	#introduction {
	margin: 30px auto;
	}
	.intro-inner {
		width: 90%;
		margin: auto;
	}
	.intro-title {
		margin-top: 10px;
	}
	.intro-title h2 {
		font-size: 16px;
	}
	.intro-flex {
		gap: 5px;
	}
	.intro-flex img {
		width: 50%;
	}
	.intro-list {
		width: 45%;
	}
	.intro-list li {
		padding: 5px 0;
		font-size: 12px;
	}
	.induction {
		padding: 8px 0 10px 0;;
	}
	.induction p {
		font-size: 14px;
	}
	.induction h3 {
		font-size: 14px;
		margin-top: 5px;
	}
	.triangle {
		border-top: 15px solid rgba(236,189,110,0.5);
		border-right: 20px solid transparent;
		border-left: 20px solid transparent;
		border-bottom: 20px solid transparent;
	}

	/*当院が選ばれる理由*/
	.feature,
	.feature-row{
		gap: 5px;
		padding: 8px;
		margin-bottom: 10px;
	}
	.feature-title {
		gap: 5px;
		font-size: 14px;
	}
	.feature-title .green {
		color: #54917F;
		font-size: 18px;
	}
	
	/*診療内容*/
	.menu-inner {
	gap: 5px;
}
	.menu-title {
		font-size: 14px;
	}
	.icon-wrapper {
		gap: 25px;
		margin: 10px auto;
	}
	.menu-icon img {
		width: 60px;
		height: 60px;
	}
	.menu-icon p {
		margin-top: 5px;
		font-size: 6px;
	}
	.kids-dental {
		margin-bottom: 15px;
	}
	.ortho-message {
		width: 300px;
		margin: 15px auto;
		border: dashed 5px #ECBD6E;
		border-radius: 10px;
		padding: 8px 0;
	}
	.ortho-message p {
		width: 80%;
		font-size: 14px;
	}
	.ortho-merit {
		width: 300px;
		margin: 25px auto;
		border: solid 3px #ECBD6E;
		position: relative;
		padding: 15px 0;
	}
	.merit-title {
		width: 125px;
		padding: 5px 0;
		border-radius: 25px;
		position: absolute;
		top: -12px;
		left: 30%;
	}
	.merit-title p {
		font-size: 10px;
	}
	.merit-inner ul {
		width: 80%;
		margin: auto;
	}
	.merit-inner li {
		gap: 10px;
		padding: 8px 0;
	}
	.merit-inner p {
		font-size: 14px;
	}
	.merit-no {
		width: 30px;
		height: 30px;
	}
	.merit-no p {
		line-height: 30px;
		font-size: 12px;
	}

	/*治療の流れ*/
	.flow-wrapper {
		margin: 30px auto;
	}
	.flow-content {
		width: 90%;
	}
	/*ドクター紹介*/
	.doctor-flex {
		margin-top: 15px;
		gap: 15px;
	}
	.doctor-flex img {
		width: 150px;
	}
	.doctor-name {
		font-size: 16px;
	}
	.en {
		font-size: 6px;
		margin-left: 3px;
	}
	.career {
		margin-top: 10px;
	}
	.career p {
		font-size:12px;
	}
	.doctor-message {
		margin-top: 10px;
	}
	.doctor-message p {
		margin: 8px auto;
	}
	.message-big {
		font-size: 12px;
	}
	.message-big .big {
		font-size: 24px;
	}
	.message-mini {
		width: 80%;
		font-size: 12px;
		letter-spacing: 0.5px;
		line-height: 15px;
	}
	.movie {
		margin: 20px auto;
	}
	.movie p {
		font-size: 16px;
		letter-spacing: 2;
		margin-bottom: 15px;
	}
	.movie-sp {
		display: block;
		margin:0 auto;
		text-align: center;
	}
	.movie-tab {
		display: none;
	}

	/*フッター　医院情報*/
	#footer {
		margin-top: 15px;
	}
	.clinic-info {
		padding: 30px 0 0 0;
	}
	.footer-title {
		font-size: 10px;
		margin-bottom: 10px;
	}
	.info-inner {
		max-width: 360px;
	}
	.info-left,
	.info-right {
		width: 90%;
}
	.info-left img {
		width: 300px;
	}
	.info-list {
		margin: 10px auto 0 auto;
	}
	.info-list li {
		margin-bottom: 7px;
		font-size: 14px;
	}
	.info-icon {
		width: 60px;
		padding: 5px 0
	}
	.info-icon p {
		font-size: 14px;
	}
	.official {
		padding: 5px 0;
		width: 200px;
		margin: 10px  auto;
	}
	.official a {
		font-size: 14px;
	}
	.time-table {
		border: 1px solid #cccccc;
		border-collapse: separate;
		overflow: hidden;
		border-spacing: 0;
		margin-bottom: 10px;
	}
	.time-table th,
	.time-table td {
		padding: 5px 7px;
	}
	.tabel-memo {
		margin: auto;
	}
	.map {
		display: none;
	}
	.map-sp {
		display: block;
		margin-top: 10px;
	}

	.copyright {
		height: 20px;
	}
	.copyright p {
		text-align: center;
		color: #ffffff;
		font-size: 3px;
	}

}