@charset "UTF-8";



/* ========================================================
  
  page_common

======================================================== */
.tic_slide li {
	width: 30vw !important;
	max-width: max-content;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.tic_slide li {
	width: 50vw !important;
}
}

/*---------------------------------------------------------
 com_col_txt
---------------------------------------------------------*/
.com_col_txt {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.6%;
	font-size: min(1.7vw,131%);
}
.com_col_txt > li {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	text-align: center;
	color: var(--color-primary-dark);
	font: var(--font-min);
	line-height: 1.6;
	letter-spacing: .08em;
	background-color: #FFF;
	padding: 1.2em 1%;
	box-shadow: 0 20px 10px -15px rgba(0,0,0,0.1);
}
.com_col_txt > li::before {
	position: absolute;
	content: "";
	background: linear-gradient(-45deg, rgba(89,185,198,0.5), rgba(89,185,198,0.2));
	width: 2em;
	height: 2em;
	left: 0;
	top: 0;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	mix-blend-mode: multiply;
}
.com_col_txt > li div {
	position: relative;
}
.com_col_txt > li span {
	color: var(--color-accent-100);
	font-size: 120%;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.com_col_txt {
	justify-content: center;
	column-gap: 2%;
	font-size: 105%;
}
.com_col_txt > li {
	flex: none;
	width: 49%;
}
}


/* ========================================================
  
  FV

======================================================== */
.fv_area {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	min-height: min(calc(100vw * 0.7), 1000px);
}

.m_img_area {
	position: relative;
	height: 100%;
	background: url(../images/top/fv-bg@2x.jpg) no-repeat center center;
	background-size: cover;
}

.m_copy {
	position: absolute;
	width: 74%;
	max-width: max-content;
	left: 3%;
	top: 54%;
	translate: 0 -50%;

	opacity: 0;
	transition: opacity 1s .2s;
}
.m_img_area.anime_on .m_copy {
	opacity: 1;
}

.m_point {
	position: absolute;
	display: flex;
	width: 38%;
	left: 23.5%;
	top: 43%;
	translate: -50% -50%;
}
.m_point > li {
	margin-right: -1.2%;
	filter: drop-shadow(0 0 5px rgba(0,0,0,0.1));

	opacity: 0;
	translate: -10px 0;
	transition: opacity 1s, translate 1s;
	transition-delay: .3s;
}
.m_point > li:nth-of-type(2) {transition-delay: .6s;}
.m_point > li:nth-of-type(3) {transition-delay: .9s;}
.m_img_area.anime_on .m_point > li {
	opacity: 1;
	translate: 0 0;
}

