@charset "utf-8";
/*
 * 特設LP 統合CSS
 * 配色・背景は theme.css を変更してください。
 * 元の読み込み順を維持し、全クラス・メディアクエリ・アニメーションを保持。
 * 同名ルールも既存の上書き順を保つため残しています。
 */

/* ==================== 01: 元 font.css ==================== */
/*　fontstyle
*********************************************************/
html {
  font-size: 62.5%;
}

.indent-f {
  text-indent: 1em;
  padding-left: 1em;
}

.indent-b {
  text-indent: -1em;
  padding-left: 2em;
}

.fs12 {
  line-height: 1.6;
  font-size: 1.2rem;
}

.fs13 {
  line-height: 1.6;
  font-size: 1.3rem;
}

.fs14 {
  line-height: 1.6;
  font-size: 1.4rem;
}

.fs15 {
  line-height: 1.6;
  font-size: 1.5rem;
}

.fs16 {
  line-height: 1.6;
  font-size: 1.6rem;
}

.fs17 {
  line-height: 1.6;
  font-size: 1.7rem;
}

.fs18 {
  line-height: 1.6;
  font-size: 1.8rem;
}

.fs19 {
  line-height: 1.6;
  font-size: 1.9rem;
}

.fs20 {
  line-height: 1.6;
  font-size: 2rem;
}

.fs22 {
  line-height: 1.6;
  font-size: 2.2rem;
}

.fs25 {
  line-height: 1.6;
  font-size: 2.5rem;
}

.fs28 {
  line-height: 1.6;
  font-size: 2.8rem;
}

.fs30 {
  line-height: 1.6;
  font-size: 3rem;
}

.fs35 {
  line-height: 1.6;
  font-size: 3.5rem;
}

.fs40 {
  line-height: 1.6;
  font-size: 4rem;
}

.fs45 {
  line-height: 1.6;
  font-size: 4.5rem;
}

.fs50 {
  line-height: 1.6;
  font-size: 5rem;
}

.fs55 {
  line-height: 1.6;
  font-size: 5.5rem;
}

.fs60 {
  line-height: 1.6;
  font-size: 6rem;
}

.fs65 {
  line-height: 1.6;
  font-size: 6.5rem;
}

.fs70 {
  line-height: 1.6;
  font-size: 7rem;
}

.fs80 {
  line-height: 1.6;
  font-size: 8rem;
}

.fs100 {
  line-height: 1.6;
  font-size: 10rem;
}

.fs120 {
  line-height: 1.6;
  font-size: 12rem;
}

.fs130 {
  line-height: 1.6;
  font-size: 13rem;
}

.fs150 {
  line-height: 1.6;
  font-size: 15rem;
}

.fs200 {
  line-height: 1.6;
  font-size: 20rem;
}
.tSL {
  font-size: clamp(2rem, 6vw, 3.5rem);
}

.m10 {
  margin-top: 1rem;
}

.m20 {
  margin-top: 2rem;
}

.m30 {
  margin-top: 3rem;
}

.m40 {
  margin-top: 4rem;
}

.m50 {
  margin-top: 5rem;
}

.m60 {
  margin-top: 6rem;
}

.m70 {
  margin-top: 7rem;
}

.m80 {
  margin-top: 8rem;
}

.m90 {
  margin-top: 9rem;
}

.m100 {
  margin-top: 10rem;
}

.m120 {
  margin-top: 12rem;
}

.m150 {
  margin-top: 15rem;
}

.m200 {
  margin-top: 20rem;
}

.mb20 {
  margin-bottom: 2rem;
}

.mb30 {
  margin-bottom: 3rem;
}

.mb50 {
  margin-bottom: 5rem;
}

.mb100 {
  margin-bottom: 10rem;
}

.mb150 {
  margin-bottom: 15rem;
}

.p0 {
  padding-top: 0;
}

.p10 {
  padding-top: 1rem;
}

.p20 {
  padding-top: 2rem;
}

.p30 {
  padding-top: 3rem;
}

.p40 {
  padding-top: 4rem;
}

.p50 {
  padding-top: 5rem;
}

.p60 {
  padding-top: 6rem;
}

.p70 {
  padding-top: 7rem;
}

.p80 {
  padding-top: 8rem;
}

.p90 {
  padding-top: 9rem;
}

.p100 {
  padding-top: 10rem;
}

.p120 {
  padding-top: 12rem;
}

.p130 {
  padding-top: 13rem;
}

.p150 {
  padding-top: 15rem;
}

.p170 {
  padding-top: 17rem;
}

.p200 {
  padding-top: 20rem;
}

.pb0 {
  padding-bottom: 0rem;
}

.pb10 {
  padding-bottom: 1rem;
}

.pb20 {
  padding-bottom: 2rem;
}

.pb30 {
  padding-bottom: 3rem;
}

.pb40 {
  padding-bottom: 4rem;
}

.pb50 {
  padding-bottom: 5rem;
}

.pb60 {
  padding-bottom: 6rem;
}

.pb70 {
  padding-bottom: 7rem;
}

.pb80 {
  padding-bottom: 8rem;
}

.pb90 {
  padding-bottom: 9rem;
}

.pb100 {
  padding-bottom: 10rem;
}

.pb150 {
  padding-bottom: 15rem;
}

.w100 {
  width: 100%;
}

.w95 {
  width: 95%;
}

.w90 {
  width: 90%;
}

.w80 {
  width: 80%;
}

.w70 {
  width: 70%;
}

.w60 {
  width: 60%;
}

.w50 {
  width: 50%;
}

.w40 {
  width: 40%;
}

.w30 {
  width: 30%;
}

.w20 {
  width: 20%;
}

.w10 {
  width: 10%;
}

.mcenter {
  margin-left: auto;
  margin-right: auto;
}

.bld {
  font-weight: 700;
}

.nml {
  font-weight: normal;
}

.str {
  text-decoration: line-through;
}

.und {
  text-decoration: underline;
}

.wav {
  text-decoration: underline wavy;
}

.dou {
  text-decoration: underline double;
}

.dot {
  text-decoration: underline dotted;
}

.gradation_text1 {
  background: linear-gradient(to right, var(--color-white) 0%, var(--color-f9ef93) 25%, var(--color-ffe500) 50%, var(--color-f9ef93) 75%, var(--color-white) 100%) 0% center / 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradation_text 4s linear infinite;
}

.gradation_text2 {
  background: linear-gradient(to right, var(--color-white) 0%, var(--color-eeeeee) 25%, var(--color-999999) 50%, var(--color-eeeeee) 75%, var(--color-white) 100%) 0% center / 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradation_text 4s linear infinite;
}

.gradation_text3 {
  background: linear-gradient(to right, var(--color-d9d9d9) 0%, var(--color-9ddcdc) 10%, var(--color-cfcfcf) 23%, var(--color-4be0e0) 51%, var(--color-c1c1c1) 61%, var(--color-8ae7e7) 71%, var(--color-d3d5d5) 83%, var(--color-e4e2e1) 100%) 0% center / 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradation_text 4s linear infinite;
}

.gradation_text4 {
  background: linear-gradient(-45deg, var(--color-white) 0%, var(--color-bababa) 14%, var(--color-white) 32%, var(--color-9c9c9c) 41%, var(--color-ebebeb) 52%, var(--color-white) 68%, var(--color-adadad) 85%, var(--color-white) 100%) 0% center / 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradation_text 4s linear infinite;
}

.gradation_text5 {
  background: linear-gradient(to right, var(--color-82defe) 16.6%, var(--color-fe8ece) 33.2%, var(--color-feaba5) 49.8%, var(--color-fff7a2) 66.4%, var(--color-63c091) 83%, var(--color-82defe) 100%) 0% center / 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradation_text 4s linear infinite;
}

@keyframes gradation_text {
  to {
    background-position-x: 200%;
  }
}

.red {
  color: var(--color-ff2a2e);
}

.pink {
  color: var(--theme-link);
}

.blue {
  color: var(--color-1c54a8);
}

.sky {
  color: var(--color-00abff);
}

.yellow {
  color: var(--color-ffff00);
}

.orange {
  color: var(--color-febb48);
}

.orange-k {
  color: var(--color-ff7f00);
}

.green {
  color: var(--color-4ea63e);
}

.bk {
  color: var(--theme-text-dark);
}

.wt {
  color: var(--theme-text-main);
}

.gray {
  color: var(--color-adadad);
}

.blown {
  color: var(--color-440808);
}

.beige {
  color: var(--color-e7b05e);
}

.silver {
  color: transparent;
  background: repeating-linear-gradient(135deg, var(--color-757575) 0.1em, var(--color-9e9e9e) 0.2em, var(--color-e8e8e8) 0.3em, var(--color-9e9e9e) 0.4em, var(--color-757575) 0.5em);
  -webkit-background-clip: text;
}

.silver2 {
  color: transparent;
  background: repeating-linear-gradient(0deg, var(--color-757575) 0.1em, var(--color-9e9e9e) 0.2em, var(--color-e8e8e8) 0.3em, var(--color-9e9e9e) 0.4em, var(--color-757575) 0.5em);
  -webkit-background-clip: text;
}

.bg-y {
  background: var(--color-fff000);
  padding: 0 1rem;
}

.bg-bk {
  background: var(--theme-bg-black);
}

.bg-r {
  background-color: var(--color-de2024);
  padding: 0 1rem;
}

.bg-r2 {
  background-color: var(--color-1f1f1f);
  padding: 0 1rem;
  border: 2px solid var(--theme-border);
  border-radius: 10px;
}

.bg-g {
  background-color: var(--color-4ea63e);
}

.bg-vio {
  background-color: var(--color-5d23ba);
}

.bg-lg {
  background-color: var(--color-bbdd64);
}

.bg-bl {
  background-color: var(--color-1c54a8);
}

.bg-sky {
  background-color: var(--color-0fc1b2);
}

.bg-gr {
  background-color: var(--color-ececec);
}

.bg-dgr {
  background-color: var(--color-7e7e7e);
}

.bg-o {
  background-color: var(--color-febb48);
}

.bg-wt {
  background-color: var(--color-white);
}

.bg-pk {
  background-color: var(--theme-link);
}

.bg-p {
  background-color: var(--color-ffcbde);
}

.bg-dy {
  background: var(--color-ffcc00) !important;
}

