@charset "UTF-8";

/* 共通部分 -------------------------- */
html {
	font-size: 100%;
}

body {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #000;
    background-color: #ffffff;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}

html { scroll-behavior: smooth;}

/* HEADER -------------------------- */

.main-nav {
	display: flex;
	font-size: 1.25rem;
	text-transform: uppercase;
	margin-top: 12px;
	margin-right: 20px;
	list-style: none;
}
header {
	position: fixed;  /* 位置を固定する */
  top: 0;  /* 固定する位置を指定 */
  left: 0;  /* 固定する位置を指定 */
  display: flex;
	justify-content: space-between;
	width: 100%;
  background: rgb(255 255 255 / 50%);
  z-index: 99;
}

.main-nav li {
	margin-left: 36px;
}

.main-nav a {
	color: #000;
}

.main-nav a:hover {
	color: #0bd;
}


.wrapper {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 4%;
}


.big-bg {
	background-size: cover;
	background-position: top;
}

/* HOME -------------------------- */
.home-content {
	text-align: center;
	positino: relative;
}


#home {
	background-image: linear-gradient(#010066, #ffffff);
	background-blend-mode: luminosity;
	min-height: 100vh;
}

#treeshadow {
	width:150px;
    height:300px;
	background-image:url("../parts/treeshadow.png");
    background-repeat: no-repeat;
    background-position:50% 50%;
    background-size:contain;
    margin: 0 auto;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 5;
}

#tree {
    width:150px;
    height:300px;
	background-image:url("../parts/tree.png");
    background-repeat: no-repeat;
    background-position:50% 50%;
    background-size:contain;
    margin: 0 auto;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 4;
}

#plugoff {
    width:50px;
    height:50px;
    background-image:url("../parts/lightoff.png");
    background-repeat: no-repeat;
    background-position:50% 50%;
    background-size:contain;
    margin: 0 auto;
    position: absolute;
    top: calc(60% + 82px);
    left: calc(50% + 85px);
    transform: translateY(-50%) translateX(-50%);
    z-index: 3;
}

#plugon {
    width:50px;
    height:50px;
    background-image:url("../parts/lighton.png");
    background-repeat: no-repeat;
    background-position:50% 50%;
    background-size:contain;
    margin: 0 auto;
    position: absolute;
    top: calc(60% + 82px);
    left: calc(50% + 85px);
    transform: translateY(-50%) translateX(-50%);
    z-index: 2;
    visibility: hidden;
}
/* 見出し */
.page-title {
    font-size: 4rem;
    font-family: 'Philosopher', serif;
    font-weight: normal;
    position: absolute;
    line-height: 1;
    top: 25%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

span{
	color: #010066;
}

/* ボタン */
.down {
    width:50px;
    height:50px;
    background-image:url("../parts/scdown.png");
    background-repeat: no-repeat;
    background-position:50% 50%;
    background-size:contain;
    filter: brightness(0) saturate(100%) invert(51%) sepia(11%) saturate(2270%) hue-rotate(175deg) brightness(94%) contrast(87%);
    margin: 0 auto;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 4;
}

.down a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

.contact {
	width:100%;
    height:500px;
    background: #000;
}