@charset "utf-8";
/* CSS Document */

body {
margin: 0px auto;
background: linear-gradient(to bottom, #94653a,#e3b43b) no-repeat;
font-family: Zen Maru Gothic;
max-width: 960px;
}

.wrapper{
	background: antiquewhite;
	height: 200vh;
	overflow: hidden;
	max-width: 960px;
	max-height: 1000px;	
	  
}

#deco01{
	
	position: absolute; z-index:3;
	transform: translateX(40%) translateY(250%);
	pointer-events: none;

} 
	
#deco02{
	
	position: absolute; z-index:3;
	transform: translateX(-100%) translateY(127%);
	pointer-events: none;

} 

#deco06{
	position: absolute; z-index:2;
	transform: translateX(10%) translateY(33%);
	pointer-events: none;
}

#deco07{
	position: absolute; z-index:3;
	transform: translateX(130%) translateY(141%);
	pointer-events: none;
}
	
.header{
	background: wheat;
	height:200px;
	overflow:hidden;
}
#head{  
	position: absolute;
	transform: translateX(0%) translateY(-30%);
	pointer-events: none;
	
}

.header p{
	position:absolute;z-index: 2;
	transform: translateX(80%)
	translateY(350%);
	font-family: "advent-pro";
	font-size: 25px;
	
}
.container{
	overflow:hidden;
	display:grid;
	grid-template-columns: 200px 500px 240px;
	grid-template-rows: 300px 800px;
	grid-gap: 10px;
	grid-template-areas:
  "side01 content content"
  "side02 content-02 content-03"
}

.container{
	background:url("background.jpg") no-repeat;
	background-size:100%;
}
#deco03{
    position: absolute; z-index:3;
	transform: translateX(100%) translateY(-10%);
	pointer-events: none;

}
#deco04{
    position: absolute; z-index:3;
	transform: translateX(500%) translateY(200%) rotate(90deg);
	pointer-events: none;

}

#deco05{
    position: absolute; z-index:4;
	transform: translateX(100%) translateY(470%) rotate(-20deg);
	pointer-events: none;
}

#side01{
	position: absolute; z-index:3;
	background: plum;
	padding: 10px;
	width:180px
}

#side02{
	grid-row-start:2;
	background: orange;
	overflow: scroll;
	padding:10px;
	height:500px;
}

#side01 p{
	line-height:20px;
	transform: rotate(10deg);
	padding:0px 10px;
}

ul{
	list-style: none
}

#side02 h1{
	text-align: center;
}

#content{
	grid-area: content;
	padding:20px;
	overflow:scroll;
	height:800px;
}

.content p{
	line-height: 20px;
}

#content iframe{
	width: 700px;
	height:400px;
	position: relative;
	left:0px;
	
}

#content-02{
	grid-area: content-02;
	background-color: darkgreen;
	height:400px;
	position: relative;
	bottom: -100px
	
}

#content-03{
	grid-area: content-03;
	background-color: lightyellow;
	height:400px;
	
}

.footer{
	height:100px;
	background: wheat;
	padding:10px 0px 20px 20px;
	position:sticky;
}