@charset "utf-8";
/* reset */
html {
  background: #FFF;
  font-size: 62.5%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, figure, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f6f4f0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
li {
  list-style: none;
}
caption, th {
  text-align: left;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
sup {
  vertical-align: text-top;
}
/* --------------------------------------------------
 contents 
-------------------------------------------------- */
strong {
  font-weight: 900;
}
#cont {
  font-family: 'Noto Sans JP', sans-serif, 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo', 'ＭＳ ゴシック';
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2;
  color: #111111;
  word-break: break-all;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 15% 0;
  overflow: hidden;
  letter-spacing: 0.08em;
  text-align: left;
}
@media screen and (min-width: 750px) {
  #cont {
    padding: 0 0 10% 0;
  }
}
#cont img {
  max-width: 100%;
  height: auto;
  border: 0;
}
.item_margin {
  margin: 0 5% 0 5%;
}
#cont p {
  font-weight: 500;
  line-height: 2;
  padding: 0 5%;
  margin-bottom: 45px;
}
.date {
  color: #888;
  font-size: 0.8em;
  margin-top: 3%;
  padding: 0 5%;
}
.fv_note {
  font-size: 1rem;
  text-align: left;
  line-height: 1.6;
  font-weight: normal;
  letter-spacing: 0;
  color: #888;
  padding: 0 5%;
}
#cont h1 {
  font-size: 1.7rem;
  line-height: 1.6;
  font-weight: 700;
  padding: 0 5%;
  letter-spacing: 0;
}
#cont h2 {
  margin: 2% 0 5% 0;
  padding: 3% 5%;
}
#cont h3 {
  font-size: 1.8rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 5% 0;
  padding: 0 5%;
}
#cont h3::before {
  content: attr(data-en);
  display: block;
  color: #ffacb7;
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 700;
  padding: 1% 0;
  letter-spacing: 0.12em;
}
#cont h3::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ffacb7;
  margin: 1% 0 0 0;
}
#cont h4 {
  font-size: 1.8rem;
  line-height: 1.6;
  text-align: left;
  margin: 0 0 2% 0;
  color: #111;
}
#cont h5 {
  font-size: 1.8rem;
  line-height: 1.6;
  text-align: left;
  padding: 2% 5% 0 5%;
  color: #111;
  font-weight: 700;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  margin: 0 0 2% 0;
  padding: 0 5%;
}
.tag-list .item {
  box-sizing: border-box;
  padding: 40px 80px;
}
.tag {
  color: #fff;
  background: #ffacb7;
  margin: 3px;
  padding: 3px;
  font-size: 0.8em;
}
@media screen and (min-width: 750px) {
  .date {
    padding: 0;
  }
  .tag-list {
    padding: 0;
  }
  .fv_note {
    padding: 0;
  }
  #cont h1 {
    font-size: 2.6rem;
    padding: 0;
    letter-spacing: 0.08em;
  }
  #cont h2 {
    margin: 5% 0;
    padding: 0;
  }
  #cont h3 {
    font-size: 3rem;
    letter-spacing: 0.14em;
    line-height: 1.3;
    padding: 0 5% 2% 5%;
  }
}
.mb25 {
  margin-bottom: 25px !important;
}
.mb45 {
  margin-bottom: 45px;
}
.mb0 {
  margin-bottom: 0 !important;
}
#cont sup {
  font-size: 50% !important;
  position: relative;
  top: 5px;
}
#cont sub {
  font-size: 75.5%;
  vertical-align: bottom;
  position: relative;
  top: 0.1em;
}
#cont .note {
  font-size: 1rem;
  text-align: left;
  line-height: 1.6;
  font-weight: normal;
  letter-spacing: 0;
  color: #888;
}
#cont .strong {
  font-size: 2.1rem;
  font-weight: bold;
}
#cont .txt_under {
  text-decoration-line: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
