@charset "UTF-8";
/* ヘッダー */



/* header --------------------------------------------------------------- */
#header {
	width: 100%;
	padding: 30px 0;
	z-index: 998;
	background-color: #ffffff;
	position: fixed;
	left: 0;
	top: 0;
	}

@media(max-width: 990px){
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* sns --------------------------------------------------------------- */
#sns {
	width: 30px;
	z-index: 999;
	position: fixed;
	left: 25px;
	top: 30px;
	}

	#snsa,
	#sns a img {
		width: 100%;
		}
	
@media(max-width: 990px){
	#sns {
		width: 23px;
		left: 25px;
		top: 33px;
		}
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* logo --------------------------------------------------------------- */
#logo {
	width: 210px;
	margin: 0 auto;
	z-index: 999;
	}

	#logo a,
	#logo a img {
		width: 100%;
		}
	
@media(max-width: 990px){
	#logo {
		position: relative;
		top: 5px;
		}
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* copy --------------------------------------------------------------- */
#copy {
	width: 120px;
	position: fixed;
	right: 100px;
	top: 32px;
	}

	#copy img {
		width: 100%;
		}

@media(max-width: 990px){
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* hamburger --------------------------------------------------------------- */
#hamburger {
	z-index: 99;
	position: fixed;
	left: 0;
	top: 0;
	}

#hamburger,
.hamburger {
	width: 100%;
	height: 50px;
	}

	#hamburger .hamburger {
		position: relative;
		}

		#hamburger .hamburger p {
			width: 135px;
			position: absolute;
			left: 5%;
			top: 50%;
			transform: translate(0,-40%);
			}

			#hamburger .hamburger p a,
			#hamburger .hamburger p a img {
				width: 100%;
				}
	
	#hamburger .sns {
		width: 30px;
		height: 30px;
		position: fixed;
		right: 60px;
		top: 55px;
		z-index: 998;
		}

	#hamburger .sns.active {
		display: none;
		}

		#hamburger a,
		#hamburger a img {
			width: 100%;
			}

@media(max-width: 990px){
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* ハンバーガーメニュー：トリガー */
#menu_trigger {
  cursor: pointer;
  z-index: 999;
  position: fixed;
  right: 25px;
  top: 20px;
  }

#menu_trigger,
#menu_trigger .menu_trigger {
  width: 50px;
  height: 50px;
  }

  #menu_trigger .menu_trigger,
  #menu_trigger .menu_trigger span {
    display: inline-block;
    transition: all .5s ease-out;
    box-sizing: border-box;
    }

  #menu_trigger .menu_trigger {
    box-sizing: border-box;
    position: relative;

		background-image: url("../../img/header/trigger.png");
		background-position: center center;
		background-size: 30px auto;
    }

		#menu_trigger .menu_trigger.active {
			background-image: none;
			}

		#menu_trigger .menu_trigger span {
      width: 40px;
			height: 2px;
			line-height: 1;
			background-color: #595858;
			position: absolute;
			left: 5px;
			opacity: 0;
      }

    #menu_trigger .menu_trigger.active span {
			opacity: 1;
      }

    #menu_trigger .menu_trigger span:nth-of-type(1) {
			top: 17px;
      }
			
			#menu_trigger .menu_trigger.active span:nth-of-type(1) {
				transform: translateY(7px) rotate(-45deg);
				}

    #menu_trigger .menu_trigger span:nth-of-type(2) {
			top: 32px;
      }

			#menu_trigger .menu_trigger.active span:nth-of-type(2) {
				transform: translateY(-7px) rotate(45deg);
				}
	
@media(max-width: 990px){
	#menu_trigger {
		right: 10px;
		}
	}

@media(min-width: 1px) and (max-width: 660px){
	}



/* ハンバーガーメニュー：メニュー部分 */
#menu {
	display: none;
	width: 30%;
	height: 100vh;
	/*height: -webkit-fill-available;*/
	background-image: url("../../img/header/bg.png");
	background-repeat: repeat;
	position: fixed;
	right: 0;
	top: 0;
	}

	#menu #menuinner {
		width: 90%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		}

		#menu #menuinner ul {
			margin-bottom: 50px;
			}

			#menu #menuinner ul li {
				margin-bottom: 20px;
				text-align: center;
				}

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

				#menu #menuinner ul li a {
					font-size: 22px;
					letter-spacing: 2px;
					font-family: "Jost", sans-serif;
					font-weight: 300;
					}
			
		#menu #menuinner ol {
			border-top: #b3b3b3 solid 2px;
			padding-top: 20px;
			}

			#menu #menuinner ol li {
				margin-bottom: 25px;
				}

			#menu #menuinner ol li:last-of-type {
				margin-bottom: 0;
				}

				#menu #menuinner ol li:first-of-type a img {
					width: 23px;
					}

				#menu #menuinner ol li a,
				#menu #menuinner ol li a span {
					color: #595858;
					line-height: 1.4;
					letter-spacing: 1px;
					font-family: "Jost", sans-serif;
					font-weight: 300;
					}

				#menu #menuinner ol li a {
					display: inline-block;
					font-size: 20px;
					}

					#menu #menuinner ol li a span {
						font-size: 14px;
						}

@media(max-width: 990px){
	#menu {
		width: 100%;
		}

			#menu #menuinner ul {
				margin-bottom: 20px;
				}

					#menu #menuinner ul li a {
						font-size: 20px;
						}

			#menu #menuinner ol {
				padding-top: 15px;
				}
			
				#menu #menuinner ol li {
					margin-bottom: 15px;
					}

					#menu #menuinner ol li a {
						font-size: 18px;
						}

						#menu #menuinner ol li a span {
							font-size: 13px;
							}
	}

@media(min-width: 1px) and (max-width: 660px){
	}