/* CSS Document */

.whole-ssberecommend {
	background-color: #fff;
}
body {
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
}
.whole-ssberecommend p {
	margin: 1em;
	font-size: 16px;
}
h2,h3 {
	border: none;
}
.wrapper-ssberecommend {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.center-ssberecommend {
	text-align: center;
	margin-bottom: 2em;
}

.columns-ssberecommend {
	display: flex;
	flex-wrap: wrap;
}
@media(min-width:800px) {
	.one-column-ssberecommend {
		flex-basis: 0;
		flex-grow: 1;
	}
}
@media(min-width:600px) and (max-width:799px) {
	.one-column-ssberecommend {
		width: calc(50% - 1em);
	}
}
@media(max-width:599px) {
	.one-column-ssberecommend {
		flex-basis: 100%;
	}
}
.one-column-ssberecommend p {
	margin-left: 1em;
	margin-right: 1em;
}
@media(min-width:800px) {
	.one-column-ssberecommend:not(:first-child) {
		margin-left: 2em;
	}
}
@media(min-width:600px) and (max-width:799px) {
	.one-column-ssberecommend:not(:first-child):not(:nth-child(3)) {
		margin-left: 2em;
	}
}
@media(max-width:599px) {
	.one-column-ssberecommend {
		margin-left: 0;
	}
}


/*タイル*/
@media(min-width:800px) {
	.one-column-many-ssberecommend {
		width: calc(20% - 1.6em);
	}
}
	
@media(min-width:600px) and (max-width:799px) {
	.one-column-many-ssberecommend {
		width: calc(25% - 1.5em);
	}
}

@media(min-width:500px) and (max-width:599px) {
	.one-column-many-ssberecommend {
		width: calc((100% - 4em)/3);
	}
}

@media(max-width:499px) {
	.one-column-many-ssberecommend {
		width: calc(50% - 1em);
	}
}

.one-column-many-ssberecommend p {
	margin-left: .5em;
	margin-right: .5em;
	font-weight: bold;
}
@media(min-width:800px) {
	.one-column-many-ssberecommend:not(:first-child):not(:nth-child(6)) {
		margin-left: 2em;
	}
}
@media(min-width:600px) and (max-width:799px) {
	.one-column-many-ssberecommend:not(:first-child):not(:nth-child(5)):not(:nth-child(9)) {
		margin-left: 2em;
	}
}
@media(min-width:500px) and (max-width:599px) {
	.one-column-many-ssberecommend:not(:first-child):not(:nth-child(4)):not(:nth-child(7)):not(:nth-child(10)) {
		margin-left: 2em;
	}
}
@media(max-width:499px) {
	.one-column-many-ssberecommend:not(:nth-child(odd)) {
		margin-left: 2em;
	}
}


/***タイルの下***/
.block-ssberecommend {
	margin: 0 1em;
}
/**h2の下線**/
h2 {
	position: relative;
	overflow-x: hidden;
}

h2::before {
	border-bottom: 4px solid #21A5C6;
	position: absolute;
	bottom: 0;
	content: "";
	width: 100%;
}
h2::after {
	border-bottom: 4px solid #DBE0E9;
	position: absolute;
	bottom: 0;
	content: "";
	width: 100%;
}
.block-ssberecommend .columns-ssberecommend {
	margin-bottom: 2em;
}

/**レスポンシブによって割合が変わる段落**/

@media(min-width:800px) {
	.one-resp-column-ssberecommend:first-child {
		width: 65%;
	}
	.one-resp-column-ssberecommend:last-child {
		width: calc(35% - 2em);
		margin-left: 2em;
	}
}
@media(min-width:600px) and (max-width:799px) {
	.one-resp-column-ssberecommend {
		width: 50%;
	}
}
@media(max-width:599px) {
	.one-resp-column-ssberecommend {
		width: 100%;
	}
}


.align-ssberecommend {
	align-items: center;
}

.pane-contents span {
	font-weight: bold;
}

/*ボタン*/
.button-ssberecommend {
	text-align: center;
	margin-bottom: 3em;
}
@media(min-width:600px) {
	.button-ssberecommend img {
		width: 50%;
	}
}
@media(max-width:599px) {
	.button-ssberecommend img {
		width: 100%;
	}
}
.button-ssberecommend p {
	margin-top: 0;
	font-size: small;
}


.block-ssberecommend:last-child .button-ssberecommend img {
	width: 100%;
}

h3 {
	padding-left: 0.5em;
    border-left: 5px solid #21A5C6;
	margin-top: 2em;
}

/*微調整*/
.big-ssberecommend {
	letter-spacing: 1.5px;
	font-size: 1.2em;
}

.center-ssberecommend:last-child {
	padding-bottom: 2em;
	margin-bottom: 0;
}

.columns-ssberecommend:nth-child(2) .one-column-ssberecommend p:first-child {
	font-weight: bold;
}

/***************************ページ管理のpg******************************/
.pane-contents{
	background-color: #fff;
}
.block-page-caption h1 {
	display: none;
}
.block-page-block--frame {
    margin-bottom: 0px;
}