.center {
  /* display:block; */
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.prl10 {
  padding-right: 1.6rem;
  padding-left: 1.6rem;
}

.br5 {
  border-radius: 0.5rem;
}

.br10 {
  border-radius: 1rem;
}

.area-gr {
  background: var(--color-f7f6f4);
  border: 1px solid var(--color-dddddd);
}

.area-y {
  background: var(--color-ffee3a);
}

.area-dy {
  background: var(--color-ffd92a);
}

.txShadowY {
  text-shadow: 0 0 10px var(--color-fff700);
}

.lh1 {
  line-height: 1 !important;
}

.lh11 {
  line-height: 1.1 !important;
}

.lh12 {
  line-height: 1.2 !important;
}

.lh13 {
  line-height: 1.3 !important;
}

.lh14 {
  line-height: 1.4 !important;
}

.lh15 {
  line-height: 1.5 !important;
}

.area-wt {
  background-color: var(--color-white);
}

.area-rd {
  background-color: var(--color-c83231);
}

.area-bk {
  background-color: var(--theme-bg-black);
}

.area-lgr {
  background-color: var(--color-cff2a2);
}

.area-lg {
  background-color: var(--color-b0e860);
  margin-left: -4rem;
}

.area-bl {
  background-color: var(--color-1d1042);
}

.area-pk {
  background-color: var(--theme-link);
}

.area-bbk {
  border: 0.2rem solid var(--color-black);
}

.area-bwt {
  border: 0.2rem solid var(--color-white);
}

.area-bpk {
  border: 0.2rem solid var(--theme-link);
}

.area-double {
  border: 0.5rem double var(--color-black);
}

.area-p5 {
  padding: 0.5rem;
}

.area-p10 {
  padding: 1rem;
}

.area-p20 {
  padding: 2rem;
}

.area-p30 {
  padding: 3rem;
}

.area-p40 {
  padding: 4rem;
}

.area-ss {
  filter: drop-shadow(10px 10px 0px var(--color-rgba-0-0-0-0p4));
}

.border-td {
  border-top: 1px dashed var(--color-9e9e9e);
}

.border-bd {
  border-bottom: 1px dashed var(--color-9e9e9e);
}

.area-dot {
  background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
}

.shadow {
  box-shadow: 0 0px 25px var(--color-black);
}

.shadow-s {
  box-shadow: 0 0px 10px var(--color-9e9e9e);
}

.shadow-f {
  filter: drop-shadow(0px 0px 4px var(--color-rgba-0-0-0-0p3));
}

.shadow-v {
  box-shadow: 20px 20px 0px var(--color-rgba-0-0-0-0p4);
}

.shadow-in {
  box-shadow: 0 0px 30px var(--color-black) inset;
}

.flash-wt {
  filter: drop-shadow(0px 0px 20px var(--color-white));
}

.flash-sky {
  filter: drop-shadow(0px 0px 20px var(--color-53e0fc));
}

.flash-in {
  box-shadow: 0 0 13px 5px var(--color-white) inset;
}

.t-shadow {
  text-shadow: 0 0px 10px var(--color-rgba-0-0-0-0p4);
}

.t-shadow_f {
  text-shadow: 0 -2px 1px var(--color-white);
}

.fuchidori_bk {
  -webkit-text-stroke: 5px var(--color-black);
  paint-order: stroke;
}

.box-dou {
  padding: 10px;
  border: 0.5rem solid var(--color-black);
  box-shadow: var(--color-rgba-104-66-30-0p5) 0px 0px 15px 5px inset;
  -webkit-box-shadow: var(--color-rgba-104-66-30-0p5) 0px 0px 15px 5px inset;
  -moz-box-shadow: var(--color-rgba-104-66-30-0p5) 0px 0px 15px 5px inset;
}

.area-cwt {
  background-color: var(--color-rgba-255-255-255-0p7);
}

.area-cbk {
  background-color: var(--color-rgba-0-0-0-0p5);
}

.area-cgr {
  background-color: var(--color-rgba-20-170-0-0p5);
}

.marker {
  background: linear-gradient(transparent 60%, var(--color-fdf38c) 60%);
}

.marker-r {
  background: linear-gradient(transparent 60%, var(--color-c01111) 60%);
}

.marker-y {
  background: linear-gradient(transparent 60%, var(--color-fffb0e) 60%);
}

.clr {
  clear: both;
}

.fr {
  float: right;
}

.fr-c {
  float: right;
}

.fl {
  float: left;
}

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

.vt {
  vertical-align: top;
}

.vm {
  vertical-align: middle;
}

.vb {
  vertical-align: bottom;
}

.grad {
  animation: example 3s linear infinite;
  width: 100%;
  background: linear-gradient(to right, var(--color-eedd95) 0%, var(--color-e1e0e5) 50%, var(--color-eedd95) 100%) 0% center / 200% auto;
  text-shadow: none;
  display: inline-block;
}

@keyframes example {
  to {
    background-position-x: 200%;
  }
}

.mincho1 {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 300;
}

.mincho2 {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 500;
}

.mincho3 {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 700;
}

.mincho4 {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 900;
}

.new {
  padding-right: 20px;
  letter-spacing: 1px;
  padding: 3px 10px;
  margin: 0 30px 0 0;
  line-height: 1;
  display: inline-block;
  padding: 4px 8px;
  white-space: nowrap;
  color: var(--theme-text-main);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
}

.green-lights {
  text-shadow:
    5px 3px 6px var(--color-00ffffb3),
    -5px 3px 6px var(--color-00ffffb3),
    5px -3px 6px var(--color-00a99d),
    -5px -3px 6px var(--color-00a99d),
    5px 0px 6px var(--color-00a99d),
    0px 3px 6px var(--color-00a99d),
    -5px 0px 6px var(--color-00a99d),
    0px -3px 6px var(--color-00a99d);
}

/* ==================== 02: 元 index_stage.css ==================== */
* {
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-scrollbar) var(--theme-scrollbar-track);
}

.stage {
  display: block;
  margin: 0 auto;
  text-align: left;
  font-weight: 500;
  padding: 0;
  font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", Helvetica, verdana, arial;
  letter-spacing: 1.3px;
  background-color: var(--theme-bg-black);
  background-image: url(../../../images/sgk_gp/stagebg.png) top center no-repeat fixed;
  background-size: cover;
}

.stage::before {
  background-image: var(--theme-bg-image);
  background-image: no-repeat;
  background-position: top center;
  background-size: cover;
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.nt {
  font-family: "Noto Sans JP", "Roboto", "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", Helvetica, verdana, arial, sans-serif;
}

img {
  vertical-align: bottom;
}

br {
  letter-spacing: 0;
}

@media screen and (min-width: 568px) {
  a:hover {
    opacity: 0.8;
  }

  /* ホバースタイルは横幅が大きなデバイスだけ */
}

a:link {
  text-decoration: none;
  color: var(--theme-link);
}

a:visited {
  text-decoration: none;
  color: var(--theme-link);
}

a:hover {
  text-decoration: none;
  color: var(--theme-link);
}

a:active {
  text-decoration: none;
  color: var(--theme-link);
}

/*　head
*********************************************************/

/*　layout
*********************************************************/

#wrapper {
  width: 100%;
  height: auto;
  text-align: center;
  position: relative;

  /* stickyを殺さず、横はみ出しだけ隠す */
  overflow-x: clip;
  overflow-y: visible;
}

#header2 {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/*=====================================================
コメント総数自動カウントアップ
=====================================================*/

.comment-counter-wrap {
  text-align: center;
  background: var(--theme-panel-start);
  background: linear-gradient(180deg, var(--theme-panel-start) 0%, var(--theme-bg-black) 100%);
  color: var(--theme-text-main);
  padding: 2%;
}

.comment-counter-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--theme-counter-label);
  margin-bottom: 4px;
  margin-top: 4px;
  opacity: 0.9;
}

.comment-counter-number {
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--theme-counter-text);
}

#commentCount {
  display: inline-block;
}

.count-animate {
  animation: countPop 0.8s ease-out;
}

@keyframes countPop {
  from {
    transform: translateY(2px);
    opacity: 0.3;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/*=====================================================
ランクゲージ
=====================================================*/
/* ===== セクション全体 ===== */
.rank-section {
  width: 100%;
  padding: 18px 0;
}

/* ===== ランクアイコン列（6分割グリッド） ===== */
.rank-icons {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: start;
  margin: 8px 0 10px;
  padding: 20px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.rank-icons::-webkit-scrollbar {
  display: none;
}

/* ===== 各ランクの枠 ===== */
.rank-icon {
  justify-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;

  background: var(--color-rgba-255-255-255-0p06);
  border: 1px solid var(--color-rgba-255-255-255-0p1);
  border-radius: 14px;

  /* ベースの影 */
  box-shadow:
    inset 0 0 0 1px var(--color-rgba-0-0-0-0p25),
    0 0 6px var(--color-rgba-255-215-0-0p12);

  opacity: 0.75;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

  position: relative;
  overflow: visible;
}

/* ===== 全ランク：ごく弱い常時発光 ===== */
.rank-icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  pointer-events: none;

  box-shadow: 0 0 8px var(--color-rgba-255-215-0-0p18);

  opacity: 0.6;
}

/* ===== ランク画像 ===== */
.rank-icon img {
  width: clamp(44px, 8vw, 70px);
  height: clamp(44px, 8vw, 70px);
  object-fit: contain;
  display: block;
}

/* ===== 現在ランク：シャドウが鼓動 ===== */
.rank-icon.is-active {
  opacity: 1;
  transform: translateY(-2px);
  animation: rankShadowPulse 1.9s ease-in-out infinite;
}

/* 枠シャドウの鼓動だけ */
@keyframes rankShadowPulse {
  0% {
    box-shadow:
      inset 0 0 0 1px var(--color-rgba-0-0-0-0p25),
      0 0 8px var(--color-rgba-255-215-0-0p35),
      0 0 16px var(--color-rgba-255-180-40-0p18);
  }

  50% {
    box-shadow:
      inset 0 0 0 1px var(--color-rgba-0-0-0-0p25),
      0 0 14px var(--color-rgba-255-217-0-0p849),
      0 0 28px var(--color-rgba-255-180-40-0p35);
  }

  100% {
    box-shadow:
      inset 0 0 0 1px var(--color-rgba-0-0-0-0p25),
      0 0 8px var(--color-rgba-255-215-0-0p35),
      0 0 16px var(--color-rgba-255-180-40-0p18);
  }
}

/* =================================================
   ▼マーカー
   ================================================= */
.rank-markers {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
  margin-top: -2px;
  pointer-events: none;
}

.rank-marker {
  justify-self: center;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 16px solid var(--color-rgba-255-255-255-0p92);
  filter: drop-shadow(0 2px 0 var(--color-rgba-0-0-0-0p25));
}

/* ===== ゲージ ===== */
.rank-gauge {
  width: 100%;
  margin-top: 6px;
}

.rank-gauge-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--color-rgba-255-255-255-0p12);
  border: 1px solid var(--color-rgba-255-255-255-0p14);
  overflow: hidden;
}

.rank-gauge-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-b9821a), var(--color-cf4242));
  box-shadow: 0 0 16px var(--color-rgba-255-180-40-0p55);
  transition: width 1.2s ease;
}

/* ===== スマホ微調整 ===== */
@media (max-width: 420px) {
  .rank-icons {
    gap: 8px;
  }

  .rank-marker {
    border-left-width: 9px;
    border-right-width: 9px;
    border-top-width: 14px;
  }

  .rank-gauge-track {
    height: 12px;
  }
}

/*=====================================================
nav
=====================================================*/

#global-nav {
  width: 100%;
  height: 8rem;
  padding-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--theme-nav-base);
  background-image: url("https://www.transparenttextures.com/patterns/az-subtle.png");
  z-index: 999999;
  position: fixed;
  border-top: 0.5rem solid var(--theme-nav-frame);
  border-bottom: 0.5rem solid var(--theme-nav-frame);
}

ul.menu {
  padding: 5px 0;
  margin: 0 auto;
  width: auto;
  height: 100%;
  font-size: 2rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  list-style: none;
  background-color: var(--theme-nav-inner);
  background-image: url("https://www.transparenttextures.com/patterns/az-subtle.png");
}

ul.menu li {
  width: auto;
  vertical-align: middle;
  color: var(--theme-text-main);
  font-weight: bold;
}

ul.menu li:first-child {
  border-left: none;
}

ul.menu li:last-child {
  border-right: none;
}

ul.menu li a {
  max-width: 300px;
  padding: 1rem 1.5rem;
  margin-right: 2rem;
  color: var(--theme-text-main);
  display: block;
  text-align: center;
  vertical-align: middle;
  border: 0.3rem solid var(--theme-nav-button-border);
  background: linear-gradient(180deg, var(--theme-panel-start) 0%, var(--theme-bg-black) 100%);
  border-radius: 25px 0 25px 0;
}

