@charset "utf-8";

/* ==================================================
全体構成
================================================== */

/* ----- 多言語用指定 ----- */
html:lang(zh-cn) body,
html:lang(zh-cn) input,
html:lang(zh-cn) select,
html:lang(zh-cn) textarea {
  font-family: 'Microsoft YaHei', '微软雅黑', SimSun;
}

html:lang(zh-tw) body,
html:lang(zh-tw) input,
html:lang(zh-tw) select,
html:lang(zh-tw) textarea {
  font-family: 'Segoe UI', SegoeUI, 'Microsoft JhengHei', 微軟正黑體, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html:lang(ko-kr) body,
html:lang(ko-kr) input,
html:lang(ko-kr) select,
html:lang(ko-kr) textarea {
  font-family: 'Segoe UI', SegoeUI, 'Malgun Gothic', Gulim, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ----- 画像のPC/SP切り替え ----- */
#pr_translation .sp {
  display: block;
  max-width: 100%;
}

#pr_translation .pc {
  display: none;
}

@media screen and (min-width: 768px) {
  #pr_translation .sp {
    display: none;
  }
  #pr_translation .pc {
    display: block;
  }
}

/* レイアウト */
body {
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

#pr_translation {
  width: 100%;
  line-height: 1.6;
  background: url(../img/bg.jpg) repeat 0 0;
  background-size: 125px;
  padding-bottom: 5vw;
}

@media screen and (min-width: 768px) {
  #pr_translation {
    padding-bottom: 50px;
  }
}

/* 各項目共通
-------------------------------------------------- */
#pr_translation .pr_box {
  position: relative;
  width: 100%;
}

#pr_translation a:hover {
  opacity: 0.8;
}

#pr_translation img {
  width: 100%;
  display: block;
  vertical-align: bottom;
}

/* ヘッダー
-------------------------------------------------- */
.lp_header {
  background: #000;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

/* type-hero
-------------------------------------------------- */
/* ----- type-hero レイアウト ----- */
#pr_translation .pr_box.type-hero {
  padding-bottom: 3vw;
  background: #ff928a;
}

@media screen and (min-width: 768px) {
  #pr_translation .pr_box.type-hero {
    padding-bottom: 0;
    width: 170%;
    left: 50%;
    margin-left: -85%;
  }
}

@media screen and (min-width: 1000px) {
  #pr_translation .pr_box.type-hero {
    padding-bottom: 0;
    width: 100%;
    min-width: 1920px;
    left: 50%;
    margin-left: -960px;
  }
}

@media screen and (min-width: 1920px) {
  #pr_translation .pr_box.type-hero {
    width: 100%;
    min-width: auto;
    left: 0;
    margin: 0 auto;
  }
}

/* ----- 翻訳ボタン ----- */
#pr_translation .pr_box.type-hero .lang-box {
  position: absolute;
  top: 2vw;
  right: 2vw;
}

#pr_translation .pr_box.type-hero .lang-box ul {
  display: flex;
  justify-content: center;
  /* width: 40%; */
}

#pr_translation .pr_box.type-hero .lang-box li {
  margin: 0 0.3em;
}

#pr_translation .pr_box.type-hero .lang-box li a {
  background: #fff;
  font-size: 1em;
  padding: 0.3em 0.7em;
  /* margin: 0 0.3em; */
  border-radius: 3px;
  color: #111;
  display: block;
}

#pr_translation .pr_box.type-hero .lang-box li a:hover {
  background: #b22eff;
  color: #fff;
  opacity: 1;
}

#pr_translation .pr_box.type-hero .lang-box li.active a {
  background: #b22eff;
  color: #fff;
}

@media screen and (min-width: 768px) {
  #pr_translation .pr_box.type-hero .lang-box {
    width: 30%;
    position: absolute;
    top: 7%;
    right: 0;
    left: 50%;
    margin-left: -1%;
    text-align: center;
    /* width: 460px; */
  }

  #pr_translation .pr_box.type-hero .lang-box li a {
    background: #fff;
    /* font-size: 90%; */
    border-radius: 3px;
    width: 100%;
  }
}

