@charset "utf-8";

:where(*) {
	margin: 0;
	padding: 0;
}

:where(a) {
	color: #000;
	text-decoration: none;
	transition: ease 0.3s;
}

:where(a):hover {
	opacity: 0.6;
	transition: ease 0.3s;
}

:where(img) {
	width: 100%;
	line-height: 0;
}

:where(main, figure, picture) {
	display: block;
}

:where(figure, picture) {
	line-height: 0;
}

:where(ul li) {
	list-style: none;
}

html {
	font-size: 62.5%;
} /* font-sizeは16pxの62.5%の10px */
body {
	font-size: 1.6rem;
} /*font-size : 16px と同等*/
:where(h2) {
	font-size: 5.4rem;
} /* font-size: 54px と同等 */
:where(h3) {
	font-size: 3rem;
} /* font-size: 30px と同等 */
:where(h4) {
	font-size: 3rem;
} /* font-size: 30px と同等 */
:where(h5) {
	font-size: 2.5rem;
} 

h2 {
	font-family: serif;
	position: relative;
	padding: 1.5rem 0;
	text-align: center;
	margin-bottom: 10rem;
}
@media screen and (max-width: 768px) {
	h2 {
		font-size: 2.3rem;
		margin-bottom: 6rem;
	}
}

h2::before {
	position: absolute;
	bottom: -2rem;
	left: calc(50% - 40px);
	width: 80px;
	height: 3px;
	content: "";
	border-radius: 3px;
	background: #ffb5a6;
}
@media screen and (max-width: 768px) {
	h2:before {
		bottom: -1rem;
	}
}

h3{
	color: #ffffff;
    text-align: center;
    margin-bottom: 1.5rem;
    background-color: #fb6e52;
}
@media screen and (max-width: 768px){
	h3 {
		font-size: 2.2rem;
	}
  }
h4{
	color: #ffffff;
    text-align: center;
	margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: #FDB8AB;
}
@media screen and (max-width: 768px){
	h4 {
		font-size: 2rem;
	}
  }
.underline {
	color: #fb6e52;
	position: relative;
	margin-bottom: 4rem;
	font-size: 3rem;
    font-weight: bold;
}

.underline::after {
	content: "";
	width: 16%;
	border-bottom: solid 2px #fb6e52;
	position: absolute;
	bottom: -10px;
	left: 0;
}

h3 + p {
	margin-bottom: 2rem;
}

section {
	width: min(100% - 2rem, 1080px);
	margin: auto auto 10rem;
}
@media screen and (max-width: 768px) {
	section {
		margin: auto auto 5rem;
	}
}

@media screen and (max-width: 768px) {
	.sp {
		display: none;
	}
}

.c-box {
	display: flex;
	justify-content: center;
	align-items: center;
}

