@charset "utf-8";
html {
	font-size: 62.5%;
}

body {
	font-family: 'Sawarabi Mincho', serif;
	font-size: 1rem;
	color: #666;
}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

/* ヘッダー */

#menu {
	width: 100%;
	height: 74px;
	z-index: 2;
	background-color: rgba(245,245,220,0.9);
	position: fixed;
}

h1 {
	float: left;
	margin-top: 20px;
	margin-left: 25px;
}

nav {
	float: right;
}

nav ul {
	width: 400px;
	display: flex;
}

nav ul li {
	border-right: 2px solid #999;
	margin-top: 30px;
	padding-right: 20px;
	padding-left: 20px;
}

nav ul li:last-child {
	margin-right: 0;
	padding-right: 0;
	border: none;
}

nav ul li a {
	font-size: 1.6rem;
	font-weight: bold;
	color: #666;
	text-decoration: none;
	text-align: center;
}


/* メイン */

.radius01 p img,
.radius02 p img {
	object-fit:cover;
}

section:hover {
	box-shadow: 10px 10px 10px #aaa; 
}

.leaf:hover {
	box-shadow: none; 
}

/* フッター */

footer ul {
	background-color: antiquewhite;
}

footer ul li a {
	text-decoration: none;
	color: #666;
}

footer p {
	display: block;
	padding: 3px 0 5px;
	background-color: orange;
	text-align: center;
}






/*========= スクロールダウンのためのCSS ===============*/

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置*/
  position:absolute;
  left:50%;
  bottom:10px;
    /*全体の高さ*/
  height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
  position: absolute;
  left:-20px;
  top: -50px;
    /*テキストの形状*/
  color: #333;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
	
	display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
	border: 1px dashed #333;
  text-align: center;
  line-height: 40px;
	
	
}

/* 線の描写 */
.scrolldown1::after{
  content:"";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #333;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}

/* レイアウト */

#header{
	width:　100%;
	height: 100vh;
	position: relative;
} 

#header:before{
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width:100%;
	height: 100vh;
  /*背景画像設定*/
	background: url("../images/orFlr.svg"), url("../images/main_bg.jpeg") no-repeat;
	background-size: cover;
	background-position: center;
}

#container{
  position: relative;
  z-index:　1;
  text-align: center;
}

@media screen and (max-width:768px){
    #header,
    #header:before{
  	height: 90vh;    
    }
}

/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
  -webkit-transition: 0.5s all;
  -moz-transition   : 0.5s all;
  transition        : 0.5s all;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #555;
}

.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}