@charset "UTF-8";

.slnl{
	width: auto;
	padding:0;
}

.slnl p{
	font-size: 3.8vw;
}

.slnl img{
	padding:0; margin:0;
}

@media (min-width: 750px) {
.slnl {
    width: 560px;
    margin: auto;
  }
.slnl p{
	font-size: 28px;
	line-height: 1.8;
}	
} 

.kv{
	padding: 0;
	margin: 0;
}
.kv-btn1 {
  position: absolute;
  top: 7.7%;
  left: 28%;
  transform: translate(-50%,-50%);
  width: 50%;
  text-align: center;
  max-width: 500px;
  z-index: 2;
  padding: 16px;
}
.kv-btn2 {
  position: absolute;
  top: 7.7%;
  left: 72%;
  transform: translate(-50%,-50%);
  width: 50%;
  text-align: center;
  max-width: 500px;
  z-index: 2;
  padding: 16px;
}

.btnkv{
	display: flex;
	justify-content: center;
    margin-top: -70px;
    max-width: 100%;
    padding: 0 15px 50px;
}

.btnkv a{
	padding:0 5px;
}


@media (min-width: 750px) {
	

		
	.kv{
	position: relative;
	}
	.kv-btn1 {
	position: absolute;
	top: 93%;
	left: 28%;
	}
	.kv-btn2 {
	position: absolute;
	top: 93%;
	left: 73%;
	}
	
	.btnkv{
	display: flex;
	justify-content: center;
    margin-top: -100px;
}
	
	
}



.sec01 .sec01-content{
	background-size:100% auto;
	text-align: left;
	padding: 0;
	margin: 0;
}
.sec01-inner{
	width: fit-content;
	margin: auto;	
}
.sec01 p{
	margin: 0 0 20px;
	color: #500022;
}
.sec01 p:last-child{
	margin: 0;
	padding-bottom: 15px;
}
.sec01 p b{
	border-bottom:1px solid #500022;
}
.sec01 .note{
	color: #777;
	font-size: 2.8vw;
}
@media (min-width: 750px) {
.sec01 p{
	margin: 0 0 30px;
}	
.sec01 .note{
	font-size: 18px;
}
}
.sec01 .present{
	position: relative;
	background: #bf1841;
	padding: 0 0 40px;
}
.sec01 .present img{
	margin-top: -7vw;

}
.sec02 p{
	margin: 0 0 20px;
	color: #500022;
}
.sec02 p b{
	border-bottom:1px solid #500022;
}
.sec02 .item-text{
	width: 95%;
	margin: auto;
	padding: 20px 0;
}
.sec02 .item:nth-child(2) .item-text{
	margin: -4vw auto 20px;
	padding: 0;
}
@media (min-width: 750px) {
	.sec02 .item:nth-child(2) .item-text{
	margin: -2vw auto 20px;
}
}
.sec02 .item:nth-child(2) .item-text.text2{
	margin: 15px auto 30px;
	padding: 0;
}
.sec02 .item .note{
	color: #777;
	font-size: 2.8vw;
	text-align: right;
	margin-top: -15px;

}
.sec02 .item-gif{
	text-align: center;
}
@media (min-width: 750px) {
.sec02 .item .note{
	font-size: 18px;
}
}
.sec04 .title{
	text-align: center;
	color: #500022;
	font-weight: bold;
	padding: 40px 0 10px;
}
.sec04 .title .sub{
	display: block;
	font-size: 5vw;
}
.sec04 .title .main{
	display: block;
	font-size: 7vw;	
}
.sec04 .content{
	text-align: center;
}
@media (min-width: 750px) {
.sec04 .title {
    padding: 90px 0 30px;
}	
.sec04 .title .sub{
	font-size: 35px;
}
.sec04 .title .main{
	font-size: 50px;	
}
}
.sec05{
	background-color: #6d5533;
	color: #ffffff;
	padding: 30px 0;
}

@media (min-width: 750px) {

}

.sec05 .text01{
	color: #ffffff;
	font-weight: bold;	
	text-align: center;
	line-height: 1.4;
	font-size: 5.5vw;	
}
.sec05 .text02{
	color: #500022;
	text-align: center;
	font-size: 4.5vw;	
}

