@charset 'UTF-8';



/*

    Base

*/

/*  color  */
:root {
	--primary-color: #a1844c;
	--accent-color: #f59494;
	--half-color: #f2efe8;
	/*
	--quarter-color: var(--gakuen-quarter-color);
	--light-color: var(--gakuen-light-color);
	*/
}

/*  webkit  */
body {
	-webkit-text-size-adjust: 100%;
}
a {
	-webkit-tap-highlight-color: rgba(255,255,255,0.4);
}
img {
	-webkit-touch-callout: none;
}
input[type=password], input[type=text], input[type=email], input[type=number], input[type=date], button, textarea {
	max-width: 100%;
	-webkit-appearance: none;
	border-radius: 0;
}

/*  font  */
html { font-size: 8px;}
@media screen and (min-width: 768px) { html { font-size: 10px;}}
body {
	font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #333333;
}
a {
	color: var(--primary-color);
	transition: all 0.1s linear;
}
a:hover   { opacity: 0.7;}

/*  size color  */
body { font-size: 1.8rem;}
h1 { font-size: 3.6rem;}
h2 { font-size: 2.6rem;}
h3 { font-size: 2.1rem;}

/*  common  */
.global ul,
.global li,
.global p {
	margin: 0;
	list-style: none;
}
.global a {
	text-decoration: none;
	color: inherit;
}

/*  max width  */
body img,
body iframe {
	max-width: 100%;
}

/*  placeholder  */
::placeholder {
	font-size: 1.4rem;
	color: #999999;
}

/*  material icons  */
.material-icons {
	margin-right: 0.25em;
	font-size: 1.25em;
	vertical-align: middle;
}

/*  select  */
body {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*  container  */
div.container {
	margin: 2em 0;
	padding: 0 1em;
}
div.container.full {
	margin: 0;
	padding: 0;
}
@media screen and (min-width: 768px) {
	div.container {
		margin: 0 auto;
		box-sizing: border-box;
	}
	div.container.wide {
		width: 1200px;
	}
	div.container.medium {
		width: 960px;
	}
	div.container.narrow {
		width: 640px;
	}
	div.container.thin {
		width: 480px;
	}
}





/*

    Header

*/

/*  layout  */
header.global {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background-color: #ffffff;
	overflow: hidden;
	z-index: 99;
}
header.global nav.global {
	display: flex;
}
header.global nav.global ul.top {
	width: 32%;
}
header.global nav.global ul.member {
	width: 68%;
}
@media screen and (min-width: 768px) {
	header.global nav.global {
		justify-content: space-between;
	}
	header.global nav.global ul.top {
		width: 340px;
		box-sizing: border-box;
	}
	header.global nav.global ul.menu,
	header.global nav.global ul.member {
		width: auto;
	}
}

/*  top  */
header.global nav.global ul.top li a {
	display: block;
	padding: 5px 16px;
}
header.global nav.global ul.top li a img {
	display: block;
}
@media screen and (min-width: 768px) {
	header.global nav.global ul.top li a {
		padding: 15px 30px;
	}
}

/*  menu  */
@media screen and (max-width: 767px) {
	header.global nav.global ul.menu {
		position: fixed;
		left: 100%;
		top: 50px;
		width: 60%;
		padding: 2em;
		background-color: rgba(255,255,255,0.9);
	}
	header.global nav.global ul.menu li {
		margin: 1.25em 0;
	}
	header.global nav.global ul.menu li a {
		color: var(--primary-color);
		font-size: 2.1rem;
	}
}
@media screen and (min-width: 768px) {
	header.global nav.global ul.menu {
		display: flex;
		align-items: center;
		gap: 2.5em;
	}
	header.global nav.global ul.menu li a {
		color: var(--primary-color);
		font-size:1.6rem;
	}
}

/*  member  */
header.global nav.global ul.member {
	display: flex;
	justify-content: flex-end;
}
header.global nav.global ul.member li {
	height: 50px;
}
header.global nav.global ul.member li a {
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 10px;
	color: #ffffff;
	font-size: 1.35rem;
}
header.global nav.global ul.member li a img {
	display: block;
	width: 20px;
	margin-right: 8px;
}
header.global nav.global ul.member li.signin a {
	background-color: var(--accent-color);
}
header.global nav.global ul.member li.signup a {
	background-color: var(--primary-color);
}
header.global nav.global ul.member li.signout a {
	background-color: #ffffff;
	color: var(--accent-color);
}
header.global nav.global ul.member li.mypage a {
	background-color: var(--primary-color);
}
header.global nav.global ul.member li.open a,
header.global nav.global ul.member li.close a {
	display: block;
	width: 45px;
	padding: 0 12px;
	box-sizing: border-box;
}
header.global nav.global ul.member li.open a span,
header.global nav.global ul.member li.close a span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--primary-color);
}
header.global nav.global ul.member li.open a span:nth-child(1) { margin-top: 15px;}
header.global nav.global ul.member li.open a span:nth-child(2) { margin-top: 5px;}
header.global nav.global ul.member li.open a span:nth-child(3) { margin-top: 5px;}
header.global nav.global ul.member li.close a span:nth-child(1) {
	margin-top: 22px;
	transform-origin: center center;
	transform: rotate(45deg);
}
header.global nav.global ul.member li.close a span:nth-child(2) {
	margin-top: -2px;
	transform-origin: center center;
	transform: rotate(-45deg);
}
header.global nav.global ul.member li.close a span:nth-child(3) {
	display: none;
}
@media screen and (min-width: 768px) {
	header.global nav.global ul.member li a {
		height: 65px;
		padding: 0 2.5em;
	}
	header.global nav.global ul.member li.signin a img,
	header.global nav.global ul.member li.signup a img,
	header.global nav.global ul.member li.signout a img,
	header.global nav.global ul.member li.mypage a img {
		width: 27px;
	}
	header.global nav.global ul.member li.open,
	header.global nav.global ul.member li.close {
		display: none !important;
	}
}





/*

    Footer

*/

/*  layout  */
footer.global {
	margin: 45px 1em 0;
	padding: 30px;
	border-top: 1px var(--primary-color) solid;
}
@media screen and (min-width: 768px) {
	footer.global {
		max-width: 1200px;
		margin: 90px auto 0;
	}
	footer.global {
		padding: 60px;
	}
}

/*  logo  */
footer.global a.logo img {
	display: block;
	max-width: 240px;
	margin: 0 auto;
}
@media screen and (min-width: 768px) {
	footer.global a.logo img {
		max-width: 390px;
	}
}

/*  main  */
footer.global ul.main {
	display: none;
}
@media screen and (min-width: 768px) {
	footer.global ul.main {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 2.5em;
		margin: 3em 0;
	}
	footer.global ul.main li a {
		color: var(--primary-color);
	}
	footer.global ul.main li.signup a {
		display: flex;
		align-items: center;
		padding: 0.75em 2em;
		background-color: var(--primary-color);
		color: #ffffff;
	}
	footer.global ul.main li.signup a img {
		width: 27px;
		margin-right: 1em;
	}
}

/*  sub  */
footer.global ul.sub {
	margin: 3em 0 2em;
}
footer.global ul.sub li {
	margin: 1.5em 0;
	text-align: center;
	color: var(--primary-color);
}
@media screen and (min-width: 768px) {
	footer.global ul.sub {
		display: flex;
		justify-content: center;
		gap: 2.5em;
		margin: -2em 0 2em;
	}
}

/*  small  */
footer.global small {
	display: block;
	text-align: center;
	line-height: 4;
	color: var(--primary-color);
}
@media screen and (min-width: 768px) {
	footer.global small {
		line-height: 2;
	}
}





/*

    Contents title

*/

/*  layout  */
div.content-header {
	padding: calc(6em + 50px) 0 6em;
	background-image: url('../images/header-narrow.webp');
	background-size: cover;
	text-align: center;
}
#contents > div.container:first-of-type {
	padding-top: 50px;
}
body.column div.content-header { background-image: url('../images/column-header-narrow.webp');}
body.membership div.content-header { background-image: url('../images/column-membership-narrow.webp');}
@media screen and (min-width: 768px) {
	div.content-header {
		margin-bottom: 5em;
		padding: calc(8em + 65px) 0 8em;
		background-image: url('../images/header.webp');
	}
	body.column div.content-header { background-image: url('../images/column-header.webp');}
	body.membership div.content-header { background-image: url('../images/membership-header.webp');}
}