.m_copy_wrap .com_col_txt > li {
	background: radial-gradient(rgba(255,255,255,0.5), rgba(255,255,255,1));
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.m_copy_wrap .com_col_txt {
	position: absolute;
	width: 70vw;
	max-width: 1030px;
	left: 6%;
	bottom: 0;
	translate: 0 55%;
}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.m_img_area {
	background-image: url(../images/top/fv-bg-sp@2x.jpg);
	background-position: center top;
}
.m_copy_wrap .com_col_txt {
	width: 86vw;
	font-size: 1.9vw;
	translate: 0 -30%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.fv_area {
	min-height: calc(100vw * 1.6);
	max-height: calc(100vw * 1.8);
}

.m_img_area {
	background-image: url(../images/top/fv-bg-sp@2x.jpg);
}
.m_copy_wrap {
	position: absolute;
	width: 100%;
	bottom: -3%;
}
.m_copy {
	position: relative;
	width: 100%;
	translate: -3% 3%;
}
.m_point {
	width: 50%;
	left: 29%;
	top: 38%;
}
.m_copy_wrap .com_col_txt {
	position: relative;
	width: 80%;
	font-size: 90%;
	left: 4%;
}
}

/* PC調整
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1400px) and (min-aspect-ratio: 1024/750) {

.m_copy {
	width: 65%;
	left: 3%;
	top: 45%;
}
}
 


/* ========================================================
  
  main

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

/*---------------------------------------------------------
 SOUDAN
---------------------------------------------------------*/
.com_soudan_wrap {
	text-align: center;
}
.com_soudan_wrap .com_box__bg {
	background-color: var(--color-primary-100);
	padding-top: min(6%,70px);
}
/* soudan_title */
.soudan_title {
	position: relative;
	text-align: center;
	color: var(--color-primary-dark);
	z-index: 1;
}
.soudan_title .com_h__fuki {
	margin-bottom: .2em;
}
.soudan_title .com_h__min {
	margin-bottom: -0.8em;
}
.soudan_title .com_h__min span {
	background: linear-gradient(135deg, #5377A0 60%, var(--color-primary-dark) 60%); 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* fukidashi_wrap */
.com_soudan_wrap .fukidashi_wrap {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: flex-end;
	column-gap: .5em;
	font-size: min(2vw,126%);
	margin: .8em auto;
}
.com_soudan_wrap .fukidashi {
	position: relative;
	color: var(--color-primary);
	font: var(--font-min);
	line-height: 1.3;
	background-color: #fff;
	padding: .5em 1.2em;
	border-radius: 2em;
}
.com_soudan_wrap .fukidashi::before {
	position: absolute;
	content: "";
	background-color: inherit;
	width: .7em;
	height: .42em;
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
	inset: 0 99% 0 auto;
	margin: auto;
}
.com_soudan_wrap .illust {
	width: 5.2em;
	max-width: max-content;
}

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

.com_soudan_wrap .com_box__bg {
	padding-top: 10%;
}
.com_soudan_wrap .soudan_box p {
	text-align: left;
}
/* fukidashi_wrap */
.com_soudan_wrap .fukidashi_wrap {
	font-size: 105%;
}
}

/* SOUDAN: soudan_student
-----------------------------------------------*/
.soudan_student {
	position: relative;
	background-color: #fff;
	padding: 3%;
	margin: 7% auto 3%;
}
.soudan_student .com_h__min {
	text-align: center;
	color: var(--color-primary);
	font-size: min(2.5vw,178%);
}
.soudan_student .com_h__min span {
	position: relative;
	display: block;
	max-width: max-content;
	font-size: 70%;
	padding: 0 .4em .2em;
	margin: 0 auto .6em;
}
.soudan_student .com_h__min span::before {
	position: absolute;
	content: "";
	background: linear-gradient(to right, rgba(89,185,198,0.8), rgba(89,185,198,0.2));
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
}
.soudan_student .box_img {
	max-width: 490px;
	background-color: #fff;
	padding: min(20px,2.6vw);
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	opacity: 0;
	transition: opacity 1.5s, rotate 1.5s;
	transition-delay: .2s;
}
.soudan_student .box_img.anime_on {
	opacity: 1;
	rotate: -3deg;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.soudan_student {
	width: 94%;
	padding-left: 38%;
	margin-left: auto;
	margin-right: 0;
}
.soudan_student .box_txt {
	max-width: 630px;
	margin-left: auto;
}
.soudan_student .box_img {
	position: absolute;
	width: 50%;
	right: 62%;
	top: 50%;
	translate: 0 -50%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.soudan_student {
	padding: 8% 6% 1px;
	margin: 6% auto 3%;
}
.soudan_student .com_h__min {
	font-size: 130%;
}
.soudan_student .box_img {
	width: 92%;
	margin: 4% auto -6%;
}
}

/*---------------------------------------------------------
 cencept
---------------------------------------------------------*/
#cencept {
	position: relative;
}
.concept_txt .com_h__min {
	margin-bottom: .4em;
}
.concept_txt .com_h__min span {
	color: var(--color-primary);
}
/* concept_img */
.concept_img {
	position: relative;
}
.concept_img li {
	position: absolute;
	max-width: max-content;
	translate: -50% -50%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
#cencept {
	padding: 60px 0 40px;
}
.concept_txt {
	width: 60%;
	padding-left: 5.4%;
}
.concept_txt p {
	max-width: 770px;
	margin-left: 4%;
}

.concept_img {
	position: absolute;
	width: 42%;
	max-width: 620px;
	aspect-ratio: 620 / 740;
	left: 59%;
	top: 0;
}
.concept_img li:nth-of-type(1) {
	position: relative;
	width: 48.4%;
	translate: none;
}
.concept_img li:nth-of-type(2) {
	width: 58.1%;
	left: 70%;
	top: 35%;
}
.concept_img li:nth-of-type(3) {
	width: 42%;
	left: 42%;
	top: 82%;
}
}

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

.concept_txt {
	padding: 0 5%;
}
.concept_txt p {
	margin-left: 6%;
}

.concept_img {
	aspect-ratio: 750 / 578;
	margin-top: 8%;
}
.concept_img li:nth-of-type(1) {
	position: relative;
	width: 40%;
	translate: none;
	margin-left: 16%;
}
.concept_img li:nth-of-type(2) {
	width: 48%;
	left: 76%;
	top: 44%;
}
.concept_img li:nth-of-type(3) {
	width: 42%;
	left: 18%;
	top: 77%;
}
}


/*---------------------------------------------------------
 nayami
---------------------------------------------------------*/
#nayami {
	text-align: center;
	padding-bottom: min(10vw,140px);
}

