/* ====================タイトル ==================== */

.title {
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	background: no-repeat center center;
	background-size: cover;
}
.title h1 {
	margin: 0;
	font-size: inherit;
}
.title h1 small {
	display: block;
	margin-top: 0.25em;
	font-size: inherit;
}
.title figure img {
	display: block;
}

@media all and (max-width: 640px) {
	.title {
		padding: 1em 1em 0;
		height: 35em;
		background-image: url(/images/pickup/1810_salome/title_back_sp.jpg);
	}
	.title h1 {
		width: 18.2em;
	}
	.title figure {
		margin: 0.5em 0 0;
	}
	.title figure img {
		margin-left: auto;
	}
	.title figure img[src*="image"] {
		width: 12.2em;
	}
	.title figure img[src*="notes"] {
		width: 16em;
		margin-top: 2.25em;
	}
}

@media all and (min-width: 641px) {
	.title {
		height: 33.8em;
		padding: 4em calc((100% - 49em) / 2) 0;
		background-image: url(/images/pickup/1810_salome/title_back_pc.jpg);
	}
	.title h1 {
		width: 26.6em;
	}
	.title h1 small {
		width: 22.7em;
		margin-left: auto;
	}
	.title figure {
		width: 15.8em;
		margin: 0;
		padding: 0 3em;
		margin-left: auto;
		margin-top: -8.5em;
	}
	.title figure img[src*="notes"] {
		display: block;
		margin-top: 2em;
		transform-origin: 50% 0;
		transform: scale(1.25);
	}
}

/* //////////////////////////////////////// コンテンツ //////////////////////////////////////// */

section > h2 {
	box-sizing: border-box;
	margin: 0 auto;
	padding: 1em 0;
	padding-left: 4em;
	background: #0a3c8c no-repeat left center;
	background-size: auto 100%;
	color: white;
	line-height: 1;
	text-align: left;
}

.s1 > h2 {
	background-image: url(/images/pickup/1810_salome/headline_icon1.png);
}
.s2 > h2 {
	background-image: url(/images/pickup/1810_salome/headline_icon2.png);
}
.s3 > h2 {
	background-image: url(/images/pickup/1810_salome/headline_icon3.png);
}
.s4 > h2 {
	background-image: url(/images/pickup/1810_salome/headline_icon3.png);
}

@media all and (max-width: 640px) {
	section > h2 {
		font-size: 1em;
	}
}

@media all and (min-width: 641px) {
	section > h2 {
		font-size: 1.05em;
		font-weight: normal;
		font-family: 'Hiragino Kaku Gothic Pro W6', 'Meiryo', sans-serif;
	}
}

/* ==================== block1 ==================== */

.block1 {
	background: #dee7f4;
}

.block1 p {
	text-align: left;
}

@media all and (max-width: 640px) {
	.block1 {
		padding-bottom: 1em;
	}
	.block1 section:nth-of-type(n+2) {
		margin-top: 1.5em;
	}
	.block1 p,
	.block1 figure {
		margin: 1em;
	}
}

@media all and (min-width: 641px) {
	.block1 {
		overflow: hidden;
		padding: 3em 0;
	}
	.block1 .body {
		display: inline-table;
		table-layout: fixed;
		width: 52em;
		margin: 0 -1.5em;
		border-spacing: 1.5em 0;
	}
	.block1 .body section {
		display: table-cell;
		vertical-align: top;
	}
	.block1 p {
		margin: 2em;
		font-size: 0.7em;
	}
	.block1 figure {
		margin: 1.5em 0 0;
	}
	.s2 figure {
		-webkit-transform: translateY(1em);
		transform: translateY(1em);
	}
}

/* ==================== 製品の特長 ==================== */

.feature2 {
	background: #dee7f4;
}

.feature h3 {
	position: relative;
	text-align: left;
	margin: 0;
	padding-left: 3.5em;
	padding-bottom: 0.5em;
}
.feature h3::before {
	content: '';
	display: block;
	position: absolute;
	left: 1.25em;
	bottom: 0;
	width: 2.5em;
	height: 100%;
	background: no-repeat left top;
	background-size: auto 85%;
}
.feature1 h3::before {
	background-image: url(/images/pickup/1810_salome/feature_cap1.png);
}
.feature2 h3::before {
	background-image: url(/images/pickup/1810_salome/feature_cap2.png);
}
.feature3 h3::before {
	background-image: url(/images/pickup/1810_salome/feature_cap3.png);
}

.feature h3::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	width: 100%;
	height: 0.5em;
	border: solid #1c91eb;
	border-width: 0 0 2px 2px;
	transform-origin: 0 100%;
	transform: skewX(-45deg);
}

