/* CSS Document */
/*ページタイトル*/
.page_title .contents_title::after{
	content: "Purpose of use";
}
/*コンテンツ*/
.purpose_contents{
	box-sizing: border-box;
}
body[wc-view-code="sp"] .purpose_contents{
	padding: var(--headerHeight) 7vw;
}
body[wc-view-code="tb"] .purpose_contents{
	padding: var(--headerHeight) 5vw;
}
body[wc-view-code="pc"] .purpose_contents{
	padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.purpose_contents .contents_title{
	margin-bottom: 1.5rem;
}
.purpose_contents .contents_title::after{
	content: "Introduction";
}
.purpose_contents > article{
	display: flex;
	transition: opacity 600ms ease;
	opacity: 0;
}
.purpose_contents > article.wcvisible{
	opacity: 1;
}
.purpose_contents > article:first-of-type{
	margin-top: calc(var(--headerHeight) * -1);
  padding-top: var(--headerHeight);
}
.purpose_contents > article:not(:first-of-type){
	margin-top: calc(var(--headerHeight) * -1);
  padding-top: calc(var(--headerHeight) * 1.75);
}
body[wc-view-code="sp"] .purpose_contents > article{
	flex-direction: column;
}

body:not([wc-view-code="sp"]) .purpose_contents > article:nth-of-type(even){
	flex-direction: row-reverse;
}
.purpose_contents > article .p_text{
	box-sizing: border-box;
}
body[wc-view-code="sp"] .purpose_contents > article .p_text{
	padding-bottom: 1rem;
}
body[wc-view-type="tb"] .purpose_contents > article .p_text{
	padding-right: 1rem;
}
body[wc-view-type="tb"] .purpose_contents > article:nth-of-type(even) .p_text{
	padding-left: 1rem;
}
body[wc-view-type="tb-l"] .purpose_contents > article .p_text{
	padding-right: 1.5rem;
}
body[wc-view-type="tb-l"] .purpose_contents > article:nth-of-type(even) .p_text{
	padding-left: 1.5rem;
}
body[wc-view-code="pc"] .purpose_contents > article .p_text{
	padding-right: 2.5rem;
}
body[wc-view-code="pc"] .purpose_contents > article:nth-of-type(even) .p_text{
	padding-left: 2.5rem;
}
body:not([wc-view-code="sp"]) .purpose_contents > article .p_text{
	padding-top: 1rem;
}
.purpose_contents > article figure{
}
body:not([wc-view-code="sp"]) .purpose_contents > article .p_text,
body:not([wc-view-code="sp"]) .purpose_contents > article figure{
	width: 50%;
}
.purpose_contents > article .p_text > h2{
	display: flex;
	align-items: center;
	font-size: 1.5rem;
}
.purpose_contents > article .p_text > h2 .pt_num{
	font-size: 1.75rem;
  font-family: "Montserrat";
  color: var(--accentColor);
  flex: none;
  margin-right: 0.75rem;
	display: table;
}
.purpose_contents > article .p_text .p_in_text{
	padding-left: 2.5rem;
	padding-top: 0.5rem;
}
body[wc-view-code="sp"] .purpose_contents > article .p_text .p_in_text{
	padding-left: 0;
}
.purpose_contents > article .p_text .p_in_text p{
	line-height: 1.8rem;
}
.purpose_contents > article .p_text .p_in_text p:not(:first-of-type){
	margin-top: 0.75rem;
}
.purpose_contents > article figure img{
	aspect-ratio:1.414/1;
	border-radius: 1rem;
}
/*納入事例*/
.example{
	box-sizing: border-box;
	background-color: #eff1ee;
	margin-bottom: 2rem;
}

body[wc-view-code="sp"] .example{
	padding: var(--headerHeight) 0 var(--headerHeight) 7vw;
}
body[wc-view-code="tb"] .example{
	padding: var(--headerHeight) 5vw;
}
body[wc-view-code="pc"] .example{
	padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.example .contents_title{
	margin-bottom: 1.5rem;
}
.example .contents_title::after{
	content: "Delivery example";
}
.example .example_block{
	display: flex;
}
body[wc-view-code="sp"] .example .example_block{
	overflow-x: auto !important;
  -ms-overflow-style: none;
  box-sizing: border-box;
}
body:not([wc-view-code="sp"]) .example .example_block{
	flex-wrap: wrap;
	gap:1rem;
}
.example .example_block > article{
	display: flex;
	flex-direction: column;
	flex: none;
	width: 250px;
	background-color: #fff;
	border-radius: 1rem;
	transition: opacity 600ms ease;
	opacity: 0;
}
.example .example_block > article.wcvisible{
	opacity: 1;
}
body[wc-view-code="sp"] .example .example_block > article{
	margin-right: 1rem;
}
body[wc-view-type="tb"] .example .example_block > article{
	width: calc((100% / 2) - 0.5rem)
}
body[wc-view-type="tb-l"] .example .example_block > article,
body[wc-view-code="pc"] .example .example_block > article{
	width: calc((100% / 3) - 0.67rem)
}
.example .example_block > article figure{
}
.example .example_block > article figure img{
	aspect-ratio:1.414/1;
	border-radius: 1rem 1rem 0 0;
}
.example .example_block > article .ex_text{
	padding: 0.5rem;
	box-sizing: border-box;
}
.example .example_block > article .ex_text > h2{
	font-size: 1.25rem;
	padding-bottom: 0.25rem;
}
.example .example_block > article .ex_text .ex_in_text::before{
	content: "使用用途";
	color: var(--borderColor);
	border: solid 1px var(--borderColor);
	font-size: 0.8rem;
	padding: 0 0.25rem;
	border-radius: 1rem;
	display: table;
}