@charset "utf-8";
/*
htmlやbody、a要素など、タグに直接設定するものを記述します。
Things that will be set directly and tags such as HTML, body and a element will be written.

このカテゴリーのみ、接頭辞から始まりません。
Only this category will not begin with the prefix.

フォントサイズはremで指定します。
Font size will be set as "rem".

↓↓↓↓↓↓コメントアウト表記サンプル Comment out sample ↓↓↓↓↓↓
*/
/*----------------------------------------------
	大くくりコメントアウト large part
---------------------------------------------*/

/*  中くくりコメントアウト middle part
------------------------------------- */

/* 小くくりコメントアウト small part */
/*
↑↑↑↑↑↑コメントアウト表記サンプル Comment out sample ↑↑↑↑↑↑

*/
/*----------------------------------------------
	html
---------------------------------------------*/
html { 
  font-size: 62.5%;
  overflow-x: hidden

}
/*↑ 10pxが1remとなる様に調整*/

/*----------------------------------------------
	body
---------------------------------------------*/
body {
  min-width: 1000px;
  font-size: 16px;
  font-size: 1.6rem;/*↑ remをサポートしていないブラウザ向けにpxでも指定　Set as "px" for browsers that don't support "rem"*/
  /*↓使用時のみコメントアウト外す Remove comment out only during use.*/
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', arial, helvetica, sans-serif;/*スタンダードゴシック（Standard sans-serif）*/
  /*font-family: Arial, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;*/ /*モダンゴシック（Modern sans-serif）*/
  /* font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;*/
	/* ↓游ゴシックYuGothicを使用する場合はfont-weightを指定する */
	/*font-weight: 500;*/
  color: #333;
  line-height: 1.5;
}
/*
body {
	background-image: url("../images/page_bg.png") ;
	position: relative;
	overflow-x: hidden;
	animation: slide 50s linear infinite;
	background-repeat: repeat-x;
  background-attachment: fixed;
}
*/
/*
body {
  background-image: url("../images/page_bg.png");
  position: relative;
  overflow-x: hidden;
  background-repeat: repeat-x;
  background-attachment: fixed;
  animation: slide 50s linear infinite;
}

@keyframes slide {
  0%   { background-position: 0 0; }
  100% { background-position: -1920px 0; } 
}
*/
body {
  background: none;
  position: relative;
  overflow-x: hidden;
}
.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-image: url("../images/page_bg.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  pointer-events: none;
  z-index: -1;
}

.bg-layer--1 {
  animation: bgScroll 60s linear infinite;
}

.bg-layer--2 {
  animation: bgScrollFade 60s linear infinite;
  animation-delay: -30s; /* 30秒ずらして交互に */
}

@keyframes bgScroll {
  0%   { background-position: 0 0; }
  100% { background-position: 1920px 0; }
}

@keyframes bgScrollFade {
  0%   { background-position: 0 0;        opacity: 0; }
  5%   { opacity: 1; }                 /* フェードイン */
  90%  { opacity: 1; }
  100% { background-position: 1920px 0;  opacity: 0; } /* フェードアウト */
}
/*----------------------------------------------
	a
---------------------------------------------*/
a { color: #097FC5; }
a:hover,
a:active,
a:focus { color: #F47D3D; cursor: pointer;}

/*----------------------------------------------
	table
---------------------------------------------*/
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*----------------------------------------------
	h1,h2,h3,h4,h5,h6
---------------------------------------------*/
h1,h2,h3,h4,h5,h6{ margin: 0; }

/*----------------------------------------------
	img
---------------------------------------------*/
img { vertical-align: bottom; }

/*----------------------------------------------
	*
---------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}