.sec05 .card{
	width: 82%;
	margin: 0 auto 50px;
	border:8px solid #ffffff;
	color: #ffffff;
	padding: 10px 15px;
	font-size: 18px;
}
.sec05 .card li{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	color: #ffffff;
	padding: 8px;
}
.sec05 .title03{
	color: #ffffff;
	text-align: left;
	line-height: 1.4;
	font-size: 13px;
	margin: 20px 20px 0;	
}
.sec05 .card02{
	width: 82%;
	margin: 0 auto 50px;
	border:2px solid #ffffff;
	color: #ffffff;
	padding: 10px 15px;
	font-size: 18px;
}
.sec05 .card02 .ttl01 {
	margin: 0 auto;
}
.sec05 .card02 .ttl01 p{
	font-weight: bold;
	text-align: center;
	font-size: 1em;
}
.sec05 .card02 li{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	color: #ffffff;
	padding: 8px;
}

.sec05 .card02 .access-from-stations{
	position: relative;
	border: 1px solid #c3aa7e;
	padding: 20px;
	margin: 30px;
}
.sec05 .card02 .access-from-stations .ttl02 {
  position: absolute;
  top: 0;
  left: 0;

  font-size: 0.8em;
  padding: 0 1em;
  margin: 0;
  transform: translateY(-50%) translateX(1em);
  background-color: #6d5533;
}
.sec05 .card02 .access-from-stations p{
	font-size: 18px;
}
#gmap {
    position: relative;
    margin: auto;
    width: 100%;
    height: 425px;
}
    
@media (min-width: 750px) {
.sec05 .text01{
	font-size: 37px;
	margin: 60px 0 20px;
}	
.sec05 .text02{	
	font-size: 35px;
}
.sec05 .card{
	padding: 20px 25px;
	font-size: 27px;
}
.sec05 .title03{
	font-size: 18px;
}
.sec05 .card02{
	padding: 20px 25px;
	font-size: 27px;
}
.sec05 .card02 .access-from-stations{
}
#gmap {
	height: 425px;
}
}

.clinicmap{
		width: fit-content;
	    margin: auto;		
	}



.sec06 .sec06_wrapper{
	border-left:5px solid #33afb0;
	border-right:5px solid #33afb0;
	border-bottom:5px solid #33afb0;
	padding: 0 0 30px;
}
.sec06 .list{
	width: 100%;
	margin: auto;
	text-align:center;
}
.sec06 .list_1{
	width: 70%;
	margin: auto;
	text-align:center;
}
.sec06 .item{
	margin-top: 0;
}
.sec06 a{
	text-decoration: none;
	position: relative;
	display: block;
	background: #333;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 5vw;
    width: 96%;
    margin: 20px auto;
    padding: 13px 0;
}
.sec06 a::after{
	content:"";
	position: absolute;
	top: calc(50% - 7px);
	right: 20px;
	width: 13px;
	height: 13px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);	
}
.sec06 .note {
	width: 70%;
	margin: auto;
}
.sec06 .note .item{
	color: #777;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	margin: 2px 0;
	font-size: 2.5vw;
}
@media (min-width: 750px) {
.sec06 .sec06_wrapper{
	border-left:10px solid #33afb0;
	border-right:10px solid #33afb0;
	border-bottom:10px solid #33afb0;
}	
.sec06 a{
	font-size: 37px;
	padding: 40px 0;
	margin: 40px auto;
}
.sec06 a::after{
	content:"";
	position: absolute;
	top: calc(50% - 14px);
	right: 40px;
	width: 23px;
	height: 23px;	
}
.sec06 .note .item{
	font-size: 20px;
}	
}

.invisible {
	visibility: hidden;
}
.animated {
	animation-duration: 1.2s; 
	animation-delay: 0.2s;
}

.animated_slow { animation-delay: 0.8s; }

.animated_slow1 { animation-delay: 0.1s; }
.animated_slow2 { animation-delay: 0.3s; }
.animated_slow3 { animation-delay: 0.5s; }
.animated_slow4 { animation-delay: 0.7s; }
.animated_slow5 { animation-delay: 0.9s; }
.animated_slow6 { animation-delay: 1.1s; }



