/*基本のCSS*/
@charset "utf-8";
/* CSS Document */


/*フォントサイズが正しく反映するようにここはこのまま*/
html{
	font-size: 100%;
}

/*サイト全体の基本となるフォントカラーやフォントの種類を指定する*/
body{
	color: #333333;/*サイトの基本の文字の色(この色はおすすめちょっと灰色の文字色)*/
	font-family: 'Noto Sans JP', 'sans-serif';/*サイトの基本の文字種類*/
	font-weight: 400;/*文字の太さ(標準)*/
	background-color: #f7f6f4;/
}

/*全ページの横幅設定*/
.wrapper-1080{
	max-width: 1120px;
	padding: 0 20px;
	margin: 0 auto;
}


/*画像の設定*/
img{
	max-width: 100%;/*レスポンシブで作る場合100にすることで親のコンテンツから画像がはみでない*/
	vertical-align: bottom;/*bottomにすることで画像の下の隙間をなくす*/
}

/*サイト全体で共通するliタグの指定*/
li{
	list-style: none;/*これはリストの先頭につくマークを消す指定*/
}

/*サイト全体のリンクの色や装飾の指定*/
a{
	color: #383c3c;
	text-decoration: none;/*リンクの下線を消す*/
}

a:link {/*アクセスしたことのないリンク*/
	color:#383c3c;
}

a:visited {/*アクセスしたことのあるリンク*/
	color:#383c3c;
}

a:hover {/*マウスが上に乗っている状態*/
	color:#4682b4;
}

a:active {/*クリック中*/
	color:#383c3c;
}






/*ヘッダーの指定*/
/*idの場合は#で指定*/
#header{
	width: 100%;
	height: 80px;
	display: flex;/*ロゴとナビを横並びに*/
	align-items: center;/*縦方向に中央ぞろえ*/
	justify-content: space-between;/*横方向に均等に割付*/
	padding-top: 35px;/*ヘッダーの上の余白*/
	padding-bottom: 35px;/*ヘッダーの下の余白*/
	background-color: white;
	
}

/*ヘッダーのロゴ部分の指定*/
#header .logo{
	width: 100%;
	max-width: 233px;/*ロゴ画像の最大幅*/
	line-height: 0;/*行間を０にして上下の余白を消す(hタグだと上下に余白ができるので)*/
	padding-left: 10px;
}

#header .logo a{
	display: block;/*リンクの範囲が親要素からずれてしまわないように*/
}

#header .navi .menu{
	display: flex;/*ナビのメニューを横並びに*/
	align-items: center;/*縦方向に中央ぞろえ*/
	margin-top: 10px;
	padding-right: 40px;
	
}

#header .navi .menu li{/*ナビのメニューのフォントの設定や余白など*/
	font-size: 14px;/*フォントの大きさ*/
	margin-left: 40px;/*メニューの項目の余白　右端を揃えたいのでleft*/
	
}







/* フッター */
.footer{
  padding: 10px 0;
  background-color: #ffffff;
  color: #707070;
  font-size: 13px;
}
.footer-container{
  display: grid;
  justify-items: center;
  gap: 0px;
}
/* フッター sns*/

.saitomei{
  font-size: 18px;
  font-weight:　bolder;
  font-family: 'Amatic SC', cursive;
  margin: 0;
}


.footer-sns{
  display: flex;
  gap: 0px 24px;
  font-size: 24px;
  padding: 0;
  list-style: none;
  margin-top: 10px;
  margin-bottom: 0px;
}

.footer-copy{
  margin-top: 10px;
}

@media (min-width:768px){
  .footer-container{
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    gap: 0px;
  }
  .footer-container > *:not(.footer-sns) {
    justify-self: start;
    margin:  0 150px 0 135px
  }

  .footer-container > .footer-sns{
    grid-column: 2;
    grid-row: 1/3;
    justify-self: end;
		align-self: center;
    margin:  0 130px 0 190px
  }
}





@media print, screen and (min-width: 768px){
.pc{ display:block; } 
.pc_inline{ display:inline-block; } 
.sm{ display:none;
	 }
 }



/*-------------------------------------------
スマホ用指定
-------------------------------------------*/
@media screen and (max-width: 767px) {
/*ここにスマートフォン用のcssを追加していく*/
	

	
	main{
		padding-top: 60px;
	}
	

	#header{/*スマホ用上下左右の調整*/	
		height: 60px;/*ヘッダー固定のため重ならないように60下げてる*/	
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;/*他のコンテンツより上に表示するように*/	
	}
	#header .logo{
		max-width: 233px;
	}
	
	/*メニュー表示の指定*/
	#header .navi{
		width: 80%;
		height: 100vh;
		background-color: rgba(205, 214, 221, .9);
		position: fixed;
		top: 0;
		right: -80%;
		z-index: 20;
		transition: all 0.6s;
	}
	#header .navi .menu{
		width: 100%;
		height: 100vh;
		flex-direction: column;
		padding: 60px 0;
		overflow: auto;
	}
	#header .navi .menu li{
		padding: 10px 0;
		margin-left: 0;
		font-size: 18px;
	}
	
	
	#header .navi.active{
		right: 0;
	}
	
	#header .hamburger{
		width: 40px;
		height: 40px;
		background-color: #8FB7C8;
		cursor: pointer;
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 30;
	}

/*三本線のところの設定*/	
	#header .hamburger span{
		width: 30px;
		height: 3px;
		background-color: #fff;
		display: inline-block;
		position: absolute;
		left: 5px;
		transition: all 0.4s;
	}
	#header .hamburger span:nth-of-type(1) {
		top: 11px; 
  }
	#header .hamburger span:nth-of-type(2) {
		top: 20px;
  }
	#header .hamburger span:nth-of-type(3) {
		top: 29px;
  }
	#header .hamburger.active span:nth-of-type(1) {
		top: 19px;
		transform: rotate(-45deg);
  }
	#header .hamburger.active span:nth-of-type(2) {
		opacity: 0;
  }
	#header .hamburger.active span:nth-of-type(3) {
		top: 19px;
		transform: rotate(45deg);
  }
	.shugo{/*ハンバーガーメニュー内イラストの位置の設定*/	
		margin-right: -10px;
	}

}