/*  title  */
div.content-header .title {
	margin: 0;
	color: var(--primary-color);
	font-family: serif;
	font-weight: normal;
	letter-spacing: 0.1em;
	font-size: 3.8rem;
}
div.content-header .title  + p {
	margin: 0;
	color: var(--primary-color);
	font-family: serif;
	font-size: 1.3rem;
	letter-spacing: 0.1em;
}





/*

    Message

*/

/*  layout  */
#message {
	display: flex;
	align-items: center;
	margin: 2em 1em;
	padding: 0.5em 1em;
	color: #ffffff;
	border-radius: 3px;
	animation: failure 10s linear both;
}
#message.success { background-color: #8fc31f;}
#message.failure { background-color: #ea545d;}
#message p {
	margin: 0 0 0 0.75em;
}
@media screen and (min-width: 768px) {
	#message {
		max-width: 1200px;
		margin: 3em auto;
	}
}
@keyframes failure {
	0% { opacity: 1;}
	2% { opacity: 1;}
	5% { opacity: 0.3;}
	12% { opacity: 1;}
	95% { opacity: 1;}
	100% { opacity: 0;}
}





/*

    Common

*/

/*  headings  */
#contents h2 {
	margin: 2em 0 1em;
	color: var(--primary-color);
	font-weight: normal;
}
article h2 {
	padding-left: 0.75em;
	border-left: 3px var(--primary-color) solid;
}
article h3 {
	margin: 1em 0 0;
	padding: 0.5em 0;
	border-bottom: 1px var(--primary-color) solid;
	color: var(--primary-color);
	font-weight: normal;
}

/*  hr  */
hr {
	margin: 4em 0;
	border-color: #eeeeee;
}

/*  button  */
button,
a.button,
div.be-item.button a,
div.be-item.buttons a {
	display: inline-block;
	margin: 0.5em 0.25em 0.125em 0;
	padding: 0.5em 2em;
	border: 1px var(--primary-color) solid;
	background-color: var(--primary-color);
	color: #ffffff;
	font-family: sans-serif;
	font-size: 1.8rem;
	text-align: center;
	line-height: 1.5;
	border-radius: 5px;
	opacity: 1;
	cursor: pointer;
}
button:hover,
a.button:hover,
div.be-item.buttons a:hover,
div.be-item.button a:hover,
button.light,
a.button.light,
div.be-item.buttons.light a,
div.be-item.button.light a {
	background-color: transparent;
	color: var(--primary-color);
}
button.light:hover,
a.button.light:hover,
div.be-item.buttons.light a:hover,
div.be-item.button.light a:hover {
	background-color: var(--primary-color);
	color: #ffffff;
}
button.accent,
a.button.accent,
div.be-item.buttons.accent a,
div.be-item.button.accent a {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: #ffffff;
}
button.accent:hover,
a.button.accent:hover,
div.be-item.buttons.accent a:hover,
div.be-item.button.accent a:hover {
	background-color: #ffffff;
	color: var(--accent-color);
}
button.monochrome,
a.button.monochrome,
div.be-item.buttons.monochrome a,
div.be-item.button.monochrome a {
	border-color: #666666;
	color: #333333;
	background-color: #ffffff;
}
button.monochrome:hover,
a.button.monochrome:hover,
div.be-item.buttons.monochrome a:hover,
div.be-item.button.monochrome a:hover {
	color: #ffffff;
	background-color: #666666;
}
button.xsmall,
a.button.xsmall,
div.be-item.buttons.xsmall a,
div.be-item.button.xsmall a {
	padding: 0 0.5em;
	font-size: 1.3rem;
}
button.small,
a.button.small,
div.be-item.button.small a {
	padding: 0.125em 1.5em;
	font-size: 1.8rem;
}
button.large,
a.button.large,
div.be-item.buttons.large a,
div.be-item.button.large a {
	padding: 0.75em 5em;
	font-size: 2.1rem;
}
button.xlarge,
a.button.xlarge,
div.be-item.buttons.xlarge a,
div.be-item.button.xlarge a {
	display: block;
	padding: 0.75em 5em;
	font-size: 2.4rem;
}
@media screen and (min-width: 768px) {
	button.xlarge,
	a.button.xlarge,
	div.be-item.buttons.xlarge a,
	div.be-item.button.xlarge a {
		display: inline-block;
		padding: 0.75em 15em;
		font-size: larger;
	}
}

/*  note  */
.note {
	font-size: smaller;
	color: #666666;
}

/*  div.lead  */
div.lead {
	margin: 2em 0;
	text-align: center;
}

/*  p.lead  */
p.lead {
	color: var(--primary-color);
	font-size: 2.7rem;
}

/*  div.em  */
div.em {
	padding: 1.5em 2em;
	background-color: var(--half-color);
}
div.em *:first-child {
	margin-top: 0;
}
div.em *:last-child {
	margin-bottom: 0;
}

/*  article  */
article p {
	line-height: 1.75;
}

/*  nav.page  */
nav.page {
	display: flex;
	justify-content: center;
}
nav.page ol {
	display: flex;
	justify-content: center;
	margin: 1em 0;
	border: 1px #cccccc solid;
	border-radius: 5px;
	overflow: hidden;
}
nav.page ol li {
	margin: 0;
	list-style: none;
	border-left: 1px #cccccc solid;
}
nav.page ol li:first-child {
	border: none;
}
nav.page ol li a {
	display: block;
	padding: 0.25em 0.75em;
	background-color: #ffffff;
	color: var(--primary-color);
}
nav.page ol li span {
	display: block;
	padding: 0.25em 0.75em;
}
nav.page ol li.current a {
	color: #ffffff;
	background-color: var(--primary-color);
}

/*  dl.information  */
dl.information > dt {
	font-weight: normal;
	color: #666666;
}
dl.information > dd {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0.25em 0 1em;
	padding-bottom: 1em;
	border-bottom: 1px #eeeeee solid;
}
@media screen and (min-width: 768px) {
	dl.information {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		margin: 2em 0;
		border-bottom: 1px #eeeeee solid;
	}
	dl.information > dt {
		width: 30%;
		margin: 0;
		padding: 1.5em 0;
		border-top: 1px #eeeeee solid;
	}
	dl.information > dd {
		width: 70%;
		margin: 0;
		padding: 1.5em 0 1.5em 1em;
		border-top: 1px #eeeeee solid;
		border-bottom: none;
		box-sizing: border-box;
	}
}

/*  ul.articles  */
#contents ul.articles li {
	margin: 0 0 2.5em;
	list-style: none;
	box-sizing: border-box;
}
#contents ul.articles li a span.image {
	position: relative;
}
#contents ul.articles li a span.image span.thumbnail {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 66.66%;
	background-color: var(--half-color);
	background-size: cover;
	background-position: center center;
}
#contents ul.articles li a span.image span.free {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 4em;
	padding: 0.25em 0.75em;
	background-color: var(--accent-color);
	color: #ffffff;
	font-size: 1.4rem;
}
#contents ul.articles li a span.labels {
	display: block;
	margin: 1em 0;
}
#contents ul.articles li a span.labels span.label {
	display: inline-block;
	padding: 0.25em 1.5em;
	background-color: var(--primary-color);
	color: #ffffff;
	border-radius: 3em;
	font-size: 1.5rem;
}
#contents ul.articles li a span.title {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}




/*

    Form

*/

/*  layout  */
form.entrance {
	padding: 2em;
	border: 1px var(--primary-color) solid;
	border-radius: 5px;
}
form.entrance dl {
	margin: 0;
}
form.entrance dl dt {
	font-weight: normal;
}
form.entrance dl dd {
	display: flex;
	gap: 1em;
	margin: 0 0 0.75em;
}
form.entrance p:first-child {
	margin-top: 0;
}
form.entrance p:last-child {
	margin-bottom: 0;
}