.under_line {
	background: linear-gradient(transparent 60%, #ff9999 0%);
	font-size: larger;
}

.df_ju_sb {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
@media screen and (max-width: 768px) {
	.df_ju_sb {
		/* display: block; */
		flex-wrap: wrap;
		row-gap: 2rem;
		justify-content: center;
	}
}

.co_og {
	color: #fb6e52;
	font-weight: bold;
	font-size: 3rem;
	margin-bottom: .5rem;
}
@media screen and (max-width: 768px) {
	.co_og{
		font-size: 2rem;
	}
}
.center {
	text-align: center;
}
/* //////////header////////// */

header {
	width: 100%;
}

nav {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

.logo {
	margin-right: auto;
	margin-left: 1rem;
	width: 133px;
	height: 90px;
}
@media screen and (max-width: 768px) {
	.logo {
		width: 20%;
		height: auto;
	}
}

.main_visual {
	margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
	.main_visual {
		margin-bottom: 40px;
	}
}

/* /////こんなお悩みはございませんか？///// */

.trouble_box {
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 768px) {
	.trouble_box {
		display: block;
	}
}

.trouble {
	font-size: 2.5rem;
}
@media screen and (max-width: 768px) {
	.trouble {
		font-size: 1.6rem;
	}
}

.trouble li {
	padding-left: 4.5rem;
	margin-bottom: 2.5rem;
}
@media screen and (max-width: 768px) {
	.trouble li {
		padding-left: 3.25rem;
		margin-bottom: 2.25rem;
	}
}

.trouble li {
	background: url(../images/Icon.jpg) no-repeat;
	background-size: contain;
}

.trouble_img {
	width: 11%;
	margin-left: 5rem;
}
@media screen and (max-width: 768px) {
	.trouble_img {
		width: 35%;
		margin: 5rem auto auto;
	}
}

.banner01 {
	margin-top: 3rem;
}

/* /////当院の矯正治療が選ばれる理由 /////*/

.chosen_box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 5rem 1rem;
}

.chosen_list {
	width: 32%;
}
@media screen and (max-width: 768px) {
	.chosen_list {
		width: 95%;
		margin: auto;
	}
}

.chosen_list_title {
	margin-top: 1rem;
	text-align: center;
	font-size: 1.8rem;
}

.chosen_list dd {
	margin-top: 1rem;
	font-size: 1.6rem;
}

/* /////矯正治療種類///// */

section.bg_gray {
	width: 100%;
	padding: 5rem 0 5rem;
	background: #fafafa;
}

.bg_gray :is(.bg_gray_area) {
	width: min(100% - 2rem, 1080px);
	margin-inline: auto;
}

.kyosei_inner {
	margin-bottom: 7rem;
}

.dental-loan{
	width: 845px;
	margin: auto;
}
@media screen and (max-width: 768px) {
	.dental-loan{
		width: 100%;
	}
}

.merit_img {
	width: 49%;
}
@media screen and (max-width: 768px) {
	.merit_img {
		width: 100%;
	}
}
.merit_img img{
	border-radius: 40px;
}
@media screen and (max-width: 768px) {
	.merit_img img {
		border-radius: 20px;
	}
}
.merit_img video {
	width: 100%;
}
.merit_area {
	width: 49%;
	padding-top: 1rem;
}
@media screen and (max-width: 768px) {
	.merit_area {
		width: 100%;
	}
}
.merit_area video {
	width: 100%;
}
.merit_box {
	position: relative;
	padding: 1rem 2rem;
	margin: auto auto 3rem;
	background: #fff;
}

.merit_box ul {
	counter-reset: rank;
}

.merit_box ul li {
	position: relative;
	padding-left: 2.5rem;
	margin-bottom: 1rem;
}

.merit_box ul li::before {
	font-weight: bolder;
	counter-increment: rank;
	content: counter(rank);
	padding-right: 10px;
	color: #fff;
	background-color: #fb6e52;
	padding: 0 5px;
	border-radius: 50%;
	font-size: 1.4rem;
	position: absolute;
	top: 0.2rem;
	text-align: center;
	left: 0;
}
.itero_img{
	width: 20%;
}
.itero_text{
	width: 78%;
}
@media screen and (max-width: 768px){
	.itero_img{
		width: 100%;
	}
	.itero_text{
		width: 100%;
	}
}
.de_merit_box {
	position: relative;
	padding: 1rem 2rem;
	margin: auto auto 3rem;
	background: #fff;
}

.de_merit_box ul {
	counter-reset: rank;
}

.de_merit_box ul li {
	position: relative;
	padding-left: 2.5rem;
	margin-bottom: 1rem;
}

.de_merit_box ul li::before {
	font-weight: bolder;
	counter-increment: rank;
	content: counter(rank);
	padding-right: 10px;
	color: #fff;
	background-color: #fb6e52;
	padding: 0 5px;
	border-radius: 50%;
	font-size: 1.4rem;
	position: absolute;
	top: 0.2rem;
	text-align: center;
	left: 0;
}


.merit_area :is(a) {
	text-align: right;
	width: 100%;
	display: block;
	margin-top: 1rem;
}

.best{
	margin-bottom: auto;
	margin-right: 10rem;
}
@media screen and (max-width: 768px){
	.best{
		margin-right: 0;
	}
}
.wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
  }
  @media screen and (max-width: 768px) {
	.wrap {
		flex-direction: column;
		margin-bottom: 3rem;
	  }
}
  .wrap:nth-child(odd) {
	flex-direction: row-reverse;
  }
  @media screen and (max-width: 768px) {
	.wrap:nth-child(odd) {
		flex-direction: column;
	  }
}
 .wrap img {
	display: block;
	width: 50%;
	height: auto;
  }
  
  @media screen and (max-width: 768px) {
	.wrap img {
		width: 100%;
	  }
}
  .box {
	width: 48%;
  }
  @media screen and (max-width: 768px) {
	.box {
		width: 90%;
	  }
}
  h5{
	  color: #ff9999;
	  font-weight: lighter;
  }

  /* オルソパルスの特徴 */
.orth{
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.orth_content{
	width: 49%;
}
@media screen and (max-width: 768px){
	.orth_content{
		width: 100%;
	}
}
/* /////料金表///// */

.pricing_table {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem 1rem;
	margin-bottom: 10rem;
}
@media screen and (max-width: 768px) {
	.pricing_table {
		display: block;
		margin-bottom: 5rem;
	}
}

.pricing_table li {
	width: 49%;
}
@media screen and (max-width: 768px) {
	.pricing_table li {
		width: 100%;
		margin-bottom: 1.5rem;
	}
}

/* /////対応可能な歯並び///// */

.tooth_box {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 5rem 1rem;
}

.tooth_list {
	width: 23%;
}
@media screen and (max-width: 768px) {
	.tooth_list {
		width: 45%;
	}
}

.tooth_list {
	text-align: center;
}

/* /////治療の流れ///// */

.treatment_box {
	display: flex;
	flex-wrap: wrap;
	/* gap: 6rem 1rem; */
	justify-content: space-evenly;
	row-gap: 6rem;
}

.treatment_list {
	width: 40%;
}
@media screen and (max-width: 768px) {
	.treatment_list {
		width: 90%;
		margin: auto;
	}
}

.ranking {
	counter-reset: rank;
}

.ranking dl {
	position: relative;
}

.ranking dl::before {
	font-family: serif;
	font-weight: bolder;
	counter-increment: rank;
	content: counter(rank);
	padding-right: 10px;
	color: #fdb8ab;
	font-size: 5rem;
	position: absolute;
	top: -5rem;
	left: 0;
}
@media screen and (max-width: 768px) {
	.ranking dl::before {
	}
}

/* /////よくある質問///// */

.quest,
.answer {
	margin: 0;
	display: flex;
	align-items: center;
}
.quest {
	color: #fb6e52;
	font-family: "Courier New", Courier, monospace;
	font-weight: bolder;
}
.quest::before {
	font-family: "ヒラギノ明朝 Pro", "游明朝体", serif;
	font-size: 4em;
	content: "Q";
	color: #fdb8ab;
}
.answer {
	padding-left: 1rem;
	border-left: 1px solid #fdb8ab;
	margin-left: 1.5rem;
}
.cp_qa {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
.cp_qanda {
	width: 48%;
	margin: 0;
}
@media screen and (max-width: 480px) {
	.cp_qanda {
		width: 95%;
		padding: 0;
	}
}

.banner_bg {
	background: url(../images/cta_bk.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ccc;
	margin-top: 6rem;
	padding: 3.5rem;
}
@media screen and (max-width: 768px) {
	.banner_bg {
		padding: 3.5rem 1.5rem;
	}
}

.banner_bg_inner {
	background: rgb(255, 255, 255, 0.7);
	padding: 2rem 6rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 20px;
}
@media screen and (max-width: 768px) {
	.banner_bg_inner {
		display: block;
		padding: 3rem;
	}
}

.icon_og {
	background: #fdb8ab;
	padding: 1rem;
	margin-right: 1rem;
	width: 85px;
	display: inline-block;
	text-align: center;
	letter-spacing: 0.5rem;
}
@media screen and (max-width: 768px) {
	.icon_og {
		display: block;
		margin-bottom: 1rem;
	}
}

.banner_bg_inner_text {
	width: 60%;
}
@media screen and (max-width: 768px) {
	.banner_bg_inner_text {
		width: 100%;
		margin-bottom: 2rem;
	}
}

.banner_bg_inner_text dt h4 {
	margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
	.banner_bg_inner_text dt h4 {
		font-size: 2rem;
	}
}

.banner_bg_inner_text p:first-of-type {
	margin-bottom: 1rem;
}

.banner_bg_inner_img {
	width: 40%;
}
@media screen and (max-width: 768px) {
	.banner_bg_inner_img {
		width: 100%;
	}
	.banner_bg_inner_img:first-of-type div {
		margin-bottom: 1rem;
	}
}

/* /////院長紹介///// */

.incho_box {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 5rem;
}
@media screen and (max-width: 768px) {
	.incho_box {
		display: block;
		margin-bottom: 3rem;
	}
}

.incho_img {
	width: 386px;
}
@media screen and (max-width: 768px) {
	.incho_img {
		width: 100%;
		margin-bottom: 2rem;
	}
}

.incho_text {
	width: 50%;
}
@media screen and (max-width: 768px) {
	.incho_text {
		width: 100%;
	}
}

.incho_text p {
	font-size: 4.5rem;
	line-height: 1.1;
}

.incho_text p span {
	font-size: 50%;
	font-weight: normal;
	display: block;
}

.keireki dt {
	color: #fb6e52;
	font-size: 2rem;
	margin-top: 2rem;
	position: relative;
}

.keireki dt::after {
	content: "";
	width: 5rem;
	border-bottom: solid 1px #fb6e52;
	position: absolute;
	bottom: -5px;
	left: 0;
}

.keireki dd {
	margin-top: 1.5rem;
}

/*///// 院内施設・設備のご紹介///// */

.swiper.mySwiper2.swiper-initialized.swiper-horizontal.swiper-pointer-events {
	width: 719px;
}
@media screen and (max-width: 768px) {
	.swiper.mySwiper2.swiper-initialized.swiper-horizontal.swiper-pointer-events {
		width: 100%;
	}
	.mySwiper2 {
		height: 70vw !important;
	}
}

.swiper.mySwiper.swiper-initialized.swiper-horizontal.swiper-pointer-events {
	width: 719px;
	margin-top: 1rem;
}
@media screen and (max-width: 768px) {
	.swiper.mySwiper.swiper-initialized.swiper-horizontal.swiper-pointer-events {
		width: 100%;
	}
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
	color: #000 !important;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
	color: #000 !important;
}

.swiper--wrapper {
	/* wrapperのサイズを調整 */
	width: 719px;
	height: 300px;
}

.swiper-slide {
	/* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
	color: #ffffff;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 400px;
	text-align: center;
}

.mySwiper2 {
	height: 400px;
	width: 100%;
}

.mySwiper {
	height: 100px;
	box-sizing: border-box;
	padding: 10px 0;
}

.mySwiper .swiper-slide {
	width: 25%;
	height: 100%;
	opacity: 0.4;
	line-height: 80px;
}

.mySwiper .swiper-slide-thumb-active {
	opacity: 1;
}

/* /////アクセス///// */
section.map_area {
	width: 100%;
}
.map {
	width: 100%;
}
@media screen and (max-width: 768px) {
	.map iframe {
		height: 60vw;
	}
}

.map_inner {
	width: min(100% - 2rem, 1080px);
	margin: auto;
}

.access_box {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 5rem;
}
@media screen and (max-width: 768px) {
	.access_box {
		display: block;
	}
}

.access_img {
	width: 452px;
}
@media screen and (max-width: 768px) {
	.access_img {
		width: 100%;
		margin-bottom: 2rem;
	}
}

.access_text {
	margin-bottom: 2rem;
}

.access_text_icon {
	background: #fb6e52;
	color: #fff;
	width: 180px;
	text-align: center;
	padding: 5px 0;
}

.access_text dd {
	padding: 2rem;
}

.info {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 5rem;
}
@media screen and (max-width: 768px) {
	.info {
		display: block;
		margin-top: 0;
	}
}

.sns {
	width: 44%;
}
@media screen and (max-width: 768px) {
	.sns {
		width: 100%;
	}
}

.logo_f {
	width: 100%;
	text-align: center;
}
.logo_f img {
	width: 188px;
}

.sns_box {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 87%;
	margin: 1rem auto auto;
}
@media screen and (max-width: 768px) {
	.sns_box {
		display: block;
		width: 100%;
		margin: 1rem auto 3rem;
	}

	.sns_box img {
		margin-bottom: 1rem;
	}
}

.sns_box img {
	width: 200px;
}
@media screen and (max-width: 768px) {
	.sns_box img {
		width: 100%;
	}
}

.time_table {
	width: 45%;
	align-self: end;
}
@media screen and (max-width: 768px) {
	.time_table {
		width: 100%;
	}
}

.time_table_contents {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.time_table_contents :is(tr) {
	border-bottom: solid 1px #000;
	text-align: center;
}

.time_table_contents td {
	padding: 0.5rem;
	padding: 1rem 0.5rem;
}

.time_table_contents td:first-of-type {
	width: 14rem;
}

.time_table_contents td:not(:first-of-type) {
	color: #fb6e52;
}

.time_table p {
	line-height: 2;
	margin-top: 1rem;
}

footer {
	text-align: center;
	font-size: 12px;
	color: #fff;
	background: #fb6e52;
	padding: 15px 0;
}

.bnr_sp {
	display: none;
}
@media screen and (max-width: 768px) {
	footer{
		margin-bottom: 53px;
	}
	.bnr_sp {
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 10000;
		line-height: 0;
	}
}