@charset "utf-8";
/*  ブレークポイントは600px（スマホかそれ以外)で設定しています　　*/
@charset "utf-8";

/*  基準の色指定　　*/
:root {
  /*Colors*/
  --Text: #000000;
  --Blue: #0000ff;
  --Yellow: #FFFE7B;
  --Red: #D00E31;
  --Pink: #ff3399;
}

html {
  font-size: 62.5% !important;
  color: var(--Text);
}

body {
  font-family: montserrat, YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  background-color: #fafafa;
}

.container {
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 0 10px;
}

/*  PC   */
@media screen and (min-width: 600px) {
  .container {
    width: 90%;
    /*max-width: 1060px;*/
    max-width: 900px;
    padding: 0 20px;
  }
}

/* 表示　制御　　*/
#lp_container {
  margin-top: -50px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 5px;
}

@media screen and (min-width: 600px) {
  #lp_container {
    padding: 10px;
  }
}

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

/* 画像中央　　*/
.img_block img {
  display: block;
  margin: 0 auto;
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}

.gyoukan {
  margin-top: 20px;
}

/*-------------*/
/*   テキスト　　*/
/*-------------*/
.h2 {
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
  font-size: 2.6rem;
  font-weight: bold;
  text-align: center;
}

.h2:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

/*-------------*/
/*   テキスト　　*/
/*-------------*/
p {
  margin: 0 0 1.8rem;
  line-height: 1.5;
  color: var(--Text);
  font-size: 1.8rem;
  text-align: center;
  font-weight: 500;

}

/*  600以下は改行   */
@media screen and (min-width: 600px) {
  .br-sp {
    display: none;
  }
}

.left-p {
  text-align: left;
  font-size: 1.3rem;
}

.n_13 {
  font-size: 1.3rem;
}

/*  PR用設定 右寄せ　　*/
.pr {
  font-size: 1rem;
  text-align: right;
  color: var(--Text);
}

.menseki-r {
  font-size: 1rem;
  text-align: right;
  color: var(--Text);
}

.menseki {
  font-size: 1rem;
}

.strong {
  font-weight: bold;
}

.b_blue {
  color: var(--Blue);
  font-weight: bold;
}

/* 1.2　*/
.b_22 {
  font-size: 2.2rem;
  font-weight: bold;
}

.b_blue_22 {
  color: var(--Blue);
  font-size: 2.2rem;
  font-weight: bold;
}

.b_pink_22 {
  color: var(--Pink);
  font-size: 2.2rem;
  font-weight: bold;
}

/*  マーカー　濃い黄色　　*/
.b_marker_by {
  font-weight: bold;
  background: -webkit-linear-gradient(transparent 60%, #ffff00 0%);
  background: linear-gradient(transparent 60%, #ffff00 0%);
}

/*   広告主情報  */
.koukoku {
  font-size: 1rem;
  color: var(--Text);
  text-align: center;
}

.koukoku a {
  font-weight: normal;
  font-size: 1rem;
}

/* -------------------------------------　*/
/* -------  アニメーション       　--------　*/
/* -------------------------------------　*/
/* 点滅用　*/
.blink {
  animation: blink 1s ease-in-out infinite alternate;
  font-weight: bold;
}

/* 点滅 */
@keyframes blink {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 左右に揺れる　*/
.yureru-s {
  animation: yureru-s 2s infinite;
}

@keyframes yureru-s {
  0% {
    transform: translate(2px, 0px);
  }

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

  10% {
    transform: translate(2px, 0px);
  }

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

  20% {
    transform: translate(2px, 0px);
  }

  25% {
    transform: translate(-2px, 0px);
  }

  30% {
    transform: translate(0px, 0px);
  }
}

*,
::before,
::after {
  margin: 0;
}