.nayami_box1 {
	background-image: url(../images/top/nayami-bg@2x.png);
	padding-top: 40px;
}
.nayami_box1 .com_h__min {
	margin-bottom: .8em;
}
.nayami_box1 .com_h__min span {
	position: relative;
	color: var(--color-accent);
	font-size: 140%;
	background: url(../images/top/nayami-underline.svg) no-repeat center bottom;
	background-size: 100% auto;
	padding-bottom: .1em;
}
.nayami_box1 .com_h__min span::before {
	position: absolute;
	content: "";
	background: url(../images/top/nayami-abs.svg) no-repeat;
	background-size: contain;
	width: .8em;
	height: .9em;
	right: -0.4em;
	top: -0.8em;

	opacity: 0;
	scale: 0.3;
	transition: opacity .8s, scale .8s;
	transition-delay: .2s;
	transform-origin: left bottom;
}
.nayami_box1 .com_h__min.anime_on span::before {
	opacity: 1;
	scale: 1;
}

.nym_list {
	display: flex;
	justify-content: center;
	column-gap: 0.84%;
}
.nym_list > li {
    position: relative;
	flex: 1;
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
	font: var(--font-min);
	font-size: min(1.6vw,110%);
    letter-spacing: .08em;
    line-height: 2;
	white-space: nowrap;
    width: min(11em);
	aspect-ratio: 1;
	color: #FFF;
	background: url(../images/top/naymai-obj.svg) no-repeat center center;
	background-size: contain;
}

#nayami .com_arrow {
	position: absolute;
	translate: 0 -80%;
	top: auto;
	bottom: auto;
	translate: 0 -80%;
	z-index: 2;
}
#nayami .com_arrow.anime_on {
	translate: 0 -50%;
}

.nayami_box2 {
	background-color: transparent;
	padding-bottom: 10px;
	padding-bottom: 100px;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 50% 100%, 0 calc(100% - 90px));
}
.nayami_box2 .com_bg__color {
	background-color: var(--color-primary-100);
	height: 0;
	transition: height 3s;
}
.nayami_box2 .com_bg__color.anime_on {
	height: 100%;
}
.nayami_box2 .com_h__min span {
	color: var(--color-primary);
	font-size: 128%;
}

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

/* nym_list */
.nym_list {
	flex-wrap: wrap;
	column-gap: 4%;
}
.nym_list > li {
	flex: none;
	width: 48%;
	font-size: 92%;
}
.nym_list > li:nth-of-type(3) {
	margin: -8% 26%;
}
/* nayami_box2 */
.nayami_box2 {
	padding-bottom: 12vw;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 50% 100%, 0 calc(100% - 10vw));
}
}


/*---------------------------------------------------------
 about
---------------------------------------------------------*/
#about {
	text-align: center;
	color: #FFF;
}
#about .com_bg__color {
	height: calc(100% + 60px);
	background-color: var(--color-primary);
}
#about .com_h__min > span {
	display: block;
	font-size: 280%;
}
#about .com_h__min > span > span {
	position: relative;
	font-size: 142%;
	background: url(../images/top/icon-plus.svg) no-repeat left top,
				url(../images/top/icon-plus.svg) no-repeat right bottom;
	background-size: .37em auto;
	padding: 0 .5em 0 .2em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

#about .com_bg__color {
	height: calc(100% + 30px);
}
#about .com_h__min > span {
	font-size: 120%;
}
#about .com_h__min > span > span {
	letter-spacing: normal;
}
}


/*---------------------------------------------------------
 anshin
---------------------------------------------------------*/
.anshin_title {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--color-primary-dark);
}
.anshin_title > span > span {
	display: block;
	font-size: 220%;
	letter-spacing: .18em;
}
.anshin_title img {
	width: 14.5em;
	max-width: max-content;
}
#anshin .com_box__bg {
	background-image: url(../images/top/anshin-bg@2x.png),
		linear-gradient(to right, rgba(249,249,249,1), rgba(249,249,249,0.7), rgba(249,249,249,1));
	background-color: transparent;
	background-size: 30% auto, 100% 100%;
	padding-bottom: min(8vw,100px);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.anshin_title {
	display: block;
	margin-bottom: 7%;
}
.anshin_title img {
	margin: auto;
}
#anshin .com_box__bg {
	padding-top: 15%;
	background-size: 70% auto, 100% 100%;
}
}

