/* CSS Document */


/*- menu -*

treatment, [id*="use_"], list_anchorbtns, list_number, list_time, use_entry, use_home_screen, use_topics, use_check_mystore, use_coupon

* filetop *
------------------------------------------------------------------------------------------------------------------------------------------*/

/*- File name [ howtouse/style.css ] -*/

/*----------------------------------------------------------------------------------------------------------------------------------------*

* treatment

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#treatment{
	background-color: #f2f4f0;
	padding-top: clamp(50px, 7.8125vw, 100px);
}

#treatment #anc_submenu{
	border-bottom: 2px solid #CCCCCC;
	padding: clamp(50px, 7.8125vw, 100px) 0;
}

#treatment #anc_submenu .inner #open_menu{
	padding-right: clamp(10px, 1.25vw, 16px);
	padding-left: clamp(10px, 1.25vw, 16px);
}

#treatment #anc_submenu .inner:not(.scroll) #open_menu{
	display: block !important;
}

#treatment #anc_submenu .inner #open_menu > ul{
	display: grid;
	gap: clamp(5px, 1.25vw, 16px) clamp(20px, 3.125vw, 40px);
	margin: 0 auto;
	max-width: 960px;
}

#treatment #anc_submenu .inner #open_menu > ul a{
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: clamp(8px, 0.9375vw, 12px);
	border: 1px solid #90939c;
	background-color: #FFFFFF;
	position: relative;
	font-weight: 500;
	font-size: clamp(1.2rem, 1.5625vw, 2rem);
	height: clamp(34px, 5.625vw, 72px);
	transition: unset;
}

#treatment #anc_submenu .inner #open_menu > ul a::after{
	content: "";
	display: block;
	background: url("../../img/icon/arrow02.svg") no-repeat center;
	background-size: contain;
	aspect-ratio: 1 / 0.722;
	width: clamp(10px, 1.40625vw, 18px);
	transform: translateY(-50%);
	position: absolute;
	right: clamp(10px, 1.25vw, 16px);
	top: 50%;
}

#treatment #anc_submenu .inner #open_menu > ul a small{
	font-size: clamp(1.2rem, 1.25vw, 1.6rem);
}

#treatment #anc_submenu .inner #open_btn{
	border-top: 3px solid #ff9296;
	display: none;
}

#treatment #anc_submenu .inner #open_btn > span{
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	background-color: #ff9296;
	font-weight: 600;
	font-size: clamp(1rem, 1.5625vw, 2rem);
	color: #FFFFFF;
	margin: 0 auto;
	position: relative;
	aspect-ratio: 3 / 1;
	height: clamp(40px, 5.625vw, 72px);
	cursor: pointer;
	padding-right: calc(clamp(10px, 1.015625vw, 13px) + clamp(10px, 1.25vw, 16px));
}

#treatment #anc_submenu .inner #open_btn > span::after{
	content: "";
	display: block;
	background: url("../../img/icon/arrow01.svg") no-repeat center;
	background-size: contain;
	aspect-ratio: 1 / 1.444;
	width: clamp(10px, 1.015625vw, 13px);
	transform: translateY(-50%) rotate(90deg);
	position: absolute;
	right: clamp(10px, 1.25vw, 16px);
	top: 50%;
}

/* scroll */
#treatment #anc_submenu .inner.scroll #open_menu{
	display: none;
	background-color: #f2f4f0;
	/*padding-bottom: clamp(16px, 3.75vw, 48px);
	padding-top: clamp(16px, 3.75vw, 48px);*/
    padding-bottom: clamp(10px, 2.8vw, 48px);
	padding-top: clamp(10px, 2.8vw, 48px);
}

#treatment #anc_submenu .inner.scroll #open_btn{
	display: block;
}

#treatment #anc_submenu .inner.scroll #open_btn span.close::after{
	background-image: url("../../img/icon/close_btn.svg");
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#treatment #anc_submenu .inner #open_menu > ul{
		grid-template-columns: repeat(2, 1fr);
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* [id*="use_"]

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
*[id*="use_"]{
	background-color: #fdfbec;
}

*[id*="use_"] > * + *{
	border-top: 2px solid #f6eda0;
}

*[id*="use_"] h4,
*[id*="use_"]:not(:last-of-type){
	border-bottom: 2px solid #f6eda0;
}

*[id*="use_"] h3,
*[id*="use_"] h4{
	text-align: center;
	background-color: #FFFFFF;
	font-size: clamp(2rem, 3.125vw, 4rem);
	line-height: 1.4;
	padding: clamp(16px, 2.5vw, 32px) clamp(10px, 1.25vw, 16px);
}

*[id*="use_"] h3,
*[id*="use_"] h4,
*[id*="use_"] h3 *,
*[id*="use_"] h4 *{
	font-weight: 600;
}

*[id*="use_"] h3 small,
*[id*="use_"] h4 small{
	font-size: clamp(1.6rem, 2.5vw, 3rem);
	line-height: 1;
}