/*  common  */
form input[type=text],
form input[type=number],
form input[type=email],
form input[type=password],
form input[type=date],
form input[type=datetime-local],
form select,
form textarea {
	width: 100%;
	padding: 0.5em 0.75em;
	border: 1px var(--primary-color) solid;
	background-color: transparent;
	border-radius: 5px;
}
form input[type=date],
form select {
	width: auto;
}

/* confirm  */
form.confirm dl dt {
	padding: 0.5em;
	margin-bottom: 0.5em;
	background-color: #eeeeee;
}





/*

    My page

*/

/*  layout  */
@media screen and (min-width: 768px) {
	div.mypage {
		display: flex;
	}
	div.mypage div.menu {
		width: 25%;
		padding-top: 3em;
		padding-right: 3em;
		box-sizing: border-box;
	}
	div.mypage div.body {
		width: 75%;
	}
}

/*  menu  */
div.mypage div.menu ul {
	display: flex;
	flex-wrap: wrap;
}
div.mypage div.menu ul li {
	margin: 0.25em;
	list-style: none;
}
div.mypage div.menu ul li a {
	display: block;
	padding: 0.5em 1em;
	border: 1px var(--primary-color) solid;
	border-radius: 5px;
}
div.mypage div.menu ul li.current a {
	background-color: var(--primary-color);
	color: #ffffff;
}
@media screen and (min-width: 768px) {
	div.mypage div.menu ul {
		display: block;
	}
	div.mypage div.menu ul li a {
		margin-bottom: 1em;
		border: none;
	}
}

/*  paymtnes  */
div.mypage ul.payments li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0.5em 0;
	border-bottom: 1px var(--primary-color) solid;
	list-style: none;
}
div.mypage ul.payments li time {
	font-size: smaller;
}





/*

    Nine star diagnosis

*/

/*  layout  */
@media screen and (min-width: 768px) {
	div.ninestar.items {
		display: flex;
		gap: 30px;
	}
	div.ninestar.items div.item {
		width: 100%;
	}
}

/*  item  */
#contents div.ninestar.item {
	margin: 2em 0;
	padding: 0 5px 10px;
	border: 1px #999999 solid;
	border-radius: 5px;
}
#contents div.ninestar.item h2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 -5px 5px;
	padding: 0.5em;
	border: none;
	background-color: #999999;
	color: #ffffff;
	font-weight: normal;
	font-family: serif;
}
#contents div.ninestar.item.year { border-color: #a1844c;}
#contents div.ninestar.item.year h2 { background-color: #a1844c;}
#contents div.ninestar.item.month { border-color: #f59494;}
#contents div.ninestar.item.month h2 { background-color: #f59494;}
#contents div.ninestar.item.day { border-color: #feca69;}
#contents div.ninestar.item.day h2 { background-color: #feca69;}
#contents div.ninestar.item h2 span.term {
	margin-left: 1em;
	text-align: center;
}
#contents div.ninestar.item h2 span.term span.date {
	display: block;
	font-size: 1.2rem;
}

/*  board  */
#contents div.ninestar.item div.board {
	position: relative;
	width: 280px;
	height: 258px;
	margin: 1.5em auto;
}

/*  background  */
#contents div.ninestar.item div.board div.bg {
	position: absolute;
	width: 0;
	height: 0;
	width: 30px;
	border-bottom: 40px solid #fff5e4;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	z-index: -1;
}
#contents div.ninestar.item div.board div.bg.unlucky {
	border-bottom-color: #eee9df;
}
#contents div.ninestar.item div.board div.bg.lucky {
	border-bottom-color: #fdecec;
}
#contents div.ninestar.item div.board div.bg.no1 {
	display: none;
}
#contents div.ninestar.item div.board div.bg.no5 {
	transform: rotate(180deg);
	top: 48px;
	left: 109px;
}
#contents div.ninestar.item div.board div.bg.no6 {
	transform: rotate(0deg);
	bottom: 48px;
	left: 109px;
}
#contents div.ninestar.item div.board div.bg.no3 {
	transform: rotate(-90deg);
	right: 48px;
	top: 109px;
}
#contents div.ninestar.item div.board div.bg.no8 {
	transform: rotate(90deg);
	left: 48px;
	top: 109px;
}
#contents div.ninestar.item div.board div.bg.no9 {
	transform: rotate(135deg);
	top: 66px;
	left: 66px;
}
#contents div.ninestar.item div.board div.bg.no7 {
	transform: rotate(-135deg);
	top: 66px;
	right: 66px;
}
#contents div.ninestar.item div.board div.bg.no4 {
	transform: rotate(45deg);
	left: 66px;
	bottom: 66px;
}
#contents div.ninestar.item div.board div.bg.no2 {
	transform: rotate(-45deg);
	right: 66px;
	bottom: 66px;
}

/*  number  */
#contents div.ninestar.item div.board div.number {
	position: absolute;
	width: 30px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.1rem;
	font-weight: bold;
	font-family: serif;
	color: #d76864;
}
#contents div.ninestar.item div.board div.number.unlucky {
	color: #000000;
}
#contents div.ninestar.item div.board div.number.no1 {
	left: 50%;
	top: 50%;
	margin-top: -20px;
	margin-left: -15px;
	color: #000000;
}
#contents div.ninestar.item div.board div.number.no5 {
	top: 48px;
	left: 50%;
	margin-left: -15px;
}
#contents div.ninestar.item div.board div.number.no6 {
	bottom: 48px;
	left: 50%;
	margin-left: -15px;
}
#contents div.ninestar.item div.board div.number.no3 {
	right: 62px;
	top: 50%;
	margin-top: -20px;
}
#contents div.ninestar.item div.board div.number.no8 {
	left: 62px;
	top: 50%;
	margin-top: -20px;
}
#contents div.ninestar.item div.board div.number.no9 {
	left: 80px;
	top: 65px;
}
#contents div.ninestar.item div.board div.number.no7 {
	right: 80px;
	top: 65px;
}
#contents div.ninestar.item div.board div.number.no4 {
	left: 80px;
	bottom: 65px;
}
#contents div.ninestar.item div.board div.number.no2 {
	right: 80px;
	bottom: 65px;
}

/*  events  */
#contents div.ninestar.item div.board div.events span.lucky {
	color: #dd9133;

}
#contents div.ninestar.item div.board div.events span.max {
	color: #d76864;
	font-weight: bold;
}
#contents div.ninestar.item div.board div.events span.sun {
	color: #009DBF;
}
#contents div.ninestar.item div.board div.events span.unlucky {
	font-weight: normal;
}

/*  direction  */
#contents div.ninestar.item div.board div.direction {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 1em;
	line-height: 1;
	font-size: 1.4rem;
}
#contents div.ninestar.item div.board div.direction.no1 { display: none;}
#contents div.ninestar.item div.board div.direction.no2:after { content: '\897F\5317';}
#contents div.ninestar.item div.board div.direction.no3:after { content: '\897F';}
#contents div.ninestar.item div.board div.direction.no4:after { content: '\6771\5317';}
#contents div.ninestar.item div.board div.direction.no5:after { content: '\5357';}
#contents div.ninestar.item div.board div.direction.no6:after { content: '\5317';}
#contents div.ninestar.item div.board div.direction.no7:after { content: '\897F\5357';}
#contents div.ninestar.item div.board div.direction.no8:after { content: '\6771';}
#contents div.ninestar.item div.board div.direction.no9:after { content: '\6771\5357';}
#contents div.ninestar.item div.board div.direction.no5 {
	transform: rotate(0deg);
	top: calc(46px - 1em);
	left: 50%;
	margin-left: -30px;
}
#contents div.ninestar.item div.board div.direction.no6 {
	transform: rotate(0deg);
	bottom: calc(46px - 1em);
	left: 50%;
	margin-left: -30px;
}
#contents div.ninestar.item div.board div.direction.no8 {
	transform: rotate(0deg);
	width: 1em;
	height: 60px;
	top: 50%;
	left: calc(56px - 1em);
	margin-top: -30px;
}
#contents div.ninestar.item div.board div.direction.no3 {
	transform: rotate(0deg);
	width: 1em;
	height: 60px;
	top: 50%;
	right: calc(56px - 1em);
	margin-top: -30px;
}
#contents div.ninestar.item div.board div.direction.no9 {
	transform: rotate(-45deg);
	top: calc(71px - 1em);
	left: calc(58px - 1em);
}
#contents div.ninestar.item div.board div.direction.no7 {
	transform: rotate(45deg);
	top: calc(72px - 1em);
	right: calc(57px - 1em);
}
#contents div.ninestar.item div.board div.direction.no4 {
	transform: rotate(45deg);
	bottom: calc(71px - 1em);
	left: calc(58px - 1em);
}
#contents div.ninestar.item div.board div.direction.no2 {
	transform: rotate(-45deg);
	bottom: calc(72px - 1em);
	right: calc(57px - 1em);
}