/* anshin: anshin_wrap
-----------------------------------------------*/
.anshin_wrap {
	position: relative;
}
/* anshin_menu */
.anshin_menu {
	position: relative;
}
.anshin_menu ol {
	display: grid;
	row-gap: 1em;
	max-width: 250px;
	counter-reset: menuCounter;
	list-style: none;
	color: var(--color-primary);
	font: var(--font-min);
	font-size: min(2vw,105%);
	line-height: 1.5;
	letter-spacing: .06em;
	margin-inline: auto;
}
.anshin_menu ol > li {
	position: relative;
	counter-increment: menuCounter;
}
.anshin_menu ol > li::before {
	position: absolute;
	content: "";
	background: linear-gradient(to right, rgba(89,185,198,0.8), rgba(89,185,198,0.2));
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
}
.anshin_menu ol a {
	position: relative;
	display: block;
	white-space: nowrap;
	padding-left: 3em;
	padding-bottom: .4em;
}
.anshin_menu ol a::before {
	position: absolute;
	font: var(--font-en);
	content: counter(menuCounter, decimal-leading-zero);
	font-size: 130%;
	letter-spacing: .1em;
	left: 0;
	top: .1em;
}
.anshin_menu ol a::after {
	font-family: 'fontello';
	content: '\e801';
	color: var(--color-primary-dark);
	margin-left: .2em;
}
/* anshin_content */
.anshin_content {
	counter-reset: anshinCounter;
}
.anshin_content section {
	margin-bottom: 7.4%;
}
.anshin_content section:last-of-type {
	margin-bottom: 0;
}
.anshin_content .com_h__min {
	color: var(--color-primary-dark);
	font-size: min(3.2vw,194%);
	margin-bottom: 1em;
}
.anshin_no {
	position: relative;
	max-width: max-content;
	counter-increment: anshinCounter;
	color: var(--color-primary);
	font: var(--font-en);
	font-size: min(8vw,421%);
	letter-spacing: .1em;

	background: url(../images/top/anshin.svg) no-repeat right top;
	background-size: .73em;
	padding: .3em .3em .2em;
	translate: -0.6em 0;
}
.anshin_no::before {
	content: counter(anshinCounter, decimal-leading-zero);
}
.anshin_content .box_img {
	position: relative;
	max-width: max-content;
	margin: 0 auto 4%;
}

#anshin-02 .box_img .img_txt {
	position: relative;
	width: 90%;
	max-width: 720px;
	margin: -20% auto 4%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.anshin_wrap {
	display: grid;
	justify-content: space-between;
	grid-template-columns: 25% min(70%,810px);
}
.anshin_menu ol {
	position: sticky;
	left: 0;
	top: 120px;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

/* anshin_menu */
.anshin_menu {
	margin-bottom: 8%;
}
.anshin_menu ol {
	max-width: none;
	justify-content: space-between;
	grid-template-columns: repeat(2,48%);
	font-size: 88%;
}
.anshin_menu ol a {
	padding-left: 2.4em;
}
/* anshin_content */
.anshin_content .com_h__min {
	font-size: 130%;
}
.anshin_no {
	font-size: 10vw;
}

#anshin-02 .box_img .img_txt {
	width: 100%;
	margin: -20% auto 4%;
}
}

/* anshin: anshin_sum
-----------------------------------------------*/
.anshin_sum {
	color: #FFF;
}
.anshin_sum .com_bg__color {
	background: url(../images/top/bg@2x.png) no-repeat left top;
	background-size: min(60%,750px) auto;
	background-color: #25425a;
	top: auto;
	bottom: 0;
	height: calc(100% + 50px);
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.anshin_sum_inner {
	width: 65%;
	max-width: 770px;
	margin-left: auto;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.anshin_sum {
	color: #FFF;
}
.anshin_sum .com_bg__color {
	background-size: 60% auto;
	height: calc(100% + 30px);
}
.anshin_sum .com_h__min {
	text-align: center;
}
}


/*---------------------------------------------------------
 treatment
---------------------------------------------------------*/

/* treatment: trt_lead
-----------------------------------------------*/
.trt_lead {
	position: relative;
	text-align: center;
	color: #FFF;
	padding: 50px 0 30px;
	margin-bottom: 6%;
}
.trt_lead .com_bg__color {
	background: linear-gradient(to right, rgba(180,143,88,0), rgba(180,143,88,0.75) 30%, rgba(180,143,88,0.75) 70%, rgba(180,143,88,0));
}
.trt_lead p {
	position: relative;
}
.trt_lead::before {
	position: absolute;
	content: "";
	background: url(../images/common/logo-mark.svg) no-repeat;
	background-size: contain;
	width: 21%;
	aspect-ratio: 272/223;
	inset: 0 0 auto 0;
	margin: auto;
	translate: 0 -12%;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.trt_lead {
	padding: 10% 0 8%;
	margin-bottom: 4%;
}
.trt_lead .com_bg__color {
	background: linear-gradient(to right, rgba(180,143,88,0.2), rgba(180,143,88,0.75) 30%, rgba(180,143,88,0.75) 70%, rgba(180,143,88,0.2));
}
.trt_lead p {
	position: relative;
}
.trt_lead::before {
	width: 50%;
}
}

/* treatment: 
-----------------------------------------------*/

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

.trt_flt {
	max-width: 1290px;
	margin-left: 3.5%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

#invisalign .trt_flt .img_r,
#bracket .trt_flt .img_r {
	margin-bottom: -2%;
}
.trt_flt .com_h__min.has-icon {
	font-size: 115%;
}
}