*[id*="use_"] h4,
*[id*="use_"] h4 *{
	color: #eb6153;
}

*[id*="use_"] .inner{
	padding: clamp(32px, 5vw, 64px) clamp(10px, 1.25vw, 16px) clamp(64px, 9.375vw, 120px);
}

*[id*="use_"] .inner > *{
	margin-inline: auto; 
	max-width: 1040px;
}

*[id*="use_"] .inner > * + *{
	margin-top: clamp(32px, 5vw, 64px);
}

*[id*="use_"] .inner *:not(small).kome{
	display: block;
	text-indent: -1.6rem;
	padding-left: 1.6rem;
}

*[id*="use_"] .inner .text_emphasis{
	text-align: center;
}

*[id*="use_"] .inner .text_emphasis *{
	color: #eb6153;
}

*[id*="use_"] .inner .text_emphasis strong{
	font-weight: 500;
	font-size: clamp(2rem, 2.1875vw, 2.8rem);
	line-height: 1.4;
}

*[id*="use_"] .inner .text_emphasis strong small{
	font-size: clamp(1.6rem, 1.5625vw, 2rem);
}

*[id*="use_"] .youtube iframe{
	margin: 0 auto;
	aspect-ratio: 1 / 0.56;
	max-width: 750px;
	width: 100%;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* list_anchorbtns

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
.list_anchorbtns{
	background-color: #f2f4f0;
	padding: clamp(50px, 7.8125vw, 100px) clamp(10px, 1.25vw, 16px);
}

.list_anchorbtns > ul{
	display: grid;
	gap: clamp(10px, 1.25vw, 16px) clamp(20px, 3.125vw, 40px);
	margin-right: auto;
	margin-left: auto;
	max-width: 960px;
}

.list_anchorbtns > ul a{
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: clamp(8px, 0.9375vw, 12px);
	background-color: #eb6153;
	position: relative;
	font-weight: 500;
	font-size: clamp(1.4rem, 1.5625vw, 2rem);
	color: #FFFFFF;
	height: clamp(36px, 5.625vw, 72px);
	transition: unset;
}

.list_anchorbtns > ul a::after{
	content: "";
	display: block;
	background: url("../../img/icon/arrow01.svg") no-repeat center;
	background-size: contain;
	aspect-ratio: 1 / 1.444;
	width: clamp(10px, 1.015625vw, 13px);
	transform: translateY(-50%) rotate(90deg);
	position: absolute;
	right: clamp(10px, 1.25vw, 16px);
	top: 50%;
}

.list_anchorbtns > ul a:hover{
	background-color: #99dcb1;
}





/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	.list_anchorbtns > ul{
		grid-template-columns: repeat(2, 1fr);
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* .list_number

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
.list_number{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: clamp(24px, 5vw, 64px) clamp(16px, 2.5vw, 32px);
}

.list_number > li{
	display: flex;
	row-gap: clamp(16px, 2.5vw, 32px);
	flex-direction: column;
	counter-increment: num;
	width: 100%;
}

.list_number > li h5 > span{
	display: flex;
	align-items: flex-start;
	column-gap: 6px;
	border-radius: 5px;
	border: 2px solid #f6eda0;
	background-color: #FFFFFF;
	font-weight: 500;
	font-size: clamp(1.6rem, 1.5625vw, 2rem);
	padding: 10px 8px;
}

.list_number > li h5 > span::before{
	content: counter(num);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #eb6153;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-style: normal;
	font-weight: 500;
	font-size: clamp(1.4rem, 1.5625vw, 2rem);
	color: #FFFFFF;
	line-height: 1;
	aspect-ratio: 1 / 1;
	min-width: clamp(28px, 2.5vw, 32px);
	width: clamp(28px, 2.5vw, 32px);
}

.list_number > li .image{
}

.list_number > li .image.item_end{
	margin-top: auto;
}

.list_number > li .image img{
	margin-inline: auto; 
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	/* .list_number */
	.list_number{
		flex-direction: row;
	}
	
	.list_number.center{
		justify-content: center;
	}
	
	.list_number > li{
		width: calc((100% - (clamp(16px, 2.5vw, 32px) * 2)) / 3);
	}
	
	.list_number > li.grow2{
		width: calc(((100% - (clamp(16px, 2.5vw, 32px) * 2)) / 3) * 2 + clamp(16px, 2.5vw, 32px));
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* list_time

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
.list_time{
	max-width: 750px !important;
}

.list_time > dl{
	display: flex;
	column-gap: clamp(20px, 3.125vw, 40px);
}

.list_time > dl > dd.kome{
	text-indent: -1.6rem;
	padding-left: 1.6rem;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	.list_time{
		columns: 2;
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* use_entry

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#use_entry .inner.contents{
	padding: clamp(50px, 7.8125vw, 100px) clamp(10px, 1.25vw, 16px);
}

#use_entry .inner .column_box{
	display: grid;
	row-gap: clamp(24px, 5vw, 64px);
	max-width: 960px;
}

#use_entry .inner .column_box .text{
	font-weight: 500;
	font-size: clamp(2rem, 2.1875vw, 2.8rem);
	color: #eb6153;
}

#use_entry #entry_have h4,
#use_entry #entry_have h4 *{
	color: #383839;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#use_entry .inner .column_box{
		grid-template-columns: repeat(2, 1fr);
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* use_home_screen

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#use_home_screen .column_box{
	display: flex;
	gap: clamp(24px, 5vw, 64px) clamp(24px, 3.75vw, 48px);
	flex-direction: column;
}

#use_home_screen .column_box .text ol > li{
	display: flex;
	column-gap: clamp(10px, 1.25vw, 16px);
	align-items: baseline;
	counter-increment: num;
}

#use_home_screen .column_box .text ol > li + li{
	margin-top: clamp(18px, 2.8125vw, 36px);
}

