@charset "utf-8";
/* CSS Documznt */
/*****************************************
共通設定
******************************************/
html {
	 font-family:'Noto Serif JP', serif, 'Meiryo', 'MS PGothic', sans-serif;
	 font-size: 14px;
	color: #333;
	width: auto;
	height: 100%;
    line-height: 2.2;
}
/*
 すべてのブラウザ用に、デフォルトのマージンを取り除く。
*/

body {
	margin: 0;
	-webkit-text-size-adjust: 100%;
	height:auto;
	width: 100%;
	min-height: 100%;
	animation: fadeIn 0.5s ease 0s 1 normal;
	-webkit-animation: fadeIn 0.5s ease 0s 1 normal;
}

img{
    max-width: 100%;
    height: auto;
	width: 100%;
}


article, aside, details, /* 1 */ figcaption, figure, footer, header, main, /* 2 */ menu, nav, div, section, summary, img { /* 1 */
	display: block;
}
/*
 IE9+用、displayプロパティを定義。
 */
body, div, p, ul, ol, li, dl, dt, dd, table, th, td, img, figure, h1, h2, h3, h4, h5, h6, form, select {
	margin: 0;
	padding: 0;
}
ul, ol, li {
	list-style: none;
}
audio, canvas, progress, video {
	display: inline-block;
}


.clear:after {
   content: "";
  display: block;
  clear: both;
}

a:hover{
	opacity: 0.8;
	filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}


/*---------------------スクロール-----------------------*/
.scrollin{
    opacity : 1 !important;
    transform : translate(0, 0) !important;
}
.fadeInUp1 {
   
    transform: translate(0, 30px);
    -webkit-transform: translate(0, 30px);
    transition: .6s; }
.fadeInUp2 {

    transform: translate(0, 60px);
    -webkit-transform: translate(0, 30px);
    transition:0.9s; }
.fadeInUp3 {

    transform: translate(0, 60px);
    -webkit-transform: translate(0, 30px);
    transition: 1.2s; }
.fadeInUp4 {
    opacity: 0;
    transform: translate(0, 60px);
    -webkit-transform: translate(0, 30px);
    transition: 2.2s; }
.shadow{
	box-shadow: 0 0 12px #FF0099;
	  transition: 0.8s;
}
.fade {
	transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-webkit-transition: opacity 0.4s;
	-o-transition: opacity 0.4s;
}

.fadein2 {
	animation-fill-mode:forwards;
  animation-name: fadeIn;/* アニメーション名 */

    }
.animated{
	opacity: 1 !important;

}


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

.s_main, .s_main2{
opacity:  0;
}
.slide{
	opacity: 1 !important;
  animation-duration: 1s;/* アニメーション時間 */
  animation-name: BottomToTop;/* アニメーション名 */
  animation-iteration-count:1;/* アニメーションの繰り返し*/
}
.slide2{
	opacity: 1 !important;
  animation-duration: 2.5s;/* アニメーション時間 */
  animation-name: BottomToTop;/* アニメーション名 */
  animation-iteration-count:1;/* アニメーションの繰り返し*/
}

@keyframes SlideUp{
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(20px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  } 
}
 @keyframes fadeIn {
 0% {
opacity: 0;
}
 100% {
opacity: 1;
}
}

 @-webkit-keyframes zoomOut {
 0% {
transform: scale(1.2)
}
 100% {
transform: scale(1)
}
}

@keyframes BottomToTop {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*---------------------border----------------------*/

.border:after{
	content: '';
	padding-bottom: 10px;
border-bottom: 1px #333 solid;
	display: block;
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: border;/* アニメーション名 */
  animation-iteration-count:1;/* アニメーションの繰り返し*/
}

@keyframes border {
  0% {
    width: 0;
  }
  100% {
    width: 100%
  }
}


/*---------------------common----------------------*/
.header{
		width: 100%;
		height:auto;
padding-top: 13px;
	padding-bottom:13px;
	position: fixed;
	top:0;
		z-index:20;
	background: #FFF;
	 transition:0.5s;
	font-size: 1.1rem;
}
.back_white{
	background: rgba(255,255,255,0.95)!important;
	padding-bottom: 100% !important;
	 transition:0.4s;
}
.border_bottom{
	border-bottom: 1px solid #333;
	
}
.nav{
	width: 90%;
	margin:0 auto;

	display: flex;
	justify-content:space-between;
	align-items: center;
	animation-duration:1.5s;/* アニメーション時間 */
  animation-name: Topto;/* アニメーション名 */
}
	@keyframes Topto {
  0% {
   
    transform: translateY(-50px);/* X軸方向に50px */
  }
  100% {
    
    transform: translateY(0px);
  }
}
.logo_header{
	width: 10%;
	max-width: 120px;
	padding: 20px 0px;
}
.global-nav{
	display: none;
}


.menu ul{
	position: relative;
	display: flex;
	
}
.menu li{
	padding: 0px 15px;
	font-size: 1.1em;
}

	.menu li a{
		color: #000;
		text-decoration: none;
		
	}


.menu_wrapper li {
	float: left;
	position: relative;
padding: 0px;
  margin: 0px 20px;
    font-size: 1.1em;
	display:inline-block

}
.main_list{
	display: inline-block;
}
ul.sub_list {
	display:none;

	position: absolute;
	
	padding: 10px 0px ;
		width: 200px;
	font-weight: bold;
	font-size: 1rem
}
ul.sub_list li{

	margin: 0;
	padding: 10px 0px !important;
		width: 200px;
	font-weight: bold;
	font-size: 1rem
}
ul.sub_list li a {
	display: block;
}
ul.sub_list li a:hover {
	text-decoration:none;
}






#main_contents{
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
}

