@charset "utf-8";

/* ----------------------------------
 SAMPLE
---------------------------------- */
/* レイアウト */
#sample_profilelibrary { max-width: 1600px; padding: 0 40px 40px; margin: 0 auto; box-sizing: border-box;}
#sample_profilelibrary * { box-sizing: border-box;}
#sample_profilelibrary .proflib-frame { width: 100%; padding: 50px 10%; border: #707070 1px solid; border-radius: 40px; background: #FFF; position: relative; box-sizing: border-box;}

@media screen and (max-width: 1300px) {
	#sample_profilelibrary { padding: 0 20px 100px;}
}
@media screen and (max-width: 1100px) {
	#sample_profilelibrary { padding: 0 15px 60px;}
	#sample_profilelibrary .proflib-frame { padding: 30px 20px; border-radius: 20px;}
}

#sample_profilelibrary .text { font-size: 16px; font-weight: 400; line-height: 1.4; color: #333;}
#sample_profilelibrary .proflib-top { margin: 0 0 30px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px;}
#sample_profilelibrary .proflib-top .title { width: calc(100% - 320px); padding: 0; margin: 0; border: none; font-size: 32px; font-weight: 700; line-height: 1.4; color: #333;}
#sample_profilelibrary .proflib-top .logo { width: 280px;}
#sample_profilelibrary .proflib-top .logo img { width: 100%; vertical-align: top;}
#sample_profilelibrary .proflib-top .top-text { width: 100%; font-size: 20px; font-weight: 400; line-height: 1.4; color: #333;}
#sample_profilelibrary .proflib-bottom-box + .proflib-bottom-box { margin-top: 50px;}
#sample_profilelibrary .proflib-step-list { margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 32px;}
#sample_profilelibrary .proflib-step-list .step-item { width: calc((100% - 32px * 2)/3);}
#sample_profilelibrary .proflib-step-list .ttl { 
	min-height: 50px;
	padding: 2px 10px;
	margin: 0 0 15px;
	border: none;
	font-size: 20px;
	font-weight: 700;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #44526D;
}
#sample_profilelibrary .proflib-step-list .text { margin: 0 0 15px; font-size: 18px; font-weight: 700; text-align: center;}
#sample_profilelibrary .proflib-step-list .image { text-align: center;}
#sample_profilelibrary .proflib-step-list .image img { width: 100%; vertical-align: top;}
#sample_profilelibrary .proflib-bottom { display: none;}
#sample_profilelibrary .proflib-bottom .title { padding: 0; margin: 0 0 15px; border: none; font-size: 18px; font-weight: 700;}
#sample_profilelibrary .proflib-type-list { display: flex; align-items: flex-start; gap: 40px;}
#sample_profilelibrary .proflib-type-list .type-item { width: 25%;}
#sample_profilelibrary .proflib-type-list .type-item .ttl { margin: 0 0 5px; font-size: 16px; font-weight: 700;}
#sample_profilelibrary .proflib-type-list .type-item .image { margin: 0 0 15px;}
#sample_profilelibrary .proflib-type-list .type-item .image img { height: 160px; vertical-align: top;}
#sample_profilelibrary .proflib-type-list .type-item .text { font-size: 16px;}
#sample_profilelibrary .linkset-frame { padding: 25px 30px; background: #F2F2F2;}
#sample_profilelibrary .linkset-frame .text { font-size: 18px;}
#sample_profilelibrary .app-list { margin: 24px 0 0; display: flex; gap: 26px;}
#sample_profilelibrary .app-list li img { height: 50px; vertical-align: top;}
#sample_profilelibrary .notice-list { margin: 40px 0 0;}
#sample_profilelibrary .notice-list li { font-size: 18px; font-weight: 400; text-align: center; color: #707070;}
#sample_profilelibrary .notice-list li.indent { padding: 0 0 0 1em; text-indent: -1em;}
#sample_profilelibrary .read-more-wrap { margin: 40px 0 0; display: flex; justify-content: center; align-items: center;}
#sample_profilelibrary .read-more {
	width: 280px;
	height: 52px;
	border-radius: 52px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #2A76B9;
	cursor: pointer;
	position: relative;
}
#sample_profilelibrary .read-more::before { content: 'READ MORE'; font-size: 18px; font-weight: 500; color: #FFF;}
#sample_profilelibrary .read-more.is-open::before { content: 'CLOSE';}
#sample_profilelibrary .read-more span {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #FFF;
	position: absolute;
	right: 5px;
	top: 6px;
}
#sample_profilelibrary .read-more span::before,
#sample_profilelibrary .read-more span::after {
	content: '';
	width: 16px;
	border-top: #2A76B9 2px solid;
	display: block;
	position: absolute;
	left: calc(50% - 8px);
	top: calc(50% - 1px);
	transition: 0.3s;
}
#sample_profilelibrary .read-more span::after { transform: rotate(90deg);}
#sample_profilelibrary .read-more.is-open span::after { transform: rotate(0deg);}

