@charset "utf-8";
/* ===基本レイアウト=== */
/*html{
	scroll-behavior: smooth;*//*スムーススクロール*/
/**{
	outline: 1px solid #f00;
}
*/

body{
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
header{
	width: 100%;
	height: 100px;
	background-color: rgba(85,107,47,0.7);
	position: fixed;/*位置固定*/
	top: 0;
	left: 0;
	z-index: 9999;/*最前面*/

}
.wrapper{
	max-width: 1000px;
	width: 100%;/*デバイスの幅が1000px以下の場合100%とする*/
	height: 100px;
	margin: 0 auto;/*左右中央*/
	display: flex;
	flex-wrap: wrap;/*横並びの要素がはみ出たら折り返す*/
	justify-content: space-between;
	padding: 0 10px;
}

header h1 a{
	color: #fff;
	text-decoration: none;
}
header img{
	width: 350px;
	height: auto;
	margin-top: 30px;
}

/*ヘッダーの動き*/
.hide{
	transform: translateY(-100%); /* 上に消えるようにする */
	transition: 0.5s;
}

#header{
    position: fixed; /* 固定して表示されるようにする */
    top: 0; /* 表示場所を一番上に */
    transition: 0.5s; /* スクロール時に一瞬で消えると物足りないので.hideの処理を0.5秒で行う */
    z-index: 100; /* 前面に表示されるようにする */
}


/*ナビゲーション*/
nav{
	width: 450px;
}
nav ul{
	width: 450px;
	height: 100px;
	display: flex;
	justify-content: space-between;/*リスト項目を横並び*/
	align-items: flex-end;/*ナビゲーションを天地下揃え*/
	list-style-type: none;
}
nav ul li a{
	font-family: 'Klee One', cursive;
	display: flex;
	width: 150px;
	height: 30px;
	justify-content: center;/*文字をボタンの左右中央*/
	align-items: center;/*文字をボタンの天地中央*/
	border-left: 1px solid #fff;
	color: #fff;
	text-decoration: none;/*リンクの下線を消す*/
	text-transform: uppercase;/*文字を大文字にする*/
	border-bottom: 2px solid transparent;/*透明の線を追加*/
}
nav ul li:last-child a{
	border-right: 1px solid #fff;/*ナビゲーションの右端に線を追加*/
}
nav ul li a:hover{
	border-bottom: 1px solid #fff;
	transition:linear 0.3s;/*0.3秒かけて徐々に線が現れる*/
}
#js-black-bg,#js-hamburger{
	display: none;
}


/*スライダー*/
body{
	width: 100%;
	/*height: 100vh;*/
	/*margin-bottom: 70px;*/
	/*margin-top: 100px;*/
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
}
#slider{
	width: 100%;
	height: 100vh;
	/*margin-bottom: 70px;*/
	/*margin-top: 100px;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

#slider h1{
	position: absolute;
	top: 50%;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%,-50%);/*基準点を文字列の中央にオフセット*/
	font-family: /*'Klee One',*/ cursive;
	white-space: nowrap;/*文字列が折り返さない*/
	font-size: 1.8em;
	color: #a2e0a2;
	text-shadow: 0 0 3px #1f201f;
	text-shadow: 0 0 10px #333d37;
}
/*#slider ul li img{
	width: 100%;
	height: 100vh;
object-fit: cover;}/*領域全体を覆うように拡大*/


/*メインコンテンツ*/
main{
	background-color: rgba(255,255,255,0.5);
	overflow: hidden;
	position: relative;
	z-index: 1;
}
#container{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;/*メイン部分をブラウザの左右中央*/
	padding: 150px 10px 0;
}


article{
	width: 100%;
	min-height: 425px;/*最低高425px*/
	border-radius: 50px;
	margin-bottom: 150px;
	/*box-shadow: 3px 3px 6px #556b2f;*//*横方向、縦方向、ぼかしの幅、影の色*/
	padding: 0 50px 50px;
	background-color: #fdfffc;
}


article h2{
    font-family: 'Klee One', cursive;
	text-transform: uppercase;
	border-left:10px solid rgba(85,107,47,0.7);/*色は自由*/
	padding: 20px 0 0 15px;
	margin-bottom: 40px;
	}

