@charset "UTF-8";

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

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

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

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

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

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

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

/*-----------------------------------------------------------------------------------------
00001 article
00002 article TYPO


10000 ------------------
10001 .area-hero
10002 .area-schedule
10003 .area-news

10005 .area-kensa
10006 .area-philosophy

----------------------------------------------------------------------------------------- */










/*-----------------------------------------------------------------------------------------
00001 article
----------------------------------------------------------------------------------------- */
article.first {
	background-image: url('../img/common/bg-body.jpg');
	background-position: center top;
	background-repeat: repeat-y;
	background-size: 100%;
	background-color: transparent;
	background-attachment: fixed
}

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

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

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

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

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

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

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










/*-----------------------------------------------------------------------------------------
00002 article TYPO
----------------------------------------------------------------------------------------- */
article h2 {
	font-size: 5.0rem;
	color: var(--color-font);
	font-weight: 600;
	leter-spacing: 0.05em;
	padding: 0;
	margin: 0;
	border: 0px solid red;

}

article h2::before {
	content: '';
	display: inline-block;
	width: 6.8rem;
	height: 6.8rem;
	background-image: url('../img/common/logo-mark-1.png');
	background-size: cover;
	background-position: center;
	border: 0px solid red;
	transform: translate(-15%, 15%);
}

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

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

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

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

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

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

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










/*-----------------------------------------------------------------------------------------
10001 .area-hero
----------------------------------------------------------------------------------------- */
.area-hero {
	border: 0pt solid red;
	position: relative;
	z-index: 1;
	background:yellow;
}



.area-hero aside {
	border: 0pt solid green;
	position: relative;
	position: absolute;
	top: 10%;
	right: 5%;
	z-index: 2;
	writing-mode: vertical-rl;
	width: auto;
	height: 80%;
}

.area-hero aside h2,
.area-hero aside p {
	color: White;
	font-weight: 500;
	text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7)
}

.area-hero aside h2 {
	font-size: 3.7vw;
	line-height: 1.4;
	letter-spacing: 0.1em;
	margin-left: 0.4em
}

.area-hero aside p {
	font-size: calc(3.7vw * 0.31);
	line-height: 2.0;
	letter-spacing: 0.1em;
}

.area-hero aside span {
	display: inline-block;
}

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

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

@media screen and (max-width: 1133px) {
	.area-hero aside {
		top: 7.5%;
		right: 2.5%;
		z-index: 2;
		height: 85%;
	}

	.area-hero aside h2 {
		font-size: calc(3.7vw * 1.4);
		line-height: 1.4;
		letter-spacing: 0;
	}

	.area-hero aside p {
		font-size: calc((3.7vw * 0.31) * 1.5);
		line-height: 1.6;
		letter-spacing: 0;
	}

	.area-hero aside p br {
		display: none;
	}

	.area-hero aside p br.zettai {
		display: block;
	}
}

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

@media screen and (max-width: 670px) {
	.area-hero aside h2 {
		font-size: calc(3.7vw * 1.5);

	}

	.area-hero aside p {
		font-size: calc((3.7vw * 0.31) * 1.6);
	}
}

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

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










/*-----------------------------------------------------------------------------------------
10002 .area-schedule
----------------------------------------------------------------------------------------- */
.area-schedule {
	border: 0pt solid red;
	padding: 6.0rem 0;
}

.area-schedule .flexbox {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0 0 3.0rem 0;
}

.area-schedule .flexbox h2 {
	width: fit-content;
	border: 0pt solid red;
}

.area-schedule .flexbox p {
	width: fit-content;
	border: 0pt solid green;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.3;
	color: Var(--color-font);
	margin-left: 2em;
}

.area-schedule .flexbox small {
	font-size: 0.77em;
	font-weight: 400;
}

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

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

