@charset "utf-8";

@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap);

/*==================================================
  Root
==================================================*/
:root {
  --Clr01: #ffffce;/*bodyの色1,*/
  --Clr02: #ffffc8;/*フォームのラベルの色*/
  --Clr03: #ff8208;/*フォームのタイトルの色*/
  --Clr04: #f93;/*フォームのタイトルの色2*/
  --Clr05: #999;/*フォームのタイトルのテキストの影の色*/
  --Clr06: #ff8208;/*リンクの色1*/
  --Clr07: #f93;/*リンクの色2*/
  --Clr08: #ff8208;/*質問項目の色1*/
  --Clr09: #f93;/*質問項目の色2*/
  --Clr10: #999;/*ボーダーの色*/
  --Clr11: #fff07f;/*FVの文字の色1*/
  --Clr12: #f00;/*FVの文字の色2*/
  --Clr13: #fff9dc;/*VOICEブロックの背景色（外）*/
  --Clr14: #daeba9;/*VOICEブロックの背景色1（内）*/
  --Clr15: #ccc;/*ラジオボタンの色1*/
  --Clr16: #0075ff;/*ラジオボタンの色2*/
  --Clr17: #ffc600;/*本気チェックの線の色*/
  --Clr18: #fffcd3;/*本気チェックの色1*/
  --Clr19: #fffcd3;/*本気チェックの色2*/
  --Clr20: #e1e1e8;/*アップセルアンケートの線の色1*/
  --Clr21: #fffcd3;/*アップセルアンケートの色1*/
  --Clr22: #fffcd3;/*アップセルアンケートの色2*/
  --Clr23: #f00;/*アップセルアンケートの色3*/
  --Clr24: #ff8208;/*フォーム項目フォーカス時のボーダー色*/
  --Clr25: #ffffc8;/*フォーム項目フォーカス時のbgの色*/
  --ClrRdbt01: #ccc;/*ラジオボタンの色1*/
  --ClrRdbt02: #0075ff;/*ラジオボタンの色2*/
  --ClrLg01: #ff4901;/*ロゴの色1*/
  --ClrLg02: #693100;/*ロゴの色2*/
  --BGC01: #ffffc8;/*特商法の文言部分の色1 背景*/
  --BGC02: #ff8208;/*特商法の文言部分の色2 線・タイトルの背景色*/
  --ClrAmzn01: #fcad55;/*Amazonpay用の色1*/
  --ClrErr01: #ffd0d0;/*エラー色1*/
  --ClrYes01: #28a745;/*Yes時のボーダー色*/
  --ClrYes02: #00b100;/*Yes時のbg色*/
  --ClrNo01: #cf9900;/*No時のボーダー色*/
  --ClrNo02: #ffffce;/*No時のbg色*/
  --ClrRed: #e60000;/*赤*/
  --ClrLrd: #ffebeb;/*薄い赤*/
  --ClrWlr: #fffcfc;/*薄ーい赤*/
  --ClrBlu: #00f;/*青*/
  --ClrYlw: #fff799;/*黄*/
  --ClrGrn: #00a04b;/*緑*/
  --ClrMkr: #000;/*黒*/
  --ClrBlk: #333;/*黒*/
  --ClrNmr: #666;/*鉛*/
  --ClrGry: #999;/*灰*/
  --ClrGmg: #ccc;/*ガンメタ*/
  --ClrLgr: #eee;/*ライトグレー*/
  --ClrMlg: #f3f3f3;/*もっと薄いグレー*/
  --ClrWht: #fff;/*白*/

  --ScndFiLg: 1.5s;/*FVのlogoのfadeinの時間*/
  --ScndTx: 1.5s;/*FVのテキスト1文字が出るのにかかる時間*/
  --ScndTxDl: .5s;/*FVのテキスト1文字のはじまるタイミング時間*/
  --ScndFi: 1.5s;/*FVのその他コンテンツが出るのにかかる時間*/
  --ScndFiDl: 2.4s;/*FVのその他コンテンツの出るタイミング*/
  --ScndSk: 3s;/*FVのその他コンテンツskewの時間*/
  --ScndSr: 4s;/*FVのその他コンテンツshrinkageの時間*/
  --ScndPl: 2s;/*FVのその他コンテンツpulseの時間*/
  --ScndFvDl: 7s;/*FVのその他コンテンツのアニメーションの始まるタイミング*/
}

/*========================================
  Reset
========================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display: block;
}

nav ul {
  list-style: none outside none;
}

li {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin:0;
  padding:0;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: var(--ClrYlw);
  color: var(--ClrMkr);
  text-decoration: none;
}

mark {
  background-color: var(--ClrYlw);
  color: var(--ClrMkr);
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: .1rem dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: .1rem;
  border: 0;
  border-top: .1rem solid var(--ClrGmg);
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

img,
svg {
  display: block;
  font-size: 0;
  vertical-align: bottom;
}

/*========================================
  Common Style
========================================*/

html,
body {
/*
  font-family: 'Noto Sans JP', sans-serif;
*/
  font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', sans-serif;
  line-height: 1.5;
  color: var(--ClrBlk);
  font-feature-settings: 'palt';
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-weight: 500;
}

html {
  font-size: 62.5%;
}

/*========================================
  Font Style
========================================*/
body {
  font-size: 3.6rem;
}

select,
input,
textarea,
button {
  font-family: inherit;
}

h1,h2,h3,h4,h5,h6 {
  line-height: normal;
}

h1 {
  font-size: 1.1em;
}

h2 {
  font-size: 1.1em;
  margin: 0;
}

h3,h4,h5,h6 {
  font-size: 1em;
}

svg {
  width: 100%;
}

a,
a:visited:hover {
  color: var(--Clr06);
  text-decoration: underline;
}

a:hover,
a:visited {
  color: var(--Clr07);
}

.font10 {
  font-size: 1rem!important;
}

.font11 {
  font-size: 1.1rem!important;
}

.font12 {
  font-size: 1.2rem!important;
}

.font14 {
  font-size: 1.4rem!important;
}

.font15 {
  font-size: 1.5rem!important;
}

.font16 {
  font-size: 1.6rem!important;
}

.font18 {
  font-size: 1.8rem!important;
}