/*フッター*/
footer{
	width: 100%;
	height: 70px;
	background-color: rgba(85,107,47,0.7);
	text-align: center;
}
footer p{
	color: #fff;
	padding-top:20px;
}

/*========= ページトップのためのCSS ===============*/

/*リンクの形状*/
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  background:#942D2F;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:0.6rem;
  transition:all 0.3s;
}

#page-top a:hover{
  background: #777;
}

@media screen and (max-width:648px) {
 #page-top a:hover{
  background:#942D2F;
}   
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom:10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}



/*===プロフィール===*/
.profile{
	display: flex;
}


.my_image{
	position: relative;
	margin-right: 40px
}
.my_image img{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	transition: opacity 0.7s;
}
.my_image:hover img:first-of-type{
	opacity: 0;
}
.my_image img:last-of-type{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.my_image:hover img:last-of-type{
	opacity: 1;
}

.btn {
	border-radius: 3px;
	background-color:#f5ae5e;
	padding: 10px;
	margin-top: 10px;
	margin-right: 0;
	margin-left: -10px;
	text-decoration: none;
	color: #ffffff;
	font-size: 18px;
  }
.inline-block{
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

dl{
	width: 100%;
}
dt{
	width: 25%;
	float:left;
	color: #333;
	background-color: #DEF7D1;
	text-align: center;
	border-top: 1px solid #F9F9E7;

}
dd{
	width: 74%;
	float: right;
	border-top: 1px solid #DEF7D1;
	padding-left: 10px

}
dt,dd{
	padding: 20px 0;
}
dd:last-of-type{	/*同一用をの最後の要素*/
	border-bottom: 1px solid #DEF7D1;
}

#profile p{
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}
.profile-text img{
	width: 200px;
	height: 200px;
	margin-bottom: 20px;
}
.profile-text{
	text-align: center;
	font-size: 18px;
	color: #333;
}

/*===works===*/
#works h3{
	text-align: center;
	color: #fff;
	text-shadow: 0 0 2px #000;
	font-size: 1.5em;
	margin-bottom: 30px;
}
.container{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;/*右端で折り返す*/
}
figure{
	width: 200px;
	margin-bottom: 30px;
	color: #333;
	text-align: center;
}

figure img{
	width: 200px;
	height: 200px;
	object-fit: contain;;
	/*object-fit: cover;*//*縦横比固定で両端をトリミング*/
	/*border-radius: 5%;*/	
	border: 1px solid  rgba(85,107,47,0.7);
	border-radius: 1%;
}

figure img:hover{
	transition: linear 0.3s;
	transform: scale(110%);
}
figcaption{
	color: #333;
	font-size: 14px;
}


/*===コンタクトフォーム===*/
form table{
	width: 100%;
	border-collapse: collapse;
}
/*form tr:nth-child(odd){
	background-color: #DEF7D1;
}
form tr:nth-child(even){
	background-color: #F8F5D0;
}*/

form th{
	width: 25%;
	padding: 30px 0;
	border-top: 1px solid #F9F9E7;
	border-bottom: 1px solid #F9F9E7;
	background-color:	#DEF7D1;
}
form td{
	width: 75%;
	padding: 30px 20px;
	border-top: 1px solid #DEF7D1;
	border-bottom: 1px solid #DEF7D1;
}
input[type="text"]{
	/*border:1px solid #666;*/
	background-color: #fff;
	width: 40%;
	box-shadow: inset 1px 1px 1px #666;
}
input[type="email"]{
/*border: 1px solid #666;*/
background-color: #fff;
width: 60%;
box-shadow: inset 1px 1px 1px #666;

}
textarea{
	/*border: 1px solid #666;*/
	background-color: #fff;
	width: 80%;
	height: 8em;
	resize: none;
	box-shadow: inset 1px 1px 1px #666;
}
input[type="submit"]{
padding: 3px 30px;
border:1px solid #666;
border-radius: 3px;
background-image: linear-gradient(#fff,#DEF7D1);
cursor:pointer;/*ポインターを手指の形にする*/
}
form p{
	text-align: center;
	margin-top: 20px;
}

/*SVGアニメーション*/
path {
    fill: none;
    stroke: #808080; /*線の色を指定する*/
    stroke-dasharray: 2000;/*線の間隔を指定する*/
    stroke-dashoffset: 0;/*線の位置を指定する(IEは効かない属性)*/
    stroke-width: 1;/*線の太さを指定する*/
    -webkit-animation: hello 3s ease-in forwards;
    animation: hello 1s ease-in forwards;
			/*animation-delay: 2.8s;*/
			animation-duration: 2s;
			animation-fill-mode:forwards;
}
 @-webkit-keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent; /*透過*/
}
 50% {
 fill:transparent; /*透過*/
}
 100% {
 stroke-dashoffset: 0;
 fill:rgba(246,246,235,1);
}
}
@keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill-opacity:0; /*透過*/
}
 50% {
 fill-opacity:0; /*透過*/
}
 100% {
 stroke-dashoffset: 0;
 fill-opacity:1; /*透過*/
}
}

