/* Global Styling */



#hero-section {
    background: url('img/hero-img.webp') center center / cover no-repeat;
}




/* セクションのスタイル */



h2, h3{
	font-family: "Shippori Mincho B1";
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 800;
	line-height: 160%; /* 44.8px */
	letter-spacing: 0.1rem;
}







/* 全体スタイル */


/* セクションスタイル
-------------------------------*/
.sec01-img {
  margin-top: -337px;
  position: relative;
	right: 28px
}

.sec01-img img {
    min-width: 286px;
    max-width: 731px;
    width: 731px;
}

.info-block {
  flex-direction: row;
  justify-content: space-between;
  gap: 100px;
  margin-top: 145px;
}


.clinic_address{
	display: flex;
	width: 413px;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

dl {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  flex-direction: row;
	
	font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 180%; /* 25.2px */
letter-spacing: 1.4px;
}

dt{
	width: 90px;	
}

dd{
	width: 280px;
}


/* クリニック画像セクション
---------------------------------*/
.clinic_img {
    background-color: #fff;
    margin-bottom: 60px;
	margin-top: 143px;
	
}

.clinic_img h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.image-block ul {
	display: flex;
	align-items: flex-start;
	gap: 100px;
	align-self: stretch;
}

.image-block li {
}

.image-block .slider img {
    width: auto;
	height: 400px;
}

.slider_nav{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.slider_nav li{
	width: 60px;
	height: 60px;
	opacity: 0.9;
}


/* クリニック地図セクション
-------------------------------*/

.clinic_map iframe {
    width: 924px;
    height: 351px;
    border: 0;
	filter: grayscale(1);
}

.clinic_map {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	flex-shrink: 0;
}


/* slider
-----------------------*/
.image-block {
  position: relative;
}

.slider_nav {
  position: absolute;
  top: 42%;
}

.prev-button, .next-button {
  width: 60px;
  height: 60px;
}



/* カレンダーセクション
--------------------------------*/
.clinic_calendar {
    background-color: #fff;
    padding: 20px;
	margin: 60px 0 20px;
}

.clinic_calendar .container{
	gap:70px;
}

.calendar-block {
	display: flex;
	align-items: center;
	gap: 35.225px;
	align-self: stretch;
	justify-content: center;
	flex-direction: row;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    text-align: center;
}

.calendar-table th, .calendar-table td {
    border: 1px solid #ddd;
    padding: 10px;
}

.calendar-table th {
}

.calendar-table td {
    height: 50px;
}

.calendar-block h3,
.clinic_calendar h2{
	text-align: center;
}


/*map
----------------------*/
.map-block {
  gap: 20px;
	align-items: center;
}
.btn_circle-arrow{
	justify-content: center;
}


/* メディアクエリ (レスポンシブデザイン) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .image-block ul {
    }

    .image-block li {
    }
	
	
	.calendar-block {
		align-items: stretch;
		flex-direction: column;
	}
	
	/* common
	---------------------*/
	section .container{
		padding: 0;
	}
	
	#sec01 .container{
		padding: 0 0 0 6.15%;
	}
	#sec02 .container{
		padding: 0 0 0 0;
	}
	#sec03 .container{
		padding: 0 0 0 6.15%;
	}
	
	#sec02 {
	  overflow: hidden;
	}
	
	/* sec01
	----------------------*/
	.info-block {
	  flex-direction: column-reverse;
	}
	
	.image-block .slider img {
	  height: 200px;
	}
	
	.prev-button, .next-button {
	  width: 30px;
	  height: 30px;
	}
	
	.image-block ul{
		gap:50px;
	}
	
	dl{
		flex-direction: column;
		gap:24px;
	}
	.clinic_address{
		width: 100%;
	}
	
	.clinic_address{
		gap:24px;	
	}
	
	.sec01-img {
  		margin-top: 0px;
  		position: relative;
	}
	
	/*  sec02
	-------------------------*/
	.clinic_img{
		padding: 20px 0 20px 0;
	}
	
	/* mapp
	------------------------*/
	.clinic_map iframe {
	  width: 320px;
	  height: 220px;
	  border: 0;
	  filter: grayscale(1);
	}
	
	/* 20241110
	--------------------*/
	.sec01-img img{
		    width: 286px;
	}
	.sec01-img {
		align-items: end;
		right: 0;
	}
	.info-block{
		margin-top: 0;
	}
}