.feature > p em {
	color: #0a3c8c;
	font-style: normal;
	font-weight: bold;
}
.feature > p strong {
	display: inline-block;
	background: linear-gradient(0deg, rgba(237,187,47,0.6), rgba(237,187,47,0.6)) no-repeat left bottom;
	background-size: 100% 0.5em;
	font-weight: normal;
}

@media all and (max-width: 640px) {
	.feature {
		padding: 1.5em 1em;
	}
	.feature h3 {
		padding-top: 0.5em;
		font-size: 1em;
		line-height: 1.3;
	}
	.feature p {
		font-size: 0.9em;
		text-align: left;
	}
}

@media all and (min-width: 641px) {
	.s3 {
		padding-top: 3em;
	}
	.s3 > h2 {
		width: 49rem;
	}

	.feature {
		padding: 3em calc((100% - 48em) / 2);
	}
	.feature h3 {
		padding-top: 1.25em;
		font-size: 1.15em;
		line-height: 1;
	}
	.feature h3 br {
		display: none;
	}
	.feature p {
		font-size: 0.7em;
	}
	.feature > p {
		margin: 2rem 0;
	}
}

/* -------------------- 特長1 -------------------- */

.feature1 .q h4 {
	background: #1c91eb;
	color: white;
	line-height: 1;
	border-top-left-radius: 1.5rem;
	margin: 0;
	padding: 1em 0;
}
.feature1 .q .body {
	border: 1px solid #1c91eb;
	border-bottom-right-radius: 1.5rem;
}
.feature1 .q h5 {
	border-bottom: 1px solid #1c91eb;
	margin: 0;
	padding-left: 3.5em;
	background-repeat: no-repeat;
	color: #1c91eb;
	text-align: left;
	line-height: 1;
}

.feature1 .q h5:nth-of-type(1) {
	background-image: url(/images/pickup/1810_salome/feature1_q1.png);
}
.feature1 .q h5:nth-of-type(2) {
	background-image: url(/images/pickup/1810_salome/feature1_q2.png);
}
.feature1 .q h5:nth-of-type(3) {
	background-image: url(/images/pickup/1810_salome/feature1_q3.png);
}
.feature1 .q h5:nth-of-type(4) {
	background-image: url(/images/pickup/1810_salome/feature1_q4.png);
}