.font19 {
  font-size: 1.9rem!important;
}

.font20 {
  font-size: 2rem!important;
}

.font22 {
  font-size: 2.2rem!important;
}

.font24 {
  font-size: 2.4rem!important;
}

.font25 {
  font-size: 2.5rem!important;
}

.font26 {
  font-size: 2.6rem!important;
}

.font28 {
  font-size: 2.8rem!important;
}

.font30 {
  font-size: 3rem!important;
}

.font32 {
  font-size: 3.2rem!important;
}

.font34 {
  font-size: 3.4rem!important;
}

.font36 {
  font-size: 3.6rem!important;
}

.font40 {
  font-size: 4rem!important;
}

.font44 {
  font-size: 4.4rem!important;
}

.font48 {
  font-size: 4.8rem!important;
}

.font50 {
  font-size: 5rem!important;
}

.font54 {
  font-size: 5.4rem!important;
}

.font56 {
  font-size: 5.6rem!important;
}

.font60 {
  font-size: 6rem!important;
}

.font64 {
  font-size: 6.4rem!important;
}

.font66 {
  font-size: 6.6rem!important;
}

.font70 {
  font-size: 7rem!important;
}

.font72 {
  font-size: 7.2rem!important;
}

.font75 {
  font-size: 7.5rem!important;
}

.font78 {
  font-size: 7.8rem!important;
}

.font80 {
  font-size: 8rem!important;
}

.font84 {
  font-size: 8.4rem!important;
}

.font88 {
  font-size: 8.8rem!important;
}

.font90 {
  font-size: 9rem!important;
}

.font100 {
  font-size: 10rem!important;
}

[class^=txt] {
  text-align: center;
  line-height: 1.5;
}

.txt_ss {
  font-size: 1.4rem;
}

.txt_s {
  font-size: 1.6rem;
}

.txt_m {
  font-size: 2rem;
  line-height: 1.5;
}

[class^=txt_l] {
  font-weight: bold;
}

.txt_l {
  font-size: 2.8rem;
  line-height: 1.5;
}

.txt_ll {
  font-size: 3.6rem;
  line-height: 1.3;
}

.bold {
  font-weight: bold;
}

.small {
  font-size: .5em;
}

.smaller {
  font-size: .8em;
}

.bigger {
  font-size: 1.3333em;
}

.big {
  font-size: 1.4em;
  font-weight: bold;
}