@media screen and (min-width: 1000px) {
  #pr_translation .pr_box.type-hero .lang-box li a {
    font-size: 1.3em;
  }
}

/* ----- アンカー枠 ----- */
#pr_translation .pr_box.type-hero .anker-box {
  position: relative;
  margin-top: -56vw;
  width: 100%;
}

#pr_translation .pr_box.type-hero .anker-box > h2 {
  width: 70%;
  margin: 0 auto;
}

#pr_translation .pr_box.type-hero .anker-box .anker-patch {
  position: relative;
  width: 95%;
  margin: 2vw auto 0;
  background-size: contain;
}
#pr_translation .pr_box.type-hero .anker-patch-inner {
  position: relative; /* swiperのarrow位置指定に必要 */
  background: url(../img/sp_anker_bg_middle.png) repeat-y 0 0;
  background-size: contain;
  margin: 0;
}
#pr_translation .pr_box.type-hero .anker-box .anker-patch h3 {
  margin: 0 auto;
}
#pr_translation .pr_box.type-hero .anker-box .anker-patch h3 img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  #pr_translation .pr_box.type-hero .anker-box {
    position: absolute;
    margin-top: 0;
    width: 30%;
    top: 21%;
    left: 50%;
    margin-left: -1%;
  }
  #pr_translation .pr_box.type-hero .anker-box > h2 {
    width: 80%;
    margin: 0 auto;
  }

  #pr_translation .pr_box.type-hero .anker-box .anker-patch {
    position: relative;
    width: 89%;
    margin: 2% auto 0;
    background-size: contain;
  }
  #pr_translation .pr_box.type-hero .anker-patch-inner {
    /* swiperのarrow位置指定に必要 */
    background: url(../img/pc_anker_bg_middle.png) repeat-y 0 0;
    background-size: contain;
  }
  #pr_translation .pr_box.type-hero .anker-box .anker-patch h3 {
    /* width: 37vw; */
    margin: 0 auto;
  }
  #pr_translation .pr_box.type-hero .anker-box .anker-patch h3 img {
    width: 100%;
  }
}

/* ----- swiper ----- */
.swiper-container {
  width: 78%;
  margin: 0 auto;
  overflow: hidden;
  padding: 3% 0 1%;
}

.swiper-button-prev,
.swiper-button-next {
  background: #ccc;
  height: 88%;
  width: 5%;
  top: 0;
  margin-top: 3%;
  border-radius: 5px 0 0 5px;
  left: 4%;
}

.swiper-button-next {
  left: 91%;
  border-radius: 0 5px 5px 0;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 1.5em;
  color: #fff;
}

/* swiper IE11用スタイル(矢印表示) */
.swiper-button-prev::after,
.swiper-button-next::after {
  position: relative;
  font-family: 'Font Awesome 5 Pro', sans-serif;
  opacity: 1;
  font-style: normal;
  font-weight: 900;
  font-size: 1em;
}
.swiper-button-prev::after {
  content: '\f104';
}
.swiper-button-next::after {
  content: '\f105';
}
.swiper-button-prev:hover:after,
.swiper-button-next:hover:after {
  color: #fff;
}

@media screen and (min-width: 768px) {
  .swiper-container {
    width: 78%;
    padding: 3% 0 1%;
  }

  .swiper-button-prev,
  .swiper-button-next {
    height: 88%;
    width: 5%;
    top: 0;
    margin-top: 3%;
    border-radius: 5px 0 0 5px;
    left: 4%;
  }

  .swiper-button-next {
    left: 91%;
    border-radius: 0 5px 5px 0;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 1.5em;
    color: #fff;
  }
}

/* type-info
-------------------------------------------------- */
/* ----- type-info レイアウト ----- */
#pr_translation .type-info {
  margin-top: 10vw;
}

#pr_translation .type-info-inner {
  background: url(../img/sp_info_bg_middle.png) repeat-y 0 0;
  background-size: contain;
  padding: 0 7vw 10vw;
}

