@charset "UTF-8";
/* default */

/*	reset
------------------------------------------------------------ */ 
@import url("reset.css");

/*	elements
------------------------------------------------------------ */ 
@import url("elements.css");

/*	form
------------------------------------------------------------ */ 
@import url("form.css");

/*	nav
------------------------------------------------------------ */ 
@import url("nav.css");

/*	font
------------------------------------------------------------ */ 
@font-face {
  font-family: "Venera100";
  src: url("../font/venera/Venera-100.otf") format('opentype');
  font-weight: 100;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Venera500";
  src: url("../font/venera/Venera-500.otf") format('opentype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Venera900";
  src: url("../font/venera/Venera-900.otf") format('opentype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

/* links
------------------------------------------------------------ */
a:link { text-decoration: underline; color: #000; }
a:visited { text-decoration: underline; color: #000;}
a:hover { text-decoration: underline;color: #000;}
a:active { text-decoration: underline; color: #000;}

/* body
------------------------------------------------------------ */
body {
	background: #fff;
	font-size:14px;
	line-height:160%;
	color:#000;
	font-family: YuGothic,Helvetica,"serif";
	width: 100vw;
    overflow-x: hidden;
}

/* header
------------------------------------------------------------ */
header { width: 100%; height: 80px; position: sticky; top: 0; z-index: 999; padding: 10px 0; background:rgba(255,255,255,0.6);}
header #header_inner { width: 1200px; margin: 0 auto; position: relative;}
header #header_inner h1, header #header_inner #logo { width: 140px; height: 80px; position: absolute; left: 0;}

header #header_inner nav {
	position: absolute;
	right: 130px;
	top: 6px;
	font-family: "Venera500", sans-serif;
	font-size: 76%;
 font-optical-sizing: auto;
 font-weight:normal;
 font-style: normal;
}
header #header_inner nav ul{ text-align: right;}
header #header_inner nav ul li {
	display: inline-block;
	margin-right: 4px;
}
header #header_inner nav ul li:last-child { margin-right: 0;}
header #header_inner nav ul li a{
	display: block;
	background:rgba(240,240,240,0.8);
	color: #000;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	padding: 8px 20px;
	border-radius: 10px;
	box-sizing: border-box;
}
header #header_inner nav ul li a:hover {background:#ffe33f; color: #000; text-decoration:none;}
header #header_inner nav ul li a:active {background:#ffe33f; color: #000; text-decoration:none;}
header #header_inner nav ul li a:link    {text-decoration:none;}
header #header_inner nav ul li a:visited {text-decoration:none;}
header #header_inner nav ul li a.selected {background:#ffe33f; color: #000; text-decoration:none;}

header #sub_nav { position: absolute; right: 0;}
header #sub_nav ul {display: flex;}
header #sub_nav ul li:first-child{margin-right: 10px;}

.banners { width: 1200px; margin: 100px auto;}
.banners ul { text-align: center; margin-bottom: 40px;}
.banners ul li { display: inline-block;}

@media screen and (max-width:1200px){
	header #header_inner { width: 90%;}
	header #header_inner nav {
		position: absolute;
		right: 70px;
		top: 0;
	}
	.banners { width: 90%; margin: 0; padding: 10px 5%; background: white;}
	.banners ul { text-align: center; margin-bottom: 40px;}
	.banners ul li { display: inline-block; margin-bottom: 20px;}
}

/* sns
------------------------------------------------------------ */
#sns{ padding: 100px 0 0; background: white;}
#sns ul { text-align: center;}
#sns ul li { display: inline; margin-right: 20px;}
#sns ul li:last-child{margin-right: 0;}
#sns ul li a img {
    -webkit-filter: grayscale(1);
    filter: gray;
    filter: grayscale(1);
    opacity: 0.2;
}
#sns ul li:first-of-type a img, #sns ul li:last-of-type a img { 
	opacity: 0.35;
}
#sns ul li a:hover img {
	-webkit-filter: grayscale(0); /* Webkit */
	filter: none; /* IE6-9 */
	filter: grayscale(0); /* W3C */
	opacity: 1;
}

@media screen and (max-width:1200px){
	#sns{ padding: 60px 0; }
}

/* page top, back
------------------------------------------------------------ */ 
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	border-radius: 50%;
	background:rgba(0,0,0,0.2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	z-index:1000;
}
#pageBack {
	position: fixed;
	bottom: 20px;
	left: 20px;
	border-radius: 50%;
	background:rgba(0,0,0,0.2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Footer
------------------------------------------------------------ */
footer { width: 100%; background: #122332; padding: 20px 0 100px;}
footer #footer_inner { width: 1200px; margin:  0 auto; color: #fff; font-family: "Venera500"; font-size: 70%;}
footer #footer_inner #footer_text{ float: left;}
footer #footer_inner #footer_text a { color: #fff; text-decoration: underline;}
footer #footer_inner #copyright{ float: right;}

@media screen and (max-width:1200px){
	footer #footer_inner { width: 90%;}
}