@charset "utf=8";
html {
  font-size: 100%;
}
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: black;
  line-height: 2.5rem;
  font-size: 20px;
  letter-spacing: 1px;
}

.flex {
  display: flex;
}

img {
  max-width: 90%;
  text-align: center;
  margin: 20px auto;
  display: block;
}
.line-img img {
  height: 320px;
  margin: 32px auto;
}
.review {
  max-width: 100%;
  height: 100%;
}
a {
  text-decoration: none;
}

li {
  list-style: none;
}
/* コンテンツ幅 */
.wrapper {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
}
.wrap {
  padding: 0 4%;
}
.wrap-02 {
  padding: 0 8%;
}
.bg {
  background: #e0e0e0;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーー
文字装飾
ーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* センター寄せ */
.center {
  text-align: center;
  display: block;
}
.shadow {
  color: #ffffff;
  font-weight: bold;
  font-size: 2rem;
  letter-spacing: 2px;
  text-shadow: 2px 2px 2px #ff1616, -2px -2px 2px #ff1616, -2px 2px 2px #ff1616,
    2px -2px 2px #ff1616, 2px 0px 2px #ff1616, -2px -0px 2px #ff1616,
    0px 2px 2px #ff1616, 0px -2px 2px #ff1616;
}
.shadow02 {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: 2px;
  text-shadow: 2px 2px 2px #ff1616, -2px -2px 2px #ff1616, -2px 2px 2px #ff1616,
    2px -2px 2px #ff1616, 2px 0px 2px #ff1616, -2px -0px 2px #ff1616,
    0px 2px 2px #ff1616, 0px -2px 2px #ff1616;
}

.point01 {
  font-weight: bold;
  color: #ff00ea;
  text-shadow: 1px 1px 1px #ffffff, -1px -1px 1px #fff, -1px 1px 1px #fff,
    1px -1px 1px #fff, 1px 0px 1px #fff, -1px -0px 1px #fff, 0px 1px 1px #fff,
    0px -1px 1px #fff;
  font-size: 1.4rem;
  padding: 0 5px;
  background: #edff4f;
}
.point02 {
  font-weight: 800;
  font-size: 1.2rem;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーー
CSSアニメーション
ーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* ふわふわ */
@keyframes bound-anim {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(6px);
  }
}

@keyframes punipuni {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.98, 1.15);
  }
}

/*** リンクにアニメーションを設定 ***/
.bound {
  display: inline-block;
  animation: 0.6s bound-anim ease-in infinite alternate;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーー
見出しタイトル
ーーーーーーーーーーーーーーーーーーーーーーーーー*/
.main-tit {
  display: flex;
  align-items: center;
  position: relative;
  padding: 1.1em 1.4em 1.1em 1em;
  background-color: #ff00d4;
  color: #fff;
  text-align: center;
  font-size: 2rem;
  justify-content: center;
}

.main-tit::before {
  position: absolute;
  left: 5px;
  width: calc(100% - 10px);
  height: 87%;
  border-top: 4px dashed #fff;
  border-bottom: 4px dashed #fff;
  content: "";
}
.sec-tit {
  position: relative;
  padding: 0.6em 0.7em;
  padding-left: 30px;
  border-radius: 10px;
  background-color: #ff00d4;
  color: #fff;
  margin-top: 60px;
}

.sec-tit::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px;
  width: 0;
  height: 0;
  border: 11px solid transparent;
  border-top: 11px solid #ff00d4;
}

.note-tit {
  font-size: 1rem !important;
  color: #333;
  border: solid 2px #333;
  border-radius: 10px;
  width: 130px;
  margin: 0;
  padding-left: 13px;
}

