/* Global Styling */
body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  padding: 0;
}


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




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



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


.text-bg{
	color: #544B4B;
	text-align: center;
	leading-trim: both;
	text-edge: cap;
	font-family: Qanoar;
	font-size: 69px;
	font-style: normal;
	font-weight: 400;
	line-height: 0px; /* 0% */
	letter-spacing: 6.9px;
	opacity: 0.1;
	white-space: nowrap;
}


/* セクション1: 美肌の紹介
--------------------------------------*/
.sub-title {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: 0.375rem;	
}

.intro-image {
  	width: 312px;
}

.intro-content{
	width: 57.08%;
	gap:35px;
	margin-top: 50px;
}


.intro_wrp {
  flex-direction: row;
	gap:105px;
}

.beauty_intro {

}

.beauty_intro h1 {

}

.beauty_intro h2 {

}

.beauty_intro p {
 
}

.intro-image img {

}



/* セクション2: Valueセクション
--------------------------------------*/
.value_section {

}

.value_section h2 {

}

.value-content {
  display: flex;
  flex-direction: row;
  gap: 10.66%;
  align-items: center;
	justify-content: center;
}

.section-description {
  text-align: center;
}

.value-title {
  gap: 31px;
}

#sec02 {
	background: url("img/sec03_bg.webp")no-repeat center center / cover;
	margin-top: -88px;
}

#sec02 .container{
	padding: 140px 11.3%;
}


.value-item-list {
  flex-direction: row;
  gap: 4.72%;
}

.value-img {
  width: 57.25%;
}

.value-img img {
  max-width: 600px;
}

.value-item {
  width: 30.19%;
	gap:16px;
}

.value-item h3 {

}

.value-item p {

}
.value_section h2{
	text-align: center;
}



/* セクション3: Dr. Kinの紹介
----------------------------------------*/
.doctor_section {
  margin-top: 182px;
}

.doctor-profile {
	flex-direction: row;
	gap: 5.57%;
	justify-content: center;
	padding: 120px 0 0 114px;

}

.doctor-profile img {
	width: 305px;
	height: 100%;
}

.doctor-info {

}

.doctor-info h3 {
	margin-bottom: 31px;
}

.doctor-title {
	margin-bottom: 8px;
}

.doctor-quote {
  margin: 53px 0 20px;
}

.doctor-description {
  margin-bottom: 53px;
}

/* セクション3の「詳しく見る」ボタン */
.more-section {
	flex-direction: row;
	justify-content: flex-start;
}

.more-button {

}

.more-button:hover {
    
}

.doctor-sec-title{
	display: flex;
	flex-direction: column;
	gap:10px;
}

/* 続きを見る */
.accordion-content {
	display: block;
}
.accordion-toggle_wrp {
	display: none;
}
@media (max-width: 768px) {
    .accordion-content {
        display: none;
    }
    .accordion-toggle_wrp {
        display: flex;
		justify-content: center;
    }
}







/* メディアクエリ (レスポンシブデザイン)
====================================================*/
@media (max-width: 768px) {
	
	/* common
	-------------------------*/
	section .container {
	  padding: 0;
	}
	
	#sec01 .container{
		padding: 0 6.15% 78px 0;
	}
	#sec02 .container{
		padding: 0 0 0 0;
	}
	#sec03 .container{
		padding: 0 6.15% 0 6.15%;
	}
	
	
	/* sec01
	--------------------------*/
	
	.intro_wrp {
	  flex-direction: row-reverse;
	}
	
	.intro-image{
		width: 138px;
	}
	
	.text-bg{
		font-size: 28px;
		letter-spacing: 2.8px;
	}
	
	.sub-title{
		font-size: 20px;
	}
	
	
	/*  sec02
	------------------------*/
	#sec02{
		margin-top: 0;
	}
	.intro_wrp{
		gap:0;
	}
	
	.intro-content{
		width: 100%;
		margin-left: -20px;
    	z-index: 1;
	}
	
	.value-content{
		flex-direction: column;
	}
	
	.value-item-list {
	  flex-direction: column;
	  gap: 50px;
	}
	.value-item {
	  width: 100%;
	  gap: 16px;
	}
	
	 #sec02 .container {
		padding: 60px 8.97% 60px 8.97%;
	  }
	
	.value-img {
		width: 100%;
		margin: 40px 0;
	}
	.value-item h3{
		font-size: 16px;
		line-height: 180%; /* 28.8px */
		letter-spacing: 1.6px;
	}
	
	/* sec03
	---------------------*/
	.doctor_section {
	  margin-top: 82px;
	}
	
	.doctor-profile {
	  flex-direction: row-reverse;
	  padding: 82px 0 0 0;
		position: relative;
		
	}
	
	.doctor-profile img {
		width: 194px;
		height: 254px;
		position: absolute;
		top: 0;
		right: -7%;
	  }
	
	
	.more-section {
	  justify-content: center;
	}

	
	
}/*@media (max-width: 768px)*/