.huge {
  font-size: 1.8em;
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

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

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

.blue {
  color: var(--ClrBlu);
}

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

.green {
  color: var(--ClrGrn);
}

.bg_ylw {
  background-image: linear-gradient( to bottom, transparent 0%, transparent 55%, var(--ClrYlw) 65%, var(--ClrYlw) 80%, transparent 95% );
}

.imp {
  color: var(--ClrRed);
  background-color: transparent;
  background-image: linear-gradient( to bottom, transparent 0%, transparent 55%, var(--ClrYlw) 65%, var(--ClrYlw) 80%, transparent 95% );
}

.imp02 {
  color: var(--ClrYlw);
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
  background-color: var(--ClrRed);
  border-radius: 2rem;
  padding: 3rem;
}

.imp03 {
  color: var(--ClrRed);
}

.imp04 {
  background-image: linear-gradient( to bottom, transparent 0%, transparent 55%, var(--ClrYlw) 65%, var(--ClrYlw) 80%, transparent 95% );
}

.font_fin {
  color: var(--ClrRed);
  font-size: 4rem;
  font-weight: bold;
  text-shadow: .2rem .2rem .4rem var(--ClrGry);
  text-align: center;
  padding: 4rem 0 0 0;
}

.font_style01 {
  color: var(--ClrWht);
  background-color: var(--ClrRed);
  padding: 1rem;
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
}

.font_style02 {
  color: var(--ClrRed);
  background-color: var(--ClrWlr);
  padding: .5rem;
  font-size: 1.6rem;
}

.block_fix_copy {
  color: var(--ClrRed);
  text-align: center;
  line-height: 1.2;
  font-weight: 900;
  font-size: 5rem;
  width: 100%;
  margin: 0 0 .2em 0;
  text-shadow:
    -.2rem -.2rem 0 var(--ClrWht),
    .2rem -.2rem 0 var(--ClrWht),
    .2rem .2rem 0 var(--ClrWht),
    -.2rem .2rem 0 var(--ClrWht),
    .2rem .4rem .6rem rgba(0, 0, 0, .6);
}

.reg {
  vertical-align: super;
  font-size: .8em;
}

.super {
  vertical-align: super;
  font-size: .5em;
}

.indent_01 {
  padding-left: 1em!important;
  text-indent: -1em!important;
}

.indent_02 {
  padding-left: 1em!important;
}

.indent_03 {
  padding-left: 2em!important;
  text-indent: -1em!important;
}

.badge_annotation {
  padding-right: 1em;
  padding-left: 3em;
  text-indent: -2em;
  text-align: right;
  font-size: 2rem;
}

.ls_100 {
  letter-spacing: .10em;
}

.ls_50 {
  letter-spacing: .05em;
}

.ls_25 {
  letter-spacing: .025em;
}

.ls_0 {
  letter-spacing: 0;
}

.ls_m25 {
  letter-spacing: -.025em;
}

.ls_m50 {
  letter-spacing: -.05em;
}

.ls_m100 {
  letter-spacing: -.10em;
}

.lh12 {
  line-height: 1.2;
}

.lh13 {
  line-height: 1.3;
}

.lh15 {
  line-height: 1.5;
}

.lh16 {
  line-height: 1.6;
}

.lh18 {
  line-height: 1.8;
}

.lh20 {
  line-height: 2.0;
}

.prs_f {
  margin-left: -.4em;
}

.prs_r {
  letter-spacing: -.4em;
}

/*==================================================
  Style
==================================================*/
/*---------------------------------------
  Common Style
---------------------------------------*/
body {
  background-color: var(--Clr01);
}

.lp_wrapper {
  background-color: var(--ClrWht);
  box-shadow: 0 0 1rem var(--ClrGry);
  width: 75rem;
  margin: 0 auto;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: .05em;
}

.lp_wrapper img {
  width: 100%;
}

.scroll {
  opacity: 0;
  transform: translateY(2rem) scale(.9);
}

.scroll.scrollin {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: all .5s cubic-bezier(0, .55, .45, 1);
}

.flow {
  opacity: 0;
  transform: translateY(2rem) scale(.9);
}

.flow.scrollin {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: all .5s cubic-bezier(0, .55, .45, 1);
}

/*---------------------------------------
  fv
---------------------------------------*/
.fv_block,
.fv_block h1 {
  position: relative;
  z-index: 1;
}

.fv_block {
  overflow: hidden;
}

.fv_bg_02,
.fv_obi,
.fv_logo,
.fv_txt,
.fv_parts_01,
.fv_parts_02,
.fv_parts_03,
.fv_parts_04,
.fv_parts_05,
.fv_parts_06 {
  position: absolute;
  text-align: center;
  z-index: 3;
}

.fv_bg_02 {
  display: none;
  width: 100%;
  top: 0%;
  left: 0%;
  z-index: 2;
}

.fv_bg_02.on {
  display: block;
}

.fv_obi {
  width: 100%;
  top: 0;
  left: 0;
}

.fv_obi .fv_obi_bg {
  position: relative;
  width: 100%;
}

.fv_obi .fv_obi_cnt {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.fv_obi .fv_obi_cnt .txt {
  width: 30%;
  height: 100%;
  margin: 0 0 0 3.6%;
  padding: 1.2% 0;
}

.fv_obi .fv_obi_cnt .txt .txt-inner {
  color: var(--Clr03);
  background-color: var(--ClrWht);
  border-radius: 3.7rem;
  text-align: center;
  font-size: calc(2.4rem * 54 / 75);
  line-height: 1;
  font-weight: 700;
  height: 100%;
  margin: 0;
  padding: .5em 0;
}

.fv_obi .fv_obi_cnt .txt .row01 {
  width: 100%;
  font-size: calc(2.8rem * 54 / 75);
}

.fv_obi .fv_obi_cnt .txt .row02 {
  width: 100%;
}

.fv_obi .fv_obi_cnt .img {
  width: 64%;
  padding: 1% 3.6% 1% 0;
}

.fv_logo {
  width: 30.53333333%;
  top: 1%;
  left: 2%;
}

.fv_logo img {
}

.fv_txt {
  width: 67.46666667%;
  top: 8.5%;
  left: 2%;
}

.fv_txt .fv_svg,
.fv_txt .fv_txt_inner {
}

.fv_txt .fv_txt_inner img {
  width: 100%;
}

.fv_txt .fv_svg svg {
  overflow: unset;
  width: 100%;
}

.fv_txt .fv_svg svg .clr01 {
  fill: var(--Clr11);
}

.fv_txt .fv_svg svg .clr02 {
  fill: var(--Clr12);
}

.fv_txt .fv_svg svg path {
  stroke: var(--ClrWht);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: .4rem;
  stroke-opacity: .5;
}
/*
.fv_txt .fv_svg svg .line_01 path {
  animation: fade-in-e var(--ScndTx) cubic-bezier(.69, 0, .05, 1) .2s 1 both;
}

.fv_txt .fv_svg svg .line_01 path:nth-of-type(2) {
  animation-delay: .4s;
}

.fv_txt .fv_svg svg .line_01 path:nth-of-type(3) {
  animation-delay: .6s;
}

.fv_txt .fv_svg svg .line_01 path:nth-of-type(4) {
  animation-delay: .8s;
}

.fv_txt .fv_svg svg .line_01 path:nth-of-type(5) {
  animation-delay: 1.0s;
}

.fv_txt .fv_svg svg .line_01 path:nth-of-type(6) {
  animation-delay: 1.2s;
}

.fv_txt .fv_svg svg .line_02 path {
  animation: fade-in-e var(--ScndTx) cubic-bezier(.69, 0, .05, 1) 1.4s 1 both;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(2) {
  animation-delay: 1.6s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(3) {
  animation-delay: 1.8s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(4) {
  animation-delay: 2.0s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(5) {
  animation-delay: 2.2s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(6) {
  animation-delay: 2.4s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(7) {
  animation-delay: 2.6s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(8) {
  animation-delay: 2.8s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(9) {
  animation-delay: 3.0s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(10) {
  animation-delay: 3.2s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(11) {
  animation-delay: 3.4s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(12) {
  animation-delay: 3.6s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(13) {
  animation-delay: 3.8s;
}

.fv_txt .fv_svg svg .line_02 path:nth-of-type(14) {
  animation-delay: 4.0s;
}

.fv_txt .fv_svg svg .line_03 path {
  animation: fade-in-e var(--ScndTx) cubic-bezier(.69, 0, .05, 1) 4.4s 1 both;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(2) {
  animation-delay: 4.6s;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(3) {
  animation-delay: 4.8s;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(4) {
  animation-delay: 5.0s;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(5) {
  animation-delay: 5.2s;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(6) {
  animation-delay: 5.4s;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(7) {
  animation-delay: 5.6s;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(8) {
  animation-delay: 5.8s;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(9) {
  animation-delay: 6.0s;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(10) {
  animation-delay: 6.2s;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(11) {
  animation-delay: 6.4s;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(12) {
  animation-delay: 6.6s;
}

.fv_txt .fv_svg svg .line_03 path:nth-of-type(13) {
  animation-delay: 6.8s;
}
*/
.fv_parts {
}

.fv_parts_01 {
  width: 38.66666667%;
  top: 51.5%;
  left: 31.66666667%;
  z-index: 4;
}

.fv_parts_01 h2 {
  position: relative;
}

.fv_parts_01 p[class^=kira] {
  position: absolute;
  width: 22.46153846%;
  opacity: 0;
  animation: pulse var(--ScndPl) linear 0s infinite;
}

.fv_parts_01 p.kira_01 {
  top: -2.6%;
  left: 0%;
  animation-delay: 0s;
}

.fv_parts_01 p.kira_02 {
  top: 10%;
  right: 0%;
  opacity: 0;
  animation-delay: .4s;
}

.fv_parts_01 p.kira_03 {
  top: 34%;
  left: 54%;
  animation-delay: .8s;
}

.fv_parts_01 p.kira_04 {
  bottom: 45%;
  left: -5%;
  animation-delay: 1.2s;
}

.fv_parts_01 p.kira_05 {
  bottom: 6%;
  right: 8%;
  animation-delay: 1.6s;
}

.fv_parts_01 p.kira_06 {
  bottom: 0%;
  left: 20%;
  animation-delay: 1.8s;
}

.fv_parts_02 {
  width: 29.46666667%;
  top: 56.8%;
  left: 3.2%;
  animation: skew var(--ScndSk) infinite var(--ScndPl);
  z-index: 4;
}

.fv_parts_03 {
  width: 29.06666667%;
  top: 48.2%;
  left: 69.5%;
}

.fv_parts_04 {
  width: 24.8%;
  top: 77.7%;
  left: 5%;
}

.fv_parts_03 p,
.fv_parts_03 p img,
.fv_parts_05 p,
.fv_parts_05 p img {
  position: relative;
  overflow: hidden;
}

.fv_parts_03 p {
  border-radius: 30% 30% 10% 10%;
}

.fv_parts_05 p {
  border-radius: 50% 50% 50% 50%;
}

.fv_parts_03 p:before,
.fv_parts_05 p:before {
  content: '';
  width: 30%;
  height: 100%;
  background-color: rgba(255, 255, 255, .3);
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  animation: shine 1.5s ease-in-out 0s infinite;
  z-index: 3;
}

.fv_parts_05 {
  width: 29.06666667%;
  top: 72.7%;
  left: 69.63333333%;
}

.fv_parts_06 {
  width: 39.93333333%;
  top: 22.5%;
  left: 5%;
  animation: fuwafuwa02 5s infinite ease-out .5s;
}

.fv_parts_06 img {
}

.anno {
  font-size: 1rem;
  text-align: left;
  line-height: 130%;
  letter-spacing: .025em;
  margin: 0;
  padding: 1% 2% 2%;
}

/*---------------------------------------
  cta
---------------------------------------*/
.cta_block,
.cta_block h1 {
  position: relative;
  overflow: hidden;
}

.cta_block .btn {
  position: absolute;
  width: 42.1333%;
  top: 55%;
  right: 5%;
  animation: beat 2.0s ease-in-out infinite;
}

/*---------------------------------------
  Special Box
---------------------------------------*/
.special_box {
  margin: 8% auto;
}

.tokuten_03,
.tokuten_03 h2 {
  position: relative;
  z-index: 1;
}

.tokuten_03_parts_01 {
  position: absolute;
  width: 29.86666667%;
  top: 55.78947368%;
  left: 13.333333333%;
  z-index: 2;
}

.tokuten_03_parts_01 h2 {
  position: relative;
  z-index: 2;
}

.tokuten_03_parts_01 p[class^=kira] {
  position: absolute;
  width: 22%;
  opacity: 0;
  z-index: 3;
  animation: pulse var(--ScndPl) linear 0s infinite;
}

.tokuten_03_parts_01 p.kira_01 {
  top: -2.6%;
  left: 0%;
  animation-delay: 0s;
}

.tokuten_03_parts_01 p.kira_02 {
  top: 10%;
  right: 0%;
  opacity: 0;
  animation-delay: .4s;
}

.tokuten_03_parts_01 p.kira_03 {
  top: 34%;
  left: 54%;
  animation-delay: .8s;
}

.tokuten_03_parts_01 p.kira_04 {
  bottom: 45%;
  left: -5%;
  animation-delay: 1.2s;
}

.tokuten_03_parts_01 p.kira_05 {
  bottom: 6%;
  right: 8%;
  animation-delay: 1.6s;
}

.tokuten_03_parts_01 p.kira_06 {
  bottom: 0%;
  left: 20%;
  animation-delay: 1.8s;
}

/*---------------------------------------
  Badge
---------------------------------------*/
.badge_block {
  margin: 8% auto 0;
}

.badge_block,
.badge_block > h1 {
  position: relative;
  z-index: 1;
}

.badge_bg_02,
.badge_cnt_prd,
.badge_cnt_01,
.badge_cnt_02,
.badge_cnt_03,
.badge_cnt_04 {
  position: absolute;
  z-index: 3;
}

.badge_bg_02 {
  display: none;
  width: 100%;
  top: 0;
  left: 0;
}

.badge_bg_02.on {
  display: block;
}

.badge_cnt_prd {
  width: 36.8%;
  top: 26%;
  left: 31.6%;
  z-index: 4;
/*
  animation: fade-in-a 1.5s cubic-bezier(.69, 0, .05, 1) 3.0s 1 both;
*/
}

.badge_cnt_prd h2 {
  position: relative;
}

.badge_cnt_prd p[class^=kira] {
  position: absolute;
  width: 22%;
  opacity: 0;
  animation: pulse var(--ScndPl) linear 0s infinite;
}

.badge_cnt_prd p.kira_01 {
  top: -2.6%;
  left: 0%;
  animation-delay: 0s;
}

.badge_cnt_prd p.kira_02 {
  top: 10%;
  right: 0%;
  opacity: 0;
  animation-delay: .4s;
}

.badge_cnt_prd p.kira_03 {
  top: 34%;
  left: 54%;
  animation-delay: .8s;
}

.badge_cnt_prd p.kira_04 {
  bottom: 45%;
  left: -5%;
  animation-delay: 1.2s;
}

.badge_cnt_prd p.kira_05 {
  bottom: 6%;
  right: 8%;
  animation-delay: 1.6s;
}

.badge_cnt_prd p.kira_06 {
  bottom: 0%;
  left: 20%;
  animation-delay: 1.8s;
}

.badge_cnt_01,
.badge_cnt_02,
.badge_cnt_03,
.badge_cnt_04 {
  position: absolute;
  overflow: hidden;
  text-align: center;
  z-index: 3;
}

.badge_cnt_01 {
  width: 29.46666667%;
  top: 29.3%;
  left: 1.8%;
}

.badge_cnt_02 {
  width: 29.06666667%;
  top: 27%;
  left: 67.6%;
}

.badge_cnt_03 {
  width: 27.73333333%;
  top: 50.9%;
  left: 1.8%;
}

.badge_cnt_04 {
  width: 24.93333333%;
  top: 52.8%;
  left: 71.2%;
}

.badge_cnt_02 p,
.badge_cnt_02 p img,
.badge_cnt_04 p,
.badge_cnt_04 p img {
  position: relative;
  overflow: hidden;
}

.badge_cnt_02 p {
  border-radius: 30% 30% 10% 10%;
}

.badge_cnt_04 p {
  border-radius: 50% 50% 50% 50%;
}

.badge_cnt_02 p:before,
.badge_cnt_04 p:before {
  content: '';
  width: 30%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  animation: shine 1.5s ease-in-out 0s infinite;
  z-index: 3;
}

.badge_anno {
  margin: 0 auto 6%;
}

/*---------------------------------------
  Voice
---------------------------------------*/
.sns_block {
  width: 100%;
  padding: 0;
}

.sns_block .sns_block_inner {
  position: relative;
  width: 100%;
  z-index: 2;
}

.sns_block .sns_block_inner h2 {
  position: relative;
  width: 100%;
}

.sns_block .sns_block_inner > [class^=sns] {
  position: absolute;
  z-index: 3;
}

.sns_block .sns_block_inner .sns_top {
  width: 18.937%;
  top: 0;
  left: 40.53%;
}

.sns_block .sns_block_inner .sns_svg {
  width: 82.57%;
  top: 16.34%;
  left: 8.765%;
}

.sns_block .sns_block_inner .sns_svg svg {
  overflow: unset;
  width: 100%;
}

.sns_block .sns_block_inner .sns_svg svg .clr_01 {
  fill: var(--ClrWht);
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_01 path,
.sns_block .sns_block_inner .sns_svg.scrollin svg .line_02 path {
  animation: fade-in-e .5s cubic-bezier(.69, 0, .05, 1) 0s 1 both;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_01 path:nth-of-type(2) {
  animation-delay: .05s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_01 path:nth-of-type(3) {
  animation-delay: .1s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_01 path:nth-of-type(4) {
  animation-delay: .15s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_01 path:nth-of-type(5) {
  animation-delay: .2s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_01 path:nth-of-type(6) {
  animation-delay: .25s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_01 path:nth-of-type(7) {
  animation-delay: .3s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_01 path:nth-of-type(8) {
  animation-delay: .35s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_01 path:nth-of-type(9) {
  animation-delay: .4s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_02 path:nth-of-type(1) {
  animation-delay: .45s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_02 path:nth-of-type(2) {
  animation-delay: .5s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_02 path:nth-of-type(3) {
  animation-delay: .55s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_02 path:nth-of-type(4) {
  animation-delay: .6s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_02 path:nth-of-type(5) {
  animation-delay: .65s;
}

.sns_block .sns_block_inner .sns_svg.scrollin svg .line_02 path:nth-of-type(6) {
  animation-delay: .7s;
}

.sns_block .sns_block_inner .sns_cnt01 {
  width: 36.13333333%;
  top: 33.16%;
  left: 4.4%;
}

.sns_block .sns_block_inner .sns_cnt02 {
  width: 30.53333333%;
  top: 32.65%;
  left: 34.93333333%;
}

.sns_block .sns_block_inner .sns_cnt03 {
  width: 36%;
  top: 32.96%;
  left: 61.1%;
}

.sns_block .sns_block_inner .sns_cnt04 {
  width: 36.13333333%;
  top: 56.40%;
  left: 18.8%;
}

.sns_block .sns_block_inner .sns_cnt05 {
  width: 36%;
  top: 56.49%;
  left: 46.8%;
}

.voice_ttl {
  margin: -15% 0 0;
  position: relative;
  z-index: 3;
}

/*---------------------------------------
  carousel
---------------------------------------*/
.slider {
  margin: 0% auto 8%;
  padding: 4% 4%;
  background-color: var(--Clr13);
}

.dd01 .lp_wrapper .slider_parts_img img {
  width: calc( 75rem * 345 / 375 );
}

.slider .slider_parts {
  background-color: transparent;
  height: calc( 75rem * 345 / 375 * 1004 / 750 + 75rem * 45 / 375 );
  position: relative;
}

.slick-slider {
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-touch-action: pan-y;
  -ms-user-select: none;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  display: block;
  position: relative;
  touch-action: pan-y;
  user-select: none;
}

.slider_arrow_next,
.slider_arrow_prev {
  position: absolute;
  box-sizing: border-box;
  cursor: pointer;
  color: var(--Clr16);
  background-color: transparent;
  border: solid .3rem var(--Clr16);
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 1.6rem;
  width: 2.8rem;
  height: 2.8rem;
  top: 93%;
  z-index: 5;
}

.slider_arrow_prev {
  left: 0%;
}

.slider_arrow_next {
  right: 0%;
}

.slider_arrow_prev:before,
.slider_arrow_next:before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border-bottom: .2rem solid;
  border-left: .2rem solid;
  width: .8rem;
  height: .8rem;
  transform: rotate(45deg);
  top: 30.7981%;
  left: 38.1315%;
}

.slider_arrow_next:before {
  transform: rotate(-135deg);
  top: 30.7981%;
  left: 26.7981%;
}

.slick-slider .slick-list,
.slick-slider .slick-track {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.slick-list {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-image: linear-gradient( to right, var(--Clr14) 0%, var(--Clr15) 100% );
  height: calc( 75rem * 345 / 375 * 1004 / 750 );
}

.slick-track {
  display: block;
  position: relative;
  margin: auto;
  top: 0;
  left: 0;
}

.slick-track:after,
.slick-track:before {
  content: '';
  display: table;
}

.slider_parts_img:not(.slick-active) {
  position: relative;
}

.slider_parts_img:not(.slick-active)::before {
  content: '';
  position: absolute;
  transition: .5s;
  -webkit-transition: .5s;
/*
  background: rgba(160,160,160,.6);
*/
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 3;
}

.slick-initialized .slick-slide {
  display: block;
}

.slider_parts_img {
  position: relative;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: .1rem;
}

.slick-slide img {
  display: block;
}

.slider_parts_img.slick-dotted.slick-slider .slick-dots {
  bottom: -1rem;
  background-color: var(--ClrWht);
  width: 50%;
  left: 25%;
  border-radius: 1rem;
}

.slick-dots {
  z-index: 1;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.slick-dots li {
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  width: 6rem;
  height: 6rem;
  margin: 0 .5rem;
  padding: 0;
  position: relative;
}

.slick-dots li button:focus,
.slick-dots li button:hover {
  outline: 0;
  opacity: .25;
}

.slick-dots li button {
  position: absolute;
  color: var(--ClrMkr);
  box-sizing: border-box;
  font-size: 0;
  width: 2.8rem;
  height: 2.8rem;
  line-height: 2.8rem;
  border-radius: 50%;
  border: solid .3rem var(--ClrMkr);
  background-color: var(--ClrMkr);
  top: 1.6rem;
  left: 1.6rem;
  opacity: .25;
}

.slick-dots li.slick-active button:focus,
.slick-dots li.slick-active button:hover {
  opacity: .75;
  color: var(--Clr16);
  border: solid .3rem var(--Clr16);
  background-color: var(--Clr16);
}

.slick-dots li.slick-active button {
  opacity: 1;
  color: var(--Clr16);
  border: solid .3rem var(--Clr16);
  background-color: var(--Clr16);
}

/*------------------------------
  Footer
------------------------------*/
#footer {
  background-color: var(--ClrWht);
  color: var(--ClrBlk);
  padding: 4rem 0 0;
  margin-top: 8rem;
}

#footer-inner {
  text-align: center;
  font-size: 2.4rem;
}

#footer nav {
  font-size: 2.4rem;
  float: none;
}

#footer nav a,
#footer nav a:visited:hover {
  color: var(--Clr06);
  text-decoration: underline;
}

#footer nav a:hover,
#footer nav a:visited {
  color: var(--Clr07);
}

#footer-inner .footer_li {
  line-height: 1.8;
  letter-spacing: .06em;
}

#footer .logo {
  text-align: center;
  width: 30%;
  margin: 0 auto;
  padding: 4rem 0 4rem;
}

#footer .logo img {
  width: 100%;
}

#footer-inner .coinfo {
  margin: 4rem auto 0;
}

#copy {
  background-color: var(--Clr03);
  font-size: 1.8rem;
  padding: .5em 0;
}

#copy p {
  color: var(--ClrWht);
  text-align: center;
  font-weight: 700;
  text-shadow: 0 0 .1rem var(--ClrGry), 0 0 .1rem var(--ClrGry), 0 0 .1rem var(--ClrGry), 0 0 .1rem var(--ClrGry);
}

/*------------------------------
  only one time
------------------------------*/
.dupng {
  color: var(--ClrWht);
  background-color: var(--ClrRed);
  font-size: 2rem;
  text-align: center;
  font-weight: 700;
  margin: 1rem 1rem;
  padding: .5em;
}

/*------------------------------
  Caution Area
------------------------------*/
.caution_area {
  background-color: var(--ClrWht);
  border: 1rem solid var(--ClrYlw);
  border-radius: 2rem;
  margin: 0 2% 4rem;
  padding: 2rem;
}

.caution_area.b_red {
  border: 1rem solid var(--ClrRed);
}

.caution_img {
  text-align: center;
  margin: 2rem;
}

.caution_area .caution_img img {
  width: 20%;
  margin: 0 auto;
}

/*------------------------------
  kantan 1 minute
------------------------------*/
.easy_to_get {
  color: var(--ClrRed);
  background-image: linear-gradient( to bottom, transparent 0%, transparent 20%, var(--ClrYlw) 20%, var(--ClrYlw) 90%, transparent 90% );
  vertical-align: baseline;
  font-size: 1.5em;
  line-height: 1;
}

.easy_to_get .big {
  font-size: 160%;
}

/*------------------------------
  Date of Today
------------------------------*/
.today p {
  text-align: center;
  width: 100%;
  background-color: var(--ClrRed);
  color: var(--ClrWht);
  font-size: 6rem;
  padding: 2rem 0 2rem 0;
  margin-top: 4rem;
  font-weight: bold;
}

.today_area,
.today_area .bg_img {
  position: relative;
}

.today_area .today {
  position: absolute;
  top: 55.5%;
  left: 0;
  color: var(--ClrWht);
  text-align: center;
  font-size: 6rem;
  font-weight: 700;
  letter-spacing: .01em;
  width: 100%;
}

.today_area .today [class^=t_] {
  font-size: 1.75em;
}

.today_area .today .small {
  font-size: .7em;
}

/*------------------------------
  form btn
------------------------------*/
.form_btn {
  padding: 2rem 4rem 2rem;
}

/*------------------------------
  alert area
------------------------------*/
.alert_area {
  width: 100%;
  padding: 2rem;
}

.alert_area .alert_area_inner {
  color: var(--ClrRed);
  border: solid .4rem var(--ClrRed);
  font-size: 2rem;
  line-height: 1.5;
  width: 100%;
  padding: 2rem;
}

.alert_area .alert_area_inner > p {
  margin: 0;
  padding: 0 0 .25em 1em;
  text-indent: -1em;
}

.alert_area .alert_area_inner > p::before {
  content: '\203b';
}

/*------------------------------
  Upsell page popup
------------------------------*/
#overlay {
  position: fixed;
  display: none;
  opacity: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 99999;
}

#null_popup {
  position: fixed;
  display: none;
  overflow: hidden;
  top: calc( ( 100vh - 50rem ) / 2 );
  left: calc( ( 100% - 35rem ) / 2 );
  width: 35rem;
  height: 50rem;
  padding: 0;
  opacity: 1;
  background-color: transparent;
  z-index: 100000;
}

#null_popup .null_popup_inner {
}

#null_popup .null_popup_inner #banner {
}

#null_popup .null_popup_inner #banner img {
  width: 100%;
}

/*---------------------------------------
  Floating Btn
---------------------------------------*/
#floating_btn {
  position: fixed;
  display: none;
  transition: 1s;
  box-sizing: border-box;
  width: 70rem;
  bottom: 0;
  left: calc((100% - 70rem) / 2);
  padding: 0 1% 1%;
  z-index: 999999;
}