/*  events  */
#contents div.ninestar.item div.board div.events {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 40px;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
}
#contents div.ninestar.item div.board div.events div {
	line-height: 1.15;
}
#contents div.ninestar.item div.board div.events.unlucky {
	font-size: 1.5rem;
}
#contents div.ninestar.item div.board div.events.no1 {
	display: none;
}
#contents div.ninestar.item div.board div.events.no5 {
	top: -4%;
	left: 50%;
	width: 90px;
	height: 30px;
	margin-left: -45px;
}
#contents div.ninestar.item div.board div.events.no6 {
	bottom: -5%;
	left: 50%;
	width: 90px;
	height: 30px;
	margin-left: -45px;
}
#contents div.ninestar.item div.board div.events.no8 {
	left: -12%;
	top: 50%;
	width: 70px;
	height: 60px;
	margin-top: -30px;
}
#contents div.ninestar.item div.board div.events.no3 {
	right: -12%;
	top: 50%;
	width: 70px;
	height: 60px;
	margin-top: -30px;
}
#contents div.ninestar.item div.board div.events.no9 {
	left: 1%;
	top: 3%;
	align-items: flex-end;
}
#contents div.ninestar.item div.board div.events.no7 {
	right: 1%;
	top: 3%;
	align-items: flex-end;
}
#contents div.ninestar.item div.board div.events.no4 {
	left: 1%;
	bottom: 2%;
}
#contents div.ninestar.item div.board div.events.no2 {
	right: 2%;
	bottom: 3%;
}

/*
東西南北
\6771\897F\5357\5317
1: 中央 2: 右下 3: 右
4: 左下 5: 上 6: 下
7: 右上 8: 左 9: 左上
*/





/*

    Fortune calendar

*/

/*  navigation  */
#contents article.fortune-calendar nav.month {
	margin: 2em 0 1em;
}
#contents article.fortune-calendar nav.month div.link {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#contents article.fortune-calendar nav.month form {
	width: fit-content;
	margin: 1em auto 0;
}
#contents article.fortune-calendar nav.month form select {
	background-color: var(--half-color);
	border: none;
	color: var(--primary-color);
	font-size: 2.4rem;
}
#contents article.fortune-calendar nav.month a {
	display: flex;
	align-items: center;
	font-size: 2.4rem;
}
#contents article.fortune-calendar nav.month a:nth-child(1):before,
#contents article.fortune-calendar nav.month a:nth-child(2):after {
	content: '';
	display: block;
	width: 1.5em;
	height: 0.25em;
	border-bottom: 1px var(--primary-color) solid;
}
#contents article.fortune-calendar nav.month a:nth-child(1):before {
	margin-right: 0.5em;
	border-left: 1px var(--primary-color) solid;
	transform: skewX(-45deg);
}
#contents article.fortune-calendar nav.month a:nth-child(2):after {
	margin-left: 0.5em;
	border-right: 1px var(--primary-color) solid;
	transform: skewX(45deg);
}
@media screen and (min-width: 768px) {
	#contents article.fortune-calendar nav.month {
		margin-top: 3em;
	}
	#contents article.fortune-calendar nav.month form {
		margin-top: -3em;
	}
}

/*  calendar  */
#contents article.fortune-calendar div.calendar {
	padding: 1em 5px;
	border: 1px var(--primary-color) solid;
	border-radius: 10px;
}
@media screen and (min-width: 768px) {
	#contents article.fortune-calendar div.calendar {
		padding: 1em 1.5em;
	}
}

/*  header  */
#contents article.fortune-calendar header h2 {
	margin: 0.5em 0 0;
	padding: 0;
	border: none;
	text-align: center;
	color: #333333;
}
#contents article.fortune-calendar header h2 strong {
	padding-left: 0.125em;
	font-weight: normal;
	font-size: larger;
}
#contents article.fortune-calendar header p {
	margin: 0 0 1em;
	text-align: center;
}
#contents article.fortune-calendar header div.select-target {
	display: none;
}
#contents article.fortune-calendar header div.select-target ul {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0;
}
#contents article.fortune-calendar header div.select-target ul li {
	width: 50%;
	margin: 0;
	padding: 0.25em;
	list-style: none;
	box-sizing: border-box;
}
#contents article.fortune-calendar header div.select-target ul li label {
	display: block;
	padding: 0.25em 1em;
	border-radius: 3px;
	font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
	#contents article.fortune-calendar header {
		position: relative;
		margin-bottom: 1em;
	}
	#contents article.fortune-calendar header p {
		position: absolute;
		right: 0;
		top: 0;
	}
	#contents article.fortune-calendar header div.select-target ul li {
		width: 25%;
	}
}

/*  selector  */
#contents article.fortune-calendar div.calendar div.type {
	margin-bottom: 1em;
	text-align: center;
}
#contents article.fortune-calendar div.calendar div.type label:first-child {
	margin-right: 1.75em;
}
#contents article.fortune-calendar div.calendar:has(div.type input[value=list]:checked) div.table {
	display: none;
}
#contents article.fortune-calendar div.calendar:has(div.type input[value=table]:checked) div.list {
	display: none;
}
@media screen and (min-width: 768px) {
	#contents article.fortune-calendar div.calendar div.type {
		display: none;
	}
	#contents article.fortune-calendar div.calendar div.list,
	#contents article.fortune-calendar div.calendar div.table {
		display: block !important;
	}
}

/*  table  */
#contents article.fortune-calendar div.calendar div.table table {
	width: 100%;
	border: none;
	border-left: 1px var(--half-color) solid;
	border-top: 1px var(--half-color) solid;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	table-layout: fixed;
}
#contents article.fortune-calendar div.calendar div.table table tr > * {
	border: none;
	border-right: 1px var(--half-color) solid;
	border-bottom: 1px var(--half-color) solid;
}
#contents article.fortune-calendar div.calendar div.table table thead tr:first-child > *:first-child {
	border-radius: 10px 0 0 0;
}
#contents article.fortune-calendar div.calendar div.table table thead tr:first-child > *:last-child {
	border-radius: 0 10px 0 0;
}
#contents article.fortune-calendar div.calendar div.table table tbody tr:last-child > *:first-child {
	border-radius: 0 0 0 10px;
}
#contents article.fortune-calendar div.calendar div.table table tbody tr:last-child > *:last-child {
	border-radius: 0 0 10px 0;
}
#contents article.fortune-calendar div.calendar div.table table thead th {
	background-color: var(--half-color);
	text-align: center;
	font-weight: normal;
}
#contents article.fortune-calendar div.calendar div.table table tbody td {
	padding: 3px;
	vertical-align: top;
}
#contents article.fortune-calendar div.calendar div.table table tbody td span.day {
	display: block;
	margin-bottom: 0.25em;
	font-size: smaller;
}
#contents article.fortune-calendar div.calendar div.table table tbody td.sunday span.day,
#contents article.fortune-calendar div.calendar div.table table tbody td.holiday span.day {
	color: #AF2C2C;
}
#contents article.fortune-calendar div.calendar div.table table tbody td.saturday span.day {
	color: #2D62AD;
}

