@charset "UTF-8";


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

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



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

======================================================== */
.l-fv {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	min-height: min(calc(100vw * 0.6), 780px);
}

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

.l-fv {
	width: 100svw;
	height: 100svh;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-fv {
	height: calc(100svh - 23vw);
	min-height: calc(100vw * 1.4);
	max-height: calc(100vw * 1.9);
}
}


/*-----------------------------------------------
 FV - slide
-----------------------------------------------*/
.l-fv__slide {
	z-index: -1 !important;
	width: 100%;
	height: 100%;

	.swiper-wrapper,
	.swiper-slide {
		width: 100%;
		height: 100%;
	}

	.swiper-slide {
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;

		&::before {
			position: absolute;
			content: "";
			background-color: rgb(0 0 0 / 0.08);
			width: 100%;
			height: 100%;
			inset: 0;
			z-index: -1;
		}
		&.slide1 {background-image: url(../images/top/fv-img01@2x.jpg);	}
		&.slide2 {background-image: url(../images/top/fv-img02@2x.jpg);	}
		&.slide3 {background-image: url(../images/top/fv-img03@2x.jpg);	}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-fv__slide {
	-webkit-mask-image: linear-gradient(to top, transparent 10%, black 30%);
	mask-image: linear-gradient(to top, transparent 10%, black 30%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: auto;
	mask-size: auto;

	.swiper-slide {
		&::before {
			background-color: rgb(0 0 0 / 0.3);
		}
		&.slide1 {background-image: url(../images/top/fv-img01-sp@2x.jpg);	}
		&.slide2 {background-image: url(../images/top/fv-img02-sp@2x.jpg);	}
		&.slide3 {background-image: url(../images/top/fv-img03-sp@2x.jpg);	}
	}
}
}


/*-----------------------------------------------
 FV - copy
-----------------------------------------------*/
.l-fv__copy {
	position: absolute;
	width: 45%;
	max-width: max-content;
	left: 50%;
	top: 38%;
	translate: -50% -50%;
	opacity: 0;
	transition: opacity .8s .8s;

	> img {
		filter: drop-shadow(0 0 20px rgb(0 0 0 / 0.6));
		transform: translateZ(0);
	}
}

.l-fv__point {
	position: absolute;
	display: flex;
	width: 85%;
	max-width: 900px;
	left: 50%;
	bottom: 27%;
	translate: -50% 50%;
	opacity: 0;
	transition: opacity .8s .8s;
	
	> li {
		position: relative;
		flex: 1;
		container-type: inline-size;

		&::before,
		&::after {
			position: absolute;
			content: "";
			background-color: rgb(255 255 255 / 0.8);
			width: 20%;
			height: 1px;
			left: 100%;
			top: 50%;
			rotate: 45deg;
			translate: -50% -50%;
		}
		&::after {
			rotate: -45deg;
		}
		&:last-of-type::before,
		&:last-of-type::after {
			display: none;
		}
	}
	.no {
		position: absolute;
		color: #ffff75;
		font: var(--font-en);
		font-size: 26.6cqw;
		letter-spacing: normal;
		left: 55%;
		top: 34%;
		translate: -50% -50%;
	}
}

.l-fv__img.is-animated {
	.l-fv__copy,
	.l-fv__point {
		opacity: 1;
	}
}

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

.l-fv__point {
	filter: drop-shadow(0 0 15px rgb(0 0 0 / 0.7));
	transform: translateZ(0);
}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.l-fv__copy {
	width: 70%;
}
.l-fv__point {
	width: 90%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-fv__copy {
	width: 95%;
	left: 55%;
	top: 44%;
}
.l-fv__point {
	width: 100%;
	bottom: 0;
	translate: -50% 0%;

	
	> li {
		&::before,
		&::after {
			background-color: rgb(199 199 199 / 0.6);
			width: 38%;
		}
	}
	.no {
		color: var(--accent-color);
		font-size: 39.7cqw;
		left: 37%;
		top: 35%;
	}
}
}

@media only screen and (min-width: 768px) and (max-width: 1500px) and (min-aspect-ratio: 1024/750) {


.l-fv__point {
	width: 70%;
	bottom: 20%;
}
}



/* ========================================================
  
  deco

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

/*---------------------------------------------------------
 Petal
---------------------------------------------------------*/

/* Petal - FV
-----------------------------------------------*/
.l-fv .c-petal-wrap {
	--wrap-width: 600;
	--wrap-height: 300;
	height: 100%;

	inset: 0;
}
.l-fv .c-petal {
	width: 10%;

	&.p01 {
		width: 7%;
		--x: 12;
		--y: 164;
		--rotate: -170deg;
	}
	&.p02 {
		--x: 83;
		--y: 164;
		--rotate: 40deg;
	}
	&.p03 {
		--x: 280;
		--y: 150;
		--rotate: -150deg;
	}
	&.p04 {
		width: 8%;
		--x: 372;
		--y: 150;
		--rotate: 130deg;
	}
	&.p05 {
		--x: 425;
		--y: 160;
		--rotate: 40deg;
	}
	&.p06 {
		width: 8%;
		--x: 40;
		--y: 218;
		--rotate: 100deg;
	}
	&.p07 {
		--x: 96;
		--y: 265;
		--rotate: -110deg;
	}
	&.p08 {
		--x: 297;
		--y: 265;
		--rotate: -30deg;
	}
}

/* Petal - Concept
-----------------------------------------------*/
.concept .c-petal-wrap {
	--wrap-height: 764;

	--wrap-half-w: calc(var(--wrap-width) / 2);
	--wrap-half-h: calc(var(--wrap-height) / 2);

	inset: 0 0 auto 0;
}
.concept .c-petal {
	&.p01 {
		--x: 1136;
		--y: 10;
		--rotate: 20deg;
	}
	&.p02 {
		--x: 120;
		--y: 98;
		--rotate: -135deg;
	}
	&.p03 {
		--x: 1315;
		--y: 120;
		--rotate: 20deg;
	}
	&.p04 {
		--x: 814;
		--y: 123;
		--rotate: -160deg;
	}
	&.p05 {
		--x: 76;
		--y: 254;
		--rotate: 20deg;
	}
	&.p06 {
		--x: 307;
		--y: 215;
		--rotate: -20deg;
	}
	&.p07 {
		--x: 1118;
		--y: 218;
		--rotate: 100deg;
	}
	&.p08 {
		--x: 1450;
		--y: 200;
		--rotate: -50deg;
	}
	&.p09 {
		--x: 194;
		--y: 360;
		--rotate: 0deg;
	}
	&.p10 {
		--x: 512;
		--y: 306;
		--rotate: -30deg;
	}
	&.p11 {
		--x: 1273;
		--y: 302;
		--rotate: -110deg;
	}
	&.p12 {
		--x: 346;
		--y: 434;
		--rotate: -35deg;
	}
	&.p13 {
		--x: 1200;
		--y: 450;
		--rotate: 100deg;
	}
	&.p14 {
		--x: 1438;
		--y: 400;
		--rotate: -35deg;
	}
	&.p15 {
		--x: 110;
		--y: 540;
		--rotate: 160deg;
	}
	&.p16 {
		--x: 286;
		--y: 600;
		--rotate: -80deg;
	}
	&.p17 {
		--x: 1000;
		--y: 564;
		--rotate: 30deg;
	}
	&.p18 {
		--x: 1340;
		--y: 542;
		--rotate: -160deg;
	}
	&.p19 {
		--x: 1128;
		--y: 700;
		--rotate: 0deg;
	}
	--sx: calc(  var(--wrap-half-w) + (var(--x) - var(--wrap-half-w)) / 3);
	--sy: calc(  var(--wrap-half-h) + (var(--y) - var(--wrap-half-h)) / 3);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.concept .c-petal-wrap {
	--wrap-width: 390;
	--wrap-height: calc(var(--wrap-width) * 2.2);
}
.concept .c-petal {
	width: 18vw;

	&.p01 {
		--x: 80;
		--y: 170;
	}
	&.p03 {
		--x: 250;
		--y: 300;
	}
	&.p04 {
		--x: 334;
		--y: 630;
	}
	&.p07 {
		--x: 70;
		--y: 390;
	}
	&.p08 {
		--x: 390;
		--y: 380;
	}
	&.p11 {
		--x: 212;
		--y: 465;
	}
	&.p16 {
		--x: 220;
		--y: 80;
	}
	&.p17 {
		--x: 390;
		--y: 170;
	}
	&.p19 {
		--x: 120;
		--y: 580;
	}
	&.p02,
	&.p05,
	&.p06,
	&.p09,
	&.p10,
	&.p12,
	&.p13,
	&.p14,
	&.p15,
	&.p18 {
		display: none;
	}
}
}

/* Petal - Category
-----------------------------------------------*/
.category .c-petal-wrap {
	--wrap-height: 250;

	inset: 0 0 auto 0;
}
.category .c-petal {
	&.p01 {
		--x: 147;
		--y: 20;
		--rotate: 130deg;
	}
	&.p02 {
		--x: 200;
		--y: 95;
		--rotate: -100deg;
	}
	&.p03 {
		--x: 1257;
		--y: 177;
		--rotate: -110deg;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.category .c-petal-wrap {
	height: 45vw;
}
}

/* Petal - Feature
-----------------------------------------------*/
.feature .c-petal-wrap {
	--wrap-height: 480;

	inset: 0 0 auto 0;
}
.feature .c-petal {
	&.p01 {
		--x: 350;
		--y: 0;
		--rotate: 130deg;
	}
	&.p02 {
		--x: 200;
		--y: 125;
		--rotate: 130deg;
	}
	&.p03 {
		--x: 270;
		--y: 290;
		--rotate: -30deg;
	}
	&.p04 {
		--x: 1345;
		--y: 250;
		--rotate: 200deg;
	}
	&.p05 {
		--x: 1260;
		--y: 390;
		--rotate: -130deg;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.feature .c-petal-wrap {
	height: 60vw;
}
}

/* Petal - Certificate
-----------------------------------------------*/
.certificate .c-petal-wrap {
	--wrap-width: 1274;
	--wrap-height: 314;

	inset: 0;
	z-index: 1;
}
.certificate .c-petal {
	&.p01 {
		--x: 5;
		--y: 114;
		--rotate: 0;
	}
	&.p02 {
		--x: 1200;
		--y: 2;
		--rotate: 150deg;
	}
	&.p03 {
		--x: 1280;
		--y: 194;
		--rotate: 90deg;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.certificate .c-petal-wrap {
	height: 45vw;
}
}


/* Petal - Message
-----------------------------------------------*/
.message .c-petal {
	left: 10%;
	top: 0;

	--x: 157;
	--y: 0;
	--rotate: -45deg;
}

/* Petal - Group
-----------------------------------------------*/
.group .c-petal {
	&.fall-to-l {
		left: 102%;
		top: 0%;
		--rotate: -20deg;
	}
	&.fall-to-r {
		left: -8.5%;
		top: 100%;
		--rotate: -160deg;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.group .c-petal {
	&.fall-to-l {
		left: 90%;
	}
	&.fall-to-r {
		left: 5%;
		top: 55%;
	}
}
}


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

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


/*---------------------------------------------------------
 Concept
---------------------------------------------------------*/
.concept {
	padding-bottom: 0;
}
.concept .c-bg-color {
	background-image: url(../images/top/concept-bg@2x.jpg);
	-webkit-mask-image: linear-gradient(to top, transparent 0%, black 400px);
	mask-image: linear-gradient(to top, transparent 0%, black 400px);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: auto;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.concept .c-bg-color {
	height: calc(100% + 34vw);
	background-image: url(../images/top/concept-bg-sp@2x.jpg);
	inset: auto 0 0 0;
}
}

/* Concept - 
-----------------------------------------------*/
.concept__inner {
	max-width: 700px;
	margin-inline: auto;
	margin-bottom: min(12vw,180px);
}
.concept__copy {
	font-size: min(2.2vw,156%);
	margin-bottom: 1em;

	> span {
		display: block;
		font-size: 180%;
		margin-top: .2em;
	}
}
.concept__apps {
	position: relative;
	max-width: 920px;
	text-align: center;
	font: var(--font-min);
	font-size: min(220%,3.1vw);
	line-height: 1.5;
	letter-spacing: .1em;
	white-space: nowrap;
	background: linear-gradient(to right, transparent, #FFF 40%, #FFF 60%, transparent);
	padding: .6em;
	margin: .5em auto 1em;

	> span {
		color: var(--color-org-300);
		font-size: 130%;
		font-family: var(--ff-gothic);
		font-weight: var(--fw-bold);

		> span {
			font: var(--font-en);
			font-size: 145%;
			font-weight: 700;
			letter-spacing: .06em;
			vertical-align: -0.05em;
			margin-left: .1em;
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.concept__copy {
	font-size: 140%;

	> span {
		font-size: 160%;
	}
}
.concept__apps {
	font-size: 140%;
}
}



/*---------------------------------------------------------
 Category
---------------------------------------------------------*/

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


}


/*---------------------------------------------------------
 Feature
---------------------------------------------------------*/
.feature {
	color: var(--color-brw);
	padding-bottom: 0;
}
.feature .c-bg-color {
	height: calc(100% - 120px);
	background-image: url(../images/common/shadow@2x.png);
	background-position: center top;
	background-size: 88% auto;
	background-color: --color-ybei;
}
.fea-ttl {
	margin-bottom: 3.5%;

	.fea-ttl__img {
		max-width: max-content;
		margin: 0 auto 2em;
	}
	.c-hdg--deco {
		--color-grd: var(--color-och);
		font-size: min(3vw,2.18rem);
	}
}
.fea-lead {
	text-align: center;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.fea-ttl {
	.fea-ttl__img {
		width: 90%;
		margin-bottom: 1em;
	}
	.c-hdg--deco {
		font-size: 5vw;
	}
}
}

/* Feature - fea-wrap
-----------------------------------------------*/
.fea-item {
	&.u-acc--org {
		--no-color: #ffb057;
		--bg-color: #fff7ee;
	}
	&.u-acc--blu {
		--no-color: #48b1cf;
		--bg-color: #f1f9fb;
	}
	&.u-acc--grn {
		--no-color: #81d0ad;
		--bg-color: #eff9f5;
	}
	&.u-acc--pnk {
		--no-color: var(--color-pnk-300);
		--bg-color: #ffeff3;
	}
}

.fea-item {
	padding-top: 40px;
	margin-bottom: min(10%,80px);
	
	&:last-child {
		margin-bottom: 0;
	}
}
.fea-item .c-bg-img {
	width: 52vw;
	height: calc(100% - 35px);
	color: --color-ybei;

	&.pos-l::after,
	&.pos-r::after {
		background:	linear-gradient(to right, transparent 40%, currentColor 100%);
	}
	> img {
		object-position: center -10px;
	}
}

.fea-item .c-hdg--min span {
	color: var(--accent-color);
}
/* no */
.fea-item__no {
	width: 11em;
	text-align: center;
	color: var(--no-color);
	font: var(--font-en);
	font-size: min(1.6vw,125%);
	opacity: 0.7;

	> span {
		display: block;
		font-size: 500%;
		font-style: italic;
	}
}
/* box */
.fea-item__box {
	background-color: #fff;
	padding: 4%;
	margin-top: 2em;
	box-shadow: 0 65px 25px -50px rgb(202 191 138 / 0.5);
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.fea-item__txt {
	width: 70%;
	max-width: 854px;
	display: flex;
	align-items: center;

	& p {
		max-width: 475px;
	}
}

.fea-item__box {
	width: 85%;
	max-width: 854px;
}

.fea-item {
	&:nth-of-type(even) .fea-item__txt,
	&:nth-of-type(even) .fea-item__box {
		margin-left: auto;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.fea-item {
	padding-top: 10%;
}
.fea-item .c-bg-img {
	width: 65vw;
	height: 35vw;
}
/* no */
.fea-item__no {
	width: 7em;
	font-size: 3.5vw;
	margin-bottom: 10%;
}
.fea-item:nth-of-type(even) .fea-item__no {
	margin-left: auto;
}
/* box */
.fea-item__box {
	padding: 6% 4%;
	margin-top: 5%;
	box-shadow: 0 40px 20px -30px rgb(202 191 138 / 0.5);
}
}


/* Feature - fea-point
-----------------------------------------------*/
.fea-point {
	display: flex;
	flex-wrap: wrap;
	gap: .75em;
	text-align: center;
	text-align: center;
	font-size: min(1.8vw,125%);
	line-height: 1.3;
	font-weight: var(--fw-bold);
}
.fea-point > li {
	position: relative;
	flex: 1;
	background-color: var(--bg-color);
	padding: 1.4em 3%;
	border-radius: 10px;

	&.is-max {
		width: 100%;
		flex: auto;
	}
	&.is-flex {
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 5%;
	}
}

.fea-point {
	& p {
		max-width: 250px;
		text-align: left;
		font-size: 1rem;
		font-weight: normal;
		line-height: 1.7;
	}
	& dt {
		margin-bottom: .5em;
	}
	& span {
		color: var(--accent-color);
	}

	.c-list--point {
		max-width: 240px;
		grid-template-columns: repeat(2,50%);
		gap: .1em 0.6em;
		white-space: nowrap;
		margin: .5em auto 0;

		> li::before {
			background-color: var(--no-color);
			opacity: 0.6;
		}
	}

	.c-txt--circle {
		display: inline-flex;
		width: min(4.4em);
		min-width: 4.4em;
		color: #FFF;
		background-color: var(--accent-color);
	}
}

/* abs */
.fea-point__abs {
	position: absolute;
	width: 10vw;
	max-width: max-content;
	right: 0;
	top: 50%;
	translate: 38% -50%;
}
.fea-item:nth-of-type(2) .fea-point__abs  {
	right: auto;
	left: 0;
	translate: -55% -50%;
}
/* text */
.fea-point__txt {
	font-size: 165%;
	vertical-align: .1em;
	white-space: nowrap;

	&.size-lg {
		font-size: 260%;
	}
	&.size-lg span {
		font: var(--font-en);
		font-size: 120%;
		vertical-align: -0.05em;
	}
}
/* annual */
.fea-point__annual {
	font-size: 250%;
	line-height: 1.2;
	letter-spacing: .08em;
	white-space: nowrap;

	> small {
		display: inline-block;
		font-size: 66%;
	}
	> span {
		font: var(--font-en);
		font-size: 212%;
		line-height: 0.6;
		letter-spacing: normal;
		margin-left: .1em;
	}
	> sub {
		width: 1.2em;
		font-size: 37%;
		writing-mode: vertical-rl;
		vertical-align: -0.1em;
	}
}
/* income */
.fea-point__income {
	font-size: 115%;
	line-height: 1.2;
	letter-spacing: .08em;
	white-space: nowrap;

	> span {
		font: var(--font-en);
		font-size: 347%;
		letter-spacing: -0.02em;
		margin-left: .05em;
		margin-right: .1em;
	}
	> sub {
		font-size: 100%;
		writing-mode: vertical-rl;
		vertical-align: -0.05em;
	}
	> small {
		display: inline-block;
		font-size: 100%;
		> span {
			color: var(--accent-color);
		}
	}
}
/* leave */
.fea-point__leave {
	font-size: 315%;
	line-height: 1.2;
	letter-spacing: .08em;
	white-space: nowrap;

	> span {
		font-size: 105%;
		opacity: 0.5;
	}
	> sub {
		display: inline-block;
		width: 1em;
		font-size: 44%;
		writing-mode: vertical-rl;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.fea-point > li {
	&.is-max {
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 3.6%;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.fea-point {
	font-size: 90%;
}
.fea-point > li {
	padding: 1.4em 6%;
}

.fea-point {
	& p {
		text-align: center;
		max-width: 100%;
		line-height: 1.5;
		margin-top: .5em;
	}
	.c-txt--circle {
		position: absolute;
		font-size: 85%;
		left: -0.5em;
		top: -1.2em;
	}
}

/* abs */
.fea-point__abs {
	width: 20vw;
	top: 70%;
	translate: 25% -50%;
}
.fea-item:nth-of-type(2) .fea-point__abs  {
	translate: -40% -50%;
}
/* text */
.fea-point__txt {
	font-size: 150%;

	&.size-lg {
		font-size: 200%;
	}
}
/* leave */
.fea-point__leave {
	font-size: 280%;
}
}


/*---------------------------------------------------------
 certificate
---------------------------------------------------------*/

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

.certificate {
	.l-flt {
		max-width: 980px;

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

.certificate {
	.l-flt__img {
		width: 60%;
	}
}
}


/*---------------------------------------------------------
 Message
---------------------------------------------------------*/
.message .c-bg-img {
	color: #FFF;
}
.message .c-hdg--deco {
	--color-grd: #caccf3
}

/* Message - msg__inner
-----------------------------------------------*/
.msg__inner {
	position: relative;
	margin-left: 5.4%;

	.c-hdg--min {
		letter-spacing: .04em;
		white-space: nowrap;
	}
}

.msg__name {
	max-width: max-content;
	font: var(--font-min);
	font-size: min(2.2vw,156%);
	margin-left: auto;

	> dd {
		font-size: 160%;
		letter-spacing: .1em;
		
		> span {
			display: block;
			color: #d89f14;
			font: var(--font-en);
			font-size: 45%;
			letter-spacing: .08em;
			margin-top: .5em;
		}
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.msg__inner p {
	width: 70%;
	max-width: 650px;
}
.msg__name {
	position: absolute;
	left: 76%;
	top: min(13vw,250px);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.msg__inner {
	margin-left: 3%;
}
.msg__name {
	display: flex;
	column-gap: 1em;
	font-size: 100%;
	margin: 1em 5% 2em auto;

	> dt {
		margin-top: .5em;
	}
}
}


/*---------------------------------------------------------
 Group
---------------------------------------------------------*/
.group .c-bg-color {
	background-color: #f5f5f5;
}
.group .c-hdg--deco {
	--color-grd: #aae1a4;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.group .c-list {
	margin-left: 1em;
	margin-top: -6%;
}
}

/* Group - lead
-----------------------------------------------*/
.group-lead {
	position: relative;
}
.group-ttl .c-hdg--min {
	> span {
		display: block;
		font-size: 143%;
		> span {
			font: var(--font-en);
			color: #afafbc;
			font-size: 181%;
			vertical-align: -0.1em;
		}
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.group-lead {
	max-width: 1075px;
	display: grid;
	justify-content: space-between;
	grid-template-columns: 53% 42%;
	margin-inline: auto;
}
.group-lead__txt {
	grid-row: 1/2;
	grid-column: 2/3;
}
.group-circle {
	grid-row: 1/2;
	grid-column: 1/2;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}


/* Group - circle
-----------------------------------------------*/
.group-circle {
	position: relative;
	max-width: 560px;
	aspect-ratio: 560 / 375;
	container-type: inline-size;

	&::before {
		position: absolute;
		display: block;
		content: "";
		background: url(../images/top/group-circle.svg) no-repeat center center;
		background-size: auto 99%;
		width: 100%;
		height: 100%;
		inset: 0;
		margin: auto;
		opacity: 0;
		scale: 0.6;
		transition: opacity 1.5s, scale 1.5s;
	}
	&.is-animated::before {
		opacity: 1;
		scale: 1;
	}
}
.group-circle li {
	position: absolute;
	translate: -50% -50%;

	&:nth-of-type(1) {
		left: 20%;
		top: 22%;
	}
	&:nth-of-type(2) {
		left: 80%;
		top: 22%;
	}
	&:nth-of-type(3) {
		left: 20%;
		top: 80%;
	}
	&:nth-of-type(4) {
		left: 80%;
		top: 80%;
	}
}
.group-circle__txt {
	position: absolute;
	text-align: center;
	font-size: 3.3cqw;
	font-weight: var(--fw-bold);
	line-height: 1.5;
	letter-spacing: .12em;
	left: 50%;
	top: 50%;
	translate: -50% -50%;

	> span {
		display: block;
		font-size: 130%;
	}
}
.group-circle__point {
	.c-txt--circle {
		color: #FFF;
		font-size: 3cqw;
		font-weight: var(--fw-bold);
		line-height: 1.4;
		width: min(9em);
		padding-top: .5em;

		> p > span {
			font: var(--font-en);
			font-size: 282%;
			/* line-height: 1.2; */
			vertical-align: -0.1em;
		}
		> small {
			display: block;
			font-size: 76%;
			font-weight: normal;
			letter-spacing: .04em;
		}
		> p > sub {
			writing-mode: vertical-rl;
			vertical-align: -0.4em;
		}
	}

	.group-circle__abs {
		position: absolute;
		width: 52%;
		bottom: 0;
	}
	> li:nth-of-type(odd) .group-circle__abs {
		left: 0;
		translate: -35% 40%;
	}
	> li:nth-of-type(even) .group-circle__abs {
		right: 0;
		translate: 35% 40%;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

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

.group-circle {
	margin: 8% auto;
}
}

/* Group - map
-----------------------------------------------*/
.map-color-hyogo {
	--map-color: #7cba39;
}
.map-color-osaka {
	--map-color: #BF981D;
}
.map-color-aichi {
	--map-color: #FC9685;
}
.map-color-tokyo {
	--map-color: #61d6ca;
}

.group_map_wrap {
	position: relative;
}
/* map_info */
.group_map_wrap .map_info {
	position: relative;
	z-index: 1;
}
/* map_figure */
.group_map_wrap .map_figure {
	position: relative;
	max-width: 868px;
	margin-right: -6.5%;
	margin-left: auto;
}
.group_map_wrap .map_img {
	position: relative;
}
.group_map_wrap .map_img::before {
	position: absolute;
	content: "";
	background: url(../images/top/group_map@2x.jpg) no-repeat;
	background-size: contain;
	width: 140%;
	height: 100%;
	left: -40%;
	top:56%;
	transform: translateY(-50%);
	z-index: -1;
}
.group_map_wrap .map-point {
	position: absolute;
	display: block;
	width: 5.6%;
	aspect-ratio: 1;
	background-color: #fff;
	border-radius: 50%;
	border: none;
	translate: -50% -50%;
	padding: 0;
	cursor: pointer;
	transition: background-color .5s;
}
.group_map_wrap .map-point:hover,
.group_map_wrap .map-point.is-active {
	background-color: var(--map-color);
}
.group_map_wrap .map-point::before {
	display: block;
	content: "";
	background: url(../images/common/map_icon.svg) no-repeat center center;
	width: 100%;
	height: 100%;
}
/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

/* map_info */
.group_map_wrap .map_info {
	position: absolute;
	width: 30%;
	left: 0;
	top: 50%;
	translate: 0 -50%;
}
/* map_figure */
.group_map_wrap .map_figure {
	width: 76%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.group_map_wrap .map_info {
	
}
/* map_figure */
.group_map_wrap .map_figure {
	width: 115%;
	margin-left: calc(50% - 50vw);
	inset: auto;
	transform: none;
	z-index: 1;
}
.group_map_wrap .map_img::before {
	background-image: url(../images/top/group_map_sp@2x.jpg);
	width: 100%;
	height: 100%;
	left: 0;
    top: auto;
    transform: translateY(0);
    bottom: 0;
}
/*.group_map_wrap .map-point {
	width: 6.4%;
}*/
}

/* GROUP:.clinic_slider                       
---------------------------------------------------------*/
.clinic_slider {
	position: relative;
	max-width: 342px;
	margin-inline: auto;
}
.clinic_slider .swiper-slide {
	position: relative;
	background-color: #FFF;
	pointer-events: none;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.clinic_slider .swiper-slide.swiper-slide-active {
	pointer-events: auto;
}
.clinic_slider .clinic-thumb {
	aspect-ratio: 320/190;
}
.clinic_slider .clinic-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.clinic_slider .clinic-info {
	padding: 6% 8% 10%;
}
.clinic_slider .clinic-info > * {
	max-width: 250px;
	margin-inline: auto;
}
.clinic_slider .clinic-txt {
	max-width: max-content;
	max-width: 200px;
	margin-inline: auto;
}
.clinic_slider .clinic-city {
	position: relative;
	font-size: 95%;
	font-weight: var(--fw-bold);
	letter-spacing: .1em;
	line-height: 1.5;
	margin-bottom: .4em;
}
.clinic_slider .clinic-city::before {
	display: inline-block;
	font-family: 'fontello';
	content: '\e804';
	color: var(--map-color);
	font-size: 160%;
	vertical-align: -0.1em;
	margin-right: .2em;
}
.clinic_slider .clinic-name {
	position: relative;
	font-size: min(2vw,125%);
	font-weight: var(--fw-bold);
	letter-spacing: .06em;
	line-height: 1.5;
	margin-bottom: .4em;
}
.clinic_slider .clinic-name small{
	font-size: 75%;
}

.clinic_slider .c-btn-wrap {
	flex-wrap: nowrap;
	gap: .6em 3%;
	margin-top: .8em;
}
.clinic_slider .c-btn-bg {
	margin-top: 1.4em;

	> a {
		justify-content: center;
		height: 2em;
		border-radius: 2em;
	}
}


/* arrow */
.swiper-button {
	position: absolute;
	display: block;
	background: url(../images/common/icon_arrow.svg) no-repeat center center;
	background-size: contain;
	background-color: #c2c2c2;
	border-radius: 50%;
	width: 14%;
	aspect-ratio: 1;
	bottom: 8%;
	cursor: pointer;
	transition: background-color .5s;
}
/* .swiper-button::before {
	position: absolute;
	font-family: 'fontello';
	content: '\e801';
	width: 100%;
	height: 100%;
	inset: 0;
} */
.swiper-button-prev {
	left: 0;
	translate: -45% 0;
	scale: -1 1;
}
.swiper-button-next {
	right: 0;
	translate: 45% 0;
}
.swiper-button:hover {
	background-color: var(--color-base);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.clinic_slider {
	max-width: 90%;
	width: 90%;
}
.clinic_slider .clinic-city {
	font-size: 90%;
}
.clinic_slider .clinic-name {
	font-size: 100%;
}
}

/* Group - info
-----------------------------------------------*/
.group-info dl {
	background-color: #fff;
	padding: 5% 6.4%;
	border-radius: 10px;

	> dt {
		color: var(--color-cml);
		padding-bottom: .8em;
		margin-bottom: 1em;
		border-bottom: var(--bdr-solid);
	}
	.c-hdg--bld {
		display: inline-block;
		font-size: min(2vw,143%);

		.c-icon {
			font-size: 48%;
			margin-left: 1em;
		}
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.group-info {
	max-width: 1280px;
	display: grid;
	justify-content: space-between;
	grid-template-columns: repeat(2,48.8%);
	margin-inline: auto;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.group-info {
	margin-top: 10%;
}
.group-info dl {
	padding: 8% 6%;

	&:nth-of-type(n+2) {
		margin-top: 4%;
	}
	> dt {
		color: var(--color-cml);
		padding-bottom: .8em;
		margin-bottom: 1em;
		border-bottom: var(--bdr-solid);
	}
	.c-hdg--bld {
		font-size: 110%;
	}
}
}


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

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

/* 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) {


}