#floating_btn * {
  box-sizing: border-box;
}

#floating_btn a {
}

#floating_btn img {
  width: 100%;
  animation: pulse02 1s ease-in-out 0s infinite both;
}

/*========================================
  Margin Padding
========================================*/
/*------------------------------
  Margin
------------------------------*/
.m0 {
  margin: 0!important;
}

.m10 {
  margin: 1rem!important;
}

.m20 {
  margin: 2rem!important;
}

/*--------------------
  Margin Top
--------------------*/
.mt-10 {
  margin-top: -1rem!important;
}

.mt0 {
  margin-top: 0!important;
}

.mt5 {
  margin-top: .5rem!important;
}

.mt7 {
  margin-top: .7rem!important;
}

.mt10 {
  margin-top: 1rem!important;
}

.mt20 {
  margin-top: 2rem!important;
}

.mt30 {
  margin-top: 3rem!important;
}

.mt40 {
  margin-top: 4rem!important;
}

.mt50 {
  margin-top: 5rem!important;
}

.mt60 {
  margin-top: 6rem!important;
}

/*--------------------
  Margin Right
--------------------*/
.mr0 {
  margin-right: 0!important;
}

.mr5 {
  margin-right: .5rem!important;
}

.mr7 {
  margin-right: .7rem!important;
}

