@charset "UTF-8";

body{
font-family: 'Indie Flower', cursive;
	-webkit-font-smoothing:antialiased;
	background:#D7B98E;
	margin:0 auto 0 auto;
	line-height: 1;
}
body ul{
	list-style: none;
	padding-left: none;
	}
	
	
main{
	margin:0 auto;
	display:block;
}

header{
	margin:0 auto;
	background-color: #0089A7;
	height: 340px;
	width: 100%;
}

h1{
	display: flex;
	justify-content: flex-start;
	width: 1200px;
	margin: 0 auto;

}

h1 img{
	margin-top: 50px;
	margin-left: 50px;
	width: 250px;
	height: 250px;
	}

h1::after{
	content: "Mogmog Wood Work";
	display: inline-block;
	width: 1000px;
	height: 150px;
	margin: 100px 50px;
	margin-bottom: 0;
	color:#64363C;
	font-size:2.5em;
	font-weight:bold;
}


#snsicon{
	width: 1200px;
	height: 0px;
	position: relative;
	margin: 0 auto;
	display: flex;
	justify-content: flex-end;
}

.sns-icon{
	height: 50px;
	position: absolute;
	top: -195px;
	margin-right: 30px;
}


.fab.fa-instagram{
	color: #64363C;
}
.fab.fa-instagram:hover{
color: #A5DEE4;
}

.fab.fa-facebook-square{
	color: #64363C;}
.fab.fa-facebook-square:hover{
color: #A5DEE4;
}

.fab.fa-youtube{
	color: #64363C;}
.fab.fa-youtube:hover{
color: #A5DEE4;
}

nav{
	width: 1200px;
	margin: 0 auto;
	padding-left: 0px;
	margin-top: -140px;
}

nav ul{
	color:#64363C;
	font-size: 1.5em;
	text-align:center;
	display: flex;
	justify-content: flex-end;
}

nav ul li.navs{
	width: 50px;
	display: row;
	width:100px;
	margin: 0 auto;
	}

.button {
  margin-right: 30px;
  display: inline-block;
  padding: .40em 1em;
  border: 3px solid #6A4028;
  border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
  color: #333;
  text-decoration: none;
  text-align: center;
	background-color: #fff;
}
.button:hover{
background-color: #F9BF45;
}
.button:focus{
   background-color: #F9BF45; 
}


#breadcrumb{
	width: 100%;
	height: 40px;
	color:#64363C;
	font-size:1.5em;
	background-color: #A5DEE4;
	margin-top: -15px;
	}

#breadcrumb ul{
margin: 0 auto;
	padding-top: 8px;
	font-weight:bold;
	width: 1200px;
display: flex;
justify-content: center;
}

#breadcrumb li{
	width:150px;
	display: inline-block;
	text-align: center;
}

#breadcrumb a{
text-decoration: none;
}
/*ヘッダー要素ここまで*/
/*mainの箱*/

main {
	width: 1200px;
	height: auto;
	margin: 0 auto;
position: relative;
}


.mainall .title h2{
	font-size:3em;
	color:#64363C;
    font-weight:bold;
		padding-top: 30px;
		margin-left: 50px;
		margin-bottom: 0;

}

.mainall .title p{
display: inline-block;
width: 1200px;
font-family: "M PLUS 1p";
color: #64363C;
font-size: 1.2em;
padding-bottom: 10px;
border-bottom: dotted;
}


/*index*/


#watashi{
width: 1200px;
height: 700px;
display: flex;
justify-content: center;
}

#watashi img{
display: inline-block;
width: 360px;
height: 693px;
margin: 0 auto;
position: absolute;
	z-index: 10
}
#watashi .rotate-anime{
width: 600px;
height: 600px;
margin-top: 46.5px;
	z-index: 10
}

#watashi .rotate-anime:hover{
  animation: rotate-anime 5s linear infinite;
	animation-timing-function: ;
}
@keyframes rotate-anime {
  0%  {transform: rotate(0);}
  100%  {transform: rotate(360deg);}
}


#toha{
display: flex;
flex-wrap: wrap;
margin-top: -50px;
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

#toha.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

.fuusenn{
width: 1200px;
height: 561px;
margin-top: -600px;
	z-index: 5
}
.kaisyagaiyou{
background-color: #A5DEE4;
  border-radius: 400px;
	padding: 30px 60px;
	width: 250px;
	margin: 0 15px;

}

.kaisyagaiyou span{
font-family: 'Indie Flower', cursive;
	-webkit-font-smoothing:antialiased;
	font-weight:bold;
	font-size: 1.5em;
}
.kaisyagaiyou p{
display: inline-block;
font-family: "M PLUS 1p";
color: #64363C;
font-size: 1em;
line-height: 1.8;
}

/*indexここまで*/



/*work*/