.note-text {
  font-size: 0.785rem !important;
  line-height: 20px;
  color: #333;
  border: solid 2px #333;
  border-radius: 10px;
  padding: 10px 20px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーー
リストデザイン
ーーーーーーーーーーーーーーーーーーーーーーーーー*/

.item-list {
  border: solid 2px #ff00d4;
  padding: 0 0.5em;
  position: relative;
  width: 80%;
  margin: 26px auto;
}

.item-list li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none !important;
  font-weight: bold;
  color: #ff08ea;
}

.item-list li:before {
  font-family: "Font Awesome 5 Free";
  content: "✔"; /*アイコン種類*/
  position: absolute;
  left: 0.5em; /*左端からのアイコンまで*/
  color: #ff08d6; /*アイコン色*/
}

.item-list li:last-of-type {
  border-bottom: none;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーー
会話
ーーーーーーーーーーーーーーーーーーーーーーーーー*/
.talk-box {
  display: flex;
  margin: 12px 0 28px;
}
.talk-box img {
  width: 50px;
  height: 50px;
  border: solid 2px #ff8fff;
  border-radius: 50%;
  margin: 0;
  padding: 2px;
}
.talk {
  background: #c3ddff;
  height: 100%;
  padding: 10px 24px;
  border-radius: 10px;
  position: relative;
  margin-left: 30px;
}
.talk::before {
  position: absolute;
  content: "";
  border: 15px solid transparent;
  border-right: 15px solid #c3ddff;
  left: -28px;
  top: 16px;
}
/* 右側 */
.right {
  flex-direction: row-reverse;
}
.talk-right {
  background: #ffc3c3;
  height: 100%;
  padding: 10px 24px;
  border-radius: 10px;
  position: relative;
  margin-right: 30px;
}
.talk-right::before {
  position: absolute;
  content: "";
  border: 15px solid transparent;
  border-left: 15px solid #ffc3c3;
  right: -28px;
  top: 16px;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーー
やじるし画像サイズ
ーーーーーーーーーーーーーーーーーーーーーーーーー*/
.arrow-box img {
  max-width: 50%;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーー
ボタン
ーーーーーーーーーーーーーーーーーーーーーーーーー*/
.btn-box {
  text-align: center;
}

.btn_results img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.tag-box {
  margin: 0 auto 10px;
  width: 92%;
}
.date {
  margin-left: auto;
  font-size: 15px;
}

.howtobox {
  border: 2px solid #386dff;
  border-radius: 5px;
  position: relative;
  margin: 20px auto;
  width: 100%;
}
.howtobox h4 {
  position: absolute;
  right: 0;
  left: 0;
  top: -2em;
  margin-left: 1em;
}
.howtobox .ttl {
  padding: 6px 2.5em;
  background: #386dff;
  color: #fff;
  border-radius: 5px;
}
.howtobox .naka {
  padding: 2em 0.5em 0.5em;
}
.naka img {
  margin: 0px auto;
}

.naka p {
  margin: 20px auto;
  line-height: 25px;
}

.btn_results img {
  animation: punipuni 1.2s infinite;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーー
///////////////////////////////////////////////
レスポンシブ
///////////////////////////////////////////////
ーーーーーーーーーーーーーーーーーーーーーーーーー*/

@media screen and (max-width: 600px) {
  /* 改行 */
  .br {
    display: block;
  }

  .tag-box {
    margin: 0 auto;
    width: 98%;
  }

  p {
    margin: 0;
  }
  .wrap-02 {
    padding: 0 2%;
  }
  /* 強調フォントの調整 */
  .shadow {
    font-size: 1.1rem;
  }
  .shadow02 {
    font-size: 1.1rem;
  }
  .point01,
  .point02 {
    font-size: 1rem;
  }
  /* タイトル */
  .main-tit {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .sec-tit {
    font-size: 1.3rem;
    margin-top: 40px;
  }
  .item-list {
    width: 100%;
  }
  /* 余白調整 */
  .mgn-top {
    margin-top: 20px;
  }
  /* 画像 */
  .review {
    max-width: 100%;
    height: 220px;
  }
  .cv-btn img {
    max-width: 100%;
  }
}