@charset "utf-8";
/* CSS Document */
body {
  background: url("./bg_top.png") no-repeat fixed;
	background-size:cover;
	background-position: center center;
}
#layout {
	width:100%;
	height: 100vh;
	position: relative;
}

.sp {
  display: none !important
}

.wrap {
	width:40vw;
	position: relative;
	left:0;
	height: 100vh;
}
.pc_outline {
	padding: 1rem;
	position: fixed;
	width: 50%;
	height: 100vh;
	top: 15%;
	left: 0;
	z-index: 999;
	text-align: center;
}
/*PCナビ*/
div.pc.nav {
	width: 15vw;
	position: fixed;
	right: 0;
	height: 100vh;
	bottom: 0;
}

div.pc.nav nav{
	position: absolute;
	width: 100%;
	height: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 999;
}
div.pc.nav nav ul{
	display: block;}

div.pc.nav nav ul li{
	list-style: none;
	padding:2% 0;
	font-weight: 600;
}

div.pc.nav nav ul li a{
	text-decoration: none;
}
div.pc.nav nav ul li a:hover{
	color:var(--title);
}
main {position: fixed;
	border-right: 10px solid #FFF;
	border-left: 10px solid #FFF;
	width: 25vw;
	min-width: 340px;
	margin: 0 auto;
	position: absolute;
	top: 0;
	background: #FFF;
	z-index: 30;
	top: 0%;
	left: 50%;
}
footer {
  font-size: 11px;
}

.pc_outline h3 {
  margin: 0 auto;
}
.pc_outline h1 {
  max-width: 600px !important;
  margin: 0 auto;
}

.koukoku {
  margin: 1rem auto;
  width: 320px;
  height: 60px;
  background: #ddd;
  text-align: center;
}
.koukoku2 {
  margin: 1rem auto;
  width: 250px;
  height: 250px;
  background: #ddd;
  text-align: center;
}

@media screen and (max-width:1500px) {
.pc_outline h1 {
  max-width: 400px !important;
	margin: 0 auto;}
}
@media screen and (max-width:1300px) {
 
	div.pc.nav nav{
		padding:1rem;
		font-size:0.9rem;
	}
	.pc_outline h1 {
  max-width: 320px !important;
 
  margin: -2em auto 0em;
}
}

@media screen and (max-width:1100px)
{
	.pc_outline h1 {
  max-width: 300px !important;
  margin: -1em auto 0em;
}
}

@media screen and (max-width:900px) {
  body {background: var(--base);}
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  .wrap {
    display: none !important;
  }
	#layout.flex{height: 0; display: block!important;}
	
  main {
	width:100%;
    max-width: 100%;
	min-width:100%;
    position: relative;
    top: 0;
    left: 0;
    border-right: 0px;
    border-left: 0px;
  }
}