#pr_translation .type-info-inner > * {
  margin-top: 10vw;
}

#pr_translation .type-info-inner > *:first-child {
  margin-top: 0;
  padding-top: 5vw;
}

@media screen and (min-width: 768px) {
  #pr_translation .type-info {
    margin-top: 50px;
    max-width: 1000px;
    margin: 50px auto 0;
  }

  #pr_translation .type-info-inner {
    background: url(../img/pc_info_bg_middle.png) repeat-y 0 0;
    background-size: contain;
    padding: 0 80px 20px;
  }

  #pr_translation .type-info-inner > * {
    margin-top: 50px;
  }

  #pr_translation .type-info-inner > *:first-child {
    padding-top: 30px;
  }
}

/* ----- キャラクター ----- */
#pr_translation .type-info h2 {
  position: absolute;
  top: -6vw;
  left: -2vw;
  width: 30%;
}

#pr_translation .type-info h2 img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  #pr_translation .type-info h2 {
    top: -3%;
    left: 0%;
    max-width: 232px;
  }
}

/* ----- タイトル ----- */
#pr_translation .type-info h3 {
  margin: 0 auto;
}

/*  */
#pr_translation .type-info .type-info-inner h3 {
  width: 32%;
  margin-top: 10vw;
}

#pr_translation .type-info .type-info-inner h3.en {
  width: 50%;
}

#pr_translation .intro-box img {
  width: 50vw;
}

#pr_translation .intro-box img.en {
  width: 60vw;
}


@media screen and (min-width: 768px) {
  #pr_translation .type-info .type-info-inner h3 {
    margin-top: 50px;
    max-width: 300px;
  }

  #pr_translation .intro-box img {
    max-width: 233px;
  }
}

/* ----- リストテキスト ----- */
.intro-box li {
  margin-top: 1.8em;
}

.intro-box li:first-child {
  margin-top: 0;
  position: relative;
}

.intro-box li::before {
  content: '';
  display: block;
  background: url(../img/info_icon_flower.png) no-repeat 0 0;
  background-size: contain;
  width: 1em;
  height: 1em;
  margin-left: -1.2em;
  margin-top: 0.4rem;
  position: absolute;
}

.intro-box li:nth-of-type(1)::before {
  margin-top: 0.6em;
}

.intro-box li p,
.intro-box li img {
  margin-top: 1em;
}

.intro-box li strong {
  font-size: 1.3em;
  font-weight: bold;
  color: #ac0000;
}

.intro-box li .attention {
  font-size: 0.9em;
  color: #222;
}

/* ----- talk01 ----- */
#pr_translation .chara-talk-01 {
  background: #ffc2c2;
  width: 90%;
  margin-top: 0;
  padding: 1em;
  border-radius: 5px;
  position: relative;
  font-size: 0.9em;
}

#pr_translation .chara-talk-01 strong {
  background: linear-gradient(transparent 30%, #fff889 30%);
}

#pr_translation .chara-talk-01::before {
  position: absolute;
  content: '';
  display: block;
  background: url(../img/info_chara_02.png) no-repeat 0 0;
  background-size: contain;
  width: 22vw;
  height: 35vw;
  bottom: -19vw;
  right: -19vw;
  z-index: 10;
}

#pr_translation .chara-talk-01::after {
  content: '';
  width: 2vw;
  height: 2vw;
  position: absolute;
  bottom: 10%;
  right: -3.9vw;
  margin: auto;
  box-sizing: border-box;
  border: 2vw solid transparent;
  border-left: 2vw solid #ffc2c2;
}

@media screen and (min-width: 768px) {
  #pr_translation .chara-talk-01 {
    margin-top: 0px;
  }

  #pr_translation .chara-talk-01::before {
    background: url(../img/pc_info_chara_02.png) no-repeat 0 0;
    width: 22vw;
    max-width: 165px;
    height: 35vw;
    max-height: 269px;
    top: -85%;
    right: -26%;
  }

  #pr_translation .chara-talk-01::after {
    width: 1em;
    height: 1em;
    top: 58%;
    right: -1.4em;
    border: 0.7em solid transparent;
    border-left: 1em solid #ffc2c2;
  }
}