#contents article.fortune-calendar div.calendar div.table table tbody td div.labels {
	min-height: 4em;
}
#contents article.fortune-calendar div.calendar div.table table tbody td span.label {
	display: block;
	margin-bottom: 0.25em;
	padding: 0.125em 0.25em;
	background-color: var(--half-color);
	border-radius: 3px;
	font-size: 1.3rem;
}
@media screen and (min-width: 768px) {
	#contents article.fortune-calendar div.calendar div.table table tbody td {
		padding: 0.5em;
	}
	#contents article.fortune-calendar div.calendar div.table table tbody td span.label {
		display: inline-block;
	}
}

/*  list  */
#contents article.fortune-calendar div.calendar div.list h3 {
	border: none;
	text-align: center;
	color: #333333;
}
#contents article.fortune-calendar div.calendar div.list div.frame ul li time.sunday,
#contents article.fortune-calendar div.calendar div.list div.frame ul li time.holiday {
	color: #AF2C2C;
}
#contents article.fortune-calendar div.calendar div.list div.frame ul li time.saturday {
	color: #2D62AD;
}
@media screen and (max-width: 767px) {
	#contents article.fortune-calendar div.calendar div.list div.frame {
		border: 1px #eeeeee solid;
		border-radius: 8px;
	}
	#contents article.fortune-calendar div.calendar div.list div.frame ul {
		margin: 0;
	}
	#contents article.fortune-calendar div.calendar div.list div.frame ul li {
		display: flex;
		margin: 0;
		padding: 1em 1em 0.55em;
		border-top: 1px #eeeeee solid;
		list-style: none;
	}
	#contents article.fortune-calendar div.calendar div.list div.frame ul:first-child li:first-child {
		border: none;
	}
	#contents article.fortune-calendar div.calendar div.list div.frame ul li time {
		flex-shrink: 0;
		margin-right: 0.75em;
	}
	#contents article.fortune-calendar div.calendar div.list div.frame ul li span.item {
		display: inline-block;
		margin-bottom: 0.35em;
		padding: 0 0.75em;
		background-color: var(--half-color);
		border-radius: 3px;
	}
}
@media screen and (min-width: 768px) {
	#contents article.fortune-calendar div.calendar div.list h3 {
		margin-top: 1em;
		text-align: left;
	}
	#contents article.fortune-calendar div.calendar div.list div.frame {
		display: flex;
		gap: 2em;
	}
	#contents article.fortune-calendar div.calendar div.list div.frame ul {
		margin: 0;
		list-style: none;
	}
	#contents article.fortune-calendar div.calendar div.list div.frame ul li {
		display: flex;
		gap: 0.5em;
		margin-left: 0.5em;
		line-height: 1.75;
	}
	#contents article.fortune-calendar div.calendar div.list div.frame ul li span.item {
		background-color: transparent !important;
	}
}





/*

    Column

*/

/*  layout  */
#contents div.column aside.sub {
	margin-top: 3em;
}
@media screen and (min-width: 768px) {
	#contents div.column {
		display: flex;
		align-items: flex-start;
		gap: 3em;
	}
	#contents div.column div.main {
		width: 70%;
	}
	#contents div.column aside.sub {
		width: 30%;
		margin: 0;
	}
}

/*  sub common  */
#contents div.column aside.sub h2 {
	padding-bottom: 0.25em;
	border-bottom: 1px var(--primary-color) solid;
}

/*  sub search  */
#contents div.column aside.sub form.search {
	display: flex;
	border: 1px var(--primary-color) solid;
	border-radius: 5px;
}
#contents div.column aside.sub form.search input,
#contents div.column aside.sub form.search button {
	display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
}
#contents div.column aside.sub form.search input {
	padding: 0.5em 1em;
}
#contents div.column aside.sub form.search button {
	padding: 0.5em;
	color: var(--primary-color);
}

/*  sub articles  */
#contents div.column aside.sub ul.articles li {
	margin: 0 0 1em;
	list-style: none;
}
#contents div.column aside.sub ul.articles li a {
	display: flex;
	color: #333333;
}
#contents div.column aside.sub ul.articles li a span.image {
	position: relative;
	width: 30%;
}
#contents div.column aside.sub ul.articles li a span.image span.thumbnail {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 75%;
	background-color: var(--half-color);
	background-size: cover;
	background-position: center center;
}
#contents div.column aside.sub ul.articles li a span.image span.free {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 4em;
	padding: 0.125em 0.75em;
	background-color: var(--accent-color);
	color: #ffffff;
	font-size: 0.9rem;
}
#contents div.column aside.sub ul.articles li a span.title {
	display: -webkit-box;
	width: 70%;
	height: 4.5em;
	padding-left: 1em;
	line-height: 1.5;
	box-sizing: border-box;
	font-size: smaller;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/*  sub select  */
#contents div.column aside.sub form.select select {
	width: 100%;
	background-color: var(--half-color);
}

/*  sub tags  */
#contents div.column aside.sub div.tags a {
	display: inline-block;
	padding: 0.5em 1em;
	margin-bottom: 0.4em;
	background-color: var(--half-color);
	color: #333333;
	white-space: nowrap;
	border-radius: 3px;
}

/*  main articles  */
#contents div.column div.main ul.articles {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 0;
}
@media screen and (min-width: 768px) {
	#contents div.column div.main ul.articles li {
		width: 50%;
	}
	#contents div.column div.main ul.articles li:nth-child(odd) {
		padding-right: 1.25em;
	}
	#contents div.column div.main ul.articles li:nth-child(even) {
		padding-left: 1.25em;
	}
}

/*  main article header  */
#contents article.article header span.free {
	display: inline-block;
	width: 4em;
	padding: 0.25em 0.75em;
	background-color: var(--accent-color);
	color: #ffffff;
	font-size: 1.4rem;
}
#contents article.article header span.label {
	display: inline-block;
	padding: 0.25em 1.5em;
	background-color: var(--primary-color);
	color: #ffffff;
	border-radius: 3em;
	font-size: 1.4rem;
}
#contents article.article header h1 {
	margin-top: 0.25em;
	color: var(--primary-color);
	font-size: 2.8rem;
	font-weight: normal;
	line-height: 1.5;
}

/*  main article content  */
#contents article.article h2 {
	padding: 0.5em;
	border: none;
	background-color: var(--primary-color);
	color: #ffffff;
}

/*  main article footer  */
#contents article.article footer {
	margin-top: 3em;
}
#contents article.article footer div.tags {
	display: flex;
	align-items: center;
}
#contents article.article footer div.tags span.icon {
	color: var(--primary-color);
}
#contents article.article footer div.tags a {
	display: inline-block;
	padding: 0.25em 1.5em;
	margin-left: 0.5em;
	background-color: var(--half-color);
	color: #333333;
	border-radius: 3px;
}
#contents article.article footer div.share ul {
	display: flex;
	margin: 2em 0;
}
#contents article.article footer div.share ul li {
	width: 33.33%;
	margin: 0;
	list-style: none;
}
#contents article.article footer div.share ul li a {
	display: block;
	text-align: center;
	margin: 2px;
}
#contents article.article footer div.share ul li a img {
	vertical-align: bottom;
}
#contents article.article footer div.share ul li a.fb { background-color: #116bff;}
#contents article.article footer div.share ul li a.x  { background-color: #000000;}
#contents article.article footer div.share ul li a.hb { background-color: #00a4de;}
#contents article.article footer div.share ul li a.pk { background-color: #ef4056;}
#contents article.article footer div.share ul li a.ln { background-color: #06c755;}
#contents article.article footer nav.prevnext a {
	display: flex;
	align-items: center;
	color: #333333;
}
#contents article.article footer nav.prevnext a:before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	border-top: 1px var(--primary-color) solid;
	border-left: 1px var(--primary-color) solid;
	transform: rotate(-45deg);
}
#contents article.article footer nav.prevnext a span.image {
	flex-shrink: 0;
	position: relative;
	width: 90px;
	margin: 0 0.5em;
}
#contents article.article footer nav.prevnext a span.image span.thumbnail {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 75%;
	background-color: var(--half-color);
	background-size: cover;
	background-position: center center;
}
#contents article.article footer nav.prevnext a span.image span.free {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 4em;
	padding: 0.125em 0.75em;
	background-color: var(--accent-color);
	color: #ffffff;
	font-size: 0.9rem;
}
#contents article.article footer nav.prevnext a span.title {
	display: -webkit-box;
	font-size: smaller;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