.feature1 .q ul {
	margin: 0.5em auto 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
}
.feature1 .q li {
	display: inline-block;
}
.feature1 .q li::before {
	content: '□';
	display: inline-block;
	margin-right: 0.3em;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

.feature1 .q .notes {
	margin: 1em 0 0;
	color: #9db1d1;
	text-align: right;
}

@media all and (max-width: 640px) {
	.feature1 > p strong {
		font-size: 110%;
	}
	.feature1 figure {
		margin: 2em 0;
	}
	.feature1 figure img {
		display: block;
	}
	.feature1 figure img[src*="figure1"] {
		width: calc(100% - 1em);
		margin-left: auto;
	}
	.feature1 figure img[src*="figure2"] {
		width: calc(100% - 2em);
		margin: 1em auto 0;
	}
	.feature .q .body {
		padding: 1em;
	}
	.feature .q h5 {
		padding-top: 0.25em;
		padding-bottom: 0.25em;
		background-position: left center;
		background-size: auto 1.5em;
		font-size: 1em;
		line-height: 1.3;
	}
	.feature1 .q h5:nth-of-type(n+2) {
		margin-top: 1.5em;
	}
	.feature .q .body p {
		margin: 0 0 1em;
	}
	.feature .q li {
		width: 50%;
		font-size: 0.8em;
	}
	.features .q .notes {
		font-size: 0.65em;
	}
}

@media all and (min-width: 641px) {
	.feature1 > p strong {
		font-size: 150%;
	}
	.feature1 figure {
		margin: 3em 0;
	}
	.feature1 figure img {
		vertical-align: top;
	}
	.feature1 figure img[src*="figure1"] {
		width: 51.5%;
		margin-right: 3%;
	}
	.feature1 figure img[src*="figure2"] {
		width: 45.5%;
	}

	.feature1 .q h4 {
		font-size: 1.1em;
	}
	.feature1 .body {
		padding: 0 2em 2em;
	}
	.feature1 .body p {
		margin: 1.5em 0;
		font-size: 0.9em;
	}
	.feature1 .q h5 {
		padding-top: 0.25em;
		padding-bottom: 0.5em;
		background-position: left top;
		background-size: auto 80%;
		font-size: 1em;
	}
	.feature1 .q h5:nth-of-type(n+2) {
		margin-top: 2em;
	}
	.feature1 .q h5 br {
		display: none;
	}
	.feature1 .q ul {
		margin-left: 3.75em;
	}
	.feature1 .q li {
		font-size: 0.75em;
	}
	.feature1 .q li:nth-of-type(n+2) {
		margin-left: 2.5em;
	}
	.feature1 .q ul:nth-of-type(3) li:nth-of-type(n+2) {
		margin-left: 0.75em;
	}
	.feature1 .q ul:nth-of-type(4) li:nth-of-type(n+2) {
		margin-left: 1.5em;
	}

	.feature1 .q .notes {
		font-size: 0.5em;
	}
}

/* -------------------- 特長2 -------------------- */

.feature2 .body2 {
}
.feature2 .body2 > div {
	background: white;
	border: 1px solid #9db1d1;
	padding: 1px 1em 1em;
}
.feature2 .body2 h5 {
	margin: 1.5em 0;
	font-size: inherit;
}
.feature2 .body2 h5 img {
	height: 7em;
}
.feature2 .body2 p {
	margin: 0;
}

@media all and (max-width: 640px) {
	.feature2 figure {
		margin: 1.5em 0;
	}
	.feature2 img[src*="figure2"] {
		display: inline-block;
		margin-top: 1em;
		width: 20em;
	}
	.feature2 h4 {
		margin-bottom: 0;
	}
	.feature2 .body2 > div:nth-of-type(n+2) {
		margin-top: 1em;
	}
}

@media all and (min-width: 641px) {
	.feature2 figure {
		margin: 3em 0;
	}
	.feature2 figure img {
		vertical-align: bottom;
	}
	.feature2 figure img[src*="figure1"] {
		width: 50%;
		margin-right: 4%;
	}
	.feature2 figure img[src*="figure2"] {
		width: 46%;
	}

	.feature2 .body2 {
		display: table;
		border-spacing: 1em 0;
		table-layout: fixed;
		width: calc(100% + 2em);
		margin: 0 -1em;
	}
	.feature2 .body2 > div {
		display: table-cell;
	}
	.feature2 .body2 p {
		text-align: left;
	}
}

/* -------------------- 特長3 -------------------- */

.feature3 figure {
	margin: 0;
}

@media all and (max-width: 640px) {
	.feature3 .body p {
		padding-left: 8em;
		background: url(/images/pickup/1810_salome/feature3_image1.png) no-repeat left center;
		background-size: 7em auto;
	}
}

@media all and (min-width: 641px) {
	.feature3 .body {
		display: table;
		width: 100%;
	}
	.feature3 .body p,
	.feature3 .body figure,
	.feature3 .body::before {
		display: table-cell;
		vertical-align: middle;
	}
	.feature3 .body::before {
		content: '';
		width: 10em;
		height: 9em;
		background: url(/images/pickup/1810_salome/feature3_image1.png) no-repeat center center;
		background-size: contain;
	}
	.feature3 .body p {
		margin: 0;
		padding: 0 2em;
		text-align: left;
	}
	.feature3 .body figure img {
		width: 24em;
	}

}

/* ==================== このような方にサロメグルコはおすすめです。 ==================== */

.s4 {
	background: no-repeat center center;
	background-size: cover;
}

.s4 .body ul {
	margin: 1em auto 0;
	padding: 0;
	list-style-type: none;
	line-height: 0;
}
.s4 .body li {
	display: inline-block;
	box-sizing: border-box;
	width: 33.333%;
}

@media all and (max-width: 640px) {
	.s4 {
		margin-top: 1em;
		background-image: url(/images/pickup/1810_salome/s4_back_sp.jpg);
	}
	.s4 .body {
		padding: 1.5em 1em;
	}
	.s4 img[src*="body1"] {
		width: 15em;
	}
	.s4 .body li {
		padding: 1%;
	}
}

@media all and (min-width: 641px) {
	.s4 {
		margin-top: 2em;
		padding: 2em calc((100% - 49em) / 2);
		background-image: url(/images/pickup/1810_salome/s4_back_pc.jpg);
	}
	.s4 .body {
		width: 32.5em;
		margin-top: 1.5em;
		margin-left: auto;
	}
	.s4 img[src*="body1"] {
		width: 19.7em;
	}
	.s4 .body li {
		padding: 0.5em;
	}
}

/*==================== 消費者庁 ====================*/

.notification {
	margin: 1rem auto;
	color: #666;
}

@media all and (max-width: 640px) {
	.notification {
		font-size: 0.7rem;
	}
}

@media all and (min-width: 641px) {
	.notification {
		font-size: 0.7rem;
	}
}

/*==================== 注釈 ====================*/
@media all and (min-width: 641px) {
	p.annotation{
		width: 395px;
		display: inline-flex;
		margin: 33px 0 0 0;
	}
}
	@media all and (max-width: 640px) {
		p.annotation{
			width: 100%;
			display: inline-flex;
			margin: 0 0 0 0;
			color: #ffffff;
			font-weight: bold;
		}
	}