@media screen and (min-width: 568px) {
  ul.menu li a:hover {
    color: var(--theme-text-main);
    border: 0.3rem solid var(--theme-nav-button-border);
    text-decoration: none;
    transition: 0.2s;
  }
}

ul.menu li a i {
  font-size: 3rem;
  display: inline-block;
}

/**********************************************************/
.titleboxT {
  width: 100%;
  margin: 0 auto;
  max-width: 1300px;
  padding: 8px 2rem;
  border: 2px solid var(--theme-border);
  background-color: var(--theme-heading-dark);
  background-image: url("https://www.transparenttextures.com/patterns/dark-circles.png");
  border-radius: 10px 10px 0 0;
  box-shadow: 0px 0px 9px 1px var(--theme-border);
}

.titleboxIN {
  width: 100%;
  margin: 0 auto;
  max-width: 1300px;
  padding: 8px 2rem;
  border: 2px solid var(--theme-border);
  background: var(--theme-panel-start);
  background: linear-gradient(180deg, var(--theme-panel-start) 0%, var(--theme-bg-black) 100%);
  color: var(--theme-text-main);
  box-shadow: 0px 0px 9px 1px var(--theme-title-glow);
  text-align: center;
  font-size: 50px;
  justify-content: center;

  @media screen and (max-width: 568px) {
    font-size: 23px;
  }

  font-weight: 900;
}

.titleboxIN2 {
  width: 100%;
  margin: 0 auto;
  max-width: 1300px;
  padding: 8px 2rem;
  border: 2px solid var(--color-fbf0d4);
  color: var(--color-eedf15);
  box-shadow: 0px 0px 9px 1px var(--color-852c2c);
  text-align: center;
  font-size: 50px;
  justify-content: center;

  @media screen and (max-width: 568px) {
    font-size: 23px;
  }

  font-weight: 900;
}

.titleboxU {
  width: 100%;
  margin: 0 auto;
  max-width: 1300px;
  padding: 8px 2rem;
  border: 2px solid var(--theme-border);
  background-color: var(--theme-heading-dark);
  background-image: url("https://www.transparenttextures.com/patterns/dark-circles.png");
  border-radius: 0 0 10px 10px;
  box-shadow: 0px 0px 9px 1px var(--theme-border);
}

/**********************************************************/

.content-back0 {
  max-width: 1000px;
  width: 99%;
  margin: 1rem;
  padding: 1px 1px 0;
  border-radius: 4px;
  box-shadow: 0px 0px 9px 1px var(--theme-border);
  border: 5px double var(--theme-border);
  position: relative;
  z-index: 3;
  background: var(--theme-bg-card);
}

.content-back02 {
  max-width: 800px;
  width: 25%;
  position: relative;
  z-index: 3;
  box-shadow: 0px 0px 9px 1px var(--theme-border);
  border: 5px double var(--theme-border);
  border-radius: 4px;

  @media screen and (min-width: 568px) {
    margin: 1rem;
  }
}

.content-back02-2 {
  max-width: 800px;
  width: 25%;
  position: relative;
  z-index: 3;
  box-shadow: 0px 0px 9px 1px var(--theme-border);
  border: 5px double var(--theme-border);
  border-radius: 4px;
  background-color: var(--theme-bg-black);

  @media screen and (min-width: 568px) {
    margin: 1rem;
  }
}

.content-back02-2.is-hide {
  visibility: hidden;
}

.content-back03 {
  max-width: 900px;
  width: 100%;
  margin: 0 auto 40px;
  padding: 1px 1px 0;
  border: 2px solid var(--theme-border);
  box-shadow:
    0 0 7px 0px var(--theme-border),
    0 0 0px 0px var(--theme-border);
  position: relative;
  z-index: 3;
  background: var(--theme-bg-black);
}

.content-back4 {
  max-width: 1800px;
  width: 100%;
  margin: 1rem 0;
  padding: 1px 1px 10px;
  border-radius: 4px;
  box-shadow: 0px 0px 9px 1px var(--theme-border);
  border: 3px solid var(--theme-border);
  position: relative;
  z-index: 3;
  background: var(--color-fbf0d4af);
  display: flex;
  flex-wrap: wrap;
  /* 画面が狭いとき折り返す */
  gap: 16px;
  /* 余白（任意） */
  align-items: stretch;
}

/* .content-back02 の幅指定は “flex基準” にするのが安定 */
.content-back4 > .content-back02-2 {
  flex: 1 1 300px;
  /* 最低300px、余れば均等に伸びる */
  width: auto;
  /* width:25% を殺す（重要） */
  max-width: none;
  /* max-width:800px を殺す（任意） */
  margin: 0;
  /* 余白は gap に任せる */
}

.content-back5 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* .content-back02 の幅指定は “flex基準” にするのが安定 */
.content-back5 > .content-back02-2 {
  flex: 0 0 calc(50% - 8px);
  /* 2分割固定（gap16の半分を引く） */
  margin: 0;
  width: auto;
  max-width: none;
}

@media (max-width: 768px) {
  .content-back4 > .content-back02-2 {
    flex: 0 0 100%;
    /* スマホは1列 */
  }
}

/*-------------------------------------------*/

/*-------------------------------------------*/

/*-------------------------------------------*/

.subtitle1 {
  width: 100%;
  background: var(--theme-heading-start);
  background: linear-gradient(180deg, var(--theme-heading-start) 0%, var(--theme-heading-end) 100%);
  text-align: center;
  border: 2px solid var(--theme-heading-start);
  margin: 0 auto;
  font-size: 18px;
  color: var(--theme-text-main);
  padding: 1rem;
  line-height: 1;
  font-weight: 900;
  position: relative;
}

@media screen and (max-width: 768px) {
  .subtitle1 {
    max-width: 800px;
    background: var(--theme-heading-start);
    background: linear-gradient(180deg, var(--theme-heading-start) 0%, var(--theme-heading-end) 100%);
    text-align: center;
    margin: 0 auto;
    font-size: 24px;
    font-weight: 900;
    border: 2px solid var(--theme-heading-start);
    color: var(--theme-text-main);
    padding: 8px 1%;
    position: relative;
  }
}

.subhead01 {
  width: 100%;
  line-height: 1.3;
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 900;
  font-size: 5rem;
  text-align: center;
  padding: 2rem 0;
  color: var(--color-202020);
  background: var(--color-fbf0d4af);
  background: linear-gradient(180deg, var(--color-fbf0d4) 51%, var(--color-cf8f53) 100%);
}

.img-fade-in {
  -webkit-animation: fade-in 1.7s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 2.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*========= 流れるテキスト ===============*/

/*全共通*/

/*左右のアニメーション*/

/*-------------------------------------------*/
.report ul li {
  list-style: none;
}

.mss_bt2404 {
  border: 3px solid var(--color-ffe500);
  border-radius: 5px;
  color: var(--color-333333);
  padding: 5px 3px;
  background: #919191;
  background: linear-gradient(0deg, rgba(145, 145, 145, 1) 0%, rgba(255, 255, 255, 1) 100%);
  display: block;
  margin: 0 auto 20px;
  text-align: center;
  line-height: 1.4;
  font-weight: 900;
  font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MSゴシック", Helvetica, verdana, arial;
}

.mss_bt2404:hover {
  opacity: 0.7;
}

/*-------------------------------------------*/

label.display_bt {
  cursor: pointer;
}

label.display_bt:hover {
  opacity: 0.8;
}

.form_every {
  width: 100%;
  border: 2px solid var(--theme-heading-start);
}

.iframe_container {
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tg4th_iframe {
  position: relative;
  overflow: hidden;
  height: 1200px;
}

.tg4th_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/*-------------------------------------------*/

.area-main {
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
}

p {
  padding-top: 8rem;
}

.flash2 {
  animation: flash 1.5s linear infinite;
}

@keyframes flash {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/********************************************
	FVエリア
********************************************/
.fvarea {
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 5px;
  text-align: center;
}

/*********************************************************
	フッター
*********************************************************/

#footer {
  width: 100%;
  margin: 0px auto 0 auto;
  color: var(--theme-text-main);
  font-size: 13px;
  letter-spacing: 5px;
  padding-top: 20px;
  padding-bottom: 5px;
  background: var(--theme-bg-black);
  box-shadow:
    0 0 3px 2px var(--theme-footer-glow),
    0 0 20px 1px var(--theme-footer-glow-light);
  position: relative;
  z-index: 1100;
}

#footer p {
  padding-top: 0px;
}

.top a {
  width: 120px;
  margin: 10px 20px 10px 20px;
  color: var(--theme-text-main);
  text-align: center;
}

.top a:hover {
  width: 120px;
  color: var(--color-ff4500);
  text-align: center;
}

.contents-flex {
  display: flex;
  width: 100%;
  margin: 0 auto;
  max-width: 1300px;
  padding: 1.5px;
  background: var(--theme-bg-container);
  border-left: 2px solid var(--theme-border);
  border-right: 2px solid var(--theme-border);
}

.iframe_mess_area {
  position: relative;
  margin-inline: auto;
}

.esponsive-box {
  @media (max-width: 768px) {
    width: 100%;
  }

  @media (min-width: 768px) {
    width: 42%;
  }
}

/********************************************
	流れるコメント
********************************************/

.place1_link_com_bg {
  width: 100%;
  border: 1px solid var(--color-e7c3f7);
  height: 219px;
  overflow: hidden;
  /* overflow-y: scroll; */
  transform: translateZ(0);
}

.place1_link_com_bg.bigss {
  width: 100%;
  height: auto;
  max-height: 4000px;
  border: 2px solid var(--color-281803);
  border-radius: 0 0 4px 4px;
  margin: 0 auto;
}

.place1_link_com_bg.bigss .mx_place1_com_text {
  font-size: 16px;
}

.place1_link_com_bg.bigss .mx_place1_com_name {
  font-size: 12px;
}

.mx_place1_com_list {
  border-bottom: 1px solid var(--color-white);
  padding: 10px;
  width: 100%;
}

.mx_place1_com_name {
  color: var(--theme-comment-text);
  font-size: 1.5rem;
}

.mx_place1_com_text {
  font-size: 12px;
  font-weight: normal;
  color: var(--theme-text-main);
  text-align-last: left;
}

.status-section {
  background: var(--theme-bg-black);
  color: var(--theme-text-main);
  padding: 18px 14px;
  border: 2px solid var(--theme-status-accent);
  box-shadow: 0 0 12px var(--color-rgba-255-140-0-0p18);
}

.status-heading {
  margin: 0 0 18px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: var(--theme-status-heading);
  line-height: 1.4;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--theme-status-accent);
  padding-bottom: 10px;
}

.status-box-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-111111);
  border: 1px solid var(--theme-status-accent);
}

.status-box {
  padding: 24px 16px;
  text-align: center;
  background: linear-gradient(180deg, var(--color-111111) 0%, var(--theme-bg-black) 100%);
}

.status-label {
  font-size: 22px;
  font-weight: bold;
  color: var(--theme-status-label);
  margin-bottom: 12px;
  line-height: 1.5;
}

.status-value {
  font-size: 36px;
  font-weight: bold;
  color: var(--theme-text-main);
  line-height: 1.4;
  text-shadow:
    0 0 8px var(--color-rgba-255-140-0-0p25),
    0 0 18px var(--color-rgba-255-140-0-0p18);
}

.status-text {
  font-size: 30px;
}

.status-divider {
  height: 2px;
  background: linear-gradient(to right, transparent 0%, var(--theme-status-accent) 20%, var(--theme-status-accent) 80%, transparent 100%);
}

