@charset "UTF-8";


/*---------------------------------------------------------
 trouble_list
---------------------------------------------------------*/
.trouble_list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.trouble_list > li {
	text-align: center;
	width: 14.2%;
}
.trouble_list p {
	font: var(--font-min);
	font-size: min(1.7vw,166%);
	line-height: 1.4;
	margin-top: .8em;
}
.trouble_list p span {
	color: var(--color-bgrn);
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.trouble_list > li {
	width: 30%;
}
.trouble_list > li:nth-of-type(n+4) {
	margin-top: 5%;
}
.trouble_list p {
	font-size: 88%;
}
}


/*---------------------------------------------------------
 affect_wrap
---------------------------------------------------------*/
.affect_wrap:nth-of-type(1) {--affect-accent-color: var(--color-bgrn);}
.affect_wrap:nth-of-type(2) {--affect-accent-color: var(--color-och);}
.affect_wrap:nth-of-type(3) {--affect-accent-color: #85c16c;}

.affect_wrap .com_h__min span,
.affect_wrap .com_h__en,
.affect_wrap dl dt {
	color: var(--affect-accent-color);
}

.affect_wrap .box_l {
	text-align: center;
}
.affect_wrap .box_l .img {
	width: 77%;
	max-width: max-content;
	margin: 0 auto 2%;
}
.affect_wrap .com_h__min {
	letter-spacing: .15em;
	white-space: nowrap;
	margin-bottom: .2em;
}
.affect_wrap .com_h__en {
	margin-bottom: 0;
}
.affect_wrap dl dt:not(:first-of-type) {
	margin-top: 5%;
}

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

.affect_inner {
	max-width: 1060px;
	display: grid;
	justify-content: space-between;
	align-items: center;
	grid-template-columns: 20% 74%;
	margin-inline: auto;
}
.affect_wrap .com_h__min {
	font-size: min(2.5vw,200%);
}
}

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

.affect_wrap .box_l {
	display: grid;
	justify-content: space-between;
	align-items: center;
	grid-template-columns: 33% 60%;
	text-align: left;
	margin-bottom: 5%;
}
.affect_wrap .box_l .img {
	width: 100%;
}
}


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

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

}

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

}