/*ふわふわアニメーション*/
.fuwafuwa {
-webkit-animation:fuwafuwa 3s infinite linear alternate;
animation:fuwafuwa 3s infinite linear alternate;
}

@-webkit-keyframes fuwafuwa {
0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(5deg);}
}

@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(-5deg);}
50% {transform:translate(0, -5px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(5deg);}
}

/*ぶるぶるアニメーション*/
.buruburu {
    -webkit-animation:buruburu 0.1s infinite linear alternate;
    animation:buruburu 0.1s infinite linear alternate;
}

@-webkit-keyframes buruburu {
    0% {-webkit-transform:translate(0, 0) rotate(-3deg);}
    50% {-webkit-transform:translate(0, -1px) rotate(0deg);}
    100% {-webkit-transform:translate(0, 0)rotate(3deg);}
}

@keyframes buruburu {
    0% {transform:translate(0, 0) rotate(-3deg);}
    50% {transform:translate(0, -1px) rotate(0deg);}
    100% {transform:translate(0, 0)rotate(3deg);}
}

/*===メディアクエリ===*/
/*デバイスの幅が480px以下の場合*/
@media screen and (max-width:648px) { 
	.wrapper{
		justify-content: center;
	}
	
	/*ナビゲーション*/	
	svg{
		width: 100%;
	}
	nav ul{
	display: block;
	height: auto;
}
nav ul li a,nav ul li:last-child a{
	border: none;
}
#js-black-bg,#js-hamburger{
	display: block;
}

/*ハンバーガーCSS*/
.global-nav {
  position: fixed;
  right: -320px; /* これで隠れる */
  top: 0;
  width: 150px; /* スマホに収まるくらい */
  height: 100vh;
  padding-top: 40px;
  background-color: rgba(255,255,255,0.30);
  transition: all .6s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
}
.global-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
	text-align: center;
}
.global-nav__item {
  text-align: center;
  border-bottom: 1px solid #eee !important;
padding-bottom: 10px;
}
.global-nav__item a {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: #111;
}
.global-nav__item a:hover {
  background-color: #eee;
}
.hamburger__line {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  background-color: #fff;
  transition: all .6s;
}
.hamburger__line--1 {
  top: 14px;
}
.hamburger__line--2 {
  top: 20px;
}
.hamburger__line--3 {
  top: 26px;
}
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}
/* 表示された時用のCSS */
.nav-open .global-nav {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
}	
	#slider h1{
		white-space: normal;
		text-align: center;
	}
	
	/*プロフィール*/
	.profile{
		display: block;
		margin-top: 30px
	}
	.my_image{
		width: 100%;
		margin: 0 auto;
	}
	.about_me{
		width: 100%;
		margin: 0 auto;
	}
	dt,dd{
		float: none;
		width: 100%;
		text-align: center;
	}
	dt{
		background-color: #DEF7D1;
	}
	dt:last-of-type{
		border-bottom: none;
		}
		
		/*ワークス*/
	.container{
		justify-content: center;
	}
	figcaption{
		text-align: center;
	}
	
	/*コンタクトフォーム*/
	form th,form td{
		display: block;
		width: 100%;
		border-bottom: none;
		text-align: center
	}
	form table{
		border-bottom: 1px solid #DEF7D1;
	}
	form tr{
		background-color: #fff !important;
	}
	form th{
		background-color: #DEF7D1;
	}
	form td{
		background-color: #F9F9E7;
	}
	input[type="text"],
	input[type="email"],
	textaea{
		width: 90%;
	}
	
}/*media*/