#contents article.article footer nav.prevnext a.next {
	flex-direction: row-reverse;
}
#contents article.article footer nav.prevnext a.next:before {
	transform: rotate(135deg);
}
#contents article.article footer div.relations h2 {
	background: none;
	padding: 0 0 0.5em;
	border-bottom: 1px var(--primary-color) solid;
	color: var(--primary-color);
}
#contents article.article footer div.relations ul.articles {
	margin: 0 -0.5em;
}
#contents article.article footer div.relations ul.articles li {
	width: 50%;
	padding: 0 0.5em;
}
#contents article.article footer div.relations ul.articles li a {
	color: #333333;
	font-size: smaller;
}
@media screen and (min-width: 768px) {
	#contents article.article footer div.share ul li {
		width: 20%;
	}
	#contents article.article footer nav.prevnext a span.image {
		width: 120px;
	}
	#contents article.article footer div.relations ul.articles li:nth-child(odd) { padding-right: 0.5em;}
	#contents article.article footer div.relations ul.articles li:nth-child(even) { padding-left: 0.5em;}
	#contents article.article footer div.relations ul.articles li {
		width: 25%;
	}
}





/*

    Membership

*/

/*  common  */
#contents section h2 {
	margin-top: 0;
	text-align: center;
	font-family: serif;
	font-size: 3.8rem;
	letter-spacing: 0.1em;
}
#contents section h2 span {
	display: block;
	font-size: 1.3rem;
	letter-spacing: 0.05em;
}
body.membership #contents div.content-header {
	margin-bottom: 0;
}
body.membership #contents section {
	padding: 1em 0;
}
body.membership #contents section div.entry {
	margin: 2em 0 1em;
}
body.membership #contents section div.entry a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: fit-content;
	margin: 0 auto;
	padding: 1em 3em;
	background-color: var(--primary-color);
	color: #ffffff;
}
@media screen and (min-width: 768px) {
	body.membership #contents section {
		padding: 3em 0;
	}
	body.membership #contents br.adjust {
		display: none;
	}
}

/*  salon  */
#contents section.salon {
	background-image: url('../images/membership/lead_bg.jpg');
	background-size: cover;
	background-position: center top;
}
#contents section.salon div.lead {
	padding-bottom: 40px;
}
#contents section.salon div.lead h2 {
	font-size: 2.1rem;
}
#contents section.salon div.lead h2 strong {
	color: var(--accent-color);
}
#contents section.salon div.lead h2 span img {
	display: block;
	width: 90%;
	margin: 1em auto;
}
#contents section.salon div.frame1 {
	position: relative;
	left: 0.5em;
	top: 0.5em;
	border: 1px var(--primary-color) solid;
}
#contents section.salon div.frame2 {
	position: relative;
	left: -0.5em;
	top: -0.5em;
	border: 1px var(--primary-color) solid;
	padding: 1.5em;
}
#contents section.salon div.image {
	position: relative;
	top: -50px;
	left: 50%;
	width: 70%;
	height: 0;
	margin-left: -35%;
	margin-bottom: -40px;
	padding-top: 70%;
	background-size: cover;
	background-position: top center;
}
#contents section.salon div.image img {
	position: absolute;
	left: -10px;
	top: 0;
	width: 60%;
}
#contents section.salon h3 {
	margin-bottom: 1em;
	color: var(--primary-color);
	font-family: serif;
	font-size: 1.8rem;
	font-weight: normal;
	font-feature-settings: "palt";
}
#contents section.salon h3 span {
	display: block;
	width: fit-content;
	padding: 0.5em 0;
	border-bottom: 1px var(--primary-color) solid;
}
#contents section.salon h3 span.wide {
	display: none;
}
#contents section.salon p {
	line-height: 1.75;
}
@media screen and (min-width: 768px) {
	#contents section.salon div.lead h2 span img {
		width: 60%;
	}
	#contents section.salon div.frame2 {
		padding: 5em 0 3em 5em;
	}
	#contents section.salon div.body {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	#contents section.salon div.body div.image {
		left: 3em;
		top: 0;
		width: 40%;
		padding-top: 55%;
		z-index: 2;
	}
	#contents section.salon div.image img {
		left: -40px;
		top: 0;
		width: 70%;
	}
	#contents section.salon div.body div.text {
		width: 60%;
	}
	#contents section.salon div.body h3 {
		margin-bottom: 1.5em;
		font-size: 2.8rem;
	}
	#contents section.salon div.body h3 span.narrow {
		display: none;
	}
	#contents section.salon div.body h3 span.wide {
		display: block;
	}
}

/*  services  */
#contents section.services {
	background-color: var(--half-color);
}
#contents section.services div.services div.service {
	position: relative;
	padding-top: 165px;
}
#contents section.services div.services div.service div.image {
	position: absolute;
	top: 0;
	width: 60%;
	height: 0;
	padding-top: 165px;
	background-size: cover;
	background-position: left center;
	z-index: 1;
}
#contents section.services div.services div.service div.text {
	margin-top: -80px;
	margin-bottom: 3em;
	padding: 0 1em 0.1em;
	background-color: #ffffff;
}
#contents section.services div.services div.service div.text div.supple {
	position: relative;
	padding-top: 4em;
	z-index: 2;
	font-size: 1.3rem;
	color: var(--primary-color);
	text-shadow: 0px 0px 3px rgba(255, 255, 255, 1.0);
}
#contents section.services div.services div.service div.text div.supple strong {
	display: block;
	width: fit-content;
	margin-bottom: 0.5em;
	padding: 0.125em 0.5em;
	border: 1px var(--primary-color) solid;
	font-weight: normal;
}
#contents section.services div.services div.service div.text div.number {
	display: flex;
	align-items: flex-end;
	height: 75px;
	margin-bottom: 1em;
	color: var(--primary-color);
	font-family: serif;
	line-height: 1;
	letter-spacing: 0.075em;
}
#contents section.services div.services div.service div.text div.supple + div.number {
	height: 3em;
}
#contents section.services div.services div.service div.text div.number strong {
	margin-left: 0.125em;
	font-size: 3.2rem;
	font-weight: normal;
	line-height: 0.75;
}
#contents section.services div.services div.service div.text h3 {
	color: var(--primary-color);
	font-weight: normal;
}
#contents section.services div.services div.service div.text p {
	line-height: 1.75;
}
#contents section.services div.services div.service div.text img {
	position: absolute;
	top: 65px;
	width: 60%;
	z-index: 1;
}
#contents section.services div.services div.service:nth-child(odd)  { padding-left: 2em;}
#contents section.services div.services div.service:nth-child(even) { padding-right: 2em;}
#contents section.services div.services div.service:nth-child(odd)  div.image { left: 1em;}
#contents section.services div.services div.service:nth-child(even) div.image { right: 1em;}
#contents section.services div.services div.service:nth-child(odd)  div.text div.supple { text-align: right;}
#contents section.services div.services div.service:nth-child(even) div.text div.supple { text-align: left;}
#contents section.services div.services div.service:nth-child(odd)  div.text div.supple strong { margin-left: auto;}
#contents section.services div.services div.service:nth-child(even) div.text div.supple strong { margin-right: auto;}
#contents section.services div.services div.service:nth-child(odd)  div.text div.number { justify-content: flex-end;}
#contents section.services div.services div.service:nth-child(even) div.text div.number { justify-content: flex-start;}
#contents section.services div.services div.service:nth-child(odd)  div.text img { right: 1em;}
#contents section.services div.services div.service:nth-child(even) div.text img { left: 1em;}
#contents section.services p.andmore {
	margin: -1em 0 1em;
	text-align: center;
	font-size: larger;
	color: var(--primary-color);
}
@media screen and (min-width: 768px) {
	#contents section.services div.description p {
		margin-bottom: 4em;
		line-height: 2.25;
	}
	#contents section.services div.services div.service {
		margin-bottom: 3em;
		padding-top: 340px;
	}
	#contents section.services div.services div.service div.image {
		width: 560px;
		height: 340px;
		padding: 0;
	}
	#contents section.services div.services div.service div.text {
		margin: -300px 0 0;
		padding: 3em 3em 2em;
	}
	#contents section.services div.services div.service div.text div.title {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		align-items: center;
		gap: 1em;
	}
	#contents section.services div.services div.service div.text div.supple {
		padding: 0;
	}
	#contents section.services div.services div.service div.text div.supple br {
		display: none;
	}
	#contents section.services div.services div.service div.text div.number {
		height: auto;
		margin: 0;
		font-size: 2.1rem;
	}
	#contents section.services div.services div.service div.text div.supple + div.number {
		height: auto;
	}
	#contents section.services div.services div.service div.text div.number strong {
		font-size: 5.6rem;
	}
	#contents section.services div.services div.service div.text h3 {
		margin-top: 1em;
		font-size: 2.8rem;
		line-height: 1.75;
	}
	#contents section.services div.services div.service div.text p {
		line-height: 2;
	}
	#contents section.services div.services div.service div.text img {
		top: 15px;
		width: 20%;
	}
	#contents section.services div.services div.service:nth-child(odd)  { padding-left: 0; padding-right: 3%;}
	#contents section.services div.services div.service:nth-child(even) { padding-right: 0; padding-left: 3%;}
	#contents section.services div.services div.service:nth-child(odd)  div.image { left: 8%;}
	#contents section.services div.services div.service:nth-child(even) div.image { right: 8%;}
	#contents section.services div.services div.service:nth-child(odd) div.text {
		margin-left: calc(8% + 400px);
		padding-left: 200px;
	}
	#contents section.services div.services div.service:nth-child(even) div.text {
		margin-right: calc(8% + 400px);
		padding-right: 200px;
		padding-left: 4em;
	}
	#contents section.services div.services div.service:nth-child(odd)  div.text div.supple strong { margin-left: 0;}
	#contents section.services div.services div.service:nth-child(even) div.text div.supple strong { margin-right: auto;}
	#contents section.services div.services div.service:nth-child(odd)  div.text div.number { justify-content: flex-start;}
	#contents section.services div.services div.service:nth-child(even) div.text div.number { justify-content: flex-start;}
	#contents section.services div.services div.service:nth-child(odd) div.text img { right: auto; left: calc(8% + 920px);}
	#contents section.services div.services div.service:nth-child(even) div.text img { left: auto; right: calc(8% + 620px);}
	#contents section.services p.andmore {
		margin: 4em 0 2em;
	}
}