#cont .txt_large {
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 700;
}
#cont .txt_center {
  text-align: center;
}
#cont .red {
  color: #ff0e2e;
}
#cont .red_b {
  color: #ff0e2e;
  font-weight: bold;
}
.img img {
  margin: 0 auto;
  text-align: center;
  padding: 0 5%;
}
@media screen and (min-width: 750px) {
  .img img {
    padding: 0;
  }
}
/* marker */
.js-marker {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #fbffbe, #fbffbe);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 90%;
  transition: all 0.8s ease-in-out;
  font-weight: bold;
}
/* アニメーション発火時 */
.js-marker.inview {
  background-size: 100% 100%;
}
/* movie */
.movie {
  height: auto;
  background-size: cover;
  text-align: center;
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.movie img {
  z-index: 2;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  padding-top: 9%;
}
.movie video {
  margin: 0 auto;
  z-index: 1;
  width: 100%;
  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
  outline: none;
  border: none;
}
@media screen and (min-width: 750px) {
  .movie img {
    width: 100%;
    padding-top: 10%;
  }
  .movie video {
    width: 100%;
    filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
    outline: none;
    border: none;
  }
}
.review_wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 5%;
  justify-content: space-between;
  padding: 0 5%;
}
.review_wrap:not(:last-child) {
  margin-bottom: 80px;
}
.review_wrap .r_icon {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto;
  width: 20%;
  height: auto;
  padding: 0;
}
.review_wrap .r_txt {
  width: 78%;
  min-width: 0;
  padding: 0 2% 0 0;
}
.review_wrap .r_txt .red {
  font-size: 1.6em;
}
.review_wrap .r_txt2 {
  width: 100%;
  min-width: 0;
  padding: 1% 0 0 0;
}
@media screen and (min-width: 750px) {
  .review_wrap .r_icon {
    width: 15%;
  }
}
/* btn
----------------------------------------*/
.cv_btn1, .cv_btn2 {
  margin: 0 auto 5% auto;
}
.cv_btn1 img, .cv_btn2 img {
  animation: anime1 1s ease 0.5s infinite alternate;
  transform-origin: center;
}
@keyframes anime1 {
  from {
    transform: scale(0.9, 0.9);
  }
  to {
    transform: scale(1, 1);
  }
}
.cv_area {
  position: relative;
  top: 50%;
  background-color: #fff;
}
.cv_area .background {
  z-index: 0;
}
.cv_area .background img {
  width: 100%;
}
.cv_area .cv_btn {
  z-index: 1;
  width: 85%;
  position: absolute;
  top: 86%;
  left: 50%;
  -webkit-transform: translate(-50%, -86%);
  transform: translate(-50%, -86%);
}
.cv_area .cv_btn img {
  max-width: 100%;
  height: auto;
  animation: anime1 0.5s ease 0s infinite alternate;
  transform-origin: center;
}
/* list */
#cont ol.list01 {
  position: relative;
  margin-bottom: 45px;
  padding: 0 5%;
}
#cont ol.list01 li {
  list-style: none;
  list-style-position: outside;
  margin: 0;
  text-indent: -1.1em;
  padding-left: 1.1em;
  font-weight: 700;
}
#cont ol.list01 li span {
  margin: 0;
}
#cont ol.list02 {
  position: relative;
  margin-bottom: 45px;
  padding: 0 5%;
}
#cont ol.list02 li {
  list-style: decimal;
  list-style-position: inside;
  margin: 0;
  text-indent: -1.55em;
  padding-left: 1.55em;
  font-weight: 700;
}
.developer-voice02_area {
  position: relative;
  top: 50%;
  background-color: #fff;
}
.developer-voice02_area .background {
  z-index: 0;
}
.developer-voice02_area .background img {
  width: 100%;
}
.developer-voice02_area .d_img01 {
  z-index: 1;
  width: 55%;
  position: absolute;
  top: 15.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -15.5%);
  transform: translate(-50%, -15.5%);
}
.developer-voice02_area .d_img02 {
  z-index: 1;
  width: 55%;
  position: absolute;
  top: 33.5%;
  left: 50%;
  -webkit-transform: translate(-50%, -33.5%);
  transform: translate(-50%, -33.5%);
}
hr {
  border: 1px dashed #999999;
  margin: 5%;
  padding: 0 5%;
}
/* pagetop
----------------------------------------*/
#page-top {
  display: none;
  position: fixed;
  right: 0;
  bottom: 15px;
  z-index: 100;
  margin: 0 !important;
  padding: 0 !important;
}
#page-top a {
  display: block;
  font-size: 0;
  width: 50px;
  height: 50px;
  text-align: center;
  background: #adadad;
  border-radius: 50%;
  line-height: 50px;
}
#page-top a i {
  font-size: 20px;
  color: #fff;
  line-height: 50px;
}
.pc {
  display: none;
}
.sp {
  display: inline;
}
@keyframes dokidoki {
  0% {
    transform: scale(1.05)
  }
  5% {
    transform: scale(1)
  }
  95% {
    transform: scale(1)
  }
  100% {
    -webkit-transform: scale(1.05)
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 75%;
  }
  #cont {
    width: 750px;
    margin: 0 auto;
    overflow: hidden;
  }
  .letroUgcsetContainer {
    padding: 0 !important;
  }
  .pc {
    display: inline;
  }
  .sp {
    display: none;
  }
}