/* ----- talk02 ----- */
#pr_translation .chara-talk-02 {
  background: #ffc2c2;
  width: 90%;
  padding: 1em;
  border-radius: 5px;
  position: relative;
  font-size: 0.9em;
  margin: 3vw 0 0 auto;
}

#pr_translation .chara-talk-02::before {
  position: absolute;
  content: '';
  display: block;
  background: url(../img/info_chara_03.png) no-repeat 0 0;
  background-size: contain;
  width: 20vw;
  height: 17vw;
  top: -3vw;
  left: -19vw;
  z-index: 10;
}

#pr_translation .chara-talk-02::after {
  content: '';
  width: 2vw;
  height: 2vw;
  position: absolute;
  top: 25%;
  left: -3.9vw;
  margin: auto;
  box-sizing: border-box;
  border: 2vw solid transparent;
  border-right: 2vw solid #ffc2c2;
}

@media screen and (min-width: 768px) {
  #pr_translation .chara-talk-02 {
    margin-top: 20px;
  }

  #pr_translation .chara-talk-02::before {
    width: 20vw;
    max-width: 160px;
    height: 17vw;
    max-height: 268px;
    top: -85%;
    left: -19%;
    z-index: 10;
  }

  #pr_translation .chara-talk-02::after {
    width: 1em;
    height: 1em;
    top: 46%;
    left: -1.4em;
    border: 0.7em solid transparent;
    border-right: 1em solid #ffc2c2;
  }
}

#pr_translation .dummy-img-wrap {
  background: #fff;
  padding: 5%;
  border-radius: 10px;
}

/* ----- dummy-img ----- */
#pr_translation .dummy-img {
  width: 72vw;
  margin: 3vw auto 0;
}

@media screen and (min-width: 768px) {
  #pr_translation .dummy-img {
    max-width: 100%;
    margin: 20px auto 0;
  }
}

/* type-work
-------------------------------------------------- */
/* ----- typeworkレイアウト ----- */
#pr_translation .type-work .work-box {
  background: #fff;
  padding: 5vw;
  margin: 10vw 0 0;
  border-radius: 5px;
}

#pr_translation .type-work .work-box > * {
  margin-top: 7vw;
}

#pr_translation .type-work .work-box > *:first-child {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  #pr_translation .type-work .work-box {
    max-width: 1200px;
    margin: 50px auto 0;
    padding: 3%;
  }

  #pr_translation .type-work .work-box > * {
    margin-top: 20px;
  }
}

/*----- wrap-work ----- */
#pr_translation .type-work .wrap-work::after {
  content: '';
  display: block;
  clear: both;
}

@media screen and (min-width: 768px) {
  /* PCとSPで表示差異があるためclearをしない */
  #pr_translation .type-work .wrap-work::after {
    content: '';
    display: inline-block;
    clear: none;
  }
}

/* wrap-work img */
#pr_translation .type-work .wrap-work .work-img {
  width: 40%;
  float: left;
}

@media screen and (min-width: 768px) {
  #pr_translation .type-work .wrap-work .work-img {
    max-width: 300px;
    width: 28%;
  }
}

/* wrap-work text */
#pr_translation .type-work .wrap-work .work-text-box {
  width: 55%;
  float: left;
  margin-left: 5%;
}

#pr_translation .type-work .wrap-work .work-text-box > * {
  margin-top: 0.5em;
}

#pr_translation .type-work .wrap-work .work-text-box > *:first-child {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  #pr_translation .type-work .wrap-work .work-text-box {
    /* max-width: 470px; */
    margin-left: 2%;
    padding-bottom: 20px;
    width: 40%;
  }

  #pr_translation .type-work .wrap-work .work-text-box > * {
    margin-top: 1em;
  }
}

#pr_translation .type-work .wrap-work .work-title {
  font-size: 1.3em;
}