@-webkit-keyframes fadeInDown {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(0, -10%, 0);
	  transform: translate3d(0, -10%, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  
  @keyframes fadeInDown {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(0, -10%, 0);
	  transform: translate3d(0, -10%, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  
  .fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
  }
  

  
  @-webkit-keyframes fadeInLeft {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(-3%, 0, 0);
	  transform: translate3d(-3%, 0, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  
  @keyframes fadeInLeft {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(-3%, 0, 0);
	  transform: translate3d(-3%, 0, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  
  .fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
  }


  @-webkit-keyframes fadeInRight {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(3%, 0, 0);
	  transform: translate3d(3%, 0, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  
  @keyframes fadeInRight {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(3%, 0, 0);
	  transform: translate3d(3%, 0, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  
  .fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
  }


@-webkit-keyframes fadeInUp {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(0, 5%, 0);
	  transform: translate3d(0, 5%, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  
  @keyframes fadeInUp {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(0, 5%, 0);
	  transform: translate3d(0, 5%, 0);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
  }
  
  .fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
  }
 .message__thumbnail-sp{
	 display: none;
 } 
 
 .sec_06{}
 .terms{margin:30px 20px; padding:20px; border: 1px solid #333;}
 .terms h3{text-align: center;}
 
  /* --------------------------------------------------------------------------------
 #Faq
-------------------------------------------------------------------------------- */
 #Faq {
	margin-bottom: 15%;
	background: #fff;
	& h2 {
		font-size: 4.2rem;
		margin-bottom: 5%;
		text-align: center;
	}
	& .body {
		& .block_faq {
			display: flex;
			flex-direction: column;
			gap: 1em 0;
			margin-bottom: 10%;
			& .faq_box {
				width: 95%;
				margin: auto;
				background: #eaeaea;
				& .faq_head {
					font-size: clamp(1.3rem, 3.467vw, 26px);
					font-weight: 20;
					text-align: left;
					padding: 1% 12% 1% 0;
					& p {
						padding-left: 20%;
						position: relative;
						font-size: 1.5rem;
						&::before {
							content: "Q";
							font-size: 30px;
							font-weight: 400;
							font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", 游明朝,'Yu Mincho',YuMincho, 'Hiragino Mincho ProN','Hiragino Mincho Pro',"Times New Roman", HGS明朝E,メイリオ,Meiryo,serif;
							position: absolute;
							top: 50%;
							left: 8%;
							transform: translateY(-50%);
						}
					}
				}
				& .faq_body {
					position: relative;
					&::before {
						content: "";
						width: 90%;
						height: .1rem;
						background: #000;
						position: absolute;
						top: 0;
						left: 50%;
						transform: translateX(-50%);
					}
					& p {
						font-size: 1.5rem;
						padding: 5%;
					}
				}
			}
		}
		& .block_ingredient {
			width: 86.67%;
			padding: 5%;
			margin: auto;
			border: .1rem solid #000;
			& h3 {
				font-size: clamp(2rem, 5.33vw, 40px);
				font-weight: 20;
				text-align: center;
				margin-bottom: 5%;
			}
			& p {
				font-size: clamp(1.2rem, 3.2vw, 24px);
			}
		}
	}
}
.text-underline { 
	text-decoration: underline;
	text-underline-offset: 5px;
	}
	
/* --------------------------------------------------------------------------------
 Accordion
-------------------------------------------------------------------------------- */
 .accordion {
	& .acd_head {
		display: block;
		cursor: pointer;
		position: relative;
		&::-webkit-details-marker {
			display: none;
		}
		&::before {
			content: '';
			display: inline-block;
			width: 1em;
			height: .1rem;
			background-color: #000;
			position: absolute;
			right: 5%;
			top: 50%;
			transform: translateY(-50%);
			transition: 0.2s;
		}
		&::after {
			content: '';
			display: inline-block;
			width: 1em;
			height: .1rem;
			background-color: #000;
			position: absolute;
			right: 5%;
			top: 50%;
			transform: translateY(-50%) rotate(90deg);
			transition: 0.2s;
		}
	}
}

.h_p { line-height: 24px;
							@media (min-width: 750px) {
							line-height: 36px;
							}
}