@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;
	max-width: 90vw;
}

header{
	margin:0 auto;
	background-color: #0089A7;
	height: 12em;
	max-width: 1000vw;
}

h1{
	max-width: 100%;
	margin: 0 auto;

}

h1 img{
	margin-top: 0.5em;
	margin-left: 0.5em;
	width: 4em;
	height: 4em;
	}

h1::after{
	content: "Mogmog Wood Work";
	display: inline-block;
	height: 100%;
	margin-top: 1.5em;
	margin-bottom: 0;
	margin-left: 1em;
	color:#64363C;
	font-size:0em;
	font-weight:bold;
}


#snsicon{
	max-width: 90vw;
	width: 80em;
	display: inline-block;
	display: flex;
	justify-content: flex-end;
}

.sns-icon{
margin-top: 6em;
	font-size: 0.5em;
}


.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{
	max-width: 35vw;
	margin-top: 0;
	position: relative;
}

nav ul{
position: absolute;
	display: inline-block;
		display: flex;
	flex-wrap: wrap;
	width: 60vw;
	color:#64363C;
	font-size: 1em;
	text-align:center;
	padding-left: 0;
	margin-top: -5.5em;
	margin-left: 0;
}

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

.button {
  margin-right: 0.1em;
  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{
	max-width: 100%;
	height: 2em;
	color:#64363C;
	font-size:1em;
	background-color: #A5DEE4;

	}

#breadcrumb ul{
margin: 0 auto;
	padding-top: 8px;
	font-weight:bold;
	width: 60%;
}

#breadcrumb ul li{
	width:100%;
	text-align: end
}

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

main {
	max-width: 90vw;
	height: auto;
	margin: 0 auto;
position: relative;
}


.mainall .title h2{
	font-size:2em;
	color:#64363C;
    font-weight:bold;
		padding-top: 0;
		margin-left: 0.2em;
		margin-bottom: 0;

}

.mainall .title p{
display: inline-block;
max-width: 90vw;
font-family: "M PLUS 1p";
color: #64363C;
font-size: 1em;
padding-bottom: 10px;
border-bottom: dotted;
line-height: 1.5em;
	padding: 1em;
}


/*index*/


#watashi{
width: 90vw;
height: 50%;
display: flex;
justify-content: center;
	margin-top: 2.5em;
}

#watashi img{
display: inline-block;
width: 50vw;
height: auto;
margin: 0 auto;
position: absolute;
	z-index: 10
}
#watashi .rotate-anime{
width: 250px;
height: 250px;
	z-index: 10;
	margin-top: 1em;
}

#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{
margin-top: -50px;
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

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

.fuusenn{
	margin: 0 auto;
width: 95vw;
height: auto;
margin-top: 4em;
	margin-bottom: 2em;
	z-index: 5;
	
}
.kaisyagaiyou{
background-color: #A5DEE4;
	max-width: 100%;
	margin: 0 auto;
margin-top: 2em;
}

.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.5;
}

/*indexここまで*/



/*work*/

.namae1{
z-index: 50;
font-weight:bold;
	font-size: 2em;
	color: #0089A7;
	font-family: "Nico Moji";
	margin-left: 3.5em;
}

.Explanation1{
z-index: 50;
width: 90%;
	margin-left: 1em;
	margin-top: 26em;
  display: inline-block;
  border: 3px solid #64363C;
  border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
  color: #333;
}

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


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



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

/*taro*/
#slide2{
    overflow: hidden;
    display: block;
    width: 300px;
    height: 400px;
    margin-left:  6em;
	margin-bottom: 18em;
		z-index: 20;
}
#section_taro{
    width: 1500px;
    height: 100%;
		z-index: 25;
padding-left: 0;
	margin-top: 
}

#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:  6em;
		margin-bottom: 18em;
		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;
justify-content: center;
font-family: "M PLUS 1p";
color: #6A4028;

}



figure{
width: 14em;
font-size: 1.3em;
text-align: center;
display: inline-block;
}

/*成果物ここまで*/


/*workここまで*/


/*mycats*/

.catProfile{
margin: 0 auto;
padding-bottom: 2em;
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;
display: inline-block;
	width: 4em;
	margin-left: 9em;
	margin-top: -10em;
}
.catProfile img{
display: inline-block;
width: 70%;
height: 70%;
}
#zerop{
display: inline-block;
width: 95%;
height: 100%;
color: #6A4028;
margin-top: 0;
	font-family: "M PLUS 1p";
	line-height: 1.3;
	font-size: 1.2em;

}
#branp{
display: inline-block;
width: 90%;
height: 100%;
color: #6A4028;
	font-family: "M PLUS 1p";
	line-height: 1.3;
	font-size: 1.2em;
	margin-top: 60px;
	margin-bottom: 1em;
	margin-left: 1em;
}
#bran{
display: inline-block;
margin-left: 50px;
width: 70%;
height: 70%;
margin-top: 0;
}


#cat_select{
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}

#cat_select button{
display: inline-block;
width: 6em;
margin-top: 0.5em;
  border-radius: 40px;
  text-decoration: none;
  text-align: center;
	background-color: #0089A7;
	line-height: 50px;
	font-size: 2em;
	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-left: 1em;
	margin-right: 1em;
	width: 200px;
	height: 200px;
}


/*mycatsここまで*/

/*Contact*/



/*Contactここまで*/

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

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

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

.tabs li{
display: inline-block;
width: 4.7em;
 padding: 0.5em;
  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;
	display: flex;
	flex-wrap: wrap;
		padding-bottom: 1em;
		border-bottom: dotted;
}

#Career dt{
font-weight:bold;
text-align: center;
	font-size: 1.3em;
}
#Career dd{
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;
		display: flex;
	flex-wrap: wrap;
		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: 100%;
	margin: 0 auto;
	padding-top: 30px;
	background-color: #0089A7;
	font-size: 1em;
	display: flex;
	display: inline-flex;
	justify-content: center;
	position: relative;
	margin-top: 20px;
	}

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


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

footer p{
	text-align: center;
	position: absolute;
	width: 480px;
	padding-top: 0.5em;
	position: absolute;
	top: 0;
}

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