@charset "utf-8";

body{background:#fff; overflow-x:hidden}
#contents div.subTitle .title{color: var(--color-primary); font-weight: 500; line-height: 137%}
html.ja #contents div.subTitle h2{word-break:break-all}
#contents div.subTitle h2 span{font-weight: 400; display: block}
#contents div.subTitle p.text{font-weight: 400; white-space: pre-line; line-height: 148%}
@media screen and (max-width:1280px){
	#contents div.subTitle .title{font-size: 1rem}
	#contents div.subTitle h2{font-size: 2rem; margin: 1em 0 0 0}
	#contents div.subTitle p.text{font-size: 1rem; margin-top: 1rem}
}
@media screen and (min-width:1281px){
	#contents div.subTitle .title{font-size: 1.25rem}
	#contents div.subTitle h2{font-size: 3rem; margin: 1.29em 0 0 0}
	#contents div.subTitle p.text{font-size: 1.25rem; margin-top: 1.25rem}
}
@media screen and (min-width:1640px){
	.inner{width: 1600px}
}
section.sect.overview div.subTitle .title{text-align: center}
section.sect.overview div.subTitle h2{text-align: center; word-break:keep-all}
html.zh section.sect.overview div.subTitle h2{word-break:break-all}
html.ja section.sect.overview div.subTitle h2{word-break:break-all}
@media screen and (max-width:1280px){
	section.sect.overview{margin: 4em 0.8em}
}
@media screen and (min-width:1281px){
	section.sect.overview{margin: 10em 1.25em 6em}
	section.sect.overview:after{content: ''; display: block; margin: 0 auto; width: 1px; height: 90px; margin-top: 60px; background-color: #222}
}

@media screen and (min-width:1281px){
	section.sect.price-table .price-table-inner{padding-top:0; padding-bottom:0}
}

section.sect.sect1{background: url(/image/businessCard/sect1_img.jpg) no-repeat 50% 0 rgb(2 0 19 / 67%); background-blend-mode: multiply; background-attachment: fixed}
#contents section.sect.sect1 div.subTitle h2{margin-top:0}
html.ja #contents section.sect.sect1 div.subTitle h2{word-break:break-all}
html.zh #contents section.sect.sect1 div.subTitle h2{word-break:break-all}
section.sect.sect1 div.subTitle{text-align: center; color: #fff}
@media screen and (max-width:1280px){
	section.sect.sect1{padding: 3.33rem 3vw}
	#contents section.sect.sect1 div.subTitle{margin-bottom:0}
	#contents section.sect.sect1 div.subTitle h2{font-size: 1.33rem; word-break: keep-all}
	#contents section.sect.sect1 div.subTitle h2 span{display:inline}
}
@media screen and (min-width:1281px){
	section.sect.sect1{padding: 12.5rem 1.25rem; margin-bottom: 7.5rem}
}


section.sect.sect2 div.subTitle{text-align: center}
.paper-list{display: flex; flex-wrap: wrap}
.paper-item-img{display: flex; width: 100%; aspect-ratio: 1 / 1; border: 1px solid rgb(0 0 0 / 20%); overflow:hidden}
.paper-item-img img{display:block; transition: .5s}
.paper-item-img:hover img{scale: 3}
.paper-item-weight{display: block; color: var(--color-tertiary)}
.paper-item-desc{line-height: 164%; word-break:keep-all}
html.ja .paper-item-desc{word-break:break-all}
html.zh .paper-item-desc{word-break:break-all}

@media screen and (max-width:428px){
	.paper-item{width: 100%}
}
@media screen and (min-width:429px) and (max-width:767px){
	.paper-item{width: calc((100% - 20px) / 2)}
}
@media screen and (min-width:768px) and (max-width:1280px){
	.paper-item{width: calc((100% - (20px * 3)) / 4)}
}
@media screen and (max-width:1280px){
	section.sect.sect2{padding:0 3vw}
	.card-paper{margin-top: 2rem}
	.paper-list{gap: 20px}
	.paper-item-text{margin-top: 20px}
	.paper-item-title{margin-bottom: 3px; font-size: 18px}
	.paper-item-weight{font-size: 14px; height: 38px}
	.paper-item-desc{margin-top: 10px}
}
@media screen and (min-width:1281px){
	section.sect.sect2{margin-bottom: 7.5rem; padding:0 20px}
	.card-paper{margin-top: 3rem}
	.paper-list{gap: 3.74rem}
	.paper-item{width: calc((100% - (3.74rem * 3)) / 4)}
	.paper-item-text{margin-top: 1.87rem}
	.paper-item-title{margin-bottom: 5px; font-size: 1.37rem}
	.paper-item-weight{font-size: 15px}
	.paper-item-desc{margin-top: 15px}
}