.mr10 {
  margin-right: 1rem!important;
}

.mr20 {
  margin-right: 2rem!important;
}

.mr30 {
  margin-right: 3rem!important;
}

.mr40 {
  margin-right: 4rem!important;
}

.mr50 {
  margin-right: 5rem!important;
}

.mr60 {
  margin-right: 6rem!important;
}

/*--------------------
  Margin Bottom
--------------------*/
.mb0 {
  margin-bottom: 0!important;
}

.mb5 {
  margin-bottom: .5rem!important;
}

.mb7 {
  margin-bottom: .7rem!important;
}

.mb10 {
  margin-bottom: 1rem!important;
}

.mb20 {
  margin-bottom: 2rem!important;
}

.mb30 {
  margin-bottom: 3rem!important;
}

.mb40 {
  margin-bottom: 4rem!important;
}

.mb50 {
  margin-bottom: 5rem!important;
}

.mb60 {
  margin-bottom: 6rem!important;
}

/*--------------------
  Margin Left
--------------------*/
.ml0 {
  margin-left: 0!important;
}

.ml5 {
  margin-left: .5rem!important;
}

.ml7 {
  margin-left: .7rem!important;
}

.ml10 {
  margin-left: 1rem!important;
}

.ml20 {
  margin-left: 2rem!important;
}