/* treatment: trt_fea_box
-----------------------------------------------*/
.trt_fea_box {
	background-color: #f8f9fa;
}
.trt_fea_title {
	position: relative;
	text-align: center;
	color: #FFF;
	font-size: min(2.6vw,157%);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	letter-spacing: .1em;
	background-color: var(--color-primary);
	padding: .9em;
}
.trt_fea_container {
	padding: min(8vw,100px) min(3.4%,50px) min(5vw,60px);
}
/* trt_fea_col3 */
.trt_fea_col3 {
	display: grid;
	row-gap: 2em;
}
.trt_fea_col3 > div {
	position: relative;
	background-color: #e6f4f6;
	box-shadow: 0 35px 10px -30px rgba(0,0,0,0.1);
}
.trt_fea_col3 > div::before {
	position: absolute;
	content: "";
	background: url(../images/common/icon-circle.svg) no-repeat;
	background-size: contain;
	width: 35%;
	aspect-ratio: 1;
	right: 5%;
	top: 0;
	translate: 0 -25%;
}
.trt_fea_col3 .box_txt {
	padding: 7% 8.4%;
}
.trt_fea_col3 .com_h__bld {
	text-align: center;
	color: var(--color-primary);
}
/* trt_fea_attention */
.trt_fea_attention {
	width: 94%;
	max-width: 1100px;
	margin-inline: auto;
}
.trt_fea_att_title {
	position: relative;
	text-align: center;
	color: #FFF;
	font-size: min(2.2vw,131%);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	letter-spacing: .1em;
	padding: .5em 1em;
	border-radius: 100vmax;
	background-color: var(--color-accent);
	margin-bottom: 1.2em;
}
.trt_fea_attention dl {
	padding-left: 2.2rem;
	padding-bottom: .8em;
	margin-bottom: 1.2em;
	border-bottom: 1px solid #ccc;
}
.trt_fea_attention dl:last-of-type {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}
.trt_fea_attention dt {
	position: relative;
	color: var(--color-accent);
}
.trt_fea_attention dt::before {
	position: absolute;
	content: "";
	background: url(../images/common/icon-cross.svg) no-repeat;
	background-size: contain;
	width: 1.1em;
	height: 1.1em;
	left: -2.2rem;
	top: .2em;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

/* trt_fea_col3 */
.trt_fea_col3 {
	justify-content: space-between;
	grid-template-columns: repeat(3,min(32.3%,400px));
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.trt_fea_title {
	font-size: 110%;
	padding: .9em;
}
.trt_fea_container {
	padding: 12% 6% 10%;
}
/* trt_fea_col3 */

/* trt_fea_attention */
.trt_fea_attention {
	width: 96%;
}
.trt_fea_att_title {
	font-size: 105%;
	letter-spacing: .08em;
}
}

/* treatment: trt_pickup_box
-----------------------------------------------*/
.trt_pickup_box {
	background-color: var(--color-accent-100);
}
.trt_pickup_box .com_flt .img_txt {
	width: 86%;
	max-width: max-content;
	margin: -21% auto 0;
}
.trt_pickup_box .com_h__fuki {
	font-size: min(2.8vw,184%);
	margin-bottom: .8em;
}
/* trt_pickup_title */
.trt_pickup_title {
	color: var(--color-primary-dark);
	margin-bottom: 1.2em;
}
.trt_pickup_title img {
	width: 2.86em;
	margin: 0 auto .4em;
}
.trt_pickup_title p {
	max-width: max-content;
	padding: 0 .4em .4em;
	border-bottom: 1px solid currentColor;
	margin: 0 auto 1em;
}
.trt_pickup_title h4 {
	font-size: 140%;
}
.trt_pickup_title h4 span {
	color: var(--color-primary);
}
/* trt_pickup_merit */
.trt_pickup_merit {
	display: flex;
	flex-wrap: wrap;
	gap: .6em 1.6%;
}
.trt_pickup_merit > li {
	position: relative;
	flex: 1;
	text-align: center;
	color: #FFF;
	font-size: min(2vw,131%);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	letter-spacing: .1em;
	background-color: var(--color-secondary);
	border-radius: .8em;
	padding: 1.4em 1%;
}
.trt_pickup_merit > li::before {
	position: absolute;
	content: "";
	background: linear-gradient(130deg, rgba(204,204,204,0), rgba(204,204,204,0.6));
	width: 70%;
	height: 100%;
	left: 0;
	top: 0;
	clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
	mix-blend-mode: multiply;
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}
.trt_pickup_merit > li div {
	position: relative;
}
.trt_pickup_merit > li span {
	color: var(--color-accent-100);
	font-size: 120%;
}
/* trt_pickup_col2 */
.trt_pickup_col2 {
	display: grid;
	row-gap: 1.5em;
}
.trt_pickup_col2 .com_h__min {
	text-align: center;
	color: var(--color-primary);
	margin-bottom: .8em;
}
.trt_pickup_col2 .com_h__min::before {
	display: block;
	content: "";
	background: url(../images/top/icon-plus-blu.svg) no-repeat center center;
	width: 100%;
	height: 1.06em;
	margin-bottom: .6em;
}
.trt_pickup_col2 .box_img {
	max-width: max-content;
	margin: 0 auto 6%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.trt_pickup_box .com_flt .img_l {
	width: 49%;
	margin-left: -10%;
}

.trt_pickup_col2 {
	max-width: 1140px;
	justify-content: space-between;
	grid-template-columns: repeat(2,min(48%,510px));
	margin-inline: auto;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.trt_pickup_box .com_flt .img_l {
	width: 96%;
}
.trt_pickup_box .com_h__fuki {
	font-size: 120%;
}
/* trt_pickup_title */
.trt_pickup_title {
	margin-bottom: 1em;
}
.trt_pickup_title p {
	margin-bottom: .8em;
}
.trt_pickup_title h4 {
	font-size: 125%;
}
/* trt_pickup_merit */
.trt_pickup_merit > li {
	width: 100%;
	flex: auto;
	font-size: 95%;
}
}

/* treatment: trt_step_box
-----------------------------------------------*/
.trt_step_box {
	color: #FFF;
	background-color: var(--color-accent-200);
}
.trt_step_box .com_h__min {
	margin-bottom: 1em;
}
/* step_list */
.trt_step_box .step_list {
	list-style: none;
	display: grid;
	justify-content: space-between;
	row-gap: 3em;
}
.trt_step_box .step_list > li {
	position: relative;
}
.trt_step_box .step_list .box_img {
	position: relative;
	max-width: max-content;
	margin: 0 auto 4.5%;
}
.trt_step_box .step_list .box_img::after {
	position: absolute;
	content: "";
	background: url(../images/common/icon-arrow.svg) no-repeat center center;
	background-size: contain;
	width: 7%;
	height: 19%;
	left: 111%;
	top: 50%;
	translate: -50% -50%;
}
.trt_step_box .step_list li:last-of-type .box_img::after {
	display: none;
}
.trt_step_box .step_no {
	font: var(--font-en);
	color: var(--color-accent-100);
	font-size: min(2vw,131%);
	letter-spacing: .1em;
}
.trt_step_box .step_no span {
	font-size: 200%;
	vertical-align: -0.15em;
	margin-left: .2em;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

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

.trt_step_box .step_list .box_img {
	position: static;
	width: 80%;
}
.trt_step_box .step_list .box_img::after {
	width: 7%;
	height: 19%;
	left: 50%;
	top: calc(100% + 5.3vw);
	rotate: 90deg;
}
.trt_step_box .step_no {
	font-size: 100%;
}
}

/* treatment: trt_other
-----------------------------------------------*/
.trt_other {
	position: relative;
	width: 95%;
	max-width: 1000px;
	color: #FFF;
	background-color: #384146;
	margin-inline: auto;
}
.trt_other::before {
	position: absolute;
	content: "";
	background-color: var(--color-primary);
	width: 30px;
	aspect-ratio: 1;
	left: 0;
	top: 0;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.trt_other .bg {
	position: absolute;
	width: 44%;
	right: 0;
	bottom: 0;
}
.trt_other_txt {
	position: relative;
	padding: 4% 5%;
}
.trt_other_txt .ft_en {
	font-size: 105%;
	margin-bottom: .8em;
}
.trt_other_txt .com_h__min {
	color: var(--color-primary);
}
.trt_other_link {
	margin: 0;
}
.trt_other_link a {
	position: relative;
	display: flex;
	align-items: center;
	column-gap: .8em;
	color: #FFF;
	padding: 2% 5%;
	background: linear-gradient(to right, var(--color-primary) 40%, transparent 75%);
}
.trt_other_link .com_icon {
	position: relative;
    width: 3em;
	font-size: 75%;
	translate: none;
}
.trt_other_link a:hover .com_icon {
	color: var(--color-primary-dark);
	background-color: #FFF;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {


.trt_other_txt p {
	width: 70%;
	max-width: 530px;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.trt_other {
	width: 95%;
}
.trt_other .bg {
	width: 80%;
	bottom: 10%;

	-webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%);
	mask-image: linear-gradient(to top, transparent 0%, black 20%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: auto;
    mask-size: auto;
}
.trt_other_txt {
	position: relative;
	padding: 10% 8% 15%;
}
.trt_other_txt .ft_en {
	font-size: 95%;
}
.trt_other_link a {
	padding: 5% 6%;
}
}



/*---------------------------------------------------------
 compare
---------------------------------------------------------*/
#compare .com_box__bdr dt {
	font-size: 95%;
	font-weight: var(--fw-bold);
	line-height: 1.5;
	margin-top: 1.4em;
	margin-bottom: .3em;
}
#compare .com_box__bdr :where(p, dd) {
	font-size: 84%;
	letter-spacing: .1em;
	line-height: 1.8;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

#compare .com_box__bdr .scl_area {
	width: 103%;
	overflow-x: hidden;
	height: 80vw;
	padding: 0 4% 0 3%;
}
#compare .com_box__bdr :where(p, dd) {
	letter-spacing: .06em;
}
}

