@charset "utf-8";

html {
	min-height: 100%;
}

/* top */
#top-page {
	width: 960px;
  margin: 2%;
  padding: 5%;
  font-family: 'Raleway', sans-serif;
  font-family: 'Noto Serif JP', serif;
	background-image: linear-gradient(0deg, rgba(215, 97, 53,0.25) 0%, rgba(215, 97, 53,0.25) 14.286%,rgba(235, 145, 22,0.25) 14.286%, rgba(235, 145, 22,0.25) 28.572%,rgba(228, 129, 32,0.25) 28.572%, rgba(228, 129, 32,0.25) 42.858%,rgba(208, 80, 63,0.25) 42.858%, rgba(208, 80, 63,0.25) 57.144%,rgba(222, 113, 42,0.25) 57.144%, rgba(222, 113, 42,0.25) 71.43%,rgba(202, 64, 73,0.25) 71.43%, rgba(202, 64, 73,0.25) 85.716%,rgba(195, 48, 83,0.25) 85.716%, rgba(195, 48, 83,0.25) 100.002%),linear-gradient(90deg, rgba(215, 97, 53,0.25) 0%, rgba(215, 97, 53,0.25) 14.286%,rgba(235, 145, 22,0.25) 14.286%, rgba(235, 145, 22,0.25) 28.572%,rgba(228, 129, 32,0.25) 28.572%, rgba(228, 129, 32,0.25) 42.858%,rgba(208, 80, 63,0.25) 42.858%, rgba(208, 80, 63,0.25) 57.144%,rgba(222, 113, 42,0.25) 57.144%, rgba(222, 113, 42,0.25) 71.43%,rgba(202, 64, 73,0.25) 71.43%, rgba(202, 64, 73,0.25) 85.716%,rgba(195, 48, 83,0.25) 85.716%, rgba(195, 48, 83,0.25) 100.002%),linear-gradient(45deg, rgba(215, 97, 53,0.25) 0%, rgba(215, 97, 53,0.25) 14.286%,rgba(235, 145, 22,0.25) 14.286%, rgba(235, 145, 22,0.25) 28.572%,rgba(228, 129, 32,0.25) 28.572%, rgba(228, 129, 32,0.25) 42.858%,rgba(208, 80, 63,0.25) 42.858%, rgba(208, 80, 63,0.25) 57.144%,rgba(222, 113, 42,0.25) 57.144%, rgba(222, 113, 42,0.25) 71.43%,rgba(202, 64, 73,0.25) 71.43%, rgba(202, 64, 73,0.25) 85.716%,rgba(195, 48, 83,0.25) 85.716%, rgba(195, 48, 83,0.25) 100.002%),linear-gradient(90deg, rgb(32, 32, 32),rgb(155, 155, 155));
	font-size: 16px;
}

#wrap {
	background-color: rgba(255,255,255,0.8);
	margin: 2% auto;
	padding: 10px;
	width: 60%;
}

.name {
	font-size: 2.0em;
}

.link {
  text-align: center;
  display: inline-block;
  list-style: none;
  color: #aaa;
	font-size: 1.2em;
  line-height: 1.2em;
	border-radius: 20px;
}

.link li {
  display: inline-block;
}

a {
  padding: 1.2em;
}

a:hover {
  color: #fff;
  background-color: #c7dc68;
}

a.anchor {
	display: block;
	padding-top: 3%;
	margin-top: -3%;
}

.attention {
	list-style: square;
}

h4 {
	font-size: 26px;
	border-bottom: 1px solid #bfd98d;
}

/* twst */
#twst-01 {
	font-family: 'Tangerine', cursive;
	font-size: 20px;
}

#fantasia {
	margin: 0;
	padding: 20px 10px;
	text-align: center;
}

#fantasia h2 {
	font-size: 60px;
}

#fantasia a {
	padding: 3px 8px;
	color: #666;
}

#fantasia a:hover {
	color: #fff;
	background-color: #666;
}

#fantasia .gray {
	margin: 1%;
	padding: 5px 10px;
	background-color: #f5f5f5;
}

#fantasia .red {
	margin: 1%;
	padding: 5px 10px;
	background-color: #ffe6e6;
}

#fantasia .yellow {
	margin: 1%;
	padding: 5px 10px;
	background-color: #fff9e6 ;
}

#fantasia .purple {
	margin: 1%;
	padding: 5px 10px;	
	background-color: #d9d5ed ;
}

#fantasia .orange {
	margin: 1%;
	padding: 5px 10px;	
	background-color: #ffede6 ;
}

#fantasia .navy {
	margin: 1%;
	padding: 5px 10px;
	background-color: #b8b8cc ;
}

#fantasia .blue {
	margin: 1%;
	padding: 5px 10px;
	background-color: #e6fdff ;
}

#fantasia .green {
	margin: 1%;
	padding: 5px 10px;
	background-color: #e6ffe6 ;
}

#fantasia .middle {
	margin: 50px auto;
	width: 500px;
	text-align: left;
}

.red01 {
background-color: #ffe6e6	
}

.back-white {
	margin: 20px 10px;
	padding: 5px;
	background-color: rgba(255,255,255,0.9);
}

/* mha */
#mha-01 {
	background-color: #a3b9e0;
	font-family: 'Sacramento', cursive;
}

#wish-star .top,
#wish-star .middle {
 	background-color: rgba(255,255,255,0.3);
	padding: 10px;
	text-align: center;	
}

#wish-star .top {
	margin-bottom: 20px;
}

#wish-star a {
	color: #1660e0;
	padding: 10px;
}

#wish-star a:hover {
	color: #e0d6a4;
	background-color: #a3b9e0;
}

#wish-star h2 {
	font-size: 38px;
}

#wish-star .book li {
	float: left;
	list-style: none;
	margin: 5px 5px 0 0 ;
}

#wish-star .clearfix:after {
	content: "";
	display: block;
	clear: both;
	
}


/* dc */

#secret .top{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: 10px 5px;
}

#secret h2 {
	color: #5f6366;
	font-size: 40px;
}

#secret .middle {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 5px;
	background-color: #eaf4fc;
}

#secret a {
	color: #65b8fc;
}

#secret a:hover {
	color: #999;
	background-color: #ebfcf3;
}

#secret {  
    background: linear-gradient(to bottom, #f6ebfc, #fcebed, #fcfceb, #ebfcef, #eaf4fc );
    background-size: 100%;
    background-repeat: no-repeat;
}

#secret:before{
    content:"";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: linear-gradient(to left top, rgba(255,255,255,0.2), #8e9499 85%);
}


/* fate */
#fate-01 {
	background-color: #001e43;
	font-size: 20px;
}

#fate {
	color: #001e43;
}

#fate .top {
	text-align: right;
}

#fate h2 {
	font-size: 50px;
	color: #e6f1ff;
}

#fate a {
	color: floralwhite;
}

#fate a:hover {
	color: #001e43;
	background-color: #e6f1ff;
}

#thnks {
  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;;
  text-transform: uppercase;
  display: block;
  font-size: 92px;
  color: #ffccdd;
  text-shadow: 0 8px 9px #ffb3cc, 0px -2px 1px #fff;
  font-weight: bold;
  letter-spacing: -4px;
  text-align: center;
  background: linear-gradient(to bottom, #fff0f5 0%,#fff0f0 100%);
  position: absolute;
  padding: 100px 200px;
  top: 20%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 20px;
}