/* 鼓動アニメーション */
.pulse-text {
  display: inline-block;
  animation: heartbeat 1.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
    text-shadow:
      0 0 8px var(--color-rgba-255-140-0-0p25),
      0 0 18px var(--color-rgba-255-140-0-0p18);
  }

  14% {
    transform: scale(1.08);
    text-shadow:
      0 0 10px var(--color-rgba-255-140-0-0p35),
      0 0 24px var(--color-rgba-255-140-0-0p28),
      0 0 36px var(--color-rgba-255-140-0-0p18);
  }

  28% {
    transform: scale(1);
    text-shadow:
      0 0 8px var(--color-rgba-255-140-0-0p25),
      0 0 18px var(--color-rgba-255-140-0-0p18);
  }

  42% {
    transform: scale(1.12);
    text-shadow:
      0 0 12px var(--color-rgba-255-140-0-0p45),
      0 0 28px var(--color-rgba-255-140-0-0p35),
      0 0 42px var(--color-rgba-255-140-0-0p22);
  }

  70% {
    transform: scale(1);
    text-shadow:
      0 0 8px var(--color-rgba-255-140-0-0p25),
      0 0 18px var(--color-rgba-255-140-0-0p18);
  }

  100% {
    transform: scale(1);
    text-shadow:
      0 0 8px var(--color-rgba-255-140-0-0p25),
      0 0 18px var(--color-rgba-255-140-0-0p18);
  }
}

@media screen and (max-width: 768px) {
  .status-heading {
    font-size: 22px;
  }

  .status-label {
    font-size: 18px;
  }

  .status-value {
    font-size: 18px;
  }

  .status-text {
    font-size: 20px;
  }

  .status-box {
    padding: 20px 12px;
  }
}

/* ==================== 03: 元 animations.css ==================== */
/*animations*/

