/* base styles */
.s-border {
	border-width: 3px;
	border-style: solid;
}
.s-radius:not(.p-image-container),
.s-radius.p-image-container .image {
	overflow: hidden;
	border-radius: var(--size-sm);
}
.s-btn-radius {
	border-radius: var(--size-lg);
}
.s-shadow:not(.p-image-container),
.s-shadow.p-image-container .image {
	box-shadow: 3px 3px 6px 6px #d8d8d8;
}
.s-btn-shadow {
	box-shadow: 0px 0px 5px 0px rgb(255 255 255 / 70%);
}
.s-align-left { text-align: left; }
.s-align-center { text-align: center; }
.s-align-right { text-align: right; }
.s-bg {

}
.s-container-fix {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width: 1400px) {
	.s-container-fix {
		max-width: 90vw;
	}
}
.s-container-fluid {

}

.p-image-def{ display: inherit; }
.p-image-wh{ display: none; }

.s-grid {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}
/* 3 cols */
.s-grid[col="3"] .s-col {
	width: calc((100% - var(--size-md) - var(--size-md)) / 3);
	margin-left: calc(var(--size-md) / 2);
	margin-right: calc(var(--size-md) / 2);
	margin-bottom: var(--size-sm);
}
.s-grid[col="3"] .s-col:nth-child(3n-2) {
	margin-left: 0;
}
.s-grid[col="3"] .s-col:nth-child(3n) {
	margin-right: 0;
}
/* 4 cols */
.s-grid[col="4"] .s-col {
	width: calc((100% - var(--size-md) - var(--size-md)) / 4);
	margin-left: calc(var(--size-md) / 3);
	margin-right: calc(var(--size-md) / 3);
}
.s-grid[col="4"] .s-col:nth-child(4n-3) {
	margin-left: 0;
}
.s-grid[col="4"] .s-col:nth-child(4n) {
	margin-right: 0;
}
/* 5 cols */
.s-grid[col="5"] .s-col {
	width: calc((100% - var(--size-md) - var(--size-md)) / 5);
	margin-left: calc(var(--size-md) / 4);
	margin-right: calc(var(--size-md) / 4);
}
.s-grid[col="5"] .s-col:nth-child(5n-4) {
	margin-left: 0;
}
.s-grid[col="5"] .s-col:nth-child(5n) {
	margin-right: 0;
}

/* 縦一覧表示 */
.s-vertical-list {
	list-style: none;
}
.s-vertical-list .s-col {
	margin-bottom: var(--size-sm);
}
.s-vertical-list .s-col:nth-last-child(1) {
	margin-bottom: 0;
}

.s-justify-around { justify-content: space-around; }
.s-justify-between { justify-content: space-between; }
.s-justify-evenly { justify-content: space-evenly; }

.s-min-wid-xs { min-width: 15rem; }
.s-min-wid-sm { min-width: 20rem; }
.s-min-wid-md { min-width: 25rem; }
.s-min-wid-lg { min-width: 30rem; }
.s-min-wid-xl { min-width: 35rem; }


/* base parts */
.p-title {}
.p-subtitle {
	font-size: var(--fsize-lg);
	margin: 0;
}
.p-text {}

/* p-btn */
	.p-btn {
    display: inline-block;
    text-decoration: none;
    padding: 10px;
    border-width: 2px;
    border-style: solid;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1rem;
    line-height: 1.5;
		min-width: 8rem;
		cursor: pointer;
	}
	.p-btn-def {
		background-color: var(--em-def-bg);
		border-color: var(--em-def-border);
		color: var(--em-def-text);
	}
	.p-btn-primary {
		background-color: var(--em-primary-bg);
		border-color: var(--em-primary-border);
		color: var(--em-primary-text);
	}
	.p-btn-container .p-btn {
		margin-left: var(--size-sm);
		margin-right: var(--size-sm);
	}
	.p-btn-container .p-btn:nth-child(1){ margin-left: 0; ;}
	.p-btn-container .p-btn:nth-last-child(1){ margin-right: 0; ;}

/* p-figure */
.p-figure {
		display: flex;
		justify-content: stretch;
		align-items: center;
		flex-direction: column;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.p-figure	.image {
		width: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		height: 100%;
	}
	.p-figure .image > img {
		margin: auto;
		opacity: 0;
	}


.p-image {}
.p-image > img {
	width: auto;
	max-width: 100%;
}
.p-label {}
.p-body {}

/* p-box */
	.p-box {}
	.p-box-head {
		background-color: var(--box-head-bg);
		border-color: var(--box-head-border);
		color: var(--box-head-text);
	}
	.p-box-def {
		background-color: var(--box-def-bg);
		border-color: var(--box-def-border);
		color: var(--box-def-text);
	}
	.p-box-info {
		background-color: var(--box-info-bg);
		border-color: var(--box-info-border);
		color: var(--box-info-text);
	}

/* p-note */
	.p-note {}
	.p-note-def {
		background-color: var(--note-def-bg);
		border-color: var(--note-def-border);
		color: var(--note-def-text);
	}
	.p-note-head {
		background-color: var(--note-head-bg);
		border-color: var(--note-head-border);
		color: var(--note-head-text);
	}


.p-block-container{
	padding: var(--size-sm);
}
.p-title-container{
}
.p-body-container{
}
.p-text-container {
	padding: var(--size-sm);
}
.p-item-container{}
.p-btn-container {}
.p-label-container {}
.p-copyright-container {}
.p-image-container {}

.p-image-container.s-image-width-auto .image {
	width: auto;
}
.p-image-container.s-align-left .p-figure {
	align-items: flex-start;
}
.p-image-container.s-align-right .p-figure {
	align-items: flex-end;
}
.p-image-container.s-image-size-contain .image{
	background-size: contain;
}

.p-row-container {
	display: flex;
	flex-direction: row;
}
.p-row-container > * {
	padding-left: var(--size-xs);
	padding-right: var(--size-xs);
}
.p-row-container > :not(.p-block-container):nth-last-child(1) {
	padding-right: 0;
}

.p-row-container > .p-image-container:nth-child(1) {
	padding-left: 0;
	flex: 0 0 25%;
}
.p-row-container > .p-image-container .p-figure {
	height: 100%;
}
.p-row-container > .p-image-wrapper {
	min-width: 20%;
}

.p-text-wrapper {}
.p-text-wrapper .p-text-container {
	padding: 0;
	margin-bottom: var(--size-sm);
}
.p-text-wrapper .p-text-container .p-title {
	margin-bottom: var(--size-xs);
}
.p-image-wrapper {}
.p-image-wrapper .p-image-container {
	padding: 0;
	margin-bottom: var(--size-xs);
}

.p-tag-list {
	list-style: none;
	padding: 0;
	margin-right: -10px;
	margin-bottom: 10px;
}
.p-tag-list > li {
	display: inline-block;
	font-size: .7rem;
	background-color: var(--em-primary-bg);
	color: var(--em-primary-text);
	border-radius: 5px;
	padding: 5px 15px;
	margin: 0 7px 7px 0;
}

.p-file .p-file-name {
	display: inline-block;
	word-break: break-all;
}
.p-file .p-file-caption {
	display: inline-block;
}

/* base contents */
.l-section-wrapper {}
.l-section-bg {}
.l-section-container {}
.l-section-title-container {}
.l-section-title-container .l-section-subtitle {}
.l-section-title-container .l-section-title {}
.l-section-message {
    color: var(--color-text);
}
.l-section-footer-container {}

.l-content-wrapper {}
.l-content-container {}

.l-item-container {}

.l-label-container {}

.l-text-container {}