.namae1{
position: absolute;
z-index: 50;
margin-left: 420px;
font-weight:bold;
	font-size: 2.5em;
	color: #0089A7;
	padding-bottom: none;
	font-family: "Nico Moji";
}

.Explanation1{
position: absolute;
z-index: 50;
margin-left: 400px;
width: 780px;
height: 230px;
margin-top: 100px;
  margin-right: 30px;
  display: inline-block;
  padding: .40em 1em;
  border: 3px solid #64363C;
  border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
  color: #333;
}

.Explanation1 p{
	background-color: #D7B98E;
font-size: 1.5em;
margin-top: 20px;
	color: #6A4028;
	font-family: "M PLUS 1p";
	line-height: 1.3;
}


/*お彫刻のスライド関連*/
/*kaeru*/



#slide1{
    position: relative;
    overflow: hidden;
    display: block;
    width: 300px;
    height: 400px;
    margin-left: 50px;
		z-index: 10;
}
#section_kaeru{
    position: absolute;
    width: 1500px;
    height: 100%;
		z-index: 5;
padding-left: 0;
}
#section_kaeru li{
    float: left;
    width: 300px;
}
.prevBtn1{
	position: absolute;
	top: 350px;
	color: #0089A7;
	z-index: 8;
}
.nextBtn1{
	position: absolute;
	top: 350px;
	right: 0px;
	color: #0089A7;
		z-index: 8;
}
.prevBtn1:hover{
	position: absolute;
	top: 350px;
	color: #A5DEE4;
}
.nextBtn1:hover{
	position: absolute;
	top: 350px;
	right: 0px;
	color: #A5DEE4;
	
}

/*taro*/
#slide2{
    position: relative;
    overflow: hidden;
    display: block;
    width: 300px;
    height: 400px;
    margin-left: 50px;
		z-index: 20;
}
#section_taro{
    position: absolute;
    width: 1500px;
    height: 100%;
		z-index: 25;
padding-left: 0;
}

#section_taro li{
    float: left;
    width: 300px;
}
.prevBtn2{
	position: absolute;
	top: 350px;
	color: #0089A7;
	z-index: 28;
}
.nextBtn2{
	position: absolute;
	top: 350px;
	right: 0px;
	color: #0089A7;
		z-index: 28;
}
.prevBtn2:hover{
	position: absolute;
	top: 350px;
	color: #A5DEE4;
}
.nextBtn2:hover{
	position: absolute;
	top: 350px;
	right: 0px;
	color: #A5DEE4;
}
/*me*/
#slide3{
    position: relative;
    overflow: hidden;
    display: block;
    width: 300px;
    height: 400px;
    margin-left: 50px;
		z-index: 30;
}
#section_me{
    position: absolute;
    width: 1500px;
    height: 100%;
		z-index: 35;
padding-left: 0;
}

#section_me li{
    float: left;
    width: 300px;
		z-index: 35;
}
.prevBtn3{
	position: absolute;
	top: 350px;
	color: #0089A7;
	z-index: 38;
}
.nextBtn3{
	position: absolute;
	top: 350px;
	right: 0px;
	color: #0089A7;
		z-index: 38;
}
.prevBtn3:hover{
	position: absolute;
	top: 350px;
	color: #A5DEE4;
}
.nextBtn3:hover{
	position: absolute;
	top: 350px;
	right: 0px;
	color: #A5DEE4;
}

/*ねこどあ*/


/*ねこどあここまで*/

/*成果物*/
.pastworks{
display: flex;
flex-wrap:wrap;
font-family: "M PLUS 1p";
color: #6A4028;

}



figure{
width: 14em;
font-size: 1.3em;
text-align: center;

}

/*成果物ここまで*/


/*workここまで*/


/*mycats*/

.catProfile{
overflow: hidden;
margin: 0 auto;
padding-bottom: 20px;
border-bottom: dotted;
color: #6A4028;
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.catProfile.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}





.catProfile span{
font-family: "Nico Moji";
font-size: 2em;
color: #0089A7;
}
.catProfile img{
display: inline-block;
width: 450px;
height: 450px;
}
#zerop{
display: inline-block;
width: 680px;
height: 280px;
color: #6A4028;
margin-top: 0;
	font-family: "M PLUS 1p";
	line-height: 1.3;
	font-size: 1.5em;
	float: right;
}
#branp{
display: inline-block;
width: 700px;
height: 210px;
color: #6A4028;
	font-family: "M PLUS 1p";
	line-height: 1.3;
	font-size: 1.5em;
	margin-top: 60px;
	margin-bottom: 0;
	float: left;
}
#bran{
display: inline-block;
margin-left: 50px;
width: 450px;
height: 450px;
float: right;
margin-top: -150px;
}


