@charset "utf-8";

/* ===================================================================
DETAIL soshiki/kyoiku/kodomoka/kiracha
=================================================================== */

/* LOGO
--------------------*/

.s-k-k-kiracha-logo-img {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}

.s-k-k-kiracha-logo-name {
	margin: 20px 0 0;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

/* LAYOUT
--------------------*/

.s-k-k-kiratha-other { margin: 50px 0 0; }
.s-k-k-kiracha-service { margin: 40px 0 0; }
.s-k-k-kiracha-column { margin: 30px 0 0; }
.s-k-k-kiracha-group { margin: 50px 0 60px; }

/* HEADING
--------------------*/

.s-k-k-kiracha-heading {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 0 auto 30px;
    padding: 15px;
	font-size: 18px;
    text-align: center;
}

.s-k-k-kiracha-service .s-k-k-kiracha-heading { color: #FFF; background: #197474; }
.s-k-k-kiracha-column .s-k-k-kiracha-heading { color: #000; background: #ACEADC; }
.s-k-k-kiracha-group .s-k-k-kiracha-heading { color: #000; background: #F2D1ED; }

.s-k-k-kiracha-heading:before,
.s-k-k-kiracha-heading:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: calc(100% + 5px);
    width: 44px;
    height: 42px;
}

.s-k-k-kiracha-heading:before { right: calc(100% + 5px); }
.s-k-k-kiracha-heading:after { left: calc(100% + 5px); }

.s-k-k-kiracha-service .s-k-k-kiracha-heading:before { background: url(https://stg.img.japandx.co.jp/cmsjapandx/cms/soshiki/kyoiku/kodomoka/kiracha/service/common/ribbon_left.png) 50% 50% / contain no-repeat, transparent; }
.s-k-k-kiracha-column .s-k-k-kiracha-heading:before { background: url(https://stg.img.japandx.co.jp/cmsjapandx/cms/soshiki/kyoiku/kodomoka/kiracha/column/common/ribbon_left.png) 50% 50% / contain no-repeat, transparent; }
.s-k-k-kiracha-group .s-k-k-kiracha-heading:before { background: url(https://stg.img.japandx.co.jp/cmsjapandx/cms/soshiki/kyoiku/kodomoka/kiracha/group/common/ribbon_left.png) 50% 50% / contain no-repeat, transparent; }
.s-k-k-kiracha-service .s-k-k-kiracha-heading:after { background: url(https://stg.img.japandx.co.jp/cmsjapandx/cms/soshiki/kyoiku/kodomoka/kiracha/service/common/ribbon_right.png) 50% 50% / contain no-repeat, transparent; }
.s-k-k-kiracha-column .s-k-k-kiracha-heading:after { background: url(https://stg.img.japandx.co.jp/cmsjapandx/cms/soshiki/kyoiku/kodomoka/kiracha/column/common/ribbon_right.png) 50% 50% / contain no-repeat, transparent; }
.s-k-k-kiracha-group .s-k-k-kiracha-heading:after { background: url(https://stg.img.japandx.co.jp/cmsjapandx/cms/soshiki/kyoiku/kodomoka/kiracha/group/common/ribbon_right.png) 50% 50% / contain no-repeat, transparent; }

/* TITLE
--------------------*/

.s-k-k-kiratha-title {
    margin: 0 0 30px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

.s-k-k-kiratha-purpose .s-k-k-kiratha-title { color: #197474; }
.s-k-k-kiratha-age .s-k-k-kiratha-title { color: #0077D1; }
.s-k-k-kiratha-target .s-k-k-kiratha-title { color: #EB8181; }

/* BACK
--------------------*/

.s-k-k-kiratha-purpose,
.s-k-k-kiratha-age,
.s-k-k-kiratha-target {
	position: relative;
	padding: 30px 0 15px;
}

.s-k-k-kiratha-purpose:before,
.s-k-k-kiratha-age:before,
.s-k-k-kiratha-target:before {
    content: '';
    position: absolute;
    top: 0;
	left: calc(50% - 50vw);
	display: block;
    width: 100vw;
    height: 100%;
	background-size: 20px 100%;
    z-index: -1;
}

.s-k-k-kiratha-purpose:before { background-image: linear-gradient(90deg, #D0F5D6 25%, #E4F8E7 25%, #E4F8E7 50%, #D0F5D6 50%, #D0F5D6 75%,#E4F8E7 75%, #E4F8E7); }
.s-k-k-kiratha-age:before { background-image: linear-gradient(90deg, #CFF5F8 25%, #EAF9FA 25%, #EAF9FA 50%, #CFF5F8 50%, #CFF5F8 75%,#EAF9FA 75%, #EAF9FA); }
.s-k-k-kiratha-target:before { background-image: linear-gradient(90deg, #FAE4E4 25%, #FCF0F6 25%, #FCF0F6 50%, #FAE4E4 50%, #FAE4E4 75%,#FCF0F6 75%, #FCF0F6); }

/* LIST A
--------------------*/

[class^=s-k-k-kiratha][class$=-list] a {
	transition: transform .3s ease-out 0s;
}

[class^=s-k-k-kiratha][class$=-list] a:hover {
	transform: scale(.95);
}

/* LIST
--------------------*/

.s-k-k-kiratha-list ul {
	display: flex;
	flex-wrap: wrap;
}

.s-k-k-kiratha-list ul li {
	width: 24%;
	margin: 0 calc(4% / 3) 15px 0;
}

.s-k-k-kiratha-list ul li:nth-of-type(4n) {
	margin: 0 0 15px;
}

.s-k-k-kiratha-list ul li a {
	display: block;
}

/* COLUMN LIST
--------------------*/

.s-k-k-kiratha-column-list {
	margin: 0 0 15px;
}

.s-k-k-kiratha-column-list ul {
	display: flex;
	flex-wrap: wrap;
}

.s-k-k-kiratha-column-list ul li {
	width: 24%;
	margin: 0 calc(4% / 3) 15px 0;
}

.s-k-k-kiratha-column-list ul li:nth-of-type(4n) {
	margin: 0 0 15px;
}

.s-k-k-kiratha-column-list ul li a {
	display: block;
	height: 100%;
    padding: 10px;
    border: 2px solid #ACEADC;
    border-radius: 20px;
}

.s-k-k-kiratha-column-img {
	margin: 0 0 5px;
}

.s-k-k-kiratha-column-date {
	font-size: 12px;
}

.s-k-k-kiratha-column-title {
	font-weight: 700;
}

/* GROUP LIST
--------------------*/

.s-k-k-kiratha-group-list {
	margin: 0 0 15px;
}

.s-k-k-kiratha-group-list ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 15px 5px;
    font-size: 16px;
	text-align: center;
    border: 2px solid #F2D1ED;
    border-radius: 20px;
}

/* BUTTON
--------------------*/

.s-k-k-kiracha-column .s-btn a { color: #000; background: #ACEADC; }
.s-k-k-kiracha-column .s-btn a i[class^=fa] { color: #000; }
.s-k-k-kiracha-group .s-btn a { color: #000; background: #F2D1ED; }
.s-k-k-kiracha-group .s-btn a i[class^=fa] { color: #000; }

@media screen and (max-width: 1000px) {

	/* ===================================================================
	DETAIL soshiki/kyoiku/kodomoka/kiracha
	=================================================================== */

	/* LOGO
	--------------------*/

	.s-k-k-kiracha-logo-img {
		max-width: 180px;
	}

	.s-k-k-kiracha-logo-name {
		margin: 10px 0 0;
		font-size: 16px;
		font-weight: 700;
		text-align: center;
	}

	/* LAYOUT
	--------------------*/

	.s-k-k-kiratha-other { margin: 30px 0 0; }
	.s-k-k-kiracha-service { margin: 15px 0 0; }
	.s-k-k-kiracha-group { margin: 30px 0; }

	/* HEADING
	--------------------*/

	.s-k-k-kiracha-heading {
		max-width: calc(100% - 98px);
		margin: 0 auto 15px;
		padding: 10px;
	}

	/* TITLE
	--------------------*/

	.s-k-k-kiratha-title {
		margin: 0 0 20px;
		font-size: 18px;
	}

	/* BACK
	--------------------*/

	.s-k-k-kiratha-purpose,
	.s-k-k-kiratha-age,
	.s-k-k-kiratha-target {
		padding: 20px 0 5px;
	}

	/* LIST A
	--------------------*/

	[class^=s-k-k-kiratha][class$=-list] a {
		transition: none;
	}

	/* LIST
	--------------------*/

	.s-k-k-kiratha-list ul li,
	.s-k-k-kiratha-list ul li:nth-of-type(4n) {
		width: 48%;
		margin: 0 4% 15px 0;
	}

	.s-k-k-kiratha-list ul li:nth-of-type(2n) {
		margin: 0 0 15px;
	}

	/* COLUMN LIST
	--------------------*/

	.s-k-k-kiratha-column-list {
		margin: 0 0 15px;
	}

	.s-k-k-kiratha-column-list ul {
		display: block;
	}

	.s-k-k-kiratha-column-list ul li,
	.s-k-k-kiratha-column-list ul li:nth-of-type(4n) {
		width: 100%;
		margin: 0 0 15px;
	}

	.s-k-k-kiratha-column-img {
		width: 90%;
		margin: 0 auto 5px;
	}

	/* GROUP LIST
	--------------------*/

	.s-k-k-kiratha-group-list ul li a {
		padding: 10px 5px;
		font-size: 14px;
	}

}