@charset "UTF-8";



/* ========================================================
  
  Common

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

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


}


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

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

/*---------------------------------------------------------
 Compare
---------------------------------------------------------*/
.compare {
	display: grid;
	row-gap: 1em;
	margin: 2.6% auto;
}
.compare > div {
	position: relative;
	display: grid;
	row-gap: 1.2em;
	background-color: var(--color-bei);
	padding: 9% 6.4% 9%;
}
.compare__ttl {
	position: relative;
}
.compare__ttl::before {
	position: absolute;
	display: block;
	content: "";
	background: linear-gradient(to bottom, transparent, rgba(255,255,255,1));
	width: 100%;
	aspect-ratio: 340/80;
	clip-path: var(--clip-arrow);
	inset: -0.5em 0 auto 0;
}
.compare__ttl p {
	position: relative;
}
.compare .c-hdg--min {
	text-align: center;
	font-size: min(2.8vw,205%);
}
.compare__img {
	max-width: max-content;
	margin-inline: auto;
}
/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

.compare {
	justify-content: space-between;
    grid-template-columns: repeat(3, 32.5%);
}
.compare > div {
	grid-template-rows: subgrid;
	grid-row: span 4;
	row-gap: 1.6em;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.compare {
	margin: 6% auto;
}
.compare .c-hdg--min {
	font-size: 130%;
}
.compare__img {
	width: 90%;
}
}



/*---------------------------------------------------------
 circle-list
---------------------------------------------------------*/
.circle-list {
	display: flex;
	justify-content: center;
	column-gap: 2.5%;
	font-size: min(2vw,147%);
	margin-top: 3.5%;
}
.circle-list .c-txt--circle {
    width: min(8.8em);
	min-width: 8.8em;
	border: 1px solid var(--color-grn);
}
.circle-list .c-txt--circle::before {
	position: absolute;
	content: "";
	font-family: 'fontello';
	content: '\e808';
	font-weight: normal;
	font-size: 180%;
	line-height: 1.2;
	color: var(--color-primary);
	background-color: #fff;
	padding: 0 .2em;
	left: 13%;
	top: 13%;
	translate: -50% -50%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

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

.circle-list {
	flex-wrap: wrap;
	gap: 1em;
	font-size: 95%;
	margin-top: 5%;
}
}



/*---------------------------------------------------------
 Reason
---------------------------------------------------------*/
.reason .l-boxlist__bg {
	color: #FFF;
	padding: 10% 5%;
}
.reason .l-boxlist > li:nth-of-type(1) .l-boxlist__bg {
	background-image: url(../../images/firstly/about/reason-img01@2x.jpg);}
.reason .l-boxlist > li:nth-of-type(2) .l-boxlist__bg {
	background-image: url(../../images/firstly/about/reason-img02@2x.jpg);}
.reason .l-boxlist > li:nth-of-type(3) .l-boxlist__bg {
	background-image: url(../../images/firstly/about/reason-img03@2x.jpg);}
.reason .l-boxlist > li:nth-of-type(4) .l-boxlist__bg {
	background-image: url(../../images/firstly/about/reason-img04@2x.jpg);}



/*---------------------------------------------------------
 Important
---------------------------------------------------------*/
.imp__ttl {
	text-align: center;
	margin-bottom: 6%;
}
.imp__ttl .c-txt--fuki {
	font-size: min(2vw,147%);
	margin-bottom: .5em;
}
.imp__ttl .c-hdg--min span {
	color: var(--color-grn);
	font-size: 140%;
	line-height: 1.2;
}

.important .l-flt .c-hdg--min {
	font-size: min(2.9vw,205%);
	padding-bottom: .6em;
	margin-bottom: .8em;
	border-bottom: 1px solid var(--color-grn);
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.important .l-flt__img {
	width: 37%;
}
.important .l-flt .c-hdg--min {
	width: 58%;
	margin-left: auto;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.imp__ttl .c-txt--fuki {
	font-size: 110%;
}
.important .l-flt .c-hdg--min {
	text-align: center;
	font-size: 130%;
}
}



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

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

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


}