*{margin:0;box-sizing:border-box;}
body{
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  min-height:100vh;
  font-style: normal;
	background:#1E1C1B url(./bg3.webp) no-repeat center bottom;
	background-size:cover;
	background-attachment: fixed;
}

#wrap {
  position: relative;
  height:100%;
  max-width: 900px;
  min-height: 100vh;
  margin:0 auto;
  color: #fff;
  line-height: 1.7em;
  display:flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}
#before-login {
	width:100%;
	height:100%;
  max-width: 500px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  background-color: rgba(44, 45, 73, 0.9);
  border:4px double #A6992B;
  padding:40px;
}
#before-login form{
	margin:1em auto;
}
#error{
	display:block;
	width:100%;
	max-width: 500px;
	background:#961F1F;
	padding:5px;
	text-align:center;
}
#after-login {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  background-color: rgba(44, 45, 73, 0.8);
  padding: 20px;
}
#after-login h1 {margin: -20px -20px 10px -20px;}
#after-login h1 img {width:100%;}

#after-login section {margin-bottom: 2em;}

#after-login a{color:#aaccff;font-weight:bold;display:inline-block;}
#after-login a::after {
    transform: translateY(-25%) rotate(-45deg);
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
    display:inline-block;
    margin-left:6px;
}
#after-login a{font-size:150%;}
#after-login #dl a::after {
    width: 9px;
    height: 9px;
}
#after-login #dl p {line-height:2}

.center {text-align:center;}

.login {margin-top:1em;}
.login input[type="text"]{
	border:0;
	background-color: transparent;
	line-height:200%;
	border-bottom:2px solid #D4B93F;
	font-size:120%;
	width:10em;
	color:#fff;
	letter-spacing:3px;
	margin-bottom: 0.5em;
}
.login button{
	background-color: transparent;
	background-color: rgba(46, 75, 113, 0.5);
	border:2px solid #D4B93F;
	color:#D4B93F;
	padding:8px 15px;
	font-size:120%;
	border-radius:10px;
}
.login button:hover{cursor:pointer;}

h2{
    font-weight: 500;
    font-style: normal;
	font-size:150%;
    padding: 0px 40px;
    line-height:100%;
    display: inline-block;
    margin:1em 0 1em;
    position: relative;
    color:#F5D544;
}
#after-login h2{
    display: block;
    margin:1em auto 1em;
    padding: 20px 40px;
    border-top:2px solid #F5D544;
    text-align:center;
    border-bottom:2px solid #F5D544;
}
h2:before,
h2:after {
    content: "❖";
    font-weight: 400;
    position: absolute;
    font-size: 100%;
    top: 0px;
    color: #F5D544;
	text-shadow: none;
}
h2:before { left: 0;}
h2:after { right: 0;}

#after-login h2:before,
#after-login h2:after {
    top: 20px;
}

	@media screen and (max-width:767px){
		h2{padding: 0px 28px;}
	}
h3 {margin:2em 0 1em;font-size:130%;border-bottom:1px dashed #fff;padding-bottom:5px;}

h4 {margin:2em 0 1em;}

blockquote {
	white-space: pre-wrap;
	font-style: normal;
}
	@media screen and (min-width:768px){
		blockquote,
		section > p {margin: 0 50px;}
	}

.credit{font-size:88%;text-align:right;}
.credit + section{margin-top: -2em;}

#netabare {
	text-align:center;
	color:#F5F544;
	margin-top:8rem !important;
	margin-bottom:5rem !important;
}
#netabare p:first-child{
	font-weight:bold;
	font-size:150%;
}
	@media screen and (max-width:767px){
		#netabare p:first-child {font-size:120%;}
	}
em {
	color:#F5D544;
	font-style:normal;
}

details {
    margin: 1em 50px 0;
    border: 1px solid #fff;
    border-radius: 5px;
}

details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform .3s;
}

details[open] summary::after {
    transform: rotate(225deg);
}
details[open] summary {
	border-bottom:1px dashed #fff;
	margin-bottom:1em;
}

details p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0 2em 1.5em;
    transition: transform .5s, opacity .5s;
}

details[open] section > p {
    transform: none;
    opacity: 1;
}
details[open] section > p:last-child {
    padding-bottom:0 !important;
}
	@media screen and (max-width:767px){
		details{margin: 10px 0px;}
		details blockquote {margin: 0 20px;}
	}

section#peace-end blockquote {color:#FFD5D4;}

.art img{width:100%;}
#peace-end .right {color:#907473;text-align:right;opacity:0.6;}
#peace-end .right span{color:#FFD5D4;}

#banner {width:100%;text-align:center;margin:3em 0;}
#banner a img{border:10px solid #D6C29A;max-width:100%;}


#trueend {padding-bottom:4em;}
#trueend hr{height:2em;border:0;}
section#select{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
	}
section#select p{margin-bottom:2em;}

	@media screen and (max-width:767px){
		section#select{display:block;}
	}
section#select p:before,
.select-again:before{
	content:".";
	display:inline-block;
	vertical-align: middle;
	font-size:200%;
	opacity:0;
	color:rgba(0,0,0,0);
	width:1em;
    transition: opacity 0.5s;
}
section#select label:hover,
.select-again label:hover{
	cursor:pointer;
}
section#select p:hover:before,
.select-again:hover:before{
	content:"\0BB";
	color:#69DBE5;
	opacity:1;
}
section#select p label,
.select-again label{
	border-bottom:1px dashed #fff;
}
#after-login .select-again a{
	font-size:100% !important;
	color:transparent;
	text-decoration:none;
}
#after-login .select-again a:after{display:none;}

.select-end {
    margin: 0;
    transition: opacity 1s;
    opacity:0;
    height:0;
    position:relative;
}
.end-title {margin-top:2em;margin-bottom:2em;}
input[name="select"]{display:none;}
input:checked {border:1px solid #fff !important;}
input#wisdom:checked ~ #wisdom-end,
input#homie:checked ~ #homie-end,
input#family:checked ~ #family-end,
input#peace:checked ~ #peace-end{
	display:block;
    opacity: 1;
    height:auto;
    z-index:10;
}
input[name="select"]:checked ~ section#select{display:none;}
.select-again{text-align:center;margin-top:2em;
}
.pagetop {font-size:60%;text-align:right;text-decoration:none;z-index:20;position:relative;}
.pagetop a{color:#ddd !important;font-weight:500 !important;}
.pagetop a:after{display:none !important;}
#after-login .select-again a{
  animation: blinkAnime 1s infinite alternate;
}
@keyframes blinkAnime{
   0% { color: #fff }
 100% { color: #bbb }
}