@charset "utf-8";
:root {
	--green: #009fa8;
	--light-blue: #d3edf9;
	--orange: #ea5504;
	--dark-gray: #34383b;
	--gray: #D9D9D9;
	--light-gray: #f2f2f2;
}
@media screen and (min-width:391px) {
	.page {
		font-size: 1.15em;
		margin: 0 auto;
		padding: 0 0 2em 0;
		width: 940px;
	}
	.page img {
		margin: 2em auto 0;
		display: table;
	}
	.page a {
		text-decoration: none;
	}
	.page strong {
		color: #FF0000;
	}
	.page > div {
		padding: 55px 20px 0 20px;
	}
	.page > div:first-of-type {
		padding-top: 20px;
	}
	.page h2 {
		margin-bottom: 1em;
	}
	.page h2 > img {
		margin: 0 auto;
	}
	.page h2 + p {
		width: 690px;
		margin: 0 auto;
	}
	.page h3 {
		font-size: 1.5em;
		background-color: var(--light-blue);
		border-left: solid 8px var(--green);
		padding-left: 0.5em;
		margin: 2em 0 1em;
	}
	.page h3 + p {
		padding: 0 0 0 1em;
	}
	.page h3:first-of-type {
		margin: 1em 0 1em;
	}
	.page .about {
		display: flex;
	}
	.page .about > p {
		padding: 0 0 0 1em;
	}
	.page .about > img {
		margin: auto;
	}
	.page h4 {
		position: relative;
		padding: 0.5em 1.5em 0.4em;
		border-bottom: 3px solid var(--green);
		margin: 2em auto 1.5em;
		font-size: 1.4em;
		display: table;
	}
	.page h4::before,
	.page h4::after {
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: -15px;
		width: 30px;
		height: 15px;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		content: '';
	}
	.page h4::before {
		background-color: var(--green);
	}
	.page h4::after {
		bottom: -11px;
		background-color: #fff;
	}
	.page h4 + p {
		margin: 0 1em 0;
	}
	.page .merit {
		background-color: #FFF;
		padding: 1.5em 1em 1.5em 1.5em;
		border-right: solid 1px var(--gray);
		border-bottom: solid 1px var(--gray);
		-webkit-box-shadow: 2px 2px 5px 0px #b3b3b3;
		-moz-box-shadow: 2px 2px 5px 0px #b3b3b3;
		box-shadow: 2px 2px 5px 0px #b3b3b3;
		display: flex;
		margin: 1em 0 2em;
	}
	.page .merit > dl dt {
		font-size: 1.25em;
		font-weight: bold;
		margin: 0 0 0.25em;
	}
	.page .merit > dl dt::before {
		content: "";
		margin: 0 0.5em 0 0;
		width: 50px;
		height: 50px;
		background-repeat: no-repeat;
		background-size: contain;
		vertical-align: middle;
		text-align: center;
		display: inline-block;
	}
	.page .merit:nth-of-type(2) > dl dt::before {
		background-image: url("/parts/contents/integrated_desktop_details/num01.png")
	}
	.page .merit:nth-of-type(3) > dl dt::before {
		background-image: url("/parts/contents/integrated_desktop_details/num02.png")
	}
	.page .merit:nth-of-type(4) > dl dt::before {
		background-image: url("/parts/contents/integrated_desktop_details/num03.png")
	}
	.page .merit > dl dd {
		margin: 0.5em 0 0 0.25em;
	}
	.page .merit > img {
		margin: auto;
	}
	.page .demerit {
		background-color: var(--light-gray);
		padding: 1.5em;
	}
	.page .demerit > dl:nth-of-type(2) {
		margin: 1em 0 0;
	}
	.page .demerit > dl dt {
		font-weight: bold;
	}
	.page .demerit > dl dt::before {
		content: "";
		background-image: url("/parts/contents/integrated_desktop_details/triangle.png");
		margin: 0 0.5em 0 0;
		width: 10px;
		height: 10px;
		background-repeat: no-repeat;
		background-size: contain;
		vertical-align: inherit;
		text-align: center;
		display: inline-block;
	}
	.page .demerit > dl dd {
		margin: 0.5em 0 0 0.25em;
	}
	.page .contents {
		margin: 0 2em 4em;
	}
	.page .problem_box {
		display: flex;
		justify-content: space-around;
		margin: 4em 0 2em;
	}
	.page .contents .problem_box:first-of-type {
		margin: 1.5em 0 2em;
	}
	.page .problem_box > img {
		margin: 0 1.5em 0 0.5em;
	}
	.page .text > p {
		margin: 0.75em 0 0 0;
	}
	.page .text > p.problem {
		font-weight: bold;
		position: relative;
		margin: 3px 0 0;
		padding: 0.25em 1em;
		border-radius: 18px;
		background-color: #009fa8;
		color: #ffffff;
		display: table;
	}
	.page .text > p.problem::before {
		position: absolute;
		left: -8px;
		top: 0;
		bottom: 0;
		margin: auto 0;
		width: 15px;
		height: 20px;
		background-color: #009fa8;
		clip-path: polygon(0 50%, 100% 0, 100% 100%);
		content: '';
	}
	.page .solution_box {
		border: solid 1px var(--gray);
		padding: 0.5em 1em;
		position: relative;
		margin: 3em 0 2em;
	}
	.page .solution_box::before {
		content: "一体型パソコンなら";
		padding: 0.25em 1em 0 0.5em;
		background-color: var(--orange);
		color: #FFF;
		border-top-right-radius: 10px;
		position: absolute;
		left: 0;
		top: -30px;
		font-weight: bold;
	}
	.page a.btn--orange {
		background-color: var(--orange);
		color: #FFF;
		border-bottom: solid 5px #b23904;
		margin: 30px auto 40px;
		border-radius: 35px;
		display: table;
		padding: 0.75em 3em;
		font-weight: bold;
		font-size: 1.3em;
	}
	.page a.btn--orange:hover {
		margin-top: 33px;
		border-bottom: solid 2px #b23904;
		background-color: #f5af89;
	}
	.page a.btn::after {
		content: "";
		background-image: url("/parts/contents/integrated_desktop_details/arrow_icon.png");
		background-repeat: no-repeat;
		width: 21px;
		height: 24px;
		background-size: contain;
		display: inline-block;
		margin: 0 0 0 0.25em;
		vertical-align: middle;
	}
}
@media screen and (max-width:390px) { 
	.page {
		font-size: 0.85em;
		padding: 0 0 2em 0;
		counter-reset: number 0;
	}
	.page a {
		text-decoration: none;
	}
	.page p {
		margin: 0.25em 0;
	}
	.page strong {
		color: #FF0000;
	}
	.page img {
		margin: 2em 0;
		width: 100%;
		height: auto;
		display: table;
	}
	.page > div {
		width: 92%;
		margin: 2.5em auto 0 auto;
	}
	.page h2 > img {
		width: 100%;
		height: auto;
		margin: auto;
	}
	.page h2 + p {
		width: 92%;
		margin: 0.5em auto 0;
	}
	.page > div:first-of-type {
		margin-top: 1.5em;
	}
	.page h3 {
		background-color: var(--light-blue);
		font-size: 1.25em;
		border-left: solid 8px var(--green);
		padding: 0 0 0 0.5em;
		margin: 2.5em 0 1em 0;
	}
	.page h3:first-of-type {
		margin: 1em 0 1em;
	}
	.page .about > img {
		float: right;
		width: auto;
		margin: auto;
	}
	.page h4 {
		position: relative;
		padding: 0.5em 1.5em 0.4em;
		border-bottom: 3px solid var(--green);
		margin: 1em auto 1.5em;
		font-size: 1.4em;
		display: table;
	}
	.page h4::before,
	.page h4::after {
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: -15px;
		width: 30px;
		height: 15px;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		content: '';
	}
	.page h4::before {
		background-color: var(--green);
	}
	.page h4::after {
		bottom: -11px;
		background-color: #fff;
	}
	.page .merit {
		background-color: #FFF;
		padding: 1em;
		border-right: solid 1px var(--gray);
		border-bottom: solid 1px var(--gray);
		-webkit-box-shadow: 2px 2px 5px 0px #b3b3b3;
		-moz-box-shadow: 2px 2px 5px 0px #b3b3b3;
		box-shadow: 2px 2px 5px 0px #b3b3b3;
		margin: 1em 0 2em;  
	}
	.page .merit > dl dt{
		font-size: 1.15em;
		font-weight: bold;
		margin: 0 0 0.25em;
	}
	.page .merit > dl dt::before {
		content: "";
		background-repeat: no-repeat;
		margin-right: 0.5em;
		width: 35px;
		height: 35px;
		background-size: contain;
		vertical-align: middle;
		display: inline-block;
	}
	.page .merit:nth-of-type(2) > dl dt::before {
		background-image: url("/parts/contents/integrated_desktop_details/num01.png");
	}
	.page .merit:nth-of-type(3) > dl dt::before {
		background-image: url("/parts/contents/integrated_desktop_details/num02.png");
	}
	.page .merit:nth-of-type(4) > dl dt::before {
		background-image: url("/parts/contents/integrated_desktop_details/num03.png");
	}
	.page .merit > dl dd {
		margin: 1em 0 0 0;    
	}
	.page .merit > img {
		width: auto;
		margin: auto;
	}
	.page .demerit {
		background-color: var(--light-gray);
		padding: 1.5em 1em 1em;
	}
	.page .demerit > dl {
		margin: 0 0 1em;
	}
	.page .demerit > dl dt {
		font-weight: bold;
	}
	.page .demerit > dl dd {
		margin: 0.25em 0 0 1em;  
	}
	.page .demerit > dl dt::before {
		content: "";
		background-image: url("/parts/contents/integrated_desktop_details/triangle.png");
		background-repeat: no-repeat;
		margin-right: 0.25em;
		background-size: contain;
		vertical-align: middle;
		display: inline-block;
		width: 10px;
		height: 10px;
	}
	.page .problem_box {
		margin: 2em 0;
	}
	.page .contents .problem_box:first-of-type {
		margin: 1em 0 2em;
	}
	.page .problem_box > img {
		width: auto;
		margin: auto;
	}
	.page .text > p.problem {
		font-weight: bold;
		position: relative;
		margin: 1.5em auto 1em;
		padding: 0.25em 1em;
		border-radius: 5px;
		background-color: #009fa8;
		color: #ffffff;
		display: table;
	}
	.page .text > p.problem::before {
		position: absolute;
		top: -13px;
		width: 20px;
		height: 15px;
		left: 0;
		right: 0;
		margin: 0 auto;
		background-color: var(--green);
		clip-path: polygon(50% 0, 0 100%, 100% 100%);
		content: '';
	}
	.page .solution_box {
		border: solid 1px var(--gray);
		padding: 0.25em 1em;
		position: relative;
		margin: 3em 0;
	}
	.page .solution_box::before {
		content: "一体型パソコンなら";
		padding: 0.25em 1em 0 0.5em;
		background-color: var(--orange);
		color: #FFF;
		border-top-right-radius: 10px;
		position: absolute;
		left: 0;
		top: -1.9em;
		font-weight: bold;
	}
	.page a.btn--orange {
		background-color: var(--orange);
		color: #FFF;
		border-bottom: solid 5px #b23904;
		margin: 30px auto 40px;
		border-radius: 15px;
		display: table;
		padding: 0.75em 3em;
		font-weight: bold;
	}
	.page a.btn::after {
		content: "";
		background-image: url("/parts/contents/integrated_desktop_details/arrow_icon.png");
		background-repeat: no-repeat;
		width: 21px;
		height: 24px;
		background-size: contain;
		display: inline-block;
		margin: 0 0 0 0.25em;
		vertical-align: middle;
	}
}