#pr_translation .type-work .wrap-work .work-title {
  /*基本設定。設定した高さより長くなった場合に文末以降が省略される*/
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
  position: relative;
  text-align: left;
  text-overflow: ellipsis;
  margin: auto;
}
#pr_translation .type-work .wrap-work .work-title::before,
#pr_translation .type-work .wrap-work .work-title::after {
  /*IE用。疑似要素に除外設定*/
  content: '...';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 1.8em;
  -ms-wrap-flow: start;
}
#pr_translation .type-work .wrap-work .work-title::after {
  background: currentColor;
  color: white;
  top: auto;
}
@supports (-webkit-line-clamp: 3) {
  /*モダンブラウザ用*/
  #pr_translation .type-work .wrap-work .work-title {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  #pr_translation .type-work .wrap-work .work-title::before,
  #pr_translation .type-work .wrap-work .work-title::after {
    content: normal;
  }
}
@media screen and (min-width: 768px) {
  #pr_translation .type-work .wrap-work .work-title {
    font-size: 1.8em;
  }
}

#pr_translation .type-work .wrap-work .work-desc {
  font-size: 0.8em;
}

#pr_translation .type-work .wrap-work .work-desc {
  /*基本設定。設定した高さより長くなった場合に文末以降が省略される
  line-height: 1.4;
  max-height: 4.2em;
  overflow: hidden;
  position: relative;
  text-align: justify;
  text-overflow: ellipsis;
  margin: auto;
}
#pr_translation .type-work .wrap-work .work-desc::before,
#pr_translation .type-work .wrap-work .work-desc::after {
  /*IE用。疑似要素に除外設定
  line-height: 1;
  position: absolute;
  right: 0;
  top: 3em;
  -ms-wrap-flow: start;
}
#pr_translation .type-work .wrap-work .work-desc::after {
  background: currentColor;
  color: white;
  top: auto;
}
@supports (-webkit-line-clamp: 3) {
  /*モダンブラウザ用
  #pr_translation .type-work .wrap-work .work-desc {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
  }
  #pr_translation .type-work .wrap-work .work-desc::before,
  #pr_translation .type-work .wrap-work .work-desc::after {
    content: normal;
  }*/
}

@media screen and (min-width: 768px) {
  #pr_translation .type-work .wrap-work .work-desc {
    font-size: 1em;
  }
}

#pr_translation .type-work .wrap-work .work-genre ul {
  display: flex;
}

#pr_translation .type-work .wrap-work .work-genre li {
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 1px 10px;
  display: inline-block;
  font-size: 0.8em;
  margin-bottom: 0.3em;
}

@media screen and (min-width: 768px) {
  #pr_translation .type-work .wrap-work .work-genre li {
    font-size: 1em;
  }
}

/* wrap-work btn-detail */
#pr_translation .wrap-patch .btn-box {
  display: flex;
  /* margin-top: 7vw; */
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

#pr_translation .type-work .wrap-work .btn {
  position: relative;
  display: block;
  width: 44vw;
  padding: 5vw 0 5vw 5vw;
  line-height: 20vw;
  background: #eee;
  float: right;
  margin-right: 3%;
  margin-top: 0.5em;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 2px 3px 6px -2px rgba(0, 0, 0, 0.35), 0px 1px 2px rgba(255, 255, 255, 0.8) inset;
}

#pr_translation .type-work .wrap-work .btn.btn-detail {
  background: #ffb243; /* Old browsers */
  background: -mozffb243r-gradient(top, #ffb243 0%, #ff8f2b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffb243 0%, #ff8f2b 100%); /* Chrome10-25,Safariffb243*/
  background: linear-gradient(to bottom, #ffb243 0%, #ff8f2b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb243', endColorstr='#ff8f2b',GradientType=0 ); /* IE6-9 */
  color: #fff;
  text-align: center;
  line-height: 1.4;
  font-size: 4vw;
  border: 1px solid #ff9c00;
  text-shadow: 2px 2px 1px #ff8f2b, -2px 2px 1px #ff8f2b, 2px -2px 1px #ff8f2b, -2px -2px 1px #ff8f2b, 2px 0px 1px #ff8f2b, 0px 2px 1px #ff8f2b, -2px 0px 1px #ff8f2b, 0px -2px 1px #ff8f2b; /* 文字の影 */
}

#pr_translation .type-work .wrap-work .btn.btn-detail::before {
  position: absolute;
  display: inline-block;
  content: '\f218';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  text-shadow: none;
  color: #923a00;
  top: 28%;
  left: 5%;
  font-size: 7vw;
}