/******************
* Bounce in right *
*******************/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.slow {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.slower {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.slowest {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.fast {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.morefast {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* Added by Andy Meetan */
.delay-250 {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  -o-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.delay-500 {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.delay-750 {
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  animation-delay: 0.75s;
}
.delay-1000 {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}
.delay-1250 {
  -webkit-animation-delay: 1.25s;
  -moz-animation-delay: 1.25s;
  -o-animation-delay: 1.25s;
  animation-delay: 1.25s;
}
.delay-1500 {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.delay-1750 {
  -webkit-animation-delay: 1.75s;
  -moz-animation-delay: 1.75s;
  -o-animation-delay: 1.75s;
  animation-delay: 1.75s;
}
.delay-2000 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
.delay-2500 {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -o-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
.delay-2000 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
.delay-2500 {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -o-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
.delay-3000 {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
}
.delay-3500 {
  -webkit-animation-delay: 3.5s;
  -moz-animation-delay: 3.5s;
  -o-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

.bounceInRight,
.bounceInLeft,
.bounceInUp,
.bounceInDown {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}
.fadeInRight,
.fadeInLeft,
.fadeInUp,
.fadeInDown {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}

.flipInX,
.flipInY,
.rotateIn,
.rotateInUpLeft,
.rotateInUpRight,
.rotateInDownLeft,
.rotateDownUpRight,
.rollIn {
  opacity: 0;
}

.lightSpeedInRight,
.lightSpeedInLeft {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}

/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.bounceIn.go {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

/****************
* bounceInRight *
****************/

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;

    -webkit-transform: translateX(400px);
  }
  60% {
    -webkit-transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
  }
  100% {
    opacity: 1;

    -webkit-transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;

    transform: translateX(400px);
  }
  60% {
    transform: translateX(-30px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    opacity: 1;

    transform: translateX(0);
  }
}

.bounceInRight.go {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

/******************
* Bounce in left *
*******************/

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;

    -webkit-transform: translateX(-400px);
  }
  60% {
    -webkit-transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
  }
  100% {
    opacity: 1;

    -webkit-transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;

    transform: translateX(-400px);
  }
  60% {
    transform: translateX(30px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;

    transform: translateX(0);
  }
}

.bounceInLeft.go {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

/******************
* Bounce in up *
*******************/

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;

    -webkit-transform: translateY(400px);
  }
  60% {
    -webkit-transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
  }
  100% {
    opacity: 1;

    -webkit-transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;

    transform: translateY(400px);
  }
  60% {
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    opacity: 1;

    transform: translateY(0);
  }
}

.bounceInUp.go {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

/******************
* Bounce in down *
*******************/

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;

    -webkit-transform: translateY(-400px);
  }
  60% {
    -webkit-transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    opacity: 1;

    -webkit-transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;

    transform: translateY(-400px);
  }
  60% {
    transform: translateY(30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;

    transform: translateY(0);
  }
}

.bounceInDown.go {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

/**********
* Fade In *
**********/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
.fadeIn {
  opacity: 0;
}
.fadeIn.go {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/**********
* Grow in *
***********/

@-webkit-keyframes growIn {
  0% {
    -webkit-transform: scale(0.2);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
@keyframes growIn {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.growIn {
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
  opacity: 0;
}
.growIn.go {
  -webkit-animation-name: growIn;
  animation-name: growIn;
}

/********
* Shake *
********/
@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
  }
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}
.shake.go {
  -webkit-animation-name: shake;
  animation-name: shake;
}

/********
* ShakeUp *
********/
@-webkit-keyframes shakeUp {
  0%,
  100% {
    -webkit-transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateY(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateY(10px);
  }
}
@keyframes shakeUp {
  0%,
  100% {
    transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateY(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateY(10px);
  }
}
.shakeUp.go {
  -webkit-animation-name: shakeUp;
  animation-name: shakeUp;
}

/*************
* FadeInLeft *
*************/

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInLeft {
  opacity: 0;
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px);
}
.fadeInLeft.go {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

/*************
* FadeInRight *
*************/

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRight {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}
.fadeInRight.go {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

/*************
* FadeInUp *
*************/

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInUp {
  opacity: 0;
  -webkit-transform: translateY(400px);
  transform: translateY(400px);
}
.fadeInUp.go {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/*************
* FadeInDown *
*************/

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-400px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInDown {
  opacity: 0;
  -webkit-transform: translateY(-400px);
  transform: translateY(-400px);
}
.fadeInDown.go {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/*****************
* rotateIn *
*****************/
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateIn.go {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

/*****************
* rotateInUpLeft *
*****************/

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInUpLeft.go {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

/*******************
* rotateInDownLeft *
*******************/
@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInDownLeft.go {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

/******************
* rotateInUpRight *
*******************/

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInUpRight.go {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

/********************
* rotateInDownRight *
********************/

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotateInDownRight.go {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

/*********
* rollIn *
**********/

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(-1deg);
  }
}
@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotate(-1deg);
  }
}
.rollIn.go {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/*********
* wiggle *
**********/

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: skewX(9deg);
  }
  10% {
    -webkit-transform: skewX(-8deg);
  }
  20% {
    -webkit-transform: skewX(7deg);
  }
  30% {
    -webkit-transform: skewX(-6deg);
  }
  40% {
    -webkit-transform: skewX(5deg);
  }
  50% {
    -webkit-transform: skewX(-4deg);
  }
  60% {
    -webkit-transform: skewX(3deg);
  }
  70% {
    -webkit-transform: skewX(-2deg);
  }
  80% {
    -webkit-transform: skewX(1deg);
  }
  90% {
    -webkit-transform: skewX(0deg);
  }
  100% {
    -webkit-transform: skewX(0deg);
  }
}
@keyframes wiggle {
  0% {
    transform: skewX(9deg);
  }
  10% {
    transform: skewX(-8deg);
  }
  20% {
    transform: skewX(7deg);
  }
  30% {
    transform: skewX(-6deg);
  }
  40% {
    transform: skewX(5deg);
  }
  50% {
    transform: skewX(-4deg);
  }
  60% {
    transform: skewX(3deg);
  }
  70% {
    transform: skewX(-2deg);
  }
  80% {
    transform: skewX(1deg);
  }
  90% {
    transform: skewX(0deg);
  }
  100% {
    transform: skewX(0deg);
  }
}
.wiggle.go {
  -webkit-animation-name: wiggle;
  animation-name: wiggle;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

/********
* swing *
*********/

@-webkit-keyframes swing {
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transform-origin: top center;
  }
  20% {
    -webkit-transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.swing.go {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

/*******
* tada *
********/

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
  }
  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
  }
}
@keyframes tada {
  0% {
    transform: scale(1);
  }
  10%,
  20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.tada.go {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/*********
* wobble *
**********/

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}
.wobble.go {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

/********
* pulse *
*********/

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.pulse.go {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

/***************
* lightSpeedInRight *
****************/
@-webkit-keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
@keyframes lightSpeedInRight {
  0% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
.lightSpeedInRight.go {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

/***************
* lightSpeedInLeft *
****************/
@-webkit-keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translateX(-100%) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(20%) skewX(-30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
@keyframes lightSpeedInLeft {
  0% {
    transform: translateX(-100%) skewX(30deg);
    opacity: 0;
  }
  60% {
    transform: translateX(20%) skewX(-30deg);
    opacity: 1;
  }
  80% {
    transform: translateX(0%) skewX(15deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}
.lightSpeedInLeft.go {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

/*******
* Flip *
*******/
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotateY(0);
    -webkit-animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) scale(1);
    -webkit-animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px) scale(1);
    animation-timing-function: ease-in;
  }
}
.flip.go {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flip;
  backface-visibility: visible !important;
  animation-name: flip;
}

/**********
* flipInX *
**********/
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
.flipInX.go {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  backface-visibility: visible !important;
  animation-name: flipInX;
}

/**********
* flipInY *
**********/

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes flipInY {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}
.flipInY.go {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  backface-visibility: visible !important;
  animation-name: flipInY;
}

/*****************
* Out animations *
*****************/

/************
* bounceOut *
*************/
@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
}
@keyframes bounceOut {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
.bounceOut.goAway {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

/************
* bounceOutUp *
*************/
@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}
@keyframes bounceOutUp {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}
.bounceOutUp.goAway {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

/************
* bounceOutDown *
*************/
@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
}
@keyframes bounceOutDown {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}
.bounceOutDown.goAway {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

/************
* bounceOutLeft *
*************/
@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
}
@keyframes bounceOutLeft {
  0% {
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}
.bounceOutLeft.goAway {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

/************
* bounceOutRight *
*************/
@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
}
@keyframes bounceOutRight {
  0% {
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}
.bounceOutRight.goAway {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

/************
* fadeOut *
*************/
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut.goAway {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

/************
* fadeOutUp *
*************/
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}
.fadeOutUp.goAway {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

/************
* fadeOutDown *
*************/
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}
.fadeOutDown.goAway {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

/************
* fadeOutLeft *
*************/
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}
.fadeOutLeft.goAway {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

/************
* fadeOutRight *
*************/
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}
.fadeOutRight.goAway {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
/************
* flipOutX *
*************/
@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.flipOutX.goAway {
  -webkit-animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  animation-name: flipOutX;
  backface-visibility: visible !important;
}

/************
* flipOutY *
*************/
@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  0% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  backface-visibility: visible !important;
  animation-name: flipOutY;
}

/************
* lightSpeedOutRight *
*************/
@-webkit-keyframes lightSpeedOutRight {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}
.lightSpeedOutRight.goAway {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

/************
* lightSpeedOutLeft *
*************/
@-webkit-keyframes lightSpeedOutLeft {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-100%) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOutLeft.goAway {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

/************
* rotateOut *
*************/
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  0% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: center center;
    transform: rotate(200deg);
    opacity: 0;
  }
}
.rotateOut.goAway {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

/************
* rotateOutUpLeft *
*************/
@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -transform-origin: left bottom;
    -transform: rotate(-90deg);
    opacity: 0;
  }
}
.rotateOutUpLeft.goAway {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

/************
* rotateOutDownLeft *
*************/

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}
.rotateOutDownLeft.goAway {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}
/************
* rotateOutUpRight *
*************/

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}
.rotateOutUpRight.goAway {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

/************
* rollOut *
*************/
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
  }
}
@keyframes rollOut {
  0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}
.rollOut.goAway {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
/*****************
* Short Animations
*******************/

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

@keyframes fadeInUpShort {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInUpShort {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}
.fadeInUpShort.go {
  -webkit-animation-name: fadeInUpShort;
  animation-name: fadeInUpShort;
}

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

@keyframes fadeInDownShort {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInDownShort {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}
.fadeInDownShort.go {
  -webkit-animation-name: fadeInDownShort;
  animation-name: fadeInDownShort;
}

/*********************
* fadeInRightShort 
*********************/
@-webkit-keyframes fadeInRightShort {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInRightShort {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRightShort {
  opacity: 0;
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}
.fadeInRightShort.go {
  -webkit-animation-name: fadeInRightShort;
  animation-name: fadeInRightShort;
}

/*********************
* fadeInLeftShort 
*********************/
@-webkit-keyframes fadeInLeftShort {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes fadeInLeftShort {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInLeftShort {
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
}
.fadeInLeftShort.go {
  -webkit-animation-name: fadeInLeftShort;
  animation-name: fadeInLeftShort;
}

/* ==================== 04: 元 animation-hand.css ==================== */
/*ふわふわする*/
.fuwa {
  animation-name: fuwa;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

@keyframes fuwa {
  0% {
    transform: translate(0, 0px);
  }

  100% {
    transform: translate(0, -15px);
  }
}

/*まわる*/
.rotate-center {
  -webkit-animation: rotate-center 20s linear infinite both;
  animation: rotate-center 20s linear infinite both;
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*シャドウがじわっとでる*/
.shadow-drop-2-center {
  -webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: shadow-drop-2-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes shadow-drop-2-center {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 var(--color-rgba-0-0-0-0);
    box-shadow: 0 0 0 0 var(--color-rgba-0-0-0-0);
  }
  100% {
    -webkit-transform: translateZ(50px);
    transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px var(--color-rgba-0-0-0-0p35);
    box-shadow: 0 0 20px 0px var(--color-rgba-0-0-0-0p35);
  }
}
@keyframes shadow-drop-2-center {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 var(--color-rgba-0-0-0-0);
    box-shadow: 0 0 0 0 var(--color-rgba-0-0-0-0);
  }
  100% {
    -webkit-transform: translateZ(50px);
    transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px var(--color-rgba-0-0-0-0p35);
    box-shadow: 0 0 20px 0px var(--color-rgba-0-0-0-0p35);
  }
}

/*裏返す*/
.slide-in-elliptic-bottom-bck {
  -webkit-animation: slide-in-elliptic-bottom-bck 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-elliptic-bottom-bck 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-elliptic-bottom-bck {
  0% {
    -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5);
    transform: translateY(600px) rotateX(-30deg) scale(6.5);
    -webkit-transform-origin: 50% -100%;
    transform-origin: 50% -100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 500px;
    transform-origin: 50% 500px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-bottom-bck {
  0% {
    -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5);
    transform: translateY(600px) rotateX(-30deg) scale(6.5);
    -webkit-transform-origin: 50% -100%;
    transform-origin: 50% -100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 500px;
    transform-origin: 50% 500px;
    opacity: 1;
  }
}

/*画面外ズームイン*/
.puff-in-center {
  -webkit-animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
  animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

/*回り続ける*/
.rotate-center {
  -webkit-animation: rotate-center 4s ease-in-out 1s infinite both;
  animation: rotate-center 4s ease-in-out 1s infinite both;
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  20% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  20% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotate-vert-center {
  -webkit-animation: rotate-vert-center 3s ease-in-out 1s infinite both;
  animation: rotate-vert-center 3s ease-in-out 1s infinite both;
}

@-webkit-keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  20% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }

  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }

  20% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

/*大きくなる-小さくなる*/
.slide-fwd-center {
  -webkit-animation: slide-fwd-center 1.5s linear infinite alternate-reverse both;
  animation: slide-fwd-center 1.5s linear infinite alternate-reverse both;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes slide-fwd-center {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
}
@keyframes slide-fwd-center {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.slide-top {
  -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
}

/*========= レイアウトのためのCSS ===============*/

p.slide {
  overflow: hidden; /*左右アニメーションで画面からはみ出る際に出る横スクロールバーを隠す*/
}

/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;
}

/*左右のアニメーション*/
.rightAnime {
  opacity: 0; /*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(100%); /*要素を左の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX-100 {
  from {
    transform: translateX(-100%); /*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}

/*くるくるあがる*/
.kurukuru {
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: kurukuru 1.4s ease-out;
  opacity: 1;
}
@keyframes kurukuru {
  0% {
    transform: rotateY(0) translateY(300px);
    opacity: 0;
  }
  100% {
    transform: rotateY(360deg) translateY(0);
    opacity: 1;
  }
}

.kiran {
  opacity: 1;
  overflow: hidden;
  position: relative;
}
.kiran::before {
  background-color: var(--color-white);
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
  animation: kiran 2.5s linear;
  animation-iteration-count: infinite;
}

@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  5% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  10% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  15% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  20% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/*横スク*/
.marquee {
  width: 100%;
  padding: 1rem;
  overflow: hidden;
}

.marquee p {
  padding: 2rem;
  padding-left: 100%;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  display: inline-block;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/*ローディング*/

@keyframes loading {
  0% {
    width: 98%;
  }
  30% {
    width: 99%;
  }
  60% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes percentage {
  0% {
    content: "98%";
  }
  30% {
    content: "99%";
  }
  60% {
    content: "100%";
  }
  100% {
    content: "100%";
  }
}
.bg {
  background-color: var(--color-e32c7f);
  animation: loading 3s linear infinite;
  animation-duration: ease-in-out;
}

.el {
  color: var(--theme-text-main);
  width: 600px;
  border: 1px solid var(--color-e32c7f);
}
.el:after {
  padding-left: 20px;
  content: "0%";
  display: block;
  text-align: center;
  font-size: 50px;
  padding: 10px 20px;
  color: var(--color-00ffff);
  mix-blend-mode: difference;
  animation: percentage 3s linear infinite;
  animation-duration: ease-in-out;
}

.bo {
  width: 600px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ==================== 05: 元 sp.css ==================== */
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  body,
  p,
  span,
  div,
  img {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
  }

  /* iOSでのデフォルトスタイルをリセット */
  input[type="submit"],
  input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
  }

  input[type="submit"]::-webkit-search-decoration,
  input[type="button"]::-webkit-search-decoration {
    display: none;
  }

  input[type="submit"]::focus,
  input[type="button"]::focus {
    outline-offset: -2px;
  }

  * {
    margin: 0;
    padding: 0;
  }

  /*html {
    font-size: 100%;
  }*/

  body {
    font-weight: normal;
    font-size: 1.6rem;
    line-height: 1.8;
    position: relative;
    /*	background-color: #000000;
*/
  }

  /*
body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(../../../../images/auto/sal/body1_sp.jpg) center no-repeat;
  background-size:cover;
}*/

  img.img100 {
    width: 100%;
  }

  img.img90 {
    width: 90%;
  }

  img.img80 {
    width: 80%;
  }

  img.img70 {
    width: 70%;
  }

  img.img60 {
    width: 60%;
  }

  img.img50 {
    width: 50%;
  }

  img.img40 {
    width: 40%;
  }

  img.img30 {
    width: 30%;
  }

  img.img20 {
    width: 20%;
  }

  img.w100 {
    width: 100%;
  }

  /*br{display: none;}*/
  br.ps {
    display: block;
  }

  br.pb {
    display: none;
  }

  br.sb {
    display: block;
  }

  table br {
    display: block;
  }

  .pv {
    display: none;
  }

  .sv {
    display: block;
  }

  /*　head
*********************************************************/

  .bg-wrap {
    position: relative;
    width: 100%;
    height: auto;
  }

  .bg-wrap .bg-head {
    position: relative;
    width: 100%;
    height: auto;
  }

  .bg-head:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background: url(../../../../images/auto/sal/body_sp9.jpg) center no-repeat;
    background-size: cover;
  }

  .overlay {
    width: 100%;
    height: 80rem;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(45deg, var(--color-rgba-0-0-0-0p2) 50%, var(--color-rgba-0-0-0-0p4) 50%);
    background-size: 3px 3px;
    z-index: 2;
  }

  @keyframes light-line-r {
    0% {
      background: linear-gradient(to right, var(--color-ff00ff), var(--color-ffff00), var(--color-00ffff), var(--color-ff00ff)) 0% center/200%;
      width: 1%;
      height: 0.5rem;
      opacity: 1;
    }

    100% {
      background: linear-gradient(to right, var(--color-ff00ff), var(--color-ffff00), var(--color-00ffff), var(--color-ff00ff)) 0% center/200%;
      width: 100%;
      height: 0.5rem;
      opacity: 1;
    }
  }

  /*=======================================*/

  #wrapper {
    margin: 0 auto;
    /* min-height: 100vh; */
    text-align: center;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
  }

  #header {
    width: 100%;
    height: auto;
    /*	min-height: 100vh;*/
    margin: 0 auto;
    text-align: center;
  }

  #header2 {
    margin: 50px auto 0;
  }

  #header img.head {
    width: 95%;
  }

  .content-back0 {
    width: 98%;
    margin: 0 auto 40px;
  }

  .subti_kimitu {
    width: 169px;
  }

  .subtitle1_parts2 {
    position: absolute;
    top: -26px;
    right: -3px;
  }

  .secret_contents01 {
    width: 98%;
  }

  .main_text {
    width: 100%;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 17px;
    letter-spacing: 0em;
  }

  .mss_bt1 {
    width: 100%;
  }

  table.result01 td {
    padding: 5px;
    font-size: 10px;
  }

  .rule-midasi {
    width: 100%;
    margin: 30px auto 0;
    padding: 5px;
  }

  .rule-number {
    width: 60%;
    background: var(--color-white);
    font-size: 3rem;
  }

  .note {
    padding: 10px;
    border-radius: 5px;
  }

  .caution {
    height: 200px;
  }

  .scramble {
    height: 170px;
  }

  .text {
    width: 100%;
  }

  .area-main {
    width: 100%;
  }

  .button-3 {
    width: 90%;
  }

  /*
.hd-1 {
  animation-delay: 0.5s;
  animation-duration: 1s;
}
.hd-2 {
  animation-delay: 1.5s;
  animation-duration: 1s;
}
.hd-3 {
  animation-delay: 1.7s;
}
*/
  /*=======================================*/

  #global-nav {
    /*background-image: url("/questions/finish/images/bg-globalmenu.png");*/
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    color: var(--theme-text-main);
    z-index: 999999;
    position: fixed;
  }

  #global-nav.m_fixed {
    left: 0;
    right: 0;
    position: fixed;
    top: 0;
  }

  ul.menu {
    margin: 0 auto;
    width: auto;
    height: 100%;
    font-size: 1.2rem;
    line-height: 1.5;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    list-style: none;
  }

  ul.menu li a {
    padding: 0.3rem 1rem;
    margin: 0.3rem;
    color: var(--theme-text-main);
    display: block;
    text-align: center;
    vertical-align: middle;
    border-bottom: none;
    height: 50px;
  }

  ul.menu li a i {
    font-size: 1.4rem;
    margin: auto;
    display: block;
  }

  /*=======================================*/

  .container {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 0.5rem;
  }

  .main {
    width: 100%;
    margin: 0 auto;
    /* padding: 0rem 0.5rem 2rem 0.5rem; */
    z-index: 4;
  }

  .area-main {
    width: 98%;
    z-index: 4;
  }

  .main-wt {
    background-image: url(../../../../images/auto/sal/bg-section_wt.jpg);
    background-position: center;
    background-size: 200%;
    background-attachment: local;
    box-shadow: 0 0px 20px var(--color-666028) inset;
  }

  .main-bl {
    background-image: linear-gradient(to left, var(--color-cc208e) 0%, var(--color-6713d2) 100%);
  }

  .main-pk {
    background-image: linear-gradient(to right, var(--color-231557) 0%, var(--color-44107a) 29%, var(--color-ff1361) 67%, var(--color-ff8d2e) 100%);
  }

  /*=========================*/

  .text {
    width: 100%;
    margin: 0px auto;
    text-align: left;
    padding: 1rem 1.5rem 4rem 1.5rem;
  }

  p {
    padding-top: 4.8rem;
  }

  ul.last-number li {
    width: 18%;
    display: inline-block;
    font-size: 2.3rem;
    color: var(--theme-text-dark);
    background-color: var(--color-white);
    padding: 1rem;
    margin: 0.2rem;
    background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
  }

  .area-comment {
    width: 90%;
    margin: 0 auto;
    padding: 4rem 0;
  }

  /*=========================*/

  /*=======================================*/

  section.bace {
    width: 100%;
    height: auto;
    background-image: url(../../../../images/auto/sal/bg-cwt.png);
    background-position: center;
    background-size: 200%;
    position: relative;
  }

  section.bace-rainbow {
    width: 100%;
    height: auto;
    background-image: url(../../../../images/auto/sal/body7.jpg);
    background-position: center;
    padding: 2rem 0;
    position: relative;
  }

  .area-bo {
    border: 0.5rem solid var(--color-bc1c00);
  }

  .area-warning {
    background-size: 40%;
  }

  .shadow {
    box-shadow: 0 0px 15px var(--color-290a7f);
  }

  /*==========================================*/

  .box p {
    /*	padding: 0.2rem;
*/
  }

  .box i {
    margin-top: 0.3rem;
    /*	color: #ff0000;
*/
  }

  .box .w20 {
    width: 30%;
  }

  .box-table .fs25 {
    font-size: 1.4rem;
  }

  .box-table .w20 {
    width: 30%;
  }

  .box-table .w30 {
    width: 40%;
  }

  .t-shadow-s {
    text-shadow:
      -0.5px -0.5px 0.5px var(--color-rgba-100-100-100-0p5),
      1px 1px 1px var(--color-rgba-255-255-255-0p7);
  }

  .spblock {
    display: flex;
    flex-wrap: wrap;
  }

  /*=======================================*/

  .sche .box {
    display: block;
    width: 100%;
  }

  .sche .box p {
    width: 100%;
  }

  .sche .box br {
    display: block;
  }

  .blue-bt {
    background-image: url(../../../../images/auto/sal/bt-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
  }

  .blue-bt img {
    margin: 0 auto;
  }

  ul.simulation-result li {
    display: inline-flex;
    flex-wrap: nowrap;
    padding: 1rem 2rem;
    font-size: 2rem;
    background-color: var(--color-white);
    border-radius: 1rem;
  }

  #eyecatch li {
    width: 48%;
  }

  /* result
**********************************************************/
  .result {
    padding: 0.5rem;
  }

  .result li {
    width: 100%;
    font-size: 1.5rem;
    text-align: left;
    padding: 0.7rem;
  }

  .result li .hit .money {
    font-size: 2rem;
  }

  .result-data {
    padding: 1rem;
    background-color: var(--theme-bg-black);
    text-align: left;
  }

  .result-data br.sb {
    display: block;
  }

  .result-box {
    width: 100%;
    margin-bottom: 3rem;
    display: block;
    font-size: 1.5rem;
  }

  .l-box {
    text-align: left;
    margin-right: 0;
  }

  .l-number {
    display: inline-flex;
    width: 100%;
  }

  .l-number p.hdd {
    width: 30%;
    font-size: 1.4rem;
    margin-right: 0.1rem;
    padding-left: 1rem;
  }

  .l-number p {
    padding: 0.5rem;
    margin-bottom: 0.1rem;
  }

  .r-box {
    margin-top: 2rem;
  }

  .r-number {
    display: inline-flex;
    flex-wrap: wrap;
    text-align: left;
  }

  .r-number p.hdd {
    flex-basis: auto;
    width: 40%;
    font-size: 1.4rem;
    margin-right: 0.1rem;
    padding-left: 1rem;
  }

  .r-number p {
    width: 59%;
    padding: 0.5rem;
    margin-bottom: 0.1rem;
  }

  .r-number p.money {
    font-size: 1.8rem;
  }

  table.select_box_htb {
    width: 90%;
    margin: 0 auto;
  }

  table.select_box_htb td {
    text-align: right;
    table-layout: fixed;
  }

  table.select_box_htb td:nth-child(1) {
    width: 20%;
    padding-right: 1rem;
  }

  table.select_box_htb td:nth-child(1) {
    width: 20%;
    padding-right: 1rem;
  }

  table.select_box_htb td:nth-child(2) {
    width: 8%;
    color: var(--color-ff0000);
    font-weight: bold;
  }

  table.select_box_htb td:nth-child(3) {
    width: 10%;
    font-weight: bold;
  }

  table.select_box_htb td:nth-child(4) {
    width: 20%;
    padding-right: 6rem;
    font-weight: bold;
  }

  table.select_box_htb2 {
    width: 90%;
    margin: 0 auto;
  }

  table.select_box_htb2 td {
    text-align: right;
    table-layout: fixed;
  }

  table.select_box_htb2 td:nth-child(1) {
    width: 20%;
    padding-right: 1rem;
  }

  table.select_box_htb2 td:nth-child(2) {
    width: 8%;
    background: var(--color-rgba-255-255-0-0p8);
    color: var(--color-ff0000);
    font-weight: bold;
  }

  table.select_box_htb2 td:nth-child(3) {
    width: 10%;
    background: var(--color-rgba-255-255-0-0p8);
    font-weight: bold;
  }

  table.select_box_htb2 td:nth-child(4) {
    width: 20%;
    padding-right: 4.3rem;
    background: var(--color-rgba-255-255-0-0p8);
    font-weight: bold;
  }

  .st1_table {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background: var(--color-222222);
  }

  .st1_table th {
    background: var(--color-947d11);
    padding: 0;
    font-size: 0.8rem;
    border: 1px solid var(--color-black);
  }

  .st1_table td {
    font-size: 1.5rem;
    padding: 0.2rem;
    border: 1px solid var(--color-black);
  }

  .st1_table table {
    width: 100%;
  }

  .st1_t_1 {
    width: 20%;
    background: var(--color-f9cb54);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, var(--color-f9cb54) 16%, var(--color-ff9400) 67%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, var(--color-f9cb54) 16%, var(--color-ff9400) 67%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, var(--color-f9cb54) 16%, var(--color-ff9400) 67%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9cb54', endColorstr='#ff9400', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }

  .st1_t_1_2 {
    width: 12%;
    background: var(--color-f7eaca);
    /* Old browsers */
    background: -moz-linear-gradient(top, var(--color-f7eaca) 1%, var(--color-f9cb53) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, var(--color-f7eaca) 1%, var(--color-f9cb53) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, var(--color-f7eaca) 1%, var(--color-f9cb53) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7eaca', endColorstr='#f9cb53', GradientType=0);
    /* IE6-9 */
  }

  .st1_t_2 {
    width: 50%;
    color: var(--theme-text-main);
  }

  .st1_t_3 {
    color: var(--color-ff0000);
    background-color: var(--color-fff000);
    font-weight: bold;
  }

  .st1_t_4 {
    color: var(--theme-text-main);
  }

  .st1_t_5 {
    color: var(--color-ff0000);
    background: var(--color-fff000);
    font-weight: bold;
  }

  .st1_t_6 {
    color: var(--color-ff0000);
    background: var(--color-fff000);
    font-weight: bold;
  }

  .st1_t_7 {
    color: var(--color-ff0000);
    background: var(--color-fff000);
    font-weight: bold;
  }

  .st1_t_8 {
    color: var(--color-ff0000);
    background: var(--color-fff000);
    font-weight: bold;
  }

  .st1_t_7_out {
    color: var(--color-ff0000);
    background: var(--color-fff000);
  }

  .st1_t_8_out {
    color: var(--color-ff0000);
    background: var(--color-fff000);
  }

  .st1_t_1 img {
    width: 100%;
  }

  .st1_t_1_2 img {
    width: 100%;
  }

  /*　
*********************************************************/

  .note4 {
    width: 98%;
    color: var(--color-010427);
    margin-left: auto;
    margin-right: auto;
    border: solid 1px var(--color-e6e6e6);
    padding: 0.5rem;
    box-shadow: 2px 2px 0 var(--color-rgba-0-0-0-0p1);
  }

  .sen4 {
    padding: 0.2em 0.5em 1.8em 0.5em;
  }

  .sen4 p {
    padding: 0.2em 0.5em 1.8em 0.5em;
  }

  .note4 img {
    width: 25%;
  }

  ul.monitor li img.icon {
    width: 8rem;
    height: 8rem;
  }

  ul.monitor .item {
    width: 100%;
    padding: 1rem;
    font-size: 1.5rem;
  }

  /*　
*********************************************************/

  /*==========================================*/

  .bg-flash {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 25rem;
    margin-right: auto;
    margin-left: auto;
  }

  .bg-flash div {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }

  /*===================================*/

  .hidden_box label {
    width: 85%;
    padding: 2rem 1rem;
  }

  /*===================================*/

  .ribbon19-wrapper {
    padding: 1rem;
    font-size: 1.5rem;
  }

  .ribbon19 {
    display: inline-block;
    position: absolute;
    padding: 5px 0;
    left: -16px;
    top: 12px;
    width: 160px;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    background: var(--color-d60000);
    color: var(--theme-text-main);
    letter-spacing: 0.05em;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 0 0 2px var(--color-d60000);
    border-top: dashed 1px var(--color-rgba-255-255-255-0p65);
    border-bottom: dashed 1px var(--color-rgba-255-255-255-0p65);
  }

  /*===================================*/

  .form {
    width: 100%;
  }

  a.graybt {
    margin: 1rem auto;
    width: 95%;
    font-size: 1.8rem;
    padding: 1.5rem 1rem;
  }

  label {
    margin: 0rem auto 1rem;
    width: 100%;
    font-weight: bold;
    /*	text-align: left;
*/
    cursor: pointer;
    color: var(--theme-link);
    padding: 0rem 0.5rem;
    border-radius: 0.5rem;
    display: inline-block;
  }

  label:hover {
    border: none;
  }

  input[type="radio"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    -moz-transform-origin: right bottom;
    -moz-transform: scale(1.2, 1.2);
  }

  input[type="text"] {
    width: 100%;
    padding: 1rem 0.5rem;
    font-size: 1.8rem;
    margin: 0 auto;
  }

  input[type="submit"] {
    width: 90%;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--theme-text-main);
    padding: 2rem 0.5rem;
    cursor: pointer;
  }

  /*===================================*/

  /*===========================================*/

  /*===========================================*/

  .area-form {
    width: 100%;
    margin: 0 auto;
  }

  table.tokuten {
    width: 98%;
    font-size: 1.4rem;
  }

  table.list {
    width: 100%;
    font-size: 1.4rem;
    padding: 0rem;
  }

  table.list th {
    width: 100%;
    padding: 1rem 0.5rem;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
    display: block;
    border-right: none;
  }

  table.list th br {
    display: none;
  }

  table.list th br.sp-b {
    display: block;
  }

  table.list td {
    padding: 0.5rem 0.5rem 2rem 0.5rem;
    text-align: left;
    display: block;
  }

  table.gouka th {
    width: 100%;
    display: block;
    padding: 0.5rem 0;
    text-align: center;
    vertical-align: middle;
  }

  table.gouka td {
    width: 70%;
    display: inline-block;
    padding: 0.5rem;
    text-align: center;
  }

  table.gouka td.umu {
    width: 30%;
    display: inline-block;
    padding: 0.5rem;
    text-align: center;
  }

  span.hissu {
    display: inline-block;
    min-width: 5rem;
    text-align: center;
    background-color: var(--color-ff0000);
    color: var(--theme-text-main);
    font-weight: bold;
    margin-left: 1rem;
  }

  span.jiyu {
    display: inline-block;
    min-width: 5rem;
    text-align: center;
    background-color: var(--color-2179fc);
    color: var(--theme-text-main);
    font-weight: bold;
    margin-left: 1rem;
  }

  table.point {
    width: 100%;
    margin: auto;
    font-size: 1.4rem;
    padding: 0.5rem;
  }

  table.point th {
    width: 100%;
    padding: 1rem 1rem;
    font-size: 1.4rem;
    display: block;
  }

  table.point td {
    display: block;
    padding: 0.5rem 0.5rem 3rem 0.5rem;
  }

  .heading {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1rem 0.5rem;
    border-bottom: 0.1rem dotted var(--color-black);
  }

  button {
    margin: 0 auto;
    width: 95%;
    font-weight: bold;
    padding: 2rem 1rem;
    cursor: pointer;
  }

  textarea {
    padding: 1rem;
    font-size: 1.5rem;
    width: 100%;
    height: 20rem;
  }

  a.p-link {
    width: 95%;
    margin: 0 auto;
    display: block;
    padding: 2rem 0.5rem;
  }

  a.g-link {
    width: 95%;
    margin: 0 auto;
    display: block;
    padding: 2rem 0.5rem;
    font-size: 2.5rem;
  }

  /*===========================================*/

  /*===================================*/

  /*===========================================*/

  .loop-box ul {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    justify-content: space-between;
    list-style: none;
    max-height: 10000%;
    min-height: 100%;
    width: 100%;
    animation: 50s linear infinite;
    /* アニメーション設定 - 変更可 */
  }

  .loop-box ul li {
    padding: 1rem;
    font-size: 1.5rem;
  }

  /*===========================================*/

  /*=====================================================
footer
=====================================================*/

  footer {
    /*	position: absolute;
	bottom: 0;*/
  }

  .footer {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .footer ul {
    text-align: center;
    font-size: 1.3rem;
  }

  .footer ul li {
    display: inline-block;
    padding: 0.5rem;
    text-align: center;
    font-weight: normal;
  }

  .footer ul li a {
    color: var(--theme-text-main);
  }

  .footer .copy {
    font-size: 1.3rem;
    color: var(--color-dddddd);
    padding: 1rem 0.5rem;
    text-align: center;
  }

  #footer p {
    font-size: 10px;
    padding-top: 0px;
  }

  /*===========================================*/

  #footer {
    width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
    background-color: var(--theme-footer-sp);
    color: var(--theme-text-main);
    font-size: 0.5rem;
  }

  #footer_in {
    text-align: center;
    font-size: 1.2rem;
    padding-bottom: 2rem;
  }

  @keyframes zoomin {
    0% {
      opacity: 0;
      transform: scale(5, 5);
      filter: drop-shadow(0px 0px 40px var(--color-rgba-255-255-255-0));
    }

    20% {
      opacity: 0.5;
      transform: scale(1.4, 1.4);
    }

    100% {
      opacity: 1;
      transform: scale(1, 1);
      filter: drop-shadow(0px 0px 30px var(--color-white));
    }
  }

  .fuwa {
    animation-name: fuwa;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.1s;
  }

  @keyframes fuwa {
    0% {
      transform: translate(0, 0px);
    }

    100% {
      transform: translate(0, -5px);
    }
  }

  /*===========================================*/

  /*===========================================*/
  .timer {
    font-size: 1.6rem;
  }

  .timer .time {
    font-size: 3rem;
    margin-left: 0.5rem;
    display: inline-block;
    width: 4rem;
    font-weight: bold;
  }

  /*===================================*/

  .point-flex {
    flex-direction: column;
    font-size: 2rem;
  }

  /*===================================*/

  .subhead01 {
    font-size: 3rem;
  }

  /*===================================*/

  .contents-flex {
    flex-direction: column;
    width: 100%;
  }

  .content-back02 {
    width: 100%;
  }

  .place1_link_com_bg.bigss {
    max-height: 500px;
  }

  .report ul li {
    padding: 0;
  }
}

/* ==================== 06: 元 sp-font.css ==================== */
@media screen and (max-width: 480px) {
  .fs10 {
    line-height: 1.5;
    font-size: 1rem;
  }
  .fs11 {
    line-height: 1.5;
    font-size: 1rem;
  }
  .fs12 {
    line-height: 1.5;
    font-size: 1.2rem;
  }
  .fs13 {
    line-height: 1.5;
    font-size: 1.2rem;
  }
  .fs14 {
    line-height: 1.5;
    font-size: 1.2rem;
  }
  .fs15 {
    line-height: 1.5;
    font-size: 1.3rem;
  }
  .fs16 {
    line-height: 1.5;
    font-size: 1.4rem;
  }
  .fs17 {
    line-height: 1.5;
    font-size: 1.5rem;
  }
  .fs18 {
    line-height: 1.5;
    font-size: 1.5rem;
  }
  .fs19 {
    line-height: 1.5;
    font-size: 1.5rem;
  }
  .fs20 {
    line-height: 1.5;
    font-size: 1.7rem;
  }
  .fs22 {
    line-height: 1.5;
    font-size: 1.7rem;
  }
  .fs25 {
    line-height: 1.5;
    font-size: 1.7rem;
  }
  .fs30 {
    line-height: 1.5;
    font-size: 2rem;
  }
  .fs35 {
    line-height: 1.5;
    font-size: 2rem;
  }
  .fs40 {
    line-height: 1.5;
    font-size: 2.5rem;
  }
  .fs45 {
    line-height: 1.5;
    font-size: 2.5rem;
  }
  .fs50 {
    line-height: 1.5;
    font-size: 3rem;
  }
  .fs55 {
    line-height: 1.5;
    font-size: 3rem;
  }
  .fs60 {
    line-height: 1.5;
    font-size: 3.2rem;
  }
  .fs65 {
    line-height: 1.5;
    font-size: 3.2rem;
  }
  .fs70 {
    line-height: 1.5;
    font-size: 3.5rem;
  }
  .fs80 {
    line-height: 1.5;
    font-size: 4rem;
  }
  .fs85 {
    line-height: 1.5;
    font-size: 4rem;
  }
  .fs90 {
    line-height: 1.5;
    font-size: 4.5rem;
  }
  .fs95 {
    line-height: 1.5;
    font-size: 4.5rem;
  }
  .fs100 {
    line-height: 1.5;
    font-size: 5rem;
  }
  .fs120 {
    line-height: 1.5;
    font-size: 5rem;
  }
  .fs130 {
    line-height: 1.5;
    font-size: 5rem;
  }
  .fs150 {
    line-height: 1.5;
    font-size: 5.5rem;
  }
  .fs200 {
    line-height: 1.5;
    font-size: 5.5rem;
  }

  .m0 {
    margin-top: 0rem;
  }
  .m10 {
    margin-top: 0.5rem;
  }
  .m20 {
    margin-top: 1rem;
  }
  .m30 {
    margin-top: 1rem;
  }
  .m40 {
    margin-top: 2rem;
  }
  .m50 {
    margin-top: 2rem;
  }
  .m60 {
    margin-top: 3rem;
  }
  .m70 {
    margin-top: 3rem;
  }
  .m80 {
    margin-top: 4rem;
  }
  .m90 {
    margin-top: 4rem;
  }
  .m100 {
    margin-top: 5rem;
  }
  .m110 {
    margin-top: 5rem;
  }
  .m120 {
    margin-top: 6rem;
  }
  .m130 {
    margin-top: 6rem;
  }
  .m140 {
    margin-top: 7rem;
  }
  .m150 {
    margin-top: 7rem;
  }
  .m200 {
    margin-top: 10rem;
  }

  .mb0 {
    margin-bottom: 0rem;
  }
  .mb10 {
    margin-bottom: 0.5rem;
  }
  .mb20 {
    margin-bottom: 1rem;
  }
  .mb30 {
    margin-bottom: 1rem;
  }
  .mb40 {
    margin-bottom: 2rem;
  }
  .mb50 {
    margin-bottom: 2rem;
  }
  .mb60 {
    margin-bottom: 3rem;
  }
  .mb70 {
    margin-bottom: 3rem;
  }
  .mb80 {
    margin-bottom: 4rem;
  }
  .mb90 {
    margin-bottom: 4rem;
  }
  .mb100 {
    margin-bottom: 5rem;
  }
  .mb110 {
    margin-bottom: 5rem;
  }
  .mb120 {
    margin-bottom: 6rem;
  }
  .mb130 {
    margin-bottom: 6rem;
  }
  .mb140 {
    margin-bottom: 7rem;
  }
  .mb150 {
    margin-bottom: 7rem;
  }
  .mb200 {
    margin-bottom: 10rem;
  }

  .p0 {
    padding-top: 0;
  }
  .p10 {
    padding-top: 0.5rem;
  }
  .p20 {
    padding-top: 1rem;
  }
  .p30 {
    padding-top: 1rem;
  }
  .p40 {
    padding-top: 2rem;
  }
  .p50 {
    padding-top: 2rem;
  }
  .p60 {
    padding-top: 3rem;
  }
  .p70 {
    padding-top: 3rem;
  }
  .p80 {
    padding-top: 4rem;
  }
  .p90 {
    padding-top: 4rem;
  }
  .p100 {
    padding-top: 5rem;
  }
  .p120 {
    padding-top: 5rem;
  }
  .p150 {
    padding-top: 8rem;
  }
  .p200 {
    padding-top: 10rem;
  }

  .pb0 {
    padding-bottom: 0rem;
  }
  .pb10 {
    padding-bottom: 0.5rem;
  }
  .pb20 {
    padding-bottom: 1rem;
  }
  .pb30 {
    padding-bottom: 1rem;
  }
  .pb40 {
    padding-bottom: 2rem;
  }
  .pb50 {
    padding-bottom: 2rem;
  }
  .pb100 {
    padding-bottom: 5rem;
  }
  .pb150 {
    padding-bottom: 5rem;
  }

  .w100 {
    width: 100%;
  }
  .w95 {
    width: 98%;
  }
  .w90 {
    width: 95%;
  }
  .w80 {
    width: 90%;
  }

  .area-p5 {
    padding: 0.2rem;
  }
  .area-p10 {
    padding: 0.5rem;
  }
  .area-p20 {
    padding: 0.7rem;
  }
  .area-p30 {
    padding: 1rem;
  }
  .area-p40 {
    padding: 1.2rem;
  }

  .prl10 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .br5 {
    border-radius: 0.2rem;
  }
  .br10 {
    border-radius: 0.5rem;
  }

  .area-ss {
    filter: drop-shadow(5px 5px 0px var(--color-rgba-0-0-0-0p4));
  }

  .shadow {
    box-shadow: 0 0px 15px var(--color-222222);
  }

  .shadow-f {
    filter: drop-shadow(5px 5px 5px var(--color-rgba-0-0-0-0p4));
  }

  .shadow-in {
    box-shadow: 0 0px 15px var(--color-black) inset;
  }

  .shadow-v {
    box-shadow: 10px 10px 0px var(--color-rgba-0-0-0-0p4);
  }

  .flash-wt {
    filter: drop-shadow(0px 0px 10px var(--color-white));
  }

  .flash-in {
    box-shadow: 0 0 10px 2px var(--color-white) inset;
  }

  .t-shadow {
    text-shadow: 0 1px 1.5px var(--color-black);
  }

  .t-shadow_f {
    text-shadow: 0 -1px 1px var(--color-white);
  }

  .fr-c {
    float: none;
    text-align: center;
    margin: 1rem auto;
  }
}

/* ==================== 07: 元HTML内style（1） ==================== */
.t_shadowsp_y {
  font-weight: 900;

  text-shadow:
    0 1px 0 var(--color-b8b100),
    0 2px 0 var(--color-b8b100),
    0 3px 0 var(--color-b8b100),
    0 4px 0 var(--color-b8b100),
    0 5px 0 var(--color-b8b100),
    0 6px 1px var(--color-rgba-0-0-0-0p1),
    0 0 5px var(--color-rgba-0-0-0-0p1),
    0 1px 3px var(--color-rgba-0-0-0-0p3),
    0 3px 5px var(--color-rgba-0-0-0-0p2),
    0 5px 10px var(--color-rgba-0-0-0-0p25),
    0 10px 10px var(--color-rgba-0-0-0-0p2),
    0 20px 20px var(--color-rgba-0-0-0-0p15);
}

@media screen and (max-width: 768px) {
  .pconly {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .sponly {
    display: none;
  }
}

.movie_waku1 {
  background-color: var(--color-8b0000);

  padding: 2px;

  border: 4px groove var(--color-ffff33);

  box-shadow: inset 2px var(--color-black);

  margin: 0 auto;
}

.movie-label-up {
  text-align: center;

  font-size: 2.8rem;

  font-weight: bold;

  color: var(--color-ffff33);

  background-color: var(--theme-bg-black);

  margin: 10px 0;

  animation: floatDown 2s ease-in-out infinite;
}

/* ▲ 下のMOVIEラベル */

.movie-label-down {
  text-align: center;

  font-size: 2.8rem;

  font-weight: bold;

  color: var(--color-ffff33);

  background-color: var(--theme-bg-black);

  margin: 10px 0;

  animation: floatUp 2s ease-in-out infinite;
}

/* 上から下へ */

@keyframes floatDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0);
  }
}

/* 下から上へ */

@keyframes floatUp {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ==================== 08: 元HTML内style（2） ==================== */
.normalimg {
  text-align: center;

  @media screen and (max-width: 768px) {
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    width: 75%;
  }
}

.blinking {
  -webkit-animation: blink 2.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }

  4% {
    opacity: 0.6;
  }

  8% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  72% {
    opacity: 0.6;
  }

  74% {
    opacity: 1;
  }
}

/* ===== ロゴ付き固定ナビ ===== */
:root {
  --nav-height: 80px;
  --nav-overhang: 16px;
}

#global-nav.stage-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 999999;
  width: 100%;
  height: var(--nav-height);
  margin: 0;
  padding: 0;
  overflow: visible;
  background: var(--nav-bg);
  border: 0;
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38);
}

.stage-nav .stage-nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1300px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* 左側の張り出す見出しプレート */
#global-nav.stage-nav .stage-nav__brand {
  display: flex;
  flex: 0 0 40%;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: calc(var(--nav-height) + var(--nav-overhang));
  padding: 10px 20px;
  color: var(--nav-text);
  text-align: left;
  background: linear-gradient(135deg, var(--nav-brand-start), var(--nav-brand-end));
  border: 1px solid var(--nav-border);
  border-top: 0;
  border-bottom: 3px solid var(--nav-gold);
  border-radius: 0 0 15px 15px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
  opacity: 1;
}

.stage-nav img.stage-nav__logo {
  display: block;
  flex: 0 0 110px;
  width: 110px;
  height: 64px;
  object-fit: contain;
}

.stage-nav .stage-nav__heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.stage-nav .stage-nav__title {
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
}

.stage-nav .stage-nav__caption {
  color: var(--nav-gold);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.18em;
}

/* 右側の3ボタン */
#global-nav.stage-nav ul.menu {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
}

#global-nav.stage-nav ul.menu li {
  flex: 1;
  min-width: 0;
}

#global-nav.stage-nav ul.menu li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  max-width: none;
  height: 50px;
  margin: 0;
  padding: 8px;
  color: var(--nav-text);
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: 0;
  background: var(--nav-button-bg);
  border: 3px solid var(--nav-button-border);
  border-radius: 25px;
  opacity: 1;
  transition:
    background 0.2s,
    border-color 0.2s;
}

#global-nav.stage-nav ul.menu li a i {
  display: block;
  margin: 0;
  color: var(--nav-gold);
  font-size: 17px;
}

#global-nav.stage-nav .stage-nav__new {
  position: absolute;
  top: -7px;
  right: 8px;
  padding: 2px 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  background: var(--nav-new);
  border-radius: 4px;
  text-transform: uppercase;
}

@media (hover: hover) {
  #global-nav.stage-nav ul.menu li a:hover {
    background: var(--nav-button-hover);
    border-color: var(--nav-gold);
    opacity: 1;
  }
}

/* 固定ナビによる隠れを防ぐ */
#header2 {
  margin: 0 auto;
  padding-top: calc(var(--nav-height) + var(--nav-overhang));
}

#ms,
#edit {
  scroll-margin-top: calc(var(--nav-height) + var(--nav-overhang) + 20px);
}

/* タブレット */
@media (min-width: 769px) and (max-width: 1000px) {
  .stage-nav .stage-nav__inner {
    gap: 16px;
    padding-inline: 14px;
  }

  #global-nav.stage-nav .stage-nav__brand {
    gap: 10px;
    padding-inline: 12px;
  }

  .stage-nav img.stage-nav__logo {
    flex-basis: 80px;
    width: 80px;
  }

  #global-nav.stage-nav ul.menu li a {
    flex-direction: column;
    gap: 4px;
    height: 58px;
    font-size: 12px;
  }
}

/* スマホ */
@media (max-width: 768px) {
  :root {
    --nav-height: 82px;
    --nav-overhang: 14px;
  }

  .stage-nav .stage-nav__inner {
    gap: 8px;
    padding-inline: 8px;
  }

  #global-nav.stage-nav .stage-nav__brand {
    flex-basis: 38%;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 7px 6px;
  }

  .stage-nav img.stage-nav__logo {
    flex: 0 0 auto;
    width: min(100%, 122px);
    height: 38px;
  }

  .stage-nav .stage-nav__heading {
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  .stage-nav .stage-nav__title {
    font-size: clamp(11px, 3vw, 15px);
    line-height: 1.25;
  }

  .stage-nav .stage-nav__caption {
    font-size: 10px;
    line-height: 1.2;
  }

  #global-nav.stage-nav ul.menu {
    gap: 4px;
  }

  #global-nav.stage-nav ul.menu li a {
    flex-direction: column;
    gap: 5px;
    height: 66px;
    padding: 5px 2px;
    font-size: clamp(10px, 2.6vw, 12px);
  }

  #global-nav.stage-nav ul.menu li a > span:not(.stage-nav__new) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
  }

  #global-nav.stage-nav .stage-nav__comment {
    flex-direction: column;
  }

  #global-nav.stage-nav .stage-nav__new {
    top: -6px;
    right: 3px;
    padding: 2px 4px;
    font-size: 8px;
  }
}

/* アニメーションの繰り返し間隔 */
#global-nav.stage-nav {
  --nav-animation-cycle: 4s;
}

/* ロゴ：一瞬明るくして光らせる */
#global-nav.stage-nav .stage-nav__logo {
  animation: stage-logo-sparkle var(--nav-animation-cycle) ease-in-out infinite;
}

@keyframes stage-logo-sparkle {
  0%,
  10%,
  100% {
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }

  4% {
    filter: brightness(1.9) drop-shadow(0 0 8px rgba(255, 235, 170, 0.9));
  }

  6% {
    filter: brightness(1.2) drop-shadow(0 0 3px rgba(255, 235, 170, 0.4));
  }
}

/* ボタン：順番に軽く押し込む */
#global-nav.stage-nav ul.menu li a {
  animation: stage-button-press var(--nav-animation-cycle) ease-in-out infinite;
}

#global-nav.stage-nav ul.menu li:nth-child(2) a {
  animation-delay: 0.7s;
}

#global-nav.stage-nav ul.menu li:nth-child(3) a {
  animation-delay: 1.4s;
}

@keyframes stage-button-press {
  0%,
  3%,
  10%,
  100% {
    transform: translateY(0) scale(1);
    background: var(--nav-button-bg);
    border-color: var(--nav-button-border);
    box-shadow: none;
  }

  6% {
    transform: translateY(2px) scale(0.96);
    background: var(--nav-button-hover);
    border-color: var(--nav-gold);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35);
  }
}

/* 操作中は自動アニメーションを止める */
@media (hover: hover) {
  #global-nav.stage-nav ul.menu:hover li a {
    animation: none;
  }
}

