*{
	margin:0;
	padding: 0;
  }
html { font-size: 62.5%; }    /* ルートのフォントサイズを10pxに設定 */
body { font-family: "Noto Sans JP", sans-serif; font-size: 1.6rem; font-weight: 400; line-height: 1.75; letter-spacing: .3px;  word-break: break-all; color: #444444; }
p { text-align: justify; margin-bottom: 10px;}
a { transition: .5s all;}
a:hover { transition: .5s all; }
img { max-width: 100%; height: auto; }
ul, li { list-style: none; }
.PC { display: block; }
.SP { display: none; }

h1 { font-size: 3.0rem;}
h2 { font-size: 2.6rem;}
h3 { font-size: 2.2rem;}
h4 { font-size: 1.8rem;}


/*--------------------------------
 レイアウト
---------------------------------*/
#Wrap { position: relative; }
section {}
section + section { margin-top: 100px; }
.inner1024 { max-width: 1024px; height: auto; margin: 0 auto; }
.flex { display: flex; flex-direction: row; justify-content: space-between; }


/*--------------------------------
ヘッダー
---------------------------------*/

header {
	width: 100%;
	height: 60px;
	position:fixed;
	top: 0;
	left: 0;
	z-index: 9999999999;
	width: 100%;
	color: #FFF;
	background-color: rgba(255,255,255,0);
}

.headerPC {
	display: block;
	max-width: 1200px;
	margin:  0 auto;
}
.headerSP {
	display: none;
}

header h1.headerLogo {
	display: block;
	margin-left: 20px;
}

header h1.headerLogo {
	display: flex; 
	align-items: center; /*垂直方向中央寄せ*/
}

header h1.headerLogo img {
	display: block;
	max-width: 180px;
}

header h1.headerLogo p {
	display: block;
	background-color: #6A2D07;
	color: #FFF;
	font-size: .8rem;
	padding: 2px 6px;
	margin: 0 0 0 10px;
}

header nav ul li {
	display: inline-block;
	font-size: 1.5rem;
	line-height: 1;
	line-height: 60px;
	margin: 0 5px;
}


header nav ul li a {
	display: block;
	width: 100%;
	text-decoration: none;
}

header nav ul li a:hover {
	text-decoration: underline;
}

header nav ul li a.headerEntry {
	margin: 0 0 0 15px ;
	padding: 0 23px 0 30px;
	background-color: #f6ab00;
	font-weight: 700;
	color: #FFF;
}

header nav ul li a.headerEntry:hover {
	background-color: #6A2D07;
}


/*--------------------------------
フッター
---------------------------------*/

footer {
	margin: 100px 0 0 0;
	padding: 0;
}

.footerUpper {
	width: 100%;
	display: flex;
	border-top: 1px solid #6A2D07;
}
.footerUpper .footerUpper_L {
	background-color: #6A2D07;
	width: 35%;
	position: relative;
}
.footerUpper .footerLogo {
	text-align: center;
	padding: 50px 0;
	width: 100%;
	color: #FFF;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.footerUpper .footerLogo img {
	width: 140px;
}
.footerUpper .footerLogo p {
	text-align: center;
	margin: 20px 0 15px 0;
}

.footerUpper .footerLogo ul li {
	display: inline;
	margin: 5px;
	font-size: 1.1rem;
	line-height: 1;
	transition: .5s all;
}
.footerUpper .footerLogo ul li:hover {
	text-decoration: underline;
	transition: .5s all;
}
.footerUpper .footerUpper_R {
	width: 65%;
}

.footerUpper .footerUpper_R iframe {
	width: 100%;
	height: 250px;
}
.footerUpper .footerUpper_R ul li {
	margin: 0;
	padding: 0;
	width: 50%;
	text-align: center;
}

.footerUpper .footerUpper_R ul li a {
	display: block;
	padding: 20px 0;
	width: 100%;
	color: #FFF;
	font-size: 1.4rem;
	font-weight: 500;
}

.footerUpper .footerUpper_R ul li:first-child {
	background-color: #C3B2A7;
}

.footerUpper .footerUpper_R ul li:last-child {
	background-color: #f6ab00;
}

.footerLower {
	padding: 30px 30px 20px 30px;
	background-color: #4C2004;
	color: #FFF;
	font-weight: 300;
	font-size: 1.2rem;
	text-align: center;
}

.footerLower p, .footerLower a {
	display: inline-block;
	margin: 0 1%;
}

.footerLower a {
	text-decoration: underline;
}

/*--------------------------------
スクロールフェードイン
---------------------------------*/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
.fadein-left{
		transform: translate(-30px,0);
	}
.fadein-right{
		transform: translate(30px,0);
	}
.fadein-up{
		transform: translate(0,-30px);
	}
.fadein-bottom{
		transform: translate(0,30px);
	}
.scrollin{
		opacity: 1 !important;
		transform: translate(0, 0) !important;
	}



@media screen and (max-width: 1024px) {
	.inner1024 { max-width: 96%;}
}

@media screen and (max-width: 900px) {
	header h1.headerLogo img {
		width: 150px;
	}
	header h1.headerLogo p {
		display: block;
		background-color: #6A2D07;
		color: #FFF;
		font-size: 0.5rem;
		padding: 2px 4px;
		margin: 0 0 0 5px;
	}
	header nav ul li {
		display: inline-block;
		font-size: 1.3rem;
		line-height: 1;
		line-height: 60px;
		margin: 0 3px;
	}

	header nav ul li a.headerEntry {
		margin: 0 0 0 10px ;
		padding: 0 20px;
		background-color: #f6ab00;
		font-weight: 700;
		color: #FFF;
	}
	
}


@media screen and (max-width: 768px) {
	body, p {font-size: 1.5rem; line-height: 1.5;}
	.PC { display: none; }
	.SP { display: block; }
	.flex { display: block;}
	section + section { margin-top: 30px; }
	h1 { font-size: 2.2rem;}
	h2 { font-size: 2.0rem;}
	h3 { font-size: 1.8rem;}
	h4 { font-size: 1.8rem;}

	header {
		height: 50px;
	}
	.headerPC {
		display: none;
	}

	.headerSP {
		display: block;
		padding: 10px 20px;
		margin: 0;
	}

	.headerSP nav > a {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		border-bottom: none;
	}
	
	  #nav-drawer {
		position: relative;
	  }
	/*チェックボックス等は非表示に*/
	.nav-unshown {
		display:none;
	  }
	  
	  /*アイコンのスペース*/
	  #nav-open {
		display: inline-block;
		margin-top: 8px;
		width: 30px;
		height: 22px;
		vertical-align: middle;
	  }
	  
	  /*ハンバーガーの形をCSSで表現*/
	  #nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		height: 3px;/*線の太さ*/
		width: 25px;/*長さ*/
		border-radius: 3px;
		background: #4C2004;
		display: block;
		content: '';
		cursor: pointer;
	  }
	  #nav-open span:before {
		bottom: -8px;
	  }
	  #nav-open span:after {
		bottom: -16px;
	  }
	  
	  /*閉じる用の薄黒箇所*/
	  #nav-close {
		display: none;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		transition: .3s ease-in-out;
	  }
	  
	  /*メニューの中身*/
	  #nav-content {
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		max-width: 280px;/*最大幅（お好みで調整を）*/
		height: 100%;
		background: #C3B2A7;
		transition: .3s ease-in-out;
		-webkit-transform: translateX(-105%);
		transform: translateX(-105%);
	  }
	  
	  /*チェックがついたら表示させる*/
	  #nav-input:checked ~ #nav-close {
		display: block;
		opacity: .5;
	  }
	  
	  #nav-input:checked ~ #nav-content {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	  }
	  
	  .header-logo-menu{
	   display: flex;
	   display: -moz-flex;
	   display: -o-flex;
	   display: -webkit-flex;
	   display: -ms-flex;
	   flex-direction: row;
	   -moz-flex-direction: row;
	   -o-flex-direction: row;
	   -webkit-flex-direction: row;
	   -ms-flex-direction: row;
	  }

	#nav-content nav ul {
		padding: 20px;
	}

	#nav-content nav ul li {
		display: block;
		text-align: center;
		color: #FFF;
		border-bottom: 1px solid #FFF;
	}
	#nav-content nav ul li:first-child {
		border-bottom: none;
	}
	#nav-content nav ul li:first-child img {
		text-align: center;
		width: 100px;
	}
	#nav-content nav ul li:first-child p {
		height: auto;
		padding: 5px 0;
		text-align: center;
		line-height: 1.5;
		font-size: 1.2rem;
		margin: 10px 0 20px 0;
		border: 1px solid #FFF;
	}
	#nav-content nav ul li:last-child {
		color: #FFF;
	}
	
	#nav-content nav ul li a:hover {
		text-decoration: none;
	}
	
	#nav-content nav ul li:last-child {
		border-bottom: none;
	}
	
	#nav-content nav a.headerEntry {
		margin: 0;
		padding: 0;
		padding: 40px 0;
		font-weight: 500;
		text-align: center;
		color: #FFF;
		background-color: #f6ab00;
	}
	
	/*ロゴやサイトタイトルをセンタリング*/
	.logo-area{
		text-align:center;
		margin:auto;
		padding: 0;
		width: 150px;
	}

	
	.footerUpper {
		display: block;
		width: 100%;
	}
	.footerUpper .footerUpper_L {
		background-color: #6A2D07;
		width: 100%;
	}
	.footerUpper .footerLogo {
		padding: 20px 0;
		width: 100%;
		position: static;
		left: auto;
		top: auto;
		transform:none;
	}
	.footerUpper .footerLogo img {
		width: 100px;
	}
	.footerUpper .footerLogo p {
		font-size: 1.4rem;
		margin: 10px 0 5px 0;
	}
	
	.footerUpper .footerUpper_R {
		width: 100%;
	}
	
	.footerUpper .footerUpper_R iframe {
		width: 100%;
		height: 200px;
	}
	.footerUpper .footerUpper_R ul {
		width: 100%;
		display: flex;
	}

	.footerLower {
		padding: 20px 5px;
		font-size: 1.2rem;
	}
	
	.footerLower p, .footerLower a {
		font-size: 1.2rem;
	}

	
}
@media screen and (max-width: 540px) {
	body, p {font-size: 1.4rem; line-height: 1.5;}
}