/* compare: tbl_compare
-----------------------------------------------*/
.tbl_compare {
	width: 100%; 
	text-align: center;
	font-size: min(1.5vw,105%);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	letter-spacing: .12em;
	border-spacing: 0 1px;
	padding-top: 5%;
}
.tbl_compare :where(th, td) {
	position: relative;
	padding: 1.3em 3%;
	min-width: 0;
}
.tbl_compare thead th {
	width: 42%;
	color: #FFF;
	font-feature-settings: "halt";
	background-color: var(--color-secondary);
	padding-top: 0;
}
.tbl_compare thead th img {
	width: 50%;
	max-width: 220px;
	margin: -9.5% auto .5em;
}
.tbl_compare thead th:first-child {
	width: 16%;
	background-color: transparent;
}
.tbl_compare thead th:nth-child(3) {
	background-color: var(--color-primary);
}

.tbl_compare tbody th {
	color: #FFF;
	background-color: var(--color-gray);
}
.tbl_compare tbody td {
	color: var(--color-secondary);
	background-color: var(--color-secondary-100);
}
.tbl_compare tbody td:nth-child(3) {
	color: var(--color-primary);
	background-color: var(--color-primary-200);
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.tbl_compare {
	font-size: 105%;
}
.tbl_compare thead th {
	width: 40%;
}
.tbl_compare thead th:first-child {
	width: 20%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.tbl_compare {
	width: 160vw;
	font-size: 90%;
}
.tbl_compare thead th {
	width: 40%;
}
.tbl_compare thead th:first-child {
	width: 20%;
}
}


/*---------------------------------------------------------
 VALUE
---------------------------------------------------------*/
#value .com_bg__color {
	background-color: var(--color-bg);
}

