@charset "UTF-8";



/* ========================================================
  
  common

======================================================== */
.c-logo__deco {
	color: #FFF;
}


/* ========================================================
  
  Layout

======================================================== */

/*-----------------------------------------------
 Layout - FV
-----------------------------------------------*/
.l-fv {
	position: relative;
	padding-top: min(14vw,210px);
	padding-bottom: 30px;
}
.l-fv__img {
	position: absolute;
	background: linear-gradient(to top, rgb(240 238 233 / 1), transparent);
	width: 100%;
	height: 100%;
	inset: 0;
	margin: 0;
	z-index: -2;

	> img {
		position: absolute;
		display: block;
		width: 60%;
		height: 100%;
		object-fit: cover;
		inset: 0 0 0 auto;

		-webkit-mask-image: linear-gradient(to right, transparent 0%, black 50%);
		mask-image: linear-gradient(to right, transparent 0%, black 50%);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: auto;
		mask-size: auto;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-fv {
	&:has(.l-fv__point) {
		padding-bottom: 0;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-fv {
	padding-top: 40vw;
	padding-bottom: 1em;
}
.l-fv__img {
	& img {
		width: 80%;

		-webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
		mask-image: linear-gradient(to right, transparent 0%, black 100%);
	}
}
}

/*-----------------------------------------------
 Layout - txt
-----------------------------------------------*/
.l-fv__txt {
	padding-left: 7.7%;
}
.l-fv__ttl {
	&::before,
	&::after {
		position: relative;
	}
	&::before {
		vertical-align: 2em;
		margin-left: -2em;
	}
	&::after {
		vertical-align: -2em;
	}

	.c-hdg--min {
		display: inline;
		font-size: min(5vw,382%);
		line-height: 1.3;
		margin-bottom: 0;

		&.has-icon::before {
			display: inline-block;
			content: "";
			background: url(../images/common/icon-cat-mouthpiece.svg) no-repeat;
			background-size: contain;
			width: 1.4em;
			height: 1.4em;
			vertical-align: -0.3em;
		}
	}
}
.l-fv__point {
	position: relative;
	max-width: max-content;
	display: flex;
	align-items: center;

	> ul {
		display: flex;
		column-gap: 1em;
	}
	.c-txt--ccl {
		color: #FFF;
		font-size: min(1.6vw,129%);
		background: radial-gradient(rgb(138 208 229 / 1), rgb(138 208 229 / 0.7));

		& span.min {
			display: block;
			font-size: 81%;
			line-height: 1.2;
			letter-spacing: .02em;
		}
		& span.no {
			color: #fff78c;
			font-size: 296%;
			letter-spacing: .05em;
			line-height: 0.8;
			vertical-align: -0.1em;
		}
		& small {
			display: block;
			font-family: var(--ff-gothic);
			font-size: 59%;
			letter-spacing: .05em;
			margin-top: .5em;
		}
	}
}
.l-fv__abs {
	position: absolute;
	width: min(20vw,300px);
	left: 95%;
	bottom: 0;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-fv__txt {
	padding-left: 6%;
}
.l-fv__ttl {
	&::before {
		vertical-align: 0.8em;
		margin-left: -1.6em;
	}
	&::after {
		vertical-align: -1em;
	}

	.c-hdg--min {
		font-size: 6.5vw;
	}
}
.l-fv__point {
	> ul {
		display: flex;
		column-gap: 3%;
	}
	.c-txt--ccl {
		font-size: 80%;
	}
}
.l-fv__abs {
	width: 35vw;
}
}

/*-----------------------------------------------
 Layout - pankuzu
-----------------------------------------------*/
.pankuzu {
	position: relative;
	display: flex;
	justify-content: flex-end;
	gap: .2em .5em;
	color: #999;
	font-size: min(1.5vw,88%); 
	line-height: 1.5;
	letter-spacing: .08em;
    margin: min(4vw,50px) min(2vw,20px) min(5vw,60px) auto;

	> li {
		&::after {
			content: "ー";
		}
		&:last-child::after {
			display: none;
		}
	}
	& a {
		text-decoration: underline;
		&:hover {
			color: var(--color-grn);
			text-decoration: none;
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.pankuzu {
	font-size: 60%;
	letter-spacing: .02em;
    margin: 1.2em 1em 8% auto;
}
}

/*-----------------------------------------------
 Layout - l-lead
-----------------------------------------------*/
.l-lead {
	position: relative;

	.c-hdg--min {
		text-align: center;
		line-height: 1.8;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-lead {
	.c-hdg--min {
		line-height: 1.6;
	}
}
}


/*---------------------------------------------------------
 Layout - boxlist
---------------------------------------------------------*/
.l-boxlist {
    display: grid;
	row-gap: 3.4em;
	margin-inline: auto;

	counter-reset: myCounter;
}
.l-boxlist__img {
	position: relative;
	max-width: max-content;
	margin: 0 auto 5%;

	.c-txt--ccl {
		position: absolute;
		color: #FFF;
		font-size: min(2vw,164%);
		background: linear-gradient(to right, var(--grd-color-l), var(--grd-color-r));
		width: min(7.2em);
		min-width: 7.2em;
		right: 3.5%;
		bottom: -10%;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-boxlist {
	justify-content: space-between;
	margin-inline: auto;
}
.l-boxlist.is-col2 {
	grid-template-columns: repeat(2,min(48%,560px));
}
.l-boxlist.is-col3 {
	grid-template-columns: repeat(3,31%);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-boxlist {
	row-gap: 2.5em;
}
.l-boxlist__img {
	width: 80%;
	margin-bottom: 5vw;

	.c-txt--ccl {
		font-size: 3.5vw;
	}
}
}


/*---------------------------------------------------------
 Layout - consul
---------------------------------------------------------*/
.l-cnsl {
	position: relative;
	max-width: 1200px;
	text-align: center;
	background-color: var(--color-bei);
	padding: 5% 5% 4.2%;
	margin-inline: auto;

	.c-hdg--deco {
		position: absolute;
		inset: 0 0 auto 0;
		translate: 0 -0.45em;
		opacity: 0.5;
	}
	.u-fw-bold {
		color: var(--color-brw-600);
		margin-bottom: 2em;
	}
	.c-illust {
		&.pos-l {
			left: 5.8%;
			top: 32%;
			translate: -50% -50%;
		}
		&.pos-r {
			right: 6%;
			top: 46%;
			translate: 50% -50%;
		}
	}
}
.l-cnsl__ttl {
	font-size: min(2.4vw,167%);
	> * {
		&:nth-child(2) {
			font-size: 203%;
		}
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-cnsl {
	padding: 12% 6% 10%;

	.c-hdg--deco {
	}
	.u-fw-bold {
		margin-bottom: 1.5em;
	}
	.c-illust {
		width: 22vw;

		&.pos-l {
			top: 42vw;
		}
		&.pos-r {
			top: 56vw;
			right: 5%;
		}
	}
}
.l-cnsl__ttl {
	font-size: 105%;
	> * {
		&:nth-child(2) {
			font-size: 203%;
		}
	}
}
}



/*---------------------------------------------------------
 Layout - Feature
---------------------------------------------------------*/
.l-feature {
	.l-boxlist__txt {
		.c-hdg--min {
			text-align: center;
			font-size: min(3.2vw,235%);
		}
	}
}
.l-feature__ttl {
	text-align: center;
	margin-bottom: 4%;

	.c-brac-wrap {
		font: var(--font-min);
		font-size: min(6vw,441%);
		margin-bottom: .2em;

		> span {
			display: inline-block;
			background: url(../images/common/path-underline.svg) no-repeat center bottom;
			background-size: 100% auto;
			padding: 0 .1em;
		}
		> img {
			display: inline-block;
			width: 0.78em;
			margin: 0 -0.2em;
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-feature {
	.l-boxlist {
		row-gap: 11vw;
	}
	.l-boxlist__txt {
		.c-hdg--min {
			font-size: 140%;
		}
	}
}
.l-feature__ttl {
	margin-bottom: 8%;

	.c-brac-wrap {
		font-size: 200%;
	}
}
}




/*---------------------------------------------------------
 Layout - Case
---------------------------------------------------------*/
.l-case {
	.c-bg-color {
		background-color: #fff78c;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-case__ttl {
	.c-btn-radi {
		text-align: center;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-case__ttl {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 6%;

	> * {
		margin-bottom: 0;
	}
}
}

/* Case - case-list
-----------------------------------------------*/
.l-case-list {
	display: flex;
	gap: 10px;
}
.l-case-list__item {
	flex: 1;
	> a {
		display: block;
		background-color: #fff;
		padding: 12% 10% 10%;

		&:hover {
			background-color: rgb(255 255 255 / 0.8);
		}
	}
}
.l-case-list__img {
	max-width: 250px;
	margin: 0 auto 5%;
}
.l-case-list__txt {
	text-align: center;
	font: var(--font-min);
	line-height: 1.5;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-case__inner {
	display: grid;
	justify-content: space-between;
	grid-template-columns: 20% 76%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-case-list {
	width: max-content;
}
.l-case-list__item {
	flex: auto;
	width: 50vw;

	> a {
		padding: 12% 10% 10%;
	}
}
.l-case-list__img {
	max-width: 250px;
	margin: 0 auto 5%;
}
.l-case-list__txt {
	text-align: center;
	font: var(--font-min);
	line-height: 1.5;
}
}


/*-----------------------------------------------
 Layout - footer-bnr
-----------------------------------------------*/
.l-footer-bnr {
	border-top: 1px solid #ccc;
}
.l-footer-cta {
	text-align: center;
	margin-top: min(10%,120px);

	.c-cta-wrap {
		margin-top: 3%;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-footer-cta {
	margin-top: 8;
	
	.c-cta-wrap {
		margin-top: 6%;
	}
}
}



/* ========================================================
  
  Component

======================================================== */

/*-----------------------------------------------
 Component - box
-----------------------------------------------*/

/* Component - box - c-box--bg
-----------------------------------------------*/
.c-box--bg {
	position: relative;
	background-color: var(--color-bei);
	padding: min(8%,80px) 4.5%;
	margin-inline: auto;

	.c-flt {
		margin-inline: auto;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-box--bg {
	padding: 10% 6%;
}
}

/* Component - box - c-box--bdr
-----------------------------------------------*/
.c-box--bdr {
	position: relative;
	border: 1px solid var(--color-taq);
	padding: 5%;
	margin-inline: auto;

	.c-hdg--bld.is-abs {
		position: absolute;
		color: var(--color-taq);
		background-color: #fff;
		white-space: nowrap;
		padding: 0 1em;
		left: 50%;
		top: 0;
		translate: -50% -50%;
	}
	.c-flt {
		margin-inline: auto;
	}
	.c-txt--ast {
		margin-top: 2em;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-box--bdr {
	padding: 10% 6% 8%;
}
}

/* Component - box - c-box--s
-----------------------------------------------*/
.c-box--s {
	position: relative;
	background-color: var(--color-bei);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: contain;
	padding: min(5%,50px) 5%;
	margin-inline: auto;

	.c-flt {
		margin-inline: auto;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-box--s {
	padding: 8% 6%;
}
}


/*-----------------------------------------------
 Component - c-anchor-list
-----------------------------------------------*/
.c-anchor-list {
	max-width: 1100px;
	display: grid;
	justify-content: space-between;
	row-gap: 1em;
	font-size: min(1.8vw,1.29rem);
	font-weight: var(--fw-bold);
	letter-spacing: .1em;
	line-height: 1.2;
	margin-inline: auto;

	& a {
		position: relative;
		height: 4em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: .4em;
		color: #FFF;
		background-color: var(--color-pnk-300);
		padding: .2em 1.8em;
		border-radius: 100vmax;

		&:hover {
			background-color: var(--color-brw-600);
		}
		.c-icon {
			position: absolute;
			background-color: #FFF;
			rotate: 90deg;
			right: 1em;
			top: 50%;
			translate: 0 -50%;
		}
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.c-anchor-list {
	grid-template-columns: repeat(3,31.8%);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-anchor-list {
	grid-template-columns: repeat(2,49%);
	gap: .8em 2%;
	font-size: 90%;
	letter-spacing: .08em;

	& a {
		padding: .2em 2.5em .2em 1.2em;
	}
}
}


/*---------------------------------------------------------
 Component - c-procon
---------------------------------------------------------*/
.c-procon {
	margin-top: 4%;
}
.c-procon__item dt {
	text-align: center;
	color: #FFF;
	font-size: min(2vw,125%);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	letter-spacing: .1em;
	background-color: var(--accent-color);
	padding: .3em;
	border-radius: 2em;
	margin-bottom: .8em;
}

.c-procon__item--mer {
	--accent-color: var(--color-coral);
}
.c-procon__item--dem {
	--accent-color: #999;
}

.c-procon__item .c-list {
	row-gap: .8em;
	font-size: 88%;
}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.c-procon {
	display: grid;
    justify-content: space-between;
	grid-template-columns: repeat(2, min(48.5%,630px));
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-procon {
	margin-top: 6%;
}
.c-procon__item dt {
	font-size: 105%;
}
}


/*---------------------------------------------------------
 Component - c-cat-list
---------------------------------------------------------*/
.c-cat-list {
	display: flex;
	justify-content: center;
	gap: 1em 1.33%;

	.c-cat-bnr {
		max-width: 340px;

		> a {
			width: 100%;
		}
	}
}
.c-cat-bnr {
	text-align: center;
	font: var(--font-min);
	font-size: min(2.2vw,176%);
	letter-spacing: .12em;
	line-height: 1.4;
	font-feature-settings: "palt";

	> a {
		position: relative;
		display: block;
		width: 11.3em;
		max-width: 100%;
		padding: 1em 1%;
		border-radius: .6em;
		transition: filter .5s;

		& p {
			position: relative;
		}
		.u-font-en {
			font-size: 66%;
			letter-spacing: .08em;
			margin-top: .2em;
		}
		.c-icon {
			position: absolute;
			font-size: 125%;
			box-shadow: 0 0 4px rgb(0 0 0 / 0.3);
			right: .5em;
			bottom: 0;
			translate: 0 50%;

			&.is-out::before {
				font-size: 50%;
			}
		}
		&:hover {
			filter: brightness(1.05);
		}
	}

	&.--pnk > a { background-color: #fad2c9; }
	&.--blu > a { background-color: #add8e5; }
	&.--grn > a { background-color: #9ee8bc; }
	&.--yel > a { background-color: #efe2b7; }
}
.c-cat-bnr__img {
	position: absolute;
	width: 100%;
	inset: auto 0 -1em 0;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.c-cat-list {
	.c-cat-bnr {
		width: 32%;
	}
}
.l-footer-bnr {
	.c-cat-list {
		.c-cat-bnr {
			width: 24%;
		}
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-cat-list {
	flex-wrap: wrap;
	gap: 1.8em 3%;

	.c-cat-bnr {
		width: 48.5%;
	}
}
.c-cat-bnr {
	font-size: 105%;
}
}



/*---------------------------------------------------------
 Component - c-nayami-list
---------------------------------------------------------*/
.c-nayami-list {
	display: flex;
	justify-content: center;
	column-gap: 1.6%;

	.c-txt--ccl {
		font-size: min(2.3vw,176%);
		width: min(8.4em);
		min-width: 8.4em;
		background: url(../images/treatment/common/random-circle01.svg) no-repeat center center;
		background-size: contain;
		filter: drop-shadow(.2em .2em .3em rgb(0 0 0 / 0.1));

		&:nth-of-type(2) {
			background-image: url(../images/treatment/common/random-circle02.svg);
		}
		&:nth-of-type(3) {
			background-image: url(../images/treatment/common/random-circle03.svg);
		}
		&:nth-of-type(4) {
			background-image: url(../images/treatment/common/random-circle04.svg);
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-nayami-list {
	flex-wrap: wrap;
	gap: 1em;

	.c-txt--ccl {
		font-size: 100%;
	}
}
}



/*---------------------------------------------------------
 Component - c-nayami-list
---------------------------------------------------------*/
.c-nayami-list {
	display: flex;
	justify-content: center;
	column-gap: 1.6%;

	.c-txt--ccl {
		font-size: min(2.3vw,176%);
		width: min(8.4em);
		min-width: 8.4em;
		background: url(../images/treatment/common/random-circle01.svg) no-repeat center center;
		background-size: contain;
		filter: drop-shadow(.2em .2em .3em rgb(0 0 0 / 0.1));

		&:nth-of-type(2) {
			background-image: url(../images/treatment/common/random-circle02.svg);
		}
		&:nth-of-type(3) {
			background-image: url(../images/treatment/common/random-circle03.svg);
		}
		&:nth-of-type(4) {
			background-image: url(../images/treatment/common/random-circle04.svg);
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-nayami-list {
	flex-wrap: wrap;
	gap: 1em;

	.c-txt--ccl {
		font-size: 100%;
	}
}
}



/*---------------------------------------------------------
 Component - c-no
---------------------------------------------------------*/
.c-no {
	position: relative;
	counter-increment: myCounter;
	display: inline-block;
	width: 4em;
	text-align: center;
	font: var(--font-en);
	font-size: min(1.6vw,1.17rem);
	letter-spacing: .1em;
	line-height: 1;

	&::after {
		display: block;
		content: counter(myCounter, decimal-leading-zero);
		font-size: 300%;
		letter-spacing: .1em;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-no {
	font-size: 3vw;
}
}



/*---------------------------------------------------------
 Component - c-merit-draw
---------------------------------------------------------*/
.c-merit-draw {
	.l-boxlist__img {
		padding-left: 28.5%;

		&::before {
			position: absolute;
			content: "";
			background: url(../images/common/path-draw.svg) no-repeat;
			background-size: contain;
			width: 68.4%;
			height: 123%;
			left: 0;
			top: 15%;
			z-index: -1;
		}
		.c-no {
			position: absolute;
			left: 16%;
			top: 50%;
			translate: -50% -50%;
		}
		.c-illust {
			width: 47%;
			top: -13%;
			right: -3.4%;
		}
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-merit-draw {
	.l-boxlist__img {
		width: 100%;
		padding-left: 28.5%;
	}
}
}



/*---------------------------------------------------------
 Component - c-flow
---------------------------------------------------------*/
.c-flow {
	counter-reset: flowCounter;
}
.c-flow__item {
	position: relative;
	padding: 4.8%;
	border: 1px solid var(--color-taq);
	margin: 0 auto 6.6%;

	&::after {
		position: absolute;
		display: block;
		content: "";
		background: url(../images/common/path-arrow-down.svg) no-repeat;
		background-size: contain;
		width: 3%;
		aspect-ratio: 1;
		left: 50%;
		top: 100%;
		translate: -50% 60%;
	}
	&:last-child {
		margin-bottom: 0;
		&::after {
			display: none;
		}
	}
}
.c-flow__index {
	padding-left: 4.2em;
}
.c-flow__no {
	position: absolute;
	counter-increment: flowCounter;
	display: inline-block;
	width: 1.2em;
	text-align: center;
	font: var(--font-en);
	font-size: 200%;
	letter-spacing: .08em;
	line-height: 1.1;
	background: linear-gradient(to right, #8ae3c4, #79b6e3);
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	box-sizing: content-box;
	padding-right: .4em;
	left: 0;
	top: -0.05em;

	&::before {
		content: counter(flowCounter, decimal-leading-zero);
	}
	&::after {
		position: absolute;
		display: block;
		content: "";
		background-color: currentColor;
		width: 1px;
		height: .5em;
		rotate: 30deg;
		right: 0;
		top: 40%;
		translate: 0 -50%;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.c-flow {
	.c-flt__img {
		width: 32%;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-flow__item {
	padding: 8% 6%;
	margin-bottom: 12%;

	&::after {
		width: 8%;
		translate: -50% 35%;
	}
}
.c-flow__index {
	padding-left: 3.4em;
}
.c-flow__no {
	font-size: 170%;
	top: 0;
}
}



/*---------------------------------------------------------
 Component - c-chk-list
---------------------------------------------------------*/
.c-chk-list {
	display: flex;
	justify-content: center;
	gap: 1em 1.6%;
	font-size: min(1.8vw,1.17rem);
	font-weight: var(--fw-bold);
	letter-spacing: .1em;
	line-height: 1.4;

	> li {
		position: relative;
		width: 11em;
		max-width: 100%;
		height: 7em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		white-space: nowrap;
		background-color: var(--color-bei);
		padding: 1em;
		border-radius: .5em;

		&::before {
			position: absolute;
			content: "";
			background: url(../images/common/path-check.svg) no-repeat;
			background-size: contain;
			width: 2.4em;
			height: 1.8em;
			left: 0;
			top: 0;
			translate: 20% -25%;
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-chk-list {
	flex-wrap: wrap;
	gap: 1em 4%;
	font-size: 100%;

	> li {
		width: 48%;
	}
}
}



/*---------------------------------------------------------
 Component - staff
---------------------------------------------------------*/

/* Component - profile
-----------------------------------------------*/
.c-prof {
	position: relative;
	font: var(--font-min);
	font-size: min(2vw,147%);
	line-height: 1.8;
	letter-spacing: .1em;
	white-space: nowrap;

	.c-prof__name {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		column-gap: .2em;
		font-size: 200%;
		letter-spacing: .16em;
		
		.u-font-en {
			color: var(--color-taq);
			font-size: 50%;
			letter-spacing: .1em;
			margin-top: .2em;
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-prof {
	font-size: 100%;
}
}


/* Component - biography
-----------------------------------------------*/
.c-bio {
	& dt {
		position: relative;
		font: var(--font-min);
		font-size: min(1.8vw,117%);
		line-height: 1.4;
		letter-spacing: .1em;
		margin-bottom: .8em;
	}
	& dd {
		font-size: 88%;
	}
}
.c-biobox {
	position: relative;
	padding: 5%;
}
.c-bio__tbl {
	width: auto;
	font-feature-settings: "palt";

	& th {
		text-align: left;
		font-weight: normal;
		vertical-align: top;
		padding-right: 1em;
		white-space: nowrap;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.c-bio {
	&.is-col2 {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 1em;
		column-gap: 4%;
	}
	& dd {
		&.is-col2 {
			display: flex;
			/* flex-wrap: wrap; */
			column-gap: 3%;
		}
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-bio {
	& dt {
		font-size: 105%;
	}
	& dl:nth-of-type(n+2) {
		margin-top: 6%;
	}
}
}



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

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {


}



/* ========================================================
  
  Pages

======================================================== */
.page-pediatric {
	--accent-color: var(--color-pnk-300);

	.l-fv__ttl {
		.c-hdg--min {
			&.has-icon::before {
				background-image: url(../images/common/icon-cat-pediatric.svg);
			}
		}
	}
	.l-fv__point {
		.c-txt--ccl {
			background: radial-gradient(rgb(247 153 130 / 1), rgb(247 153 130 / 0.7));
		}
		.l-fv__abs {
			left: 86%;
		}
	}
	.timing {
		.c-hdg--bld {
			text-align: center;
			color: var(--accent-color);
		}
	}
	.symptoms {
		.c-brac-wrap {
			width: 100%;
			max-width: max-content;
			margin-bottom: 4%;

			.c-list {
				column-gap: 1.2em;
				grid-template-columns: repeat(4, max-content);
			}
		}	
	}
}
.page-braces {
	--accent-color: #7cdea4;

	.l-fv__ttl {
		.c-hdg--min {
			&.has-icon::before {
				background-image: url(../images/common/icon-cat-braces.svg);
			}
		}
	}
	.l-fv__point {
		.c-txt--ccl {
			background: radial-gradient(rgb(124 222 164 / 1), rgb(124 222 164 / 0.7));
		}
		.l-fv__abs {
			left: 88%;
		}
	}
	.timing {
		.c-hdg--bld {
			text-align: center;
			color: var(--accent-color);
		}
	}
	.symptoms {
		.c-brac-wrap {
			width: 100%;
			max-width: max-content;
			margin: 4% auto;

			.c-list {
				column-gap: 1.2em;
				grid-template-columns: repeat(4, max-content);
			}
		}	
	}
}
.page-mouthpiece {
	--accent-color: var(--color-blu-300);

	.l-fv__point {
		.c-txt--ccl {
			background: radial-gradient(rgb(229 85 83 / 1), rgb(229 85 83 / 0.7));
		}
	}
}
.page-orthodontic-pain {
	.pain-consultation {
		.c-brac-wrap {
			width: 100%;
			max-width: max-content;

			.c-list {
				column-gap: 1.2em;
				grid-template-columns: repeat(2, max-content);
			}
		}	
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.page-pediatric {
	.symptoms {
		.c-brac-wrap {
			margin: 3% auto 8%;

			.c-list {
				grid-template-columns: repeat(2, max-content);
			}
		}	
	}
}
}