@charset "UTF-8";

/* CSS Document */

/*------------------------------------------*
* ブロックスタイル
*------------------------------------------*/
li {
  list-style: none;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

.vertical-bottom {
  vertical-align: bottom;
}

/*------------------------------------------*
* インラインスタイル
*------------------------------------------*/
img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: #767676;
  display: block;
}

a:hover,
a:hover img,
input[type=submit]:hover,
input[type=button]:hover {
  text-decoration: none;
  cursor: pointer;
  opacity: 0.9;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=80)";
}
figure { margin: 0; }            /* UAのデフォルト余白を消す */
figure img { display: block; }
/*------------------------------------------*
* ポジション
*------------------------------------------*/
.relative {
  position: relative;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*------------------------------------------*
* 文字スタイル
*------------------------------------------*/
.fs12 {
  font-size: 12px;
}

.fs14 {
  font-size: 14px;
}

.fs16 {
  font-size: 16px;
}

.fs18 {
  font-size: 18px;
}

.fs20 {
  font-size: 20px;
}

.fs22 {
  font-size: 22px;
}

.fs24 {
  font-size: 24px;
}

.fs28 {
  font-size: 28px;
}

.fs32 {
  font-size: 32px;
}

.fs36 {
  font-size: 36px;
}

.palt {
  font-feature-settings: "palt" 1;
}

.latters_005 {
  letter-spacing: 0.04em;
}

.lsn {
  letter-spacing: normal t;
}

.ls-01 {
  letter-spacing: -0.1em t;
}

.ls01 {
  letter-spacing: 0.1em t;
}

.ls-02 {
  letter-spacing: -0.2em t;
}

.ls02 {
  letter-spacing: 0.2em t;
}

.ls-03 {
  letter-spacing: -0.3em t;
}

.ls03 {
  letter-spacing: 0.3em t;
}

.ls-04 {
  letter-spacing: -0.4em t;
}

.ls04 {
  letter-spacing: 0.4em t;
}

.ls-06 {
  letter-spacing: -0.6em t;
}

.ls06 {
  letter-spacing: 0.6em t;
}

.ls-08 {
  letter-spacing: -0.8em t;
}

.ls08 {
  letter-spacing: 0.8em t;
}

.txt_bold {
  font-weight: bold;
}

.txt_500 {
  font-weight: 500;
}

.td_under {
  text-decoration: underline;
}

.txt_blue {
  color: #195270;
}

.txt_orange {
  color: #ff7f00;
}

.txt_red {
  color: #ff0000;
}

.txt_fff {
  color: #fff;
}

/*------------------------------------------*
* margin系CSS
*------------------------------------------*/
.mt2 {
  margin-top: 2px;
}

.mt4 {
  margin-top: 4px;
}

.mt8 {
  margin-top: 8px;
}

.mt10 {
  margin-top: 10px;
}

.mt16 {
  margin-top: 16px;
}

.mt20 {
  margin-top: 20px;
}

.mt4 {
  margin-top: 24px;
}

.mt30 {
  margin-top: 30px;
}

.mt32 {
  margin-top: 32px;
}

.mt36 {
  margin-top: 36px;
}

.mt40 {
  margin-top: 40px;
}

.mt50 {
  margin-top: 50px;
}

.mt60 {
  margin-top: 60px;
}

.mt65 {
  margin-top: 65px;
}

.mt70 {
  margin-top: 70px;
}

.mt75 {
  margin-top: 75px;
}

.mt80 {
  margin-top: 80px;
}

.mt90 {
  margin-top: 90px;
}

.mt150 {
  margin-top: 150px;
}

.mt160 {
  margin-top: 160px;
}

.mt200 {
  margin-top: 200px;
}

/*------------------------------------------*
* position系CSS
*------------------------------------------*/
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.z1 {
  z-index: 1;
}

.z2 {
  z-index: 2;
}

.z3 {
  z-index: 3;
}

/*------------------------------------------*
*ブロック・インライン
*------------------------------------------*/
.block {
  display: block;
}

.inline {
  display: inline-block;
}

/*------------------------------------------*
*アニメーション
*------------------------------------------*/
/********* フェードイン *********/
/*------------------------------------------*
 * ページ読み込み時に発火するフェード系アニメーション
 *------------------------------------------*/

/* ===== 基本フェードイン ===== */
.fadeIn {
  animation: fadeInAnime 3s ease forwards;
  opacity: 0;
}
@keyframes fadeInAnime {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== 下から上へフェードアップ ===== */
.fadeUp {
  animation: fadeUpAnime 1.5s ease forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 上から下へフェードダウン ===== */
.fadeDown {
  animation: fadeDownAnime 0.8s ease forwards;
  opacity: 0;
}
@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 左からフェードイン ===== */
.fadeLeft {
  animation: fadeLeftAnime 0.8s ease forwards;
  opacity: 0;
}
@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== 右からフェードイン ===== */
.fadeRight {
  animation: fadeRightAnime 1.5s ease forwards;
  opacity: 0;
}
@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/*-- js発火あり --*/
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.scroll_up.on {
  transform: translateY(0);
  opacity: 1;
}

/*----------------------------
scroll_down ｜上から下へ出現
----------------------------*/
.scroll_down {
  transition: 0.8s ease-in-out;
  transform: translateY(-30px);
  opacity: 0;
}

.scroll_down.on {
  transform: translateY(0);
  opacity: 1;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
  transition: 0.8s ease-in-out;
  transform: translateX(-80px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}

.scroll_left.on {
  opacity: 1;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
  transition: 0.8s ease-in-out;
  transform: translateX(80px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}

.scroll_right.on {
  opacity: 1;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  transform: translateX(0);
}

/*-- js発火なし --*/
/*------------------------------------------*
 * 遅延アニメーション（transition-delay）
 *------------------------------------------*/

/* 長めの遅延（秒単位） */
.low_timing02 { transition-delay: 1s; }
.low_timing03 { transition-delay: 2s; }
.low_timing04 { transition-delay: 3s; }
.low_timing05 { transition-delay: 4s; }
.low_timing06 { transition-delay: 5s; }
.low_timing07 { transition-delay: 6s; }
.low_timing08 { transition-delay: 7s; }

/* 短めの遅延（0.x秒単位） */
.timing02 { transition-delay: 0.2s; }
.timing03 { transition-delay: 0.4s; }
.timing04 { transition-delay: 0.6s; }
.timing05 { transition-delay: 0.8s; }

/*------------------------------------------*
 * 繰り返しアニメーション・効果系
 *------------------------------------------*/

/* 回転アニメーション */
@keyframes rotation1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 背景グラデーション移動 */
@keyframes gradation {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* 点滅（フラッシュ） */
@keyframes flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* フェード表示（単発） */
@keyframes show {
  from { opacity: 0; }
  to   { opacity: 1; }
}