@charset "utf-8";

/* -------------------------------------------------------------------------
	WAY ROOM
========================================================================= */
#wayroom {}
#wayroom .mainTitle { text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16); }
#wayroom article.container { padding: 50px 0; }
#wayroom section { padding-bottom: 160px; }
#wayroom section:last-of-type { padding-bottom: 60px; }

#wayroom .pageNavi { padding: 45px 0 45px; }
#wayroom .pageTitle { display: flex; letter-spacing: 0.3rem; }

#about { background: url("../wayroom/img/about_bg.svg") center top 167px / 96.57% auto no-repeat; }
#about .photoframe {
	width: 52.5%;
	margin: 36px auto 30px;
	}
.pageText {
	font-size: var(--font-size-large);
    line-height: 230%;
	text-align: center;
	}
.pageSubTitle {
	padding-top: 30px;
	padding-bottom: 30px;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 140%;
	text-align: center;d
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#wayroom article.container { padding-top: 10px; }
#wayroom section { padding-bottom: 100px; }
#about { background: none; }
#about .pageTitle { padding-top: 20px; }
#about .photoframe {
	width: 100%;
	margin: 18px auto;
	}
.pageText {
	font-size: var(--font-size-medium);
	line-height: 210%;
	text-align: left;
	}
.pageSubTitle { padding-bottom: 20px; }
}


/*  ---------------------------------------------------------*/
#philosophy {}
#philosophy > ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 25px;
	}
#philosophy > ul li {
	--phil-li-size: 175px;
	width: var(--phil-li-size);
	height: var(--phil-li-size);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #E591A9;
	border-radius: var(--phil-li-size);
	color: #E591A9;
	font-size: 2.5rem;
	}
#philosophy > ul li:nth-of-type(2) {
	border-color: #9FC103;
	color: #9FC103;
	}
#philosophy > ul li:nth-of-type(3) {
	border-color: #00ACD3;
	color: #00ACD3;
	}
#philosophy .photos { position: relative; }
#philosophy .photos::before {
	content: "";
	width: 127.7%;
	height: auto;
	aspect-ratio: 1277 / 446;
	display: block;
	position: relative;
	left: calc(-27.7% / 2);
	z-index: -1;
	background: url("../wayroom/img/philosophy_bg.svg") center top / 100% auto no-repeat;
	}
#philosophy .photos > img {
	position: absolute;
	z-index: 2;
	top: 41px;
	}
#philosophy .photos > img:nth-of-type(1) {
	width: 44.3%;
	left: 0;
	}
#philosophy .photos > img:nth-of-type(2) {
	width: 25%;
	top: 104px;
	left: 46.6%;
	}
#philosophy .photos > img:nth-of-type(3) {
	width: 22.1%;
	right: 0;
	}
#philosophy .photos > img:nth-of-type(4) {
	width: 19.6%;
	top: 238px;
	right: 6.8%;
	}
/* SMARTPHONE ONLY */
@media screen and (max-width: 1279px) {
#philosophy { overflow: hidden; }
}
@media screen and (max-width: 768px) {
#philosophy { overflow: visible; }

#philosophy > ul { gap: 0 25px; }
#philosophy > ul li { --phil-li-size: 135px; }
#philosophy .photos {
	margin-top: 2em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	}
#philosophy .photos::before { display: none; }
#philosophy .photos > img {
	width: calc((100% - 10px) / 2) !important;
	position: relative;
	top: auto!important;
	left: auto!important;
	right: auto!important;
	}
}


/*  ---------------------------------------------------------*/
#tusho {}
#tusho > p {}
.tushoWrapper,
.tusBox,
.tusPhoto { display: flex; }
.tusBox {
	width: 47.5%;
	flex-direction: column;
	word-wrap: break-word;
	}
.tusBox > dt {
	padding: 15px 0 12px;
	font-size: 2rem;
	font-weight: 500;
	line-height: 130%;
	}
.tusBox > dd { line-height: 190%; }
.tushoWrapper {
	padding-top: 50px;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px 30px;
	}
.tb1column {
	width: 100%;
	align-items: center;
	}
.tusPhoto {
	flex-wrap: wrap;
	gap: 2px;
	order: -1;
	}
.tb1column > dt,
.tb1column > dd:not(.tusPhoto) { max-width: 580px; }
.tb1column > .tusPhoto img { width: calc((100% - 6px) / 4); }
.tb1column > .photo2 img { width: calc((100% - 2px) / 2); }

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
.tushoWrapper {
	padding-top: 20px;
	gap: 40px 30px;
	}
.tusBox { width: 100%; }
.tusBox > dt { text-align: center; }
.tb1column > .tusPhoto > img { width: calc((100% - 2px) / 2); }
.tb1column > .photo2 img { width: 100%; }
.tb1column > .photo2 img:last-of-type { display: none; }
}


/*  ---------------------------------------------------------*/
#houmon {}
#houmon > p { padding-top: 2em; }
#houmon .houmonNotes {
	margin-top: 4em;
	padding: 2em 3em;
	background: var(--accent-sub-color-3rd);
	}
/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#houmon > p { padding-top: 1em; }
}


/*  ---------------------------------------------------------*/
#flow {}
#flow .pageTitle { padding-bottom: 80px; }
#flow .flowBox {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 25px;
	}