/*  profile  */
#contents section.profile div.body div.image {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 80%;
	background-size: cover;
	background-position: center center;
}
#contents section.profile div.body div.image img {
	position: absolute;
}
#contents section.profile div.body div.image img:nth-child(1) {
	top: -2.5em;
	left: -10px;
	width: 30%;
}
#contents section.profile div.body div.image img:nth-child(2) {
	bottom: 20%;
	right: -10px;
	width: 50%;
}
#contents section.profile div.body div.text div.name {
	color: var(--primary-color);
	font-family: serif;
}
#contents section.profile div.body div.text div.name p.name strong {
	margin-right: 0.25em;
	font-size: 2.8rem;
	font-weight: normal;
}
#contents section.profile div.body div.text p.profile {
	line-height: 1.75;
}
#contents section.profile div.books h3 {
	margin-top: 2em;
	color: var(--primary-color);
	text-align: center;
}
#contents section.profile div.books ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#contents section.profile div.books ul li {
	width: 50%;
	margin: 0;
	padding: 0.5em;
	list-style: none;
	box-sizing: border-box;
	font-size: 1.5rem;
}
#contents section.profile div.books ul li img {
	display: block;
	width: 70%;
	margin: 0 auto;
	box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.3);
}
#contents section.profile div.books ul li span {
	display: block;
	width: fit-content;
	padding: 0.5em 1.5em;
	margin: 1.5em auto;
	background-color: var(--primary-color);
	color: #ffffff;
	border-radius: 3em;
}
#contents section.profile div.books ul li p {
	margin-top: 0;
	color: var(--primary-color);
}
@media screen and (min-width: 768px) {
	#contents section.profile div.body {
		display: flex;
	}
	#contents section.profile div.body div.image {
		width: 35%;
		padding-top: 40%;
	}
	#contents section.profile div.body div.text {
		width: 60%;
		padding-left: 3em;
		box-sizing: border-box;
	}
	#contents section.profile div.body div.image img:nth-child(1) {
		left: -15%;
	}
	#contents section.profile div.body div.image img:nth-child(2) {
		bottom: -20px;
		width: 70%;
	}
	#contents section.profile div.body div.text p:first-child {
		margin-top: 0;
	}
	#contents section.profile div.books ul {
		flex-wrap: nowrap;
	}
	#contents section.profile div.books ul li {
		
	}
	#contents section.profile div.books ul li img {
		width: 95%;
	}
}

/*  overiview  */
#contents section.overview {
	background-color: var(--half-color);
}
#contents section.overview dl.information {
	background-color: var(--primary-color);
}
#contents section.overview dl.information dt {
	color: #ffffff;
	text-align: center;
}
#contents section.overview dl.information dd {
	display: block;
	background-color: #ffffff;
}
#contents section.overview dl.information dd p,
#contents section.overview dl.information dd ul {
	margin: 0;
}
@media screen and (max-width: 767px) {
	#contents section.overview dl.information dt {
		padding: 0.75em;
	}
	#contents section.overview dl.information dd {
		margin: 0;
		padding: 1em;
	}
}

/*  flow  */
#contents section.flow ol li {
	position: relative;
	display: flex;
	align-items: flex-start;
	margin: 0 0 1.5em;
	padding: 1em;
	background-color: var(--half-color);
	list-style: none;
}
#contents section.flow ol li:after {
	content: '';
	position: absolute;
	bottom: -2em;
	display: block;
	width: 1px;
	height: 2.5em;
	margin-left: 1em;
	background-color: var(--primary-color);
	z-index: 1;
}
#contents section.flow ol li:last-child:after {
	content: none;
}
#contents section.flow ol li div.step {
	width: fit-content;
	margin-right: 1em;
	font-family: serif;
	color: var(--primary-color);
	line-height: 1.25;
	text-align: center;
}
#contents section.flow ol li div.step span {
	display: block;
	font-size: 4.0rem;
}
#contents section.flow ol li p {
	margin: 0;
}
@media screen and (min-width: 768px) {
	#contents section.flow ol li {
		align-items: center;
		padding: 1.5em 2em;
	}
	#contents section.flow ol li div.step {
		display: flex;
		align-items: center;
		gap: 0.25em;
		margin-right: 2em;
	}
}

/*  entry  */
#contents section.entry {
	padding: 1em 0;
	background-color: var(--half-color);
}
#contents section.entry div.terms {
	height: 320px;
	margin-bottom: 1em;
	padding: 3em;
	background-color: #ffffff;
	overflow: auto;
	box-sizing: border-box;
}
#contents section.entry div.terms h3:first-child {
	margin-bottom: 1em;
	text-align: center;
}
#contents section.entry div.agree label {
	display: flex;
	gap: 0.5em;
}
#contents section.entry div.agree a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: fit-content;
	margin: 0 auto;
	padding: 1em 3em;
	background-color: var(--primary-color);
	color: #ffffff;
	opacity: 0.5;
}
#contents section.entry div.agree a[href] {
	opacity: 1;
}
@media screen and (min-width: 768px) {
	#contents section.entry {
		padding: 3em 0;
	}
	#contents section.entry div.agree {
		text-align: center;
	}
	#contents section.entry div.agree label {
		justify-content: center;
	}
}





/*

    Toppage

*/