@media screen and (min-width: 768px) {
  #pr_translation .type-work .wrap-work .btn {
    max-width: 260px;
    /* height: 150px; */
    line-height: 150px;
    padding: 2% 0 2% 3%;
    margin-right: 0;
    margin-top: 0;
    float: right;
    width: 30%;
  }
  #pr_translation .type-work .wrap-work .btn.btn-detail {
    line-height: 1.4;
    font-size: 2vw;
  }

  #pr_translation .type-work .wrap-work .btn.btn-detail::before {
    top: 30%;
    left: 8%;
    font-size: 4vw;
  }
}

/* ----- wrap-patch ----- */
#pr_translation .wrap-patch > * {
  margin-top: 3vw;
}

#pr_translation .wrap-patch > *:first-child {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  #pr_translation .wrap-patch {
    /* max-width: 510px; */
    margin: 0 0 0 auto;
    width: 70%;
  }

  #pr_translation .wrap-patch > * {
    margin-top: 20px;
  }

  #pr_translation .wrap-patch::after {
    content: '';
    display: block;
    clear: both;
  }
}

@media screen and (min-width: 1000px) {
  #pr_translation .wrap-patch {
    width: 70%;
  }

  #pr_translation .type-work .wrap-work .btn.btn-detail {
    margin-left: 1%;
    font-size: 20px;
  }

  #pr_translation .type-work .wrap-work .btn.btn-detail::before {
    font-size: 37px;
  }
}

/* work-patch btn-box */
#pr_translation .wrap-patch .btn-box .btn {
  position: relative;
  display: block;
  width: 46%;
  padding: 4% 0 4% 5%;
  line-height: 20vw;
  background: #eee;
  margin: 0 1%;
  /* margin-top: 0.5em; */
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 2px 3px 6px -2px rgba(0, 0, 0, 0.35), 0px 1px 2px rgba(255, 255, 255, 0.8) inset;
}

#pr_translation .wrap-patch .btn-box .btn.btn-patch {
  background: #668fff; /* Old browsers */
  background: -moz-linear-gradient(top, #668fff 0%, #3b6fff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #668fff 0%, #3b6fff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #668fff 0%, #3b6fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#668fff', endColorstr='#3b6fff',GradientType=0 ); /* IE6-9 */
  color: #fff;
  text-align: center;
  font-size: 3vw;
  line-height: 1.4;
  border: 1px solid #3c70ff;
  text-shadow: 2px 2px 1px #3c70ff, -2px 2px 1px #3c70ff, 2px -2px 1px #3c70ff, -2px -2px 1px #3c70ff, 2px 0px 1px #3c70ff, 0px 2px 1px #3c70ff, -2px 0px 1px #3c70ff, 0px -2px 1px #3c70ff; /* 文字の影 */
}

#pr_translation .wrap-patch .btn-box .btn.btn-patch::before {
  position: absolute;
  display: inline-block;
  content: '\f019';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  text-shadow: none;
  color: #fff;
  top: 30%;
  left: 6%;
  font-size: 4vw;
}

#pr_translation .wrap-patch .btn-box .btn.btn-share {
  background: #4cc3ff; /* Old browsers */
  background: -moz-linear-gradient(top, #4cc3ff 0%, #21b5ff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #4cc3ff 0%, #21b5ff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #4cc3ff 0%, #21b5ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cc3ff', endColorstr='#21b5ff',GradientType=0 ); /* IE6-9 */
  color: #fff;
  text-align: center;
  font-size: 3vw;
  line-height: 1.4;
  border: 1px solid #00aaff;
  text-shadow: 2px 2px 1px #21b5ff, -2px 2px 1px #21b5ff, 2px -2px 1px #21b5ff, -2px -2px 1px #21b5ff, 2px 0px 1px #21b5ff, 0px 2px 1px #21b5ff, -2px 0px 1px #21b5ff, 0px -2px 1px #21b5ff; /* 文字の影 */
}

