@charset "UTF-8";


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

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



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

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

/*---------------------------------------------------------
 Petal
---------------------------------------------------------*/
.c-petal {
	width: 11vw;
	max-width: 150px;
}

.p-petal {
	position: absolute;
	width: 42vw;
	max-width: max-content;

	&.p-petal--lb {
		left: 0;
		bottom: 0;
		translate: -54% 30%;
	}
	&.p-petal--rt {
		right: 16%;
		top: 50px;
		translate: 50% 0;
	}

	> img {
		opacity: 0;
		translate: 10px -10px;
		transition: opacity 2s .2s, translate 2s .2s;
	}
	&.is-animated {
		> img {
			opacity: 1;
			translate: 0 0;
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.p-petal {
	width: 50vw;

	&.p-petal--lb {
		translate: -54% 110%;
	}
	&.p-petal--rt {
		top: 10vw;
	}
}
.recruitment .p-petal {

	&.p-petal--rt {
		top: 25vw;
	}
}
}
/* Petal - Group
-----------------------------------------------*/
.group .c-petal-wrap {
	width: 36%;
	max-width: 540px;
	--wrap-width: 540;
	--wrap-height: 510;

	inset: 0 0 auto auto;
	z-index: 1;
}
.group .c-petal {
	&.p01 {
		--x: 223;
		--y: 52;
		--rotate: 150deg;
	}
	&.p02 {
		--x: 510;
		--y: 85;
		--rotate: -45deg;
	}
	&.p03 {
		--x: 25;
		--y: 195;
		--rotate: 5deg;
	}
	&.p04 {
		--x: 345;
		--y: 235;
		--rotate: -170deg;
	}
	&.p05 {
		--x: 485;
		--y: 480;
		--rotate: 5deg;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.group .c-petal {
	
}
}


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

======================================================== */
.c-bg-color {
	background-color: #f9f9f0;
}
.c-title--enjp {
	position: relative;
	z-index: 1;
}
.c-hdg--deco {
	--color-grd: var(--accent-color);
}

/*---------------------------------------------------------
 data-list
---------------------------------------------------------*/
.data-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 1.5em;
}
.data-item {
	position: relative;
	width: 49%;
	background-color: #fff;
	padding: 4% 5%;
	border-radius: 1.2em;

	&.is-max {
		width: 100%;
	}
	.u-fz--sm {
		position: relative;
		line-height: 1.6;
	}
}
.data-item__inner {
	position: relative;
}
.data-item__ttl {
	position: relative;
	display: inline-block;
	color: #FFF;
	font-size: min(2.2vw,156%);
	font-weight: var(--fw-bold);
	letter-spacing: .12em;
	line-height: 1.2;
	font-feature-settings: "halt";
	background-color: var(--accent-color);
	padding: .3em 1em;
	border-radius: 2em;
	margin-bottom: 1em;
}
.data-item__txt {
	position: relative;
	font: var(--font-min);
	font-size: min(5vw,480%);
	white-space: nowrap;

	> span {
		color: var(--accent-color);
		font: var(--font-en);
		font-size: 200%;
		vertical-align: -0.05em;
		margin-right: .05em;

		&.star {
			display: inline-block;
			background: url(../images/numbers/icon-star.svg) no-repeat left top .2em;
			background-size: .45em auto;
			padding-left: .6em;
		}
	}

	> small {
		font-size: 70%;
		vertical-align: 0.3em;

		&.ver {
			writing-mode: vertical-rl;
			vertical-align: -0.2em;
		}
	}
}
.data-item__img {
	position: absolute;
	width: min(22vw,300px);
	right: 0;
	top: 50%;
	translate: 0 -50%;

	&.pos-rt {
		top: 40%;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.data-item {
	&.is-col2 {
		/* display: flex;
		justify-content: space-between; */
		display: grid;
		justify-content: space-between;
		grid-template-columns: 49% 49%;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.data-list {
	row-gap: .5em;
}
.data-item {
	width: 100%;
	padding: 6% 6%;
	border-radius: 1em;
}
.data-item__ttl {
	font-size: 105%;
	letter-spacing: .08em;
}
.data-item__txt {
	font-size: 220%;

	> span {
		&.star {
			display: block;
		}
	}
}
.data-item__img {
	width: 40vw;

	&.pos-rt {
		top: 30%;
	}
}
}

/* data-list - data-item__nop
-----------------------------------------------*/
.data-item__nop {
	display: flex;
	column-gap: 4%;
	text-align: center;
	font-size: min(2vw,156%);

	> dl {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		background-color: #f8f4fc;
		padding: 4%;
		border-radius: 1.2em;

		> dt {
			font-weight: var(--fw-bold);
			letter-spacing: .12em;
			line-height: 1.2;
			border-bottom: 1px solid var(--accent-color);
			padding-bottom: .8em;
			margin-bottom: 1em;
		}
		> dd {
			font-size: 153%;
			> span {
				font-size: 333%;
			}
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.data-item__nop {
	font-size: 90%;
	margin-top: 4%;

	> dl {
		padding: 6% 4% 4%;
		border-radius: .8em;
		> dd {
			> span {
				font-size: 280%;
			}
		}
	}
}
}


/*---------------------------------------------------------
 Group
---------------------------------------------------------*/
.group {
	padding-bottom: 0;
}
.data-item--review {
	.data-item__img {
		right: 6%;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.data-item--review {
	.data-item__img {
		width: 30vw;
	}
}
}


/*---------------------------------------------------------
 Category
---------------------------------------------------------*/
.category {
	color: #FFF;
}
.category .c-bg-color {
	background-color: var(--color-brw-300);
}
.category .c-hdg--deco {
	--color-grd: transparent;
	background-color: #fff;
}

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

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

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


}



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

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

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


}