@charset "utf-8";

/* 
──────────────────────────────────────── */
div#page_header{}

h1{
	background:none;
	margin:0;
	height:auto;
	padding:0;
	position:relative;
	width:auto;
	text-indent:0;
}

h1 img{
	background:none;
	margin:0;
	height:auto;
	padding:0;
	position:relative;
	width:auto;
	text-indent:0;
}

address{
	background:#FFFBE7;
	font-size:140%;
	margin-top:1em;
	padding:20px;
}
	
div#page_body{
	margin-top:30px;
}

/* 
──────────────────────────────────────── */

#contents{
	background-color: rgb(18,34,58);
	background:url(img/background/star.png), -moz-linear-gradient(45deg, rgba(18,34,58,1) 0%, rgba(40,63,86,1) 50%, rgba(18,34,58,1) 100%);
	background:url(img/background/star.png), -webkit-linear-gradient(45deg, rgba(18,34,58,1) 0%,rgba(40,63,86,1) 50%,rgba(18,34,58,1) 100%);
	background:url(img/background/star.png), linear-gradient(45deg, rgba(18,34,58,1) 0%,rgba(40,63,86,1) 50%,rgba(18,34,58,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12223a', endColorstr='#12223a',GradientType=1 );
	padding:40px 0;
	width:700px;
}

/* 
──────────────────────────────────────── */

#keyvisual{
	background:#FFF;
	box-shadow:10px 10px 0 rgba(0,0,0,0.25);
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	margin:0 auto;
	padding:0 25px 25px;
	position:relative;
	width:625px;
}
	
#keyvisual::before {
	content:url(img/mainvisual/tape.png);
	position:absolute;
	left:50%; top:-33px;
	margin-left:-90px;
	z-index:15;
}
	
#keyvisual h1{
	background:rgba(255,255,255,1.00);
	display:table;
	padding:15px 20px 10px;
	position:relative;
	margin:0 auto -45px;
	order:1;
	z-index:10;
}

	
#keyvisual h1 + p{
	order:3;
	padding:20px 0 0;
}

#keyvisual p + p{
	position:absolute;
	bottom:80px;
	right:0px;
	z-index:8;
}
	
#keyvisual > img{
	order:2;
	position:relative;
	z-index:5;
}

/* 
──────────────────────────────────────── */

.wrap{
	margin:60px 0 0;
}

/* 
──────────────────────────────────────── */

#theme p{
	margin-top:30px;
}

#theme .photo{
	margin-top:30px;
	display:flex;
	justify-content:center;
}

#theme .photo li + li{
	margin-left:20px;
}

#theme .photo img{
	border:5px #FFF solid;
	vertical-align:bottom;
}

/* 
──────────────────────────────────────── */

#result{
	color:#FFF;
}


/* 
──────────────────────────────────────── */

#result h3,
#result p{
	width:565px;
	margin:0 auto;
	text-align:left;
	line-height:1.8;
}
	
#result h3{
	margin-top:30px;
	font-size:140%;
	font-weight:bold;
}

#result ul{
	text-align:center;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	margin:30px 0 0;
	padding:0 30px;
}

#result ul li{
	background:#FFF;
	box-shadow:0 0 5px 0 rgba(0,0,0,0.25);
	width:calc(33% - 28px);
	margin:0 15px 20px 0;
	padding:10px;
}

#result ul li:nth-child(3n){
	margin-right:0;
}

#result ul li:last-of-type {
	margin-bottom:0;
}

#result ul li img{
	width:100%;
	height:auto;
	vertical-align:bottom;
	margin-bottom:0.5em;
	transition:0.5s ease ;
}
	
#result ul li a{
	color:rgba(41,129,235,1.00);
}

#result ul li a:hover img{
	opacity:0.6;
}
			
/* 
──────────────────────────────────────── */

#contact{
	margin:60px 30px 0;
	background:rgba(255,255,255,0.80);
	padding:30px;
}


#contact h2,
#contact p{
	width:565px;
	margin:0 auto;
	text-align:left;
	line-height:1.8;
}
	
#contact h2{
	font-size:140%;
	font-weight:bold;
}

#contact h2 + p{
	font-size:130%;
}
	
/* 
──────────────────────────────────────── */

div#notes{
	background:#EEE;
	box-sizing:border-box;
	line-height:1.8;
	margin-left:0;
	padding:30px;
	text-align:left;
	width:700px;
}

div#notes h2{
	font-size:140%;
	font-weight:bold;
}

div#notes h2{
	margin-top:1rem;
}

div#notes ul{
	list-style:disc;
	margin-left:1.5em;
}