@media screen and (max-width: 1133px) {
	.area-schedule {
		padding: 6.0rem 0;
	}

	.area-schedule .col-05 {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.area-schedule .flexbox p {
		font-size: calc(1.8rem * 1.0);
	}

	.area-schedule .day {
		border: 0px solid blue;
		width: 100%;
	}
}

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

@media screen and (max-width: 670px) {
	.area-schedule .flexbox {
		display: block
	}

	.area-schedule .flexbox h2 {
		width: 100%;
	}

	.area-schedule .flexbox p {
		width: 100%;
		margin: 1em 0 0 0;
	}
}

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

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










/*-----------------------------------------------------------------------------------------
10003 .area-news
----------------------------------------------------------------------------------------- */
.area-news {
	border: 0pt solid red;
	padding: 6.0rem 0;
}

.area-news li {
	padding: 1.5rem 0;
}

.area-news li a {
	width: 100%;
	display: block;
	padding: 0;
	maergin: 0;
}

.area-news dl.flexbox {
	border: 0pt solid green;
	padding: 0;
	margin: 0;
}

.area-news dl.flexbox>dt,
.area-news dl.flexbox>dd {
	border: 0pt solid blue;
	padding: 0;
	margin: 0;
	width: calc(100% / 12 * 3)
}

.area-news dl.flexbox>dd {
	width: calc(100% / 12 * 9);
	padding-left: 3.0rem;
}

.area-news dl.entry {
	border: 0pt solid orange;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}

.area-news dl.entry>dt,
.area-news dl.entry>dd {
	border: 0pt solid blue;
	padding: 0;
	margin: 0;
	font-size: 1.8rem;
	line-height: 1.4;
	font-weight: 400;
	width: 15em;
	color: var(--color-font);
}

.area-news dl.entry>dd {
	width: calc(100% - 15em);
	padding-left: 1em;
	padding-top:0.2em
}

.area-news dl.entry>dt{
	border: 0pt solid red;
	align-items : flex-start;
	display : flex;
	-webkit-flex-wrap : wrap;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
}

span.date {
	background: var(--color-blue);
	color: white;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	letter-spacing: 0.05em;
	padding: 0.2em 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	width:8em;
}

span.cate {
	background: var(--color-font);
	color: white;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	letter-spacing: 0;
	padding: 0.2em 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	width:6.5em;
}

span.cate.blog {
	background:var(--color-red)
}

span.cate.news {
	background:var(--color-navy)
}


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

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

@media screen and (max-width: 1133px) {
	.area-news {
		padding: 6.0rem 0;
	}

	.area-news dl.flexbox>dt,
	.area-news dl.flexbox>dd {
		width: 100%;
		padding: 0;
	}

	.area-news dl.flexbox>dd {
		padding-top: 3.0rem;
	}

	.area-news dl.entry>dt,
	.area-news dl.entry>dd {
		font-size: calc(1.8rem * 1.0);
	}
}

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

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

@media screen and (max-width: 500px) {
	.area-news li {
		border-bottom: 1px solid #ddd;
	}

	.area-news li:first-child {
		border-top: 1px solid #ddd;
	}

	.area-news dl.entry>dt,
	.area-news dl.entry>dd {
		width: 100%;
		padding: 0;
	}

	.area-news dl.entry>dd {
		padding-top: 0.3em;
	}

	span.date {
		width: fit-content;
		padding: 0.2em 1.5em
	}
}

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











/*-----------------------------------------------------------------------------------------
10004 .area-message
----------------------------------------------------------------------------------------- */
.area-message {
	border: 0pt solid red;
	padding: 9.0rem 0;
}

.area-message h2 {
	margin-bottom:1em;
}

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

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

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

@media screen and (max-width: 840px) {
	.area-message {
		padding: 6.0rem 0;
	}
}

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

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

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









/*-----------------------------------------------------------------------------------------
10005 .area-kensa
----------------------------------------------------------------------------------------- */
.area-kensa {
	padding: 12.0rem 3.0rem;
	background-image: url('../img/common/bg-kensa.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: transparent;
}

.area-kensa ul {
	background: rgba(255, 255, 255, 0.7);
	padding: 6.0rem 1.5rem;
	margin: 0 auto;
	border-radius: 3.0rem;
	box-shadow:0px 0px 3.0rem rgba(0, 0, 0, 0.1);
}


.area-kensa ul li {
	width: 33.33333%;
	padding: 0 4.0rem;
	margin: 0 auto;
	border-left: 1px solid var(--color-font);
	font-size: 1.9rem;
	line-height: 1.8;
	color: var(--color-font);
}

.area-kensa h4 {
	text-align: center;
	font-size: 3.0rem;
	font-weight: 600;
	display: block;
	padding: 0;
	margin: 0.1em 0 1.7em 0;
	color: var(--color-orange)
}

.area-kensa a {
	display: block;
	color: inherit
}

.area-kensa ul li:first-child {
	border-left: none;
}

.area-kensa ul li:nth-child(2) h4 {
	color: var(--color-blue)
}

.area-kensa ul li:nth-child(3) h4 {
	color: var(--color-red)
}

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

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

@media screen and (max-width: 1133px) {
	.area-kensa {
		padding: 6.0rem 0;
	}

	.area-kensa ul {
		padding: 5.0rem 1.0rem;
	}

	.area-kensa ul li {
		padding: 0 3.0rem;
		font-size: calc(1.9rem * 1.0);
	}

	.area-kensa h4 {
		font-size: calc(3.0rem * 1.0);
		margin: 0.1em 0 1.2em 0;
	}
}

@media screen and (max-width: 840px) {
	.area-kensa {
		padding: 4.5rem 0;
		background-position: center left;
	}

	.area-kensa ul {
		padding: 6vw;
		display: block;
	}

	.area-kensa ul li {
		padding: 6vw;
		font-size: calc(1.9rem * 1.0);
		width: 100%;
		border: none;
		border-top: 1px solid var(--color-font);
	}

	.area-kensa h4 {
		font-size: calc(3.0rem * 1.0);
		margin: 0.1em 0 1.2em 0;
	}

	.area-kensa ul li:first-child {
		border-top: none;
	}
}

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

@media screen and (max-width: 500px) {
	.area-kensa ul li {
		font-size: calc(1.9rem * 0.9);
	}

	.area-kensa h4 {
		font-size: calc(3.0rem * 0.9);
	}
}

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










/*-----------------------------------------------------------------------------------------
10006 .area-philosophy
----------------------------------------------------------------------------------------- */
.area-philosophy {
	padding: 18.0rem 0 15.0rem;
	border: 0pt solid red;
	background-image: url('../img/common/bg-message.jpg');
	background-position: right top;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: transparent;
}

.area-philosophy ul {
	border: 0pt solid green;
	padding: 0;
	margin: 0;
}

.area-philosophy ul li {
	border: 0pt solid blue;
	color: var(--color-blue);
	font-size: 2.8rem;
	line-height: 1.3;
	font-weight: 500;
	padding: 0;
	margin: 0;
	display: block;
	padding: 0;
	margin: 0 0 0.85em 0;
	margin-left: 1em;
	text-indent: -1em
}

.area-philosophy ul li span {
	display: block;
}

.area-philosophy ul li small {
	font-size: 0.7em;
	font-weight: 400;
	color: var(--color-font);
	padding-left: 0.25em;
}

.area-philosophy ul li:nth-child(2) {
	color: #0889d2
}

.area-philosophy ul li:nth-child(3) {
	color: #1279b4
}

.area-philosophy ul li:nth-child(4) {
	color: #23709c
}

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

@media screen and (max-width: 1320px) {
	.area-philosophy {
		padding: 7.5vw 0;
	}
}

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

	.area-philosophy .col-02,
	.area-philosophy .col-10 {
		width: 100%;
	}

	.area-philosophy ul {
		border: 0pt solid green;
		padding: 6vw;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 3.0rem;
	}

	.area-philosophy ul li {
		font-size: calc(2.8vw * 1.20);
	}

	.area-philosophy figure {
		max-width: 240px;
		width: 50%;
		display: block;
		padding: 0;
		margin: 0 auto;
	}
}

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

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

@media screen and (max-width: 500px) {
	.area-philosophy ul {
		padding: 7.5vw;
	}

	.area-philosophy ul li small {
		font-size: 0.8em;
	}
}

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