#use_home_screen .column_box .text ol > li::before{
	content: counter(num);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #eb6153;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-style: normal;
	font-weight: 500;
	font-size: clamp(1.6rem, 1.875vw, 2.4rem);
	color: #FFFFFF;
	line-height: 1;
	aspect-ratio: 1 / 1;
	min-width: clamp(32px, 2.8125vw, 36px);
	width: clamp(32px, 2.8125vw, 36px);
}

#use_home_screen .column_box .text ol > li *{
	font-weight: 500;
}

#use_home_screen .column_box .text ol > li p,
#use_home_screen .column_box .text ol > li h5{
	font-size: clamp(2rem, 1.875vw, 2.4rem);
}

#use_home_screen .column_box .text ol > li ul > li.kome{
	text-indent: calc(clamp(1.6rem, 1.875vw, 1.8rem) * -1);
	font-size: clamp(1.6rem, 1.875vw, 1.8rem);
	padding-left: clamp(1.6rem, 1.875vw, 1.8rem);
}





/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#use_home_screen .column_box{
		flex-direction: row;
	}
	
	#use_home_screen .column_box .image{
		width: calc(50% - (clamp(32px, 2.8125vw, 36px) + clamp(24px, 3.75vw, 48px)));
	}
	
	#use_home_screen .column_box .text{
		width: calc(50% + clamp(32px, 2.8125vw, 36px));
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* use_topics

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#use_topics ul.column_box *{
	font-weight: 500;
}

#use_topics ul.column_box > li + li{
	margin-top: clamp(32px, 5vw, 64px);
}

#use_topics ul.column_box > li > * + *{
	margin-top: clamp(16px, 2.5vw, 32px);
}

#use_topics ul.column_box > li p.text,
#use_topics ul.column_box > li article.text h5{
	font-size: clamp(2rem, 2.1875vw, 2.8rem);
	color: #eb6153;
}

#use_topics ul.column_box > li article.text p{
	font-size: clamp(1.6rem, 1.5625vw, 2rem);
}

#use_topics dl.list_dl *{
	font-weight: 500;
}

#use_topics dl.list_dl > dt{
	font-size: clamp(2rem, 2.1875vw, 2.8rem);
	color: #eb6153;
}

#use_topics dl.list_dl > dd + dt{
	margin-top: clamp(32px, 3.75vw, 48px);
}

#use_topics dl.list_dl > dd{
	font-size: clamp(1.6rem, 1.5625vw, 2rem);
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#use_topics ul.column_box > li{
		display: flex;
	}
	
	#use_topics ul.column_box > li:nth-of-type(even){
		flex-direction: row-reverse;
	}
	
	#use_topics ul.column_box > li > *{
		width: 50%;
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* use_check_mystore

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#use_check_mystore .inner .text_emphasis strong{
	color: #333333;
}

#use_check_mystore .inner .column_box{
	display: flex;
	gap: clamp(24px, 5vw, 64px) clamp(32px, 5vw, 64px);
	flex-direction: column;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#use_check_mystore .inner .column_box{
		flex-direction: row;
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	#use_check_mystore .inner .column_box{
		padding-left: clamp(20px, 3.125vw, 40px);
	}
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* use_coupon

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#use_coupon .inner.contents{
	padding: clamp(50px, 7.8125vw, 100px) clamp(10px, 1.25vw, 16px);
}

#use_coupon .inner.contents .text_emphasis strong{
	color: #333333;
}

#coupon_discount section > * + *{
	margin-top: clamp(16px, 2.5vw, 32px);
}

#coupon_discount section h6{
	border-radius: 5px;
	border: 2px solid #f6eda0;
	background-color: #FFFFFF;
	text-align: center;
	font-weight: 500;
	font-size: clamp(2rem, 2.1875vw, 2.8rem);
	padding: 10px 8px;
}

#coupon_discount section > p.text{
	text-align: center;
	font-weight: 500;
	font-size: clamp(2rem, 2.1875vw, 2.8rem);
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#coupon_discount p.text_kome{
		text-align: center;
	}
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* Add Sample Code

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	
	
}




/* iPad pro・ノートPC用1024px～（NPC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px) {
	
	
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	
	
}