.ml30 {
  margin-left: 3rem!important;
}

.ml40 {
  margin-left: 4rem!important;
}

.ml50 {
  margin-left: 5rem!important;
}

.ml60 {
  margin-left: 6rem!important;
}

/*--------------------
Padding Top
--------------------*/
.pt0 {
  padding-top: 0!important;
}

.pt5 {
  padding-top: .5rem!important;
}

.pt7 {
  padding-top: .7rem!important;
}

.pt10 {
  padding-top: 1rem!important;
}

.pt20 {
  padding-top: 2rem!important;
}

.pt30 {
  padding-top: 3rem!important;
}

.pt40 {
  padding-top: 4rem!important;
}

.pt50 {
  padding-top: 5rem!important;
}

.pt60 {
  padding-top: 6rem!important;
}

/*--------------------
  Padding Right
--------------------*/
.pr0 {
  padding-right: 0!important;
}

.pr5 {
  padding-right: .5rem!important;
}

.pr7 {
  padding-right: .7rem!important;
}

.pr10 {
  padding-right: 1rem!important;
}

.pr20 {
  padding-right: 2rem!important;
}

.pr30 {
  padding-right: 3rem!important;
}

.pr40 {
  padding-right: 4rem!important;
}

.pr50 {
  padding-right: 5rem!important;
}