/*  common  */
body.toppage section {
	padding: 3em 0;
}
body.toppage a.more {
	position: relative;
	display: block;
	width: fit-content;
	margin: 1.5em auto;
	padding: 1.25em 5em;
	border: 1px var(--primary-color) solid;
	line-height: 1;
}
body.toppage a.more:after {
	content: '';
	position: absolute;
	right: -2.5em;
	top: calc(1.5em + 2px);
	display: block;
	width: 5em;
	height: 3px;
	border-bottom: 1px var(--primary-color) solid;
	border-right: 1px var(--primary-color) solid;
	transform: skewX(45deg);
}
body.toppage a.more.light {
	border-color: #ffffff;
	color: #ffffff;
}
body.toppage a.more.light:after {
	border-bottom: 1px #ffffff solid;
	border-right: 1px #ffffff solid;
}
body.toppage footer.global {
	margin-top: 1em;
	border: none;
}

/*  Mv  */
body.toppage #contents section.mv {
	width: 100%;
	aspect-ratio: 1 / 1.60;
	background-image: url('../images/toppage/mv-narrow.webp');
	background-size: cover;
}
body.toppage #contents section.mv img {
	width: 50%;
	margin: 5% 0 0 10%;
}
body.toppage #contents section.mv div.name {
	margin-top: -0.5em;
	font-size: 5.8rem;
	font-family: serif;
	color: var(--primary-color);
	text-align: center;
	line-height: 1;
}
body.toppage #contents section.mv div.name span {
	display: block;
	margin-top: 0.75em;
	font-size: 3.2rem;
}
body.toppage #contents section.mv div.copy {
	margin-top: 1em;
	color: var(--primary-color);
	text-align: center;
	font-size: 2.1rem;
	font-family: serif;
	letter-spacing: 0.125em;
	line-height: 1.75;
}
@media screen and (min-width: 768px) {
	body.toppage #contents section.mv {
		margin-bottom: 3em;
		aspect-ratio: 2.5 / 1;
		background-image: url('../images/toppage/mv.webp');
	}
	body.toppage #contents section.mv img {
		width: 20%;
	}
	body.toppage #contents section.mv div.name {
		width: 80%;
		margin: 0 auto;
		font-size: 7.6rem;
		text-align: left;
	}
	body.toppage #contents section.mv div.name br {
		display: none;
	}
	body.toppage #contents section.mv div.name span {
		margin: 0.5em 0 0 -0.5em;
		font-size: 3.6rem;
	}
	body.toppage #contents section.mv div.copy {
		width: 80%;
		margin: 2em auto 0;
		text-align: left;
		font-size: 3.0rem;
	}
}

/*  services  */
body.toppage #contents section.services {
	padding: 0;
	background-color: transparent;
}
body.toppage section.services ul li {
	margin: 0;
	padding: 0.5em 1em;
	list-style: none;
}
body.toppage section.services ul li a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1.6 / 1;
	padding: 2em;
	color: #ffffff;
	background-size: cover;
	box-sizing: border-box;
	text-align: center;
	font-size: 1.5rem;
}
body.toppage section.services ul li.ninestar a { background-image: url('../images/toppage/service_ninestar.webp');}
body.toppage section.services ul li.calendar a { background-image: url('../images/toppage/service_calendar.webp');}
body.toppage section.services ul li a div:after {
	position: absolute;
	width: 50%;
}
body.toppage section.services ul li.ninestar a div:after { content: url('../images/toppage/service_ninestar.svg'); top: -2em; left: -1em;}
body.toppage section.services ul li.calendar a div:after { content: url('../images/toppage/service_calendar.svg'); bottom: -2em; right: -1em;}
body.toppage section.services ul li a h3 {
	font-size: 2.4rem;
	font-family: serif;
	letter-spacing: 0.0125em;
}
body.toppage section.services ul li a span.more {
	display: flex;
	align-items: center;
	justify-content: center;
}
body.toppage section.services ul li a span.more:after {
	content: '';
	display: block;
	width: 5em;
	height: 3px;
	margin-left: 1em;
	margin-top: -2px;
	border-bottom: 1px #ffffff solid;
	border-right: 1px #ffffff solid;
	transform: skewX(45deg);
}
@media screen and (max-width: 767px) {
	body.toppage section.services ul li a br.adjust2 {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	body.toppage section.services ul {
		display: flex;
		margin: 1em -1.5em;
	}
	body.toppage section.services ul li {
		width: 50%;
		padding: 0 1.5em;
	}
	body.toppage section.services ul li a br.adjust {
		display: none;
	}
	body.toppage section.services ul li.ninestar a div:after { top: -2em; left: -4em;}
	body.toppage section.services ul li.calendar a div:after { bottom: -2em; right: -4em;}
}

/*  column  */
@media screen and (min-width: 768px) {
	body.toppage section.articles ul.articles {
		display: flex;
		align-items: flex-start;
		gap: 2.5em;
	}
	body.toppage section.articles ul.articles li {
		width: 33.33%;
	}
}

/*  links  */
body.toppage #contents section.links {
	padding-top: 0;
}
body.toppage #contents section.links ul li {
	margin: 0 0 2em;
	background-color: var(--half-color);
	box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.2);
	list-style: none;
}
body.toppage #contents section.links ul li div.name {
	position: relative;
	min-height: 80px;
	padding: 1em;
	background-color: #ffffff;
	box-sizing: border-box;
}
body.toppage #contents section.links ul li:nth-child(1) div.name { min-height: 160px;}
body.toppage #contents section.links ul li:nth-child(2) div.name { min-height: 160px;}
body.toppage #contents section.links ul li:nth-child(3) div.name { min-height: 160px;}
body.toppage #contents section.links ul li div.name img {
	position: absolute;
	top: 0;
	right: 0;
}
body.toppage #contents section.links ul li div.name span {
	display: block;
}
body.toppage #contents section.links ul li div.name span.en {
	margin-bottom: 0.25em;
	font-family: serif;
	font-size: 2.4rem;
	line-height: 1.25;
}
body.toppage #contents section.links ul li div.description {
	padding: 1em;
	color: #333333;
}
body.toppage #contents section.links ul li div.description p {
	margin: 0;
	line-height: 1.75;
}
body.toppage #contents section.links ul li div.description span.more {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: var(--primary-color);
}
body.toppage #contents section.links ul li div.description span.more:before {
	content: '';
	display: block;
	width: 3em;
	height: 3px;
	margin-right: 0.75em;
	border-bottom: 1px var(--primary-color) solid;
	border-right: 1px var(--primary-color) solid;
	transform: skewX(45deg);
}
@media screen and (min-width: 768px) {
	body.toppage #contents section.links ul {
		display: flex;
		gap: 2.25em;
	}
	body.toppage #contents section.links ul li {
		width: 33.33%;
	}
	body.toppage #contents section.links ul li div.description p {
		font-size: 1.4rem;
		line-height: 1.75;
	}
}

/*  invitation  */
body.toppage #contents section.invitation {
	padding: 1em 0;
	background-image: url('../images/toppage/invitation_bg-narrow.jpg');
	background-size: cover;
	background-position: center center;
	color: #ffffff;
}
body.toppage #contents section.invitation h2 {
	color: #ffffff;
}
body.toppage #contents section.invitation div.image {
	position: relative;
	width: 75%;
	height: 0;
	padding-top: 55%;
	margin: 2em auto;
	background-size: cover;
}
body.toppage #contents section.invitation div.image img {
	position: absolute;
	left: -10%;
	top: -15%;
	width: 50%;
}
body.toppage #contents section.invitation p {
	text-align: center;
	line-height: 1.75;
}
@media screen and (min-width: 768px) {
	body.toppage #contents section.invitation {
		padding: 3em 0;
		background-image: url('../images/toppage/invitation_bg.jpg');
	}
	body.toppage #contents section.invitation div.invitation {
		position: relative;
	}
	body.toppage #contents section.invitation div.invitation div.image {
		position: absolute;
		top: 2.5em;
		right: 0;
		width: 490px;
		height: 360px;
		margin: 0;
		padding: 0;
	}
	body.toppage #contents section.invitation div.invitation h2,
	body.toppage #contents section.invitation div.invitation p {
		text-align: left;
	}
	body.toppage #contents section.invitation div.invitation a {
		margin-left: 0;
		margin-top: 3em;
	}
	body.toppage #contents section.invitation div.invitation h2 {
		padding-top: 1em;
	}
	body.toppage #contents section.invitation div.invitation p {
		line-height: 2;
	}
}