@charset "utf-8";

/* -------------------------------------------------
	#com-role
------------------------------------------------- */

#com-role .lead {
	margin-top: 1.3em;
	text-align: center;
	font-size: 20px;
	line-height: calc(36 / 20);
	font-weight: bold;
}
#com-role .note {
	margin-top: 1.5em;
	text-align: center;
	font-size: 15px;
	line-height: 1;
}
#com-role .fig-wrap {
	margin-top: 28px;
	background: #D1EBF7;
}
#com-role .fig-wrap .scroll-box {
	padding: 18px 0 89px;
}
#com-role .fig-wrap .scroll-box img {
	padding: 0 33px;
	display: block;
	box-sizing: border-box;
}

@media screen and (max-width:740px) {
	#com-role .lead {
		margin-top: 1.6em;
		text-align: left;
		font-size: 18px;
		line-height: calc(32 / 18);
	}
	#com-role .note {
		margin-top: 1.3em;
		text-align: left;
		line-height: 2;
	}
	#com-role .fig-wrap {
		margin-top: 33px;
		background: #D1EBF7;
	}

	#com-role .fig-wrap .box-side-border {
		padding-bottom: 40px;
	}
	#com-role .fig-wrap .scroll-box {
		padding: 20px 0 34px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	#com-role .fig-wrap .scroll-box img {
		max-width: none;
		width: auto;
		height: 389px;
		padding: 0 29px;
		box-sizing: content-box;
	}
}

/* -------------------------------------------------
	#work-role
------------------------------------------------- */

#work-role {
	margin-top: 100px;
	padding-bottom: 108px;
}
#work-role .work-item {
	text-align: center;
	position: relative;
}
#work-role .work-item:first-child {
	margin-top: 76px;
}
#work-role .work-item + .work-item {
	margin-top: 68px;
}

#work-role .work-item .headline {
	width: 325px;
	height: 149px;
	padding: 21px 22px 0;
	background: #6393AA;
	color: #fff;
	font-weight: bold;
	box-sizing: border-box;
}
#work-role .work-item .headline .small {
	display: block;
	font-size: 18px;
	line-height: 1;
	text-align: left;
}
#work-role .work-item .headline .large {
	margin-top: 0.6em;
	display: block;
	font-size: 24px;
	line-height: calc(35 / 24);
}
#work-role .work-item .headline .large.mt {
	margin-top: 1.1em;
}

#work-role .work-item .pic {
	max-width: 100%;
	margin-left: calc(85 / 1005 * 100%);
}
#work-role .work-item .pic img {
	width: 100%;
}
#work-role .work-item .copy {
	width: calc(835 / 1005 * 100%);
	margin: 37px auto 0;
	padding-bottom: 1em;
	font-size: 22px;
	font-weight: bold;
	color: #346DAF;
	line-height: 1;
	border-bottom: solid 8px #D1EBF7;
}
#work-role .work-item .points {
	width: calc(710 / 1005 * 100%);
	margin: 24px auto 0;
}
#work-role .work-item .points li {
	font-size: 18px;
	line-height: 2;
	text-align: left;
}

@media print, screen and (min-width:741px) {
	#work-role .work-item .headline {
		position: absolute;
		left: 0;
		top: 47px;
		z-index: 2;
	}
}

@media screen and (max-width:740px) {
	#work-role {
		margin-top: 79px;
		padding-bottom: 92px;
	}
	#work-role .work-item:first-child {
		margin-top: 43px;
	}
	#work-role .work-item + .work-item {
		margin-top: 56px;
	}

	#work-role .work-item .headline {
		width: 269px;
		height: 110px;
		margin: 0 auto;
		padding: 16px 0 0;
		position: relative;
		z-index: 2;
	}
	#work-role .work-item .headline .small {
		font-size: 16px;
		text-align: center;
	}
	#work-role .work-item .headline .large {
		margin-top: 0.4em;
		font-size: 20px;
		line-height: calc(30 / 20);
	}
	#work-role .work-item .headline .large.mt {
		margin-top: 1.0em;
	}

	#work-role .work-item .pic {
		margin: -62px 0 0;
	}
	#work-role .work-item .copy {
		width: 100%;
		margin: 25px auto 0;
		padding-bottom: 0.5em;
		font-size: 20px;
		line-height: 1.5;
		border-width: 5px;
	}
	#work-role .work-item .points {
		width: 100%;
		margin: 21px auto 0;
	}
	#work-role .work-item .points li {
		font-size: 16px;
		line-height: calc(26 / 16);
		text-indent: -1em;
		margin-left: 1em;
	}
	#work-role .work-item .points li + li {
		margin-top: 0.7em;
	}
}

