@charset "utf-8";
/* CSS Document */
/* ---------------------------------
基本設定開始
------------------------------------ */


html {
  font-size: 62.5%;
}

body {
	background: #fff;
	/*font-family: "游ゴシック体", "Yu Gothic", YuGothic, Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  */
	/*font-family: Montserrat, "Helvetica Neue", sans-serif;*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.5;
	color: #696564;
}

h1,h2 { font-size: 4rem;
 }   
h3,h4,h5{
	font-size:2rem;
	}


/* フロート */
.clearfix:after{
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clearfix{
  zoom:1;
}

.clear {
	clear: both;
	font-size: 0px;
	height: 0px;
	line-height: 0px;
}




/* リンク */

a {

  text-decoration:none;

}

a:link {
	color: #333;
}

a:visited {
	color: #333;
}

a:hover {
	color: #666;
}


/* 画像 */
img{
	vertical-align: bottom;
	max-width: 100%;
    height: auto;
	}
	
/*余白右*/	
.pr10{
		padding-right:10px;
		}
.pr20{
		padding-right:20px;
		}
.pr30{
		padding-right:30px;
		}		
.pr40{
		padding-right:40px;
		}

/*余白左*/	
.pl10{
		padding-left:10px;
		}					
		
.pl20{
		padding-left:20px;
		}					
		
.pl30{
		padding-left:30px;
		}					
.pl40{
		padding-left:40px;
		}		
		
/*余白下*/	
.pb10{
		padding-bottom:10px;
		}

.pb20{
		padding-bottom:20px;
		}
.pb30{
		padding-bottom:30px;
		}
.pb40{
		padding-bottom:40px;
		}
		
/*マージン上*/			
.mt10{
			margin-top:10px;
		}
.mt20{
			margin-top:20px;
		}
.mt30{
			margin-top:0px;
		}
.mt40{
			margin-top:0px;
			padding-bottom:1rem;
		}
.mt80{
			margin-top:80px;
		}
				
/*文字の大きさ*/
.text_small
{
font-size:1.2rem;	
	
	}
.text_big
{
font-size:1.8rem;	
	
	}


/*太文字*/
.text_bold{
	font-weight:bold;
}

/*文字*/
.textWhite {
	color: #FFF;
	text-align:center;
}
.red{
	color: #F03D00;
	}

/* bager menu */

#sp_navi {
  transition: all .6s;
  overflow-y: auto;
  padding-top: 60px;
  width: 300px;
  /*height: 100vh;*/
  height:300px;
  z-index: 200;
  top: 0;
  right: -320px;
  background-color: #d8d6d6;
  position: fixed;
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.nav_btn {
  width: 44px;
  height: 44px;
  z-index: 300;
  top: 7px;
  right: 7px;
  cursor: pointer;
  position: absolute;
}



/*
#header #navi {
  transition: all .6s;
  overflow-y: auto;
  padding-top: 40px;
  width: 300px;
  height: 100vh;
  z-index: 200;
  top: 0;
  right: -320px;
  background-color: #fff;
  position: fixed;
}

#header .nav_btn {
  width: 44px;
  height: 44px;
  z-index: 300;
  top: 7px;
  left: 7px;
  cursor: pointer;
  position: absolute;
}
*/


.hamburger_line {
  transition: all .6s;
  width: 34px;
  height: 2px;
  left: 5px;
  background-color: #000;
  position: absolute;
}

.hamburger_line1 { top: 10px; }
.hamburger_line2 { top: 21px; }
.hamburger_line3 { top: 32px; }

.nav_bg {
  opacity: 0;
  transition: all .6s;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  top: 0;
  left: 0;
  visibility: hidden;
  background-color: #000;
  cursor: pointer;
  position: fixed;
}

/* 表示された時用のCSS */
.nav_open #sp_navi { left: 0; }
/*.nav_open #header #navi { left: 0; }*/
.nav_open .nav_bg {
  opacity: .8;
  visibility: visible;
}

.nav_open .hamburger_line1 {
  transform: rotate(45deg);
  top: 20px;
}

.nav_open .hamburger_line2 {
  width: 0;
  left: 50%;
}

.nav_open .hamburger_line3 {
  transform: rotate(-45deg);
  top: 20px;
}
#sp_navi li {
	padding-left: 20px;
    padding-bottom: 20px;
    width: 50%;
}


/*ノート風下点線*/
/*.note1{
  background-color: #fff;
  background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%);
  background-size: 8px 100%,100% 3em;
  line-height: 3em;
padding: 0 1em;
  color: #696969;
  margin: 0;

}
*/

/*ノート風下点線*/
.note1{
 background-color: transparent;
 background-image: linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 100%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%);
 background-size: 8px 100%,100% 2.5em;
 line-height: 2.5em;
 /*padding: 0 1em;*/
 color: #696969;
 margin: 0;

}


/* 画像をふわっとフェードインアウト */
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -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;
}

a img {
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}

/*スクロール時、下から上に出現*/
.fadeInUp {
  opacity : 0;
  transform: translateY(50px);
  transition: 0.5s;
}



/*左から出現 「LeftToRight」の動作内容 */
@keyframes LeftToRight {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(-100px);/* X軸方向に-100px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 「LeftToRight」を適用する箇所 */
.img_anime_LeftToRight {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: LeftToRight;/* アニメーション名 */
  /*animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}


/*右から出現 「RightToLeft」の動作内容 */
@keyframes RightToLeft {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(100px);/* X軸方向に100px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 「RightToLeft」を適用する箇所 */
.img_anime_RightToLeft {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: RightToLeft;/* アニメーション名 */
  /*animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}




/*上から出現 「TopToBottm」の動作内容 */
@keyframes TopToBottom {
  0% {
    opacity: 0;/* 透明 */
    transform: translateY(-100px);/* Y軸方向に-100px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 「TopToBottm」を適用する箇所 */
.img_anime_topbottom {
  animation-duration: 2s;/* アニメーション時間 */
  animation-name: TopToBottom;/* アニメーション名 */
  /*animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}