@media screen and (max-width: 1100px) {
	#sample_profilelibrary .text { font-size: 14px;}
	#sample_profilelibrary .proflib-top { margin: 0 0 20px; display: flex; flex-direction: column; gap: 15px;}
	#sample_profilelibrary .proflib-top .title { width: 100%; font-size: 22px;}
	#sample_profilelibrary .proflib-top .logo { width: 160px;}
	#sample_profilelibrary .proflib-top .top-text { width: 100%; font-size: 16px; line-height: 1.6;}
	#sample_profilelibrary .proflib-bottom-box + .proflib-bottom-box { margin-top: 30px;}
	#sample_profilelibrary .proflib-step-list { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 30px;}
	#sample_profilelibrary .proflib-step-list .step-item { width: 100%;}
	#sample_profilelibrary .proflib-step-list .ttl { 
		min-height: 50px;
		padding: 2px 10px;
		margin: 0 0 15px;
		border: none;
		font-size: 20px;
		font-weight: 700;
		color: #FFF;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #44526D;
	}
	#sample_profilelibrary .proflib-step-list .text { margin: 0 0 15px; font-size: 16px; font-weight: 700; text-align: center;}
	#sample_profilelibrary .proflib-step-list .image { text-align: center;}
	#sample_profilelibrary .proflib-step-list .image img { width: 100%; vertical-align: top;}
	#sample_profilelibrary .proflib-bottom { display: none;}
	#sample_profilelibrary .proflib-bottom .title { padding: 0; margin: 0 0 15px; border: none; font-size: 16px;}
	#sample_profilelibrary .proflib-type-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px;}
	#sample_profilelibrary .proflib-type-list .type-item { width: 100%;}
	#sample_profilelibrary .proflib-type-list .type-item .ttl { margin: 0 0 5px; font-size: 14px; font-weight: 700;}
	#sample_profilelibrary .proflib-type-list .type-item .image { margin: 0 0 10px;}
	#sample_profilelibrary .proflib-type-list .type-item .image img { height: 160px; vertical-align: top;}
	#sample_profilelibrary .proflib-type-list .type-item .text { font-size: 14px;}
	#sample_profilelibrary .linkset-frame { padding: 20px 15px; background: #F2F2F2;}
	#sample_profilelibrary .linkset-frame .text { font-size: 16px;}
	#sample_profilelibrary .app-list { margin: 20px 0 0; justify-content: center; gap: 10px;}
	#sample_profilelibrary .app-list li img { height: 40px; vertical-align: top;}
	#sample_profilelibrary .notice-list li { font-size: 14px; text-align: left;}
	#sample_profilelibrary .notice-list li + li { margin-top: 5px;}
	#sample_profilelibrary .read-more-wrap { margin: 20px 0 0;}
}

/* サンプル一覧
---------------------------------- */
#page-item-detail .product-sample { max-width: 1280px; padding: 0 40px 140px; margin: 0 auto; box-sizing: border-box;}
[data-browse-mode="S"] #page-item-detail .product-sample .section .col2Table .img-block:hover .product-hover-content { display: none;}

@media screen and (max-width: 1100px) {
	#page-item-detail .product-sample { padding: 0 15px 80px; gap: 15px 10px;}
	#page-item-detail .product-sample .section { flex-basis: calc(50% - 5px); height: auto; aspect-ratio: 4797 / 3888; margin: 0 !important;}
	#page-item-detail .product-sample .section .col2Table .img-block:hover .product-hover-content { display: none;}
}