/* -------------------------------------------------
	#product
------------------------------------------------- */

#product {
	margin-top: 100px;
}
#product .product-box {
	margin-top: 30px;
	padding: 44px 0 47px;
	border: solid 3px #87A8C4;
	border-radius: 19px;
}

#product .product-box .headline .large {
	font-size: 30px;
	font-weight: bold;
	line-height: 1;
}
#product .product-box .headline .small {
	font-size: 22px;
	font-family: 'Roboto';
	font-weight: 900;
	color: #49AD9B;
	line-height: 1;
}

#product .product-box .desc {
	margin-top: 21px;
}
#product .product-box .desc .normal {
	font-size: 16px;
	line-height: calc(26 / 16);
}
#product .product-box .desc .normal + .normal {
	margin-top: 0.6em;
}
#product .product-box .desc .note {
	margin-top: 0.6em;
	font-size: 14px;
	line-height: calc(26 / 14);
}

#product .product-box .products {
	margin-top: 28px;
	text-align: center;
}
#product .product-box .products + .products {
	margin-top: 75px;
}
#product .product-box .products .pc-right {
	display: flex;
	flex-wrap: wrap;
}
#product .product-box .products .item {
	box-sizing: border-box;
}
#product .product-box .products .item p {
	font-size: 15px;
	line-height: 1.2;
}
#product .product-box .products .pc-left .item p {
	margin-top: 0.5em;
	font-size: 16px;
}

@media print, screen and (min-width:741px) {
	#product .product-box .headline {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0 13px;
	}
	
	#product .product-box .desc {
		text-align: center;
	}
	#product .product-box .products {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#product .product-box .products .pc-left {
		width: calc(340 / 999 * 100%);
	}
	#product .product-box .products .pc-left .item img {
		width: calc(292 / 340 * 100%);
	}
	
	#product .product-box .products .pc-right {
		width: calc(576 / 999 * 100%);
		gap: 35px 0;
	}
	#product .product-box .products .pc-right .item {
		width: calc(192 / 576 * 100%);
		border-right: solid 1px #919191;
	}
	#product .product-box .products .pc-right .item:nth-child(3n) {
		border-right: none;
	}
	#product .product-box .products .pc-right .item img {
		width: calc(160 / 192 * 100%);
	}
}

@media screen and (max-width:740px) {
	#product {
		margin-top: 78px;
	}
	#product .product-box {
		margin-top: 34px;
		padding: 31px 0 50px;
		box-sizing: border-box;
	}
	#product .product-box + .product-box {
		margin-top: 28px;
	}

	#product .product-box .headline {
		text-align: center;
	}
	#product .product-box .headline .large {
		font-size: 24px;
		display: block;
	}
	#product .product-box .headline .small {
		margin-top: 0.5em;
		font-size: 20px;
		display: block;
	}

	#product .product-box .desc {
		margin: 21px 6% 0;
	}
	#product .product-box .desc .normal + .normal {
		margin-top: 1.1em;
	}
	#product .product-box .desc .note {
		margin-top: 1.2em;
	}

	#product .product-box .products + .products {
		margin-top: 50px;
	}
	#product .product-box .products .pc-left .item {
		width: 75%;
		margin: 0 auto;
	}
	#product .product-box .products .pc-right {
		margin-top: 7px;
		justify-content: center;
		gap: 14px 0;
	}
	#product .product-box .products .item {
		width: 47%;
	}
	#product .product-box .products .pc-left .item p {
		margin-top: 0.5em;
		font-size: 15px;
	}
}