/* VALUE: value_lead
-----------------------------------------------*/
.value_lead {
	text-align: center;
}
.value_title {
	text-align: center;
	color: var(--color-primary-dark);
	font-size: min(3.6vw,236%);
	margin-bottom: .6em;
}
.value_title span {
	position: relative;
	color: var(--color-primary);
	font-size: 166%;
	background: url(../images/top/icon-plus-blu.svg) no-repeat left top,
				url(../images/top/icon-plus-blu.svg) no-repeat right bottom;
	background-size: .5em auto;
	padding: .1em .6em .1em .5em;
	margin-left: -0.2em;
}

.value_lead .com_col_txt {
	width: 90%;
	max-width: 910px;
	margin: 3.5% auto;
}
/* grd_box */
.value_lead .grd_box {
	position: relative;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
	padding: min(5vw,50px) 5%;
	margin-top: 2em;
}
.value_lead .txt_more {
	width: 8.3em;
	height: 1.81em;
	background: url(../images/top/frame.svg) no-repeat center center;
	color: #FFF;
	text-align: center;
	font-size: 110%;
	font-weight: var(--fw-bold);
	letter-spacing: .1em;
	line-height: 1.4;
	padding: .25em .4em .25em .6em;
	margin: 1em auto;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {


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

.value_lead {
	text-align: left;
}
.value_title {
	font-size: 140%;
}
.value_lead .com_col_txt {
	width: 100%;
	margin: 6% auto;
}
/* grd_box */
.value_lead .grd_box {
	padding: 8% 5%;
	margin-top: 7%;
}
.value_lead .txt_more {
	font-size: 105%;
}
}

/* VALUE: price
-----------------------------------------------*/
.price_inner {
	display: grid;
	row-gap: 1.5em;
}
.price_inner .com_h__min {
	color: var(--color-accent-200);
	margin-left: 1em;
}
.price_inner .aster_txt {
	margin-left: 6%;
}
/* price_list */
.price_list {
	font-size: min(1.6vw,110%);
	line-height: 1.4;
}
.price_list > li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background-color: #FFF;
	border-radius: 100vmax;
	padding: 1.2em 1.8em;
	margin-bottom: 5px;
}
.price_list .name {
	font-size: 114%;
	font-weight: var(--fw-bold);
}
.price_list .name small {
	display: inline-block;
	font-size: 79%;
	font-weight: normal;
	vertical-align: 0.1em;
}
.price_list .price {
	color: var(--color-accent-200);
	white-space: nowrap;
}
.price_list .price span {
	font: var(--font-en);
	font-size: 166%;
	letter-spacing: .12em;
	vertical-align: -0.1em;
	margin-right: .1em;
}