#flow .flowBox:not(:last-of-type)::before,
#flow .flowBox:not(:last-of-type)::after {
	content: "";
	position: absolute;
	z-index: -5;
	}
#flow .flowBox:not(:last-of-type)::before {
	width: 16px;
	height: 16px;
	bottom: 10px;
	left: calc(125px - 8px);
	border-right: 1px solid var(--accent-color);
	border-bottom: 1px solid var(--accent-color);
	transform: rotate(45deg);
	}
#flow .flowBox:not(:last-of-type)::after {
	content: "";
	width: 1px;
	height: 90%;
	bottom: 8px;
	left: 125px;
	background: var(--accent-color);
	}
#flow .flowBox > dt {
	min-width: 22.6%;
	min-width: 226px;
	padding: 10px 10px;
	background: var(--accent-color);
	border-radius: 50px;
	color: #FFF;
	font-size: 2rem;
	text-align: center;
	}
#flow .flowBox > dd {
	font-size: var(--font-size-large);
	line-height: 190%;
	text-align: left;
	}
#flow .flowBox > dd > ul li {
	padding-bottom: 0.8em;
	text-indent: -1em;
	margin-left: 1em;
	line-height: 140%;
	}
.pb8 { padding-bottom: 0.8em; }
#flow .flowBox:not(:last-of-type) > dd { padding: 6px 0 60px; }

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#flow {}
#flow .pageTitle { padding-bottom: 40px; }
#flow .flowBox {
	flex-direction: column;
	align-items: center;
	gap: 5px;
	}
#flow .flowBox:not(:last-of-type)::before {
	width: 16px;
	height: 16px;
	bottom: 28px;
	left: calc(50% - 8px);
	border-right: 1px solid var(--accent-color);
	border-bottom: 1px solid var(--accent-color);
	transform: rotate(45deg);
	}
#flow .flowBox:not(:last-of-type)::after {
	content: "";
	width: 1px;
	height: 60px;
	bottom: 26px;
	left: 50%;
	background: var(--accent-color);
	}
#flow .flowBox > dd {
	width: 100%;
	font-size: var(--font-size-medium);
	line-height: 190%;
	}
#flow .flowBox:not(:last-of-type) > dd { padding: 6px 0 110px; }
#flow .flowBox > dd > ul { padding-top: 0.5em; }
}

/*  ---------------------------------------------------------*/
#overview .oveList {
	width: 100%;
	margin-top: 40px;
	}
#overview .oveList > tbody tr th {
	width: 8%;
	min-width: 80px;
	height: 40px;
	padding: 10px;
	}
#overview .oveList > tbody tr th {
	background: var(--accent-color);
	color: #FFF;
	font-weight: 400;
	letter-spacing: 0.3rem;
	border-bottom: 1px solid #FFF;
	font-size: var(--font-size-med-large);
	}
#overview .oveList > tbody tr:last-of-type th { border-bottom: 1px solid var(--accent-color); }
#overview .oveList > tbody tr td {
	padding: 12px 0 12px 40px;
	border-bottom: 1px solid var(--accent-color);
	text-align: left;
	}
#overview .oveList > tbody tr:first-of-type td,
#overview .oveList > tbody tr:first-of-type th { border-top: 1px solid var(--accent-color); }
#overview .map {
	max-width: 1000px;
	height: 300px;
	margin: 1em 2em 1em auto;
	position: relative;
	}
#overview .map > iframe {
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#overview article.container { padding-top: 10px; }
#overview .oveList { margin-top: 30px; }
#overview .oveList > tbody tr {
	display: flex;
	flex-direction: column;
	}
#overview .oveList > tbody tr th,
#overview .oveList > tbody tr td { width: 100%; }
#overview .oveList > tbody tr th {
	height: auto;
	padding: 3px 0;
	border-bottom: none;
	}
#overview .oveList > tbody tr td {
	padding: 6px 0 20px;
	border-bottom: none;
	text-align: center;
	}
#overview .oveList > tbody tr:first-of-type td { border-top: 1px solid var(--accent-color); }
#overview .map {
	height: 245px;
	margin: 1em auto 0 auto;
	}
}

/*  ---------------------------------------------------------*/
#download {}
#download > p {
	padding-top: 2em;
	padding-bottom: 1em;
	text-align: center;
	}
.pdfList {
	padding: 20px 0 30px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px 20px;
	}
.pdfList > li {}
.pdfList > li.pdfListWide { width: 100%; }
.pdfList > li a { display: block; }
.pdfButton {
	padding: 6px 40px 6px 25px;
	display: inline;
	position: relative;
	border: 2px solid var(--accent-color);
	border-radius: 5px;
	color: var(--accent-color);
	font-size: 1.8rem;
	text-align: center;
	}
.pdfButton:visited { color: var(--accent-color); }
.pdfButton::after {
	content: "";
	width: 22px;
	height: 22px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	background: url("../img/icon_pdf.png") top left / contain no-repeat;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#download > p {
	padding-top: 1em;
	padding-bottom: 0;
	}
.pdfList > li.pdfListWideSp { width: 100%; }
.pdfButton { font-size: var(--font-size-large); }
}


/*  ---------------------------------------------------------*/
#evaluation {}
#evaluation > p {
	padding-top: 2em;
	padding-bottom: 1em;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#evaluation > p {
	padding-top: 1em;
	padding-bottom: 0;
	}
}