@charset "UTF-8";
/* CSS Document */

/*******全体の親要素*******/

html, body{
	margin: 0;
	width: 100%;
	height: 100%;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size:15px;
}
#wrap {
     position: relative;
     height: auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
}
/*メインコンテンツ*/
#contents {
	padding-bottom: 0px; /*フッターの高さと同じ*/
}

/*ヘッダーA：サイト名*/

header{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	background-color: rgba(0,0,0,0);
	color: #fff;
	
}


.headA {
	display: inline-block;
	position: relative;
	top: 0;
	left: 0;
	padding: 20px;
	color:#FFFFFF;
}
.headA .pp{
	width: 100px;
	fill: #333;
	position: relative;
	filter: drop-shadow(1px 1px 4px #fff);
}
/*ヘッダーB　ナビゲーションメニュー*/

.nav{
	padding:20px;
		
	}
.nav .nav_menyu_ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav a{
	display: block;
	padding: 20px;
	color: #fff;
	font-size: 21px;
	text-decoration: none;
	
}

.nav a:hover{
	background-color: rgba(0,0,0,0.3);
}

.nav .nav_menyu_li{
	text-shadow: 1px 1px 5px #333;
}
	
/*ハンバーガーメニュー*/

.burger-btn{
  display: block;
  position: fixed;
  z-index: 3;
  top:20px;
  right:20px;
  width: 42px;      
  height: 42px;           
  border:none;
  background: rgba(0,0,0,0);
  margin: 0 0 0 auto;
  cursor: pointer;
  text-align: center;
}    
.bar{      
  width: 30px;      
  height: 2px;        
  display: block;      
  position: absolute;      
  left: 6px;      
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition   : 0.5s ease-in-out;
  transition        : 0.5s ease-in-out;
  background-color:#fff;    
  box-shadow: 1px 1px 1px #000;	
}    
.bar_top{   
  top: 10px;
}
.bar_mid{    
  top: 20px;
}
.bar_bottom{
  top: 30px;
}


/* ナビ開いてる時のボタン */
.burger-btn.active .bar_top {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(315deg);
  -moz-transform   : rotate(315deg);
  transform        : rotate(315deg);
}

.burger-btn.active .bar_mid,
.burger-btn.active .bar_bottom {
  top: 16px;
  -webkit-transform: rotate(-315deg);
  -moz-transform   : rotate(-315deg);
  transform        : rotate(-315deg);
}

.nav {
  position: fixed;
  z-index : 0;
  top  : 0;
  left : 0;
  color: #000;
  background-color:rgba(0,0,0,0.8);
  text-align: center;
  transform: translateY(-100%);
  transition: all 0.6s;
  width: 100%;
}

.nav.nav_menyu_ul {
  background: #000;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.nav.nav_menyu_li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #fff;
}
.nav.nav_menyu_li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.nav.nav_menyu_li:hover{
  background :#ddd;
}

.nav.nav_menyu_li a {
  display: block;
  color: #000;
  padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
.nav.active {
  transform: translateY(0%);
}

/*全画面表示：ナビメニュー*/


@media screen and (max-width : 599px ){
	.headA {
	display: flex;
	line-height: 70px;
	padding: auto;
	color:#FFFFFF;
	background: none;
}
}

@media screen and (min-width:1240px)/*大きい画面用の設定*/{
	
	header .container{
		display: flex;
		aline-items:center;
		justify-content: space-between;
		margin-left: auto;
		
	}
	header{
		background-color: rgba(0,0,0,0);/*大きい画面では背景透明の設定*/
	}
	
	.headA{
		background-color: rgba(0,0,0,0);
	}
	.nav{
		display: block !important;
	}
	.nav ul{
		display: flex;
	}
	
}


/*フッター*/

footer {
	color:#fff;
	background-color: #333333;
	width: 100%;
    text-align: center;
    padding: 30px 0;
	height: auto;
	}

@media screen and (min-width:1240px){
	footer .container{
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(__large-width);
		margin:auto;
		max-height: auto;
	}
	
	.footA{
		flex: 0 0 55%;
	}
	.footB{
		flex: 0 0 45%;
	}
.footC{
		flex: 0 0 100%;
	}
}


/*フッターA：サイト情報*/

.footA{
	margin-bottom: 10px;
	padding-bottom: 10px;
	padding-left: 0;
	text-align: center;
}

.footA #pp_logo_footA img{
	display: none;
}

.footA #pp_logo_footB img{
	width:200px;
	margin: auto;
}
	

/*フッターB*フッターメニュー*/

.footB {
   margin-top:0;
   margin-bottom: 10px;
   padding-top: 10px;
}

.footB div{
	margin-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
}
.footB ul{
	margin: 0;
	padding: 10px;
	list-style: none;
}
.footB a{
	display:block;
	padding: 5px;
	color:inherit;
	font-size: 15px;
	text-decoration: none;
}

.footB a:hover{
	background-color: rgba(0,0,0,0.3);
}

/*フッターC：コピーライト*/
.footC{
	margin-top: 0px;
	margin-bottom: 5px;
	padding-top: 15px;
	border-top: solid 1px currentcolor;
	font-size: 12px;
	text-align: center;
	font-family: Arial, Helvetica, "sans-serif";
}

@media (min-width:1240px){
	.footA #pp_logo_footB img{
	display: none;
}
	.footA #pp_logo_footA img{
	display: flex;
	width:350px;
	margin: auto;
	padding-top: 10px; 
}
	.footB{
		display: flex;
	}
	.footB{
		flex: 1;
	}
	.footB ul{
		display: flex;
		aline-items:center;
		justify-content: space-between;
	}
	.footB li{
		display: inline-block;
	}
	.footB div:not(first-child){
		margin-left: 0;
	}
#foot_bottom{
	position: absolute;
	bottom: 0 !important;
}
}