.pr60 {
  padding-right: 6rem!important;
}

/*--------------------
  Padding Bottom
--------------------*/
.pb0 {
  padding-bottom: 0!important;
}

.pb5 {
  padding-bottom: .5rem!important;
}

.pb7 {
  padding-bottom: .7rem!important;
}

.pb10 {
  padding-bottom: 1rem!important;
}

.pb20 {
  padding-bottom: 2rem!important;
}

.pb30 {
  padding-bottom: 3rem!important;
}

.pb40 {
  padding-bottom: 4rem!important;
}

.pb50 {
  padding-bottom: 5rem!important;
}

.pb60 {
  padding-bottom: 6rem!important;
}

/*--------------------
  Padding Left
--------------------*/
.pl0 {
  padding-left: 0!important;
}

.pl5 {
  padding-left: .5rem!important;
}

.pl7 {
  padding-left: .7rem!important;
}

.pl10 {
  padding-left: 1rem!important;
}

.pl20 {
  padding-left: 2rem!important;
}

.pl30 {
  padding-left: 3rem!important;
}

.pl40 {
  padding-left: 4rem!important;
}

.pl50 {
  padding-left: 5rem!important;
}

.pl60 {
  padding-left: 6rem!important;
}

/*========================================
  Float Align
========================================*/
/*------------------------------
  Float
------------------------------*/
.f_left {
  float: left!important;
}

.f_right {
  float: right!important;
}

/*------------------------------
  Align
------------------------------*/
.center {
  text-align: center!important;
}

.left {
  text-align: left!important;
}

.right {
  text-align: right!important;
}

.justify {
  text-align: justify!important;
}

/*==================================================
  Animation
==================================================*/
@keyframes pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.5;
    transform: scale(0.5);
  }
}

@keyframes pulse02 {
  0% {
    transform: scaleX(1)
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05)
  }
  to {
    transform: scaleX(1)
  }
}

@keyframes shine {
  0% {
    transform: skewX(-45deg) translateX(0);
  }
  100% {
    transform: skewX(-45deg) translateX(1000%);
  }
}

@keyframes purun {
  from, 1%, 48%, to {
    -webkit-transform: none;
    transform: none;
  }
  6% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  12% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  18% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  24% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  30% {
    -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
    transform: skewX(-.78125deg) skewY(-.78125deg);
  }
  36% {
    -webkit-transform: skewX(.390625deg) skewY(.390625deg);
    transform: skewX(.390625deg) skewY(.390625deg);
  }
  42% {
    -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
    transform: skewX(-.1953125deg) skewY(-.1953125deg);
  }
}