.price_wire .com_h__min,
.price_wire .price_list .price {
	color: var(--color-primary);
}
.price_wire .price_list > li {
	background-color: var(--color-primary-200);
}
.price_invisa .com_h__min,
.price_invisa .price_list .price {
	color: var(--color-secondary);
}
.price_invisa .price_list > li {
	background-color: var(--color-secondary-100);
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.price_inner {
	justify-content: space-between;
	grid-template-columns: repeat(2,min(49%,590px));
	row-gap: 2em;
}
.price_inner .price_wire {
	grid-column: 1/2;
	grid-row: 1/3;
}
.price_inner .price_invisa {
	grid-column: 2/3;
	grid-row: 1/2;
}
.price_inner .price_other {
	grid-column: 2/3;
	grid-row: 2/3;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

/* price_list */
.price_list {
	font-size: 90%;
	line-height: 1.3;
}
.price_list > li {
	height: 4.5em;
	padding: .8em 1.8em;
}
.price_list .name {
	font-size: 114%;
}
.price_list .price {
	text-align: right;
}
}

/* VALUE: payment
-----------------------------------------------*/
#payment {
	text-align: center;
}
.card_list {
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
	gap: 1em .8%;
    width: 90%;
    max-width: 1100px;
	margin: 5% auto 4%;
}
.card_list > li {
	width: 11.8%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {


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

.card_list {
	gap: .4em 1.85%;
    width: 90%;
	margin: 5% auto 4%;
}
.card_list > li {
	width: 23.6%;
}
}

/* VALUE: deduction
-----------------------------------------------*/
.ded_calc_box .formula {
	max-width: max-content;
	font-size: min(1.7vw,118%);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	letter-spacing: .1em;
	white-space: nowrap;
	margin-inline: auto;
}
.ded_calc_box .formula span {
	vertical-align: middle;
}
.ded_calc_box .formula span.max {
	font-size: 68%;
}
.ded_calc_box .formula span.och {
	color: #b48f58;
}
.ded_calc_box .aster_txt {
	text-align: right;
	color: #b48f58;
	font-weight: var(--fw-bold);
	margin-top: .8em;
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.ded_calc_box .formula {
	font-size: 2.1vw;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.ded_calc_box .formula {
	font-size: 110%;
	letter-spacing: .05em;
}
}


/*---------------------------------------------------------
 Q&A
---------------------------------------------------------*/
#qa {
	background-color: #ebeff3;
}
#qa .com_title__enjp {
	margin-bottom: 4%;
}
/* qa_list */
.qa_list dd {
	margin-bottom: 3%;
}
.qa_list dd:last-of-type {
	margin-bottom: 0;
}
.qa_list dt,
.qa_list dd {
	position: relative;
}
.qa_list dt {
	color: var(--color-primary-dark);
	padding: .7em .5em .7em 9%;
	border-bottom: 1px solid currentColor;
	margin-bottom: 1em;
}
.qa_list dd {
	padding-left: 12%;
	padding-right: 3.5%;
}
.qa_list dt::before,
.qa_list dd::before {
	position: absolute;
	display: block;
	text-align: center;
	font: var(--font-en);
	font-size: min(3.15rem,5vw);
	letter-spacing: .1em;
	line-height: 1;
	white-space: nowrap;
	translate: -50% 0;
}
.qa_list dt::before {
	content: "Q";
	color: var(--color-primary);
	left: 5.4%;
	top: .25em;
}
.qa_list dd::before {
	content: "A";
	color: #acdce2;
	left: 8.5%;
	top: -0.2em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.qa_list dt {
	padding-left: 10vw;
	margin-bottom: 1em;
}
.qa_list dd {
	padding-left: 13vw;
	padding-top: 0;
	margin-bottom: 5%;
}
.qa_list dt::before,
.qa_list dd::before {
	font-size: 9vw;
}
.qa_list dt::before {
	left: 4%;
	top: .4em;
}
.qa_list dd::before {
	left: 8.5%;
	top: -0.2em;
}
}


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

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


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

}