@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@100..900&display=swap');

.solution-container {
	/* Fonts */
	--noto-sans: "Noto Sans JP", sans-serif;
	--roboto: "Roboto", sans-serif;
	
	/* colors */
	--body: #333;
	--emerald: #16A1B4;
	--white: #fff;
	--light-gray: #E7EDF0;
	--light-emerald: #A3D2D2;
	--light-green: #F2F8FA;
	--dark-gray: #5B6C80;
	--gray: #72808F;
	--green: #028192;
	--orange: #E85622;
	--dark-orange: #DB2102;
	--border: #C9CCD0;
	--border-green: #E1F8F8;
	--yellow-green: #90BE20;
	--purple: #674DA0;

	--gray-grad: linear-gradient(180deg, #FFFFFF 0%, #E7EDF0 100%);
	--green-grad: linear-gradient(180deg, #FFFFFF 0%, #E1F8F8 100%);
	--orange-grad: linear-gradient(112.3deg, #E85622 0%, #DB2102 100%);
	--grad-green: linear-gradient(90deg, #16A1B4 0%, #028192 100%);
	--purple-grad: linear-gradient(90deg, #8E00D9 0%, #3A00BC 100%);

	--inner: 1140px;
	--inner-padding: 40px;
	--transition: .4s;

	font-family: var(--noto-sans);
	color: var(--body);
	line-height: 1.5;
}

.solution-container *,
.solution-container *::before,
.solution-container *::after {
	box-sizing: border-box;
}

.solution-container :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, picture, blockquote, dl, dt, dd, pre, code, button) {
	margin: 0;
	padding: 0;
}

.solution-container :where(h1, h2, h3, h4, h5, h6) {
	font-weight: 700;
    line-height: 1.5;
}

.solution-container ul,
.solution-container ol {
	list-style: none;
}

.solution-container img,
.solution-container picture {
	max-width: 100%;
	height: auto;
	display: block;
}

.solution-container a {
	color: var(--emerald);
}

.solution-container a:hover {
	text-decoration: none;
}

.solution-container em {
	font-style: normal;
}