#global-nav.stage-nav ul.menu:focus-within li a {
  animation: none;
}

/* 実際に押したときの反応 */
#global-nav.stage-nav ul.menu li a:active {
  animation: none;
  transform: translateY(2px) scale(0.96);
  border-color: var(--nav-gold);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35);
}

/* 動きを減らす設定を利用している場合 */
@media (prefers-reduced-motion: reduce) {
  #global-nav.stage-nav .stage-nav__logo,
  #global-nav.stage-nav ul.menu li a {
    animation: none;
  }
}
/* フォームの固定高さ・比率指定を解除 */
.stage-form-area,
.tg4th_iframe.stage-form-area {
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.stage-form-area iframe {
  position: static;
  display: block;
  width: 100%;
  height: 150px; /* 読み込み後、JSで中身の高さに更新 */
  min-height: 0;
  border: 0;
}

/* PCだけ表示幅と余白を調整 */
@media (min-width: 769px) {
  .stage-form-area {
    box-sizing: border-box;
    width: 100%;
    max-width: 860px;
    margin: 24px auto;
    padding-inline: 24px;
  }
}
#form .tg4th_iframe {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

#form .tg4th_iframe iframe {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  height: 150px; /* resizeStageFormで更新される初期値 */
  min-height: 0;
  margin: 0;
  border: 0;
}

@media (min-width: 769px) {
  #form .tg4th_iframe {
    max-width: 860px;
    margin-inline: auto;
    padding-inline: 24px;
  }
}

/* =========================================
   最新記事横：流れる口コミ追従
========================================= */

@media screen and (min-width: 769px) {

  .million-content-area {
    display: flex;
    align-items: flex-start;
    overflow: visible !important;
  }

  /* 左：記事 */
  .million-content-area > .content-back0 {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 右：口コミ */
  .million-content-area > .million-sidebar {
    flex: 0 0 25%;
    width: 25%;
    max-width: 800px;

    position: sticky !important;
    top: 95px;

    align-self: flex-start;
    overflow: visible;
  }

  /* 口コミ表示領域 */
  .million-sidebar .place1_link_com_bg.bigss {
    height: 700px;
    max-height: 700px;
    min-height: 700px;
    overflow: hidden;
  }

}