@keyframes skew {
  0% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 4.2deg);
  }
  10% {
    transform: skew(-4deg, -3deg);
  }
  15% {
    transform: skew(9deg, 3.2deg);
  }
  20% {
    transform: skew(-2deg, -1.5deg);
  }
  25% {
    transform: skew(.9deg, .9deg);
  }
  30% {
    transform: skew(-.6deg, -.6deg);
  }
  35% {
    transform: skew(.3deg, .3deg);
  }
  40% {
    transform: skew(-.2deg, -.2deg);
  }
  45% {
    transform: skew(.1deg, .1deg);
  }
  50% {
    transform: skew(0deg, 0deg);
  }
}

/*------------------------------
  Wipe
------------------------------*/
/*--------------------
  Left to Right
--------------------*/
@keyframes wipe-hl {
  0% {
    opacity: 0;
    margin-left: -100%;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    margin-left: 0%;
  }
}

@keyframes wipe-in-hl {
  0% {
    opacity: 0;
    left: 100%;
  }
  100% {
    opacity: 1;
    left: 0%;
  }
}

/*--------------------
  Right to Left
--------------------*/
@keyframes wipe-hr {
  0% {
    opacity: 0;
    margin-left: 100%;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    margin-left: 0%;
  }
}

@keyframes wipe-in-hr {
  0% {
    opacity: 0;
    left: -100%;
  }
  100% {
    opacity: 1;
    left: 0%;
  }
}

/*--------------------
  Top to Bottom
--------------------*/
@keyframes wipe-vt {
  0% {
    opacity: 0;
    margin-top: -100%;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    margin-top: 0%;
  }
}

@keyframes wipe-in-vt {
  0% {
    opacity: 0;
    top: 100%;
  }
  100% {
    opacity: 1;
    top: 0%;
  }
}

/*--------------------
  Bottom to Top
--------------------*/
@keyframes wipe-vb {
  0% {
    opacity: 0;
    margin-top: 100%;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    margin-top: 0%;
  }
}

@keyframes wipe-in-vb {
  0% {
    opacity: 0;
    top: -100%;
  }
  100% {
    opacity: 1;
    top: 0%;
  }
}

/*------------------------------
  FadeIn
------------------------------*/
@keyframes fade-in-a {
  0% {
    opacity: 0;
    transform: translateY(30%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-b {
  0% {
    opacity: 0;
    transform: translateX(-30%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-c {
  0% {
    opacity: 0;
    transform: translateY(-30%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-d {
  0% {
    opacity: 0;
    transform: translateX(30%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-e {
  0% {
    opacity: 0;
    filter: blur(18rem);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@media screen and (max-width: 750px) {
  @keyframes fade-in-e {
    0% {
      opacity: 0;
      filter: blur(33.33333vw);
    }
    100% {
      opacity: 1;
      filter: blur(0);
    }
  }
}
/*------------------------------
  beat
------------------------------*/
@keyframes beat {
  0% {
    margin-top: 0%
  }

  50% {
    margin-top: -2.5%
  }

  85% {
    margin-top: 0%
  }

  90% {
    margin-top: -1%
  }

  95% {
    margin-top: 0%
  }

  97% {
    margin-top: -1%
  }

  100% {
    margin-top: 0%
  }
}

/*------------------------------
  fuwafuwa
------------------------------*/
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-2deg);
  }
  50% {
    transform:translate(0, -1%) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(2deg);
  }
}

@keyframes fuwafuwa02 {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: scale(1.0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: scale(0.95);
  }
}


@keyframes shrinkage {
  0%, 40%, 50%, 60% {
    transform: scale(1.0);
  }
  45%, 55% {
    transform: scale(.95);
  }
}

/*==================================================
  for screen of smart phone
==================================================*/
@media screen and (max-width: 750px) {
  html {
    font-size: 1.3333333333vw;
  }

  .lp_wrapper {
    width: 100%;
  }


  .txt_ss {
    font-size: 2rem;
  }

  .txt_s {
    font-size: 2.4rem;
  }

  .txt_m {
    font-size: 3.2rem;
    line-height: 1.5;
  }

  [class^=txt_l] {
    font-weight: bold;
  }

  .txt_l {
    font-size: 3.8rem;
    line-height: 1.5;
  }

  .txt_ll {
    font-size: 4.5rem;
    line-height: 1.3;
  }

  .anno {
    font-size: 2rem;
    padding: 1.2rem 2rem 1.2em 2rem;
  }

  /*------------------------------
    Footer
  ------------------------------*/
  #footer-inner {
    text-align: center;
    font-size: 2.8rem;
  }

  #footer nav {
    font-size: 3.2rem;
    float: none;
  }

  #footer .logo {
    text-align: center;
    width: 40%;
    margin: 0 auto;
    padding: 4rem 0 4rem;
  }

  #copy {
    font-size: 2.4rem;
  }

  /*------------------------------
    Movie block
  ------------------------------*/
  .video {
    text-align: center;
    width: 100%;
  }

  .video iframe {
    width: 100%;
    height: calc( 100vw * 375 / 375 );
  }

  .video video {
    width: 100%;
    height: auto;
  }


  /*------------------------------
    direction notice
  ------------------------------*/
  .us_btm .direction_notice {
    font-size: 3.6rem;
  }

  /*------------------------------
    form button
  ------------------------------*/
  .form_btn {
    padding: 4rem 0 4rem;
  }

  .btm_btn {
    padding: 0;
  }

  /*------------------------------
    Confirm Button
  ------------------------------*/
  .conf_btn {
    width: 100%;
  }

  /*------------------------------
    Upsell page popup
  ------------------------------*/
  #null_popup {
    top: calc( ( 100vh - 90vw * ( 50 / 35 ) ) / 2 );
    left: 5%;
    width: 90%;
    height: calc( 90vw * ( 50 / 35 ) );
  }

  /*---------------------------------------
    Floating Btn
  ---------------------------------------*/
  #floating_btn {
    left: 0;
    width: 100%;
  }
}