#cat_select{
display: flex;
justify-content: space-around;
margin-top: 20px;
}

#cat_select button{
display: inline-block;
width: 200px;
margin-top: 50px;
  padding: .40em 1em;
  border-radius: 40px;
  text-decoration: none;
  text-align: center;
	background-color: #0089A7;
	line-height: 50px;
	font-size: 3em;
	font-family: 'Indie Flower', cursive;
	font-weight:bold;
}
#cat_select button:focus{
   outline: 0;
   background-color: #A5DEE4;
}



#cat_select button:hover{
background-color: #A5DEE4;
}

#cat_select button:visited{
 background-color: #A5DEE4;
}


#cat_photo ul{
	padding-left: 0;
}
#cat_photo li{
display: inline-block;
	margin: 25px 18px;
}


/*mycatsここまで*/

/*Contact*/



/*Contactここまで*/

/*Profile*/
.tabs{
display: flex;
flex-direction: row;
margin-right: 1px;
padding-left: 0;
margin-bottom: 0;
}

.tabs a{
color: #6A4028;
text-decoration: none;
	font-size:1.5em;
	font-weight:bold;
	display: inline-block;
	width: inherit;
}

.tabs a:hover{
color: #0089A7;
}

.tabs li{
display: inline-block;
width: 100px;
 padding: .40em 1em;
  border: 3px solid #6A4028;
  border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
  text-align: center;
	background-color: #fff;
}


.tabs .current{
color: #0089A7;
}

.tabs li .current{
 background-color: #fff;
}

#p-contents div{
width: 120en;
height: 100%;
 padding: .40em 1em;
  border: 3px solid #6A4028;
  border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
	background-color: #A5DEE4;
color: #6A4028;
	font-family: "M PLUS 1p";
}
#p-contents div span{
    display: inline-block;
	font-weight:bold;
	font-size:1.5em;
    margin-bottom: 0.5em;
	}
#p-contents div p{
	font-size:1.1em;
    font-family: "M PLUS 1p";
    margin: 0.5em 0.5em;
    line-height: 1.3em;
	}

#p-contents div p i{
    text-decoration: line-through;
}

#p-contents div lu li{
	font-size:1.1em;
    font-family: "M PLUS 1p";
    margin: 0.5em 0.5em;
    line-height: 1.3em;
	}

#p-contents dl{
	font-size:1.1em;
    font-family: "M PLUS 1p";
    line-height: 1.3em;
		display: inline-block;
		padding-bottom: 1em;
		border-bottom: dotted;
}

#p-contents dt{
font-weight:bold;
width: 5em;

}
#p-contents dd{
width: 15em;
margin-left: 20px;
}
#p-contents dd.naiyou{
width: 40em;
}
#Character{
}

#Character img{
    margin-left: -4em;
		-webkit-transform: rotate(-15deg);
}


#Career a{
text-decoration: none;
}

#Career dl{
	font-size:1.1em;
    font-family: "M PLUS 1p";
    line-height: 1.3em;
		display: inline-block;
		padding-bottom: 1em;
		border-bottom: dotted;
}

#Career dt{
font-weight:bold;
width: 5em;
text-align: center;
}
#Career dd{
width: 15em;
margin-left: 20px;
}
#Career dd.naiyou{
width: 40em;
}


#Career dl{
margin-top: 2.5em;
display: flex;

}




#Game{}

.gamehard{
	margin-top: 1em;
}

#Game dl{
    font-family: "M PLUS 1p";
    line-height: 1.5em;
		display: inline-block;
		padding-bottom: 1em;
		border-bottom: dotted;
}

#Game dt{
	padding-left: 1em;
font-weight:bold;
width: 13em;
	text-align: center;
	font-size: 1.2em;
}
#Game dd{
width: 15em;
margin-left: 20px;
}

#Game img{
	display: inline-block;
	width: 120px;
	height: 120px;
}

#Game dd.naiyou{
width: 41em;
}


#Game dl{
margin-top: 2.5em;
display: flex;

}




#Comic{}
#Music{}






/*Profileここまで*/


/*フッター*/

footer{
	width: 100%;
	height: 350px;
	margin: 0 auto;
	padding-top: 30px;
	background-color: #0089A7;
	font-size: 1.5em;
	display: flex;
	display: inline-flex;
	justify-content: center;
	position: relative;
	margin-top: 20px;
	}

footer a{
	width: 200px;
	margin: 0 auto;
}


footer img{
	width: 1100px;
	height: 179px;
	margin: 0 auto;
	display: inline-flex;
	padding: 60px 30px;
}

footer p{
	text-align: center;
	position: absolute;
	width: 1200px;
	padding-top: 10px;
	position: absolute;
	top: 0;
}

footer .footerend{
	display: inline-block;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 300px;
	background-color: #A5DEE4;
	}