#PageTopBtn {
	width: 60px;
z-index: 20;
  position: fixed;
  right: 5%;
  bottom:5%;
  opacity: 0.8;
  border-radius: 50%;
}
#PageTopBtn a {
  position: relative;
  display: block;
  text-decoration: none;

}



footer{
	width: 100%;
	height: auto;
	text-align: center;
}
footer p{
	border-top:1px solid #000;
	padding:10px;
}
.sp{
	display: none
}
@media (max-width: 769px) {
	.sp{
	display: block
}
	.nav_top{
		display: none;
	}
.header{
		width: 100%;
		height:70px;
	overflow: hidden;
	position: fixed;
	top:0;
	padding-top:0px;
	padding-bottom:0px;
		z-index:20;
	background: #FFF;
		display: flex;
	justify-content:space-between;
	align-items: center;
}
.nav{
	width: 90%;
	margin:0 auto;

	display: flex;
	justify-content:space-between;
	align-items: center;
	animation-duration:1.5s;/* アニメーション時間 */
  animation-name: Topto;/* アニメーション名 */
}
	.menu{
			display: none;
}

	.logo_header{
	width:80px;
	max-width: 120px;
	padding: 0px;
}
.global-nav {
  width: 100%;
	z-index: 100;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
	  position:fixed;
    top: 0;
    	animation-duration:1.5s;/* アニメーション時間 */
  animation-name: Topto;/* アニメーション名 */
	display: block;
}

.global-nav .pc_menu {
    display: none;
    background: #fff;
    background: rgba(255, 255, 255, 0.95);
  }
.global-nav .global-nav_menu ul {
  margin: 0 auto;
}

.global-nav a {
  display: inline-block;
  padding: 8px 0;
  color: #000;
  text-decoration: none;
}

.ham_menu{
	display: block;
}

.ham_menu button {
  position: absolute;
	z-index: 1000;
  top: 20px;
  right: 10px;
  width: 30px;
  height: 25.5px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.ham_menu button span,
.ham_menu button:before,
.ham_menu button:after {
	  display: inline-block;
  -webkit-transition: all .4s;
  transition: all .4s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  border-radius: 4px;
  content: "";
}
.ham_menu button span {
  top: 11px;
  overflow: hidden;
  text-indent: 100%;
}
.ham_menu button:before {
  top: 0;
}
.ham_menu button:after {
  bottom: 0;
}
.ham_menu.is-active button span {
  -webkit-transform: translate3d(-1px, 0, 0) rotate(-45deg);
  transform: translate3d(-1px, 0, 0) rotate(-45deg);
}
.ham_menu.is-active button:before {
  width: 45%;
  -webkit-transform: translate3d(1px, 5px, 0) rotate(45deg);
  transform: translate3d(1px, 5px, 0) rotate(45deg);
}
.ham_menu.is-active button:after {
  width: 45%;
  -webkit-transform: translate3d(13px, -7px, 0) rotate(45deg);
  transform: translate3d(13px, -7px, 0) rotate(45deg);
}
.pc_menu {
  overflow: auto;
    height: -webkit-calc(100vh);
    height: calc(100vh);
	
  }
.pc_menu > ul {
  position: relative;
	display: block;
	width: 100%; 
top:7%;
	z-index: 100;
font-size: 1.1em;
	min-width:100%;
	padding-bottom:100px;

}
.sns{
		display: block;
	}

.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

.pc_menu li {
  color: #fff;
  font-size:1.2em;
	padding: 3px;
  text-align: center;
}
	.sub_list_sp{
		color: #333 !important;
		font-size: 1rem!important;
	}
	
	.main_list_sp ul{

color: #333 !important;
    width: 60%;
    margin: 0 auto 5px;
	}
	
	.main_list_sp {

			color: #333 !important;}
	
	
	
	
	
	#main_contents{
	width: 95%;
	height: auto;
		margin: 0 auto;
	position: relative;
	overflow: hidden;
}
	
#PageTopBtn {
	width: 50px;
z-index: 20;
  position: fixed;
  right: 5%;
  bottom:5%;
  opacity: 0.8;
  border-radius: 50%;
}
#PageTopBtn a {
  position: relative;
  display: block;
  text-decoration: none;

}
  }