#pr_translation .wrap-patch .btn-box .btn.btn-share::before {
  position: absolute;
  display: inline-block;
  content: '\f099';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  text-shadow: none;
  color: #fff;
  top: 28%;
  left: 5%;
  font-size: 4vw;
}

#pr_translation .wrap-patch .btn-box .btn.btn-share.weibo {
  background: #ff4c4d; /* Old browsers */
  background: -moz-linear-gradient(top, #ff4c4d 0%, #ff2121 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ff4c4d 0%, #ff2121 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ff4c4d 0%, #ff2121 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: 1px solid #ff4c4d;
  text-shadow: 2px 2px 1px #ff2121, -2px 2px 1px #ff2121, 2px -2px 1px #ff2121, -2px -2px 1px #ff2121, 2px 0px 1px #ff2121, 0px 2px 1px #ff2121, -2px 0px 1px #ff2121, 0px -2px 1px #ff2121; /* 文字の影 */
}

#pr_translation .wrap-patch .btn-box .btn.btn-share.weibo::before {
  content: '\f18a';
}

@media screen and (min-width: 768px) {
  #pr_translation .wrap-patch .btn-box .btn {
    float: left;
  }

  #pr_translation .wrap-patch .btn-box .btn.btn-patch {
    max-width: 250px;
    padding: 4% 1% 4% 5%;
    line-height: 20px;
    font-size: 1.2em;
  }

  #pr_translation .wrap-patch .btn-box .btn.btn-patch::before {
    font-size: 2em;
    top: 39%;
    left: 8%;
  }

  #pr_translation .wrap-patch .btn-box .btn.btn-share {
    max-width: 250px;
    padding: 4% 1% 4% 5%;
    line-height: 20px;
    font-size: 1.2em;
  }

  #pr_translation .wrap-patch .btn-box .btn.btn-share::before {
    font-size: 2em;
    top: 40%;
    left: 8%;
  }
}

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

#pr_translation .wrap-comment {
  background: #ccc;
  display: flex;
  justify-content: space-between;
  padding: 2vw;
}

#pr_translation .wrap-comment .icon {
  width: 30%;
}

#pr_translation .wrap-comment .icon p {
  position: relative;
  background: #ff3535;
  color: #fff;
  text-align: center;
  padding: 0.3em 0.5em;
  font-size: 0.8em;
  margin-top: 1vw;
}

/* ----- wrap-comment ----- */
#pr_translation .wrap-comment .icon p::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  box-sizing: border-box;
  border: 1em solid transparent;
  border-left: 0.5em solid #cccccc;
}

#pr_translation .wrap-comment .icon p::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  margin: auto;
  box-sizing: border-box;
  border: 1em solid transparent;
  border-right: 0.5em solid #cccccc;
}

#pr_translation .wrap-comment .comment {
  width: 67%;
}

#pr_translation .wrap-comment .comment h3 {
  font-size: 1.1em;
}

#pr_translation .wrap-comment .comment h3::after {
  content: ':';
}

#pr_translation .wrap-comment .comment p {
  font-size: 0.9em;
  margin-top: 0.3em;
}

@media screen and (min-width: 768px) {
  #pr_translation .wrap-comment .icon {
    max-width: 140px;
  }

  #pr_translation .wrap-comment {
    padding: 20px;
  }

  #pr_translation .wrap-comment .comment {
    width: 100%;
    margin-left: 2%;
  }
}

/* スクロール
-------------------------------------------------- */
.lp_return_top {
  background: rgba(0, 0, 0, 0.3);
}

/* ----- スクロールしたら要素を表示 ----- */
.fadein {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1500ms;
}

.fadein.scrollin {
  opacity: 1;
  transform: translateY(0);
}