@charset "UTF-8";

/* base */

@font-face {
  font-family: "LINESeedJP";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/LINESeedJP_OTF_Rg.woff2") format("woff2");
}
@font-face {
  font-family: "LINESeedJP";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/LINESeedJP_OTF_Bd.woff2") format("woff2");
}
@font-face {
  font-family: "LINESeedJP";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/LINESeedJP_OTF_Eb.woff2") format("woff2");
}

body {
  position: relative;
  color: #4d4d4d;
  background-color: #fff;
}

img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: top;
  /* 画像検索アイコン無効 */
  pointer-events: none;
}

/* スマホでリンクのタップのハイライトカラーを無効化 */
a {
  color: #333;
  tap-highlight-color: rgba(0, 0, 0, 0);
}

.clear {
  clear: both;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cf::after {
  content: "";
  display: table;
  clear: both;
}
.ib {
  display: inline-block;
  text-decoration: inherit;
  white-space: nowrap;
}

.none {
  display: none !important;
}
.hidden01 {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}
.hidden02 {
  overflow: hidden;
}

sup {
  top: 0;
  vertical-align: super;
  font-size: 0.5em;
  font-weight: normal;
}

/* .marker01 */
.marker01 {
  background: linear-gradient(
    transparent 60%,
    #bce8eb 60%,
    #bce8eb 80%,
    transparent 80%
  );
}

/* .marker02 */
.marker02 {
  background: linear-gradient(
    transparent 60%,
    #fff 60%,
    #fff 80%,
    transparent 80%
  );
}

/* wrapper */
.wrapper {
  position: relative;
  width: 100%;
  font-family:
    "LINESeedJP",
    -apple-system,
    BlinkMacSystemFont,
    "游ゴシック体",
    YuGothic,
    "Yu Gothic M",
    "游ゴシック Medium",
    "Yu Gothic Medium",
    "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN W3",
    HiraKakuProN-W3,
    "ヒラギノ角ゴ ProN",
    "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro",
    "メイリオ",
    Meiryo,
    Osaka,
    "ＭＳ Ｐゴシック",
    "MS PGothic",
    "Helvetica Neue",
    HelveticaNeue,
    Helvetica,
    Arial,
    "Segoe UI",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  letter-spacing: 0;
  overflow: hidden;
}
.wrapper img {
  width: 100%;
}

.xx0 {
  opacity: 0;
}

.jump01 {
  transform: translateY(0%);
  animation: animeJump01 0.2s ease-out 2 alternate;
}

.earthquake01 {
  transform: translateY(-1%);
  animation: animeeArthquake01 0.16s ease-in-out infinite alternate;
}

.earthquake02 {
  transform: translateY(-1.2%);
  animation: animeeArthquake02 0.16s ease-in-out infinite alternate;
}

.js-kirari01 {
  animation: animeScale01 2s ease-in-out;
}
.js-kirari01 > span > span {
  animation: animeKirari01 2s linear;
}

@keyframes animeJump01 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-18%);
  }
}

@keyframes animeeArthquake01 {
  0% {
    transform: translateY(-1%);
  }
  100% {
    transform: translateY(1%);
  }
}

@keyframes animeeArthquake02 {
  0% {
    transform: translateY(-1.2%);
  }
  100% {
    transform: translateY(1.2%);
  }
}

@keyframes animeScaling01 {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.4);
  }
  20% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes animeTap01 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.7);
  }
  60% {
    transform: scale(0.7);
  }
  80% {
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes animeTap02 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

@keyframes animeTap03 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes animeScale01 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes animeKirari01 {
  0% {
    left: -150%;
  }
  25% {
    left: -150%;
  }
  50% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}

@keyframes animeBtnAction01 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes animeBtnAction02 {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes animeGraph070 {
  0% {
    stroke-dashoffset: 816.4; /* 130 * 2 * 3.14 */
  }
  100% {
    stroke-dashoffset: 244.92; /* 130 * 2 * 3.14 * (1 - 0.7) */
  }
}
@keyframes animeGraph080 {
  0% {
    stroke-dashoffset: 816.4; /* 130 * 2 * 3.14 */
  }
  100% {
    stroke-dashoffset: 163.28; /* 130 * 2 * 3.14 * (1 - 0.8) */
  }
}
@keyframes animeGraph090 {
  0% {
    stroke-dashoffset: 816.4; /* 130 * 2 * 3.14 */
  }
  100% {
    stroke-dashoffset: 81.64; /* 130 * 2 * 3.14 * (1 - 0.9) */
  }
}
@keyframes animeGraph100 {
  0% {
    stroke-dashoffset: 816.4; /* 130 * 2 * 3.14 */
  }
  100% {
    stroke-dashoffset: 0; /* 130 * 2 * 3.14 * (1 - 1.0) */
  }
}

/***********************************************/
/* MAIN */
/***********************************************/
/* emg-area (緊急情報エリア) */
.emg-area {
  overflow: hidden;
  background-color: #fff;
  position: relative;
  z-index: 2;
}

/* .jsOff (JavaScript無効時メッセージ) */
.jsOff {
  margin: 10px;
  padding: 10px;
  border: 1px solid #e60013;
  font-size: 14px;
  text-align: center;
  position: relative;
  z-index: 99999;
}

.jsOff .pt1 {
  padding-bottom: 4px;
}

.jsOff .pt2 {
  padding-bottom: 8px;
}

.jsOff .pt3 {
  font-size: 12px;
}

/* js-effect01 */
.js-effect01.e01 img {
  opacity: 0;
  transform: rotate(10deg);
  transform-origin: bottom right;
}
.js-effect01.e01.exec img {
  opacity: 1;
  transform: rotate(0);
  transition: all 0.6s ease-out;
}

.js-effect01.e02 img {
  opacity: 0;
  transform: rotate(-10deg);
  transform-origin: bottom left;
}
.js-effect01.e02.exec img {
  opacity: 1;
  transform: rotate(0);
  transition: all 0.6s ease-out;
}

html,
body {
  height: 100%;
}

main.topMain01 {
  background-color: #cdf0f2;
}

main.quizMain01 {
  height: 100%;
  height: 100dvh;
  background-color: #000;
  position: relative;
  overflow: hidden;
}

.quizArea01 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  align-items: center;
}
.quizArea01__inner {
  width: 100%;
  height: auto;
}
.quizArea01__inner.centering {
  padding: 0 0 calc(76 / 375 * 100%);
  position: relative;
}
.quizArea01__inner.centering .cp-animmeArea01 {
  position: static;
}
.quizArea01__inner.centering .cp-animmeArea01 > div {
  position: static;
}
.quizArea01__inner.centering .cp-textBox01 {
  bottom: 0 !important;
}

/* .header01 */
.header01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 50px;
  background-color: #fff;
  z-index: 99993;
}
.header01.fixed {
  position: fixed;
}
.header01 a {
  display: block;
}
.header01__logo01 {
  position: absolute;
  top: 16px;
  left: 20px;
  width: 97px;
  display: flex;
  justify-content: space-between;
}
.header01__logo01-01 {
  width: 32px;
}
.header01__logo01-02 {
  width: 48px;
}
.header01__menu01 {
  margin: 0 0 0 auto;
  width: 50px;
  height: 50px;
  position: relative;
  cursor: pointer;
}
.header01__menu01 .bar01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 26px;
  height: 18px;
}
.header01__menu01 .bar01 span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #00003e;
  transition: all 0.4s;
  box-sizing: border-box;
}
.header01__menu01 .bar01 span:nth-of-type(1) {
  top: 0;
}
.header01__menu01 .bar01 span:nth-of-type(2) {
  top: calc(50% - 1px);
}
.header01__menu01 .bar01 span:nth-of-type(3) {
  bottom: 0;
}
.header01__menu01.opened .bar01 span:nth-of-type(1) {
  top: calc(50% - 1px);
  transform: rotate(-315deg);
}
.header01__menu01.opened .bar01 span:nth-of-type(2) {
  opacity: 0;
}
.header01__menu01.opened .bar01 span:nth-of-type(3) {
  top: calc(50% - 1px);
  transform: rotate(315deg);
}

/* .header02 */
.header02 {
  width: 100%;
  height: 66px;
  background-color: #fff;
  border-bottom: 1px solid #000;
  overflow: hidden;
  z-index: 99993;
}
.header02 a {
  display: block;
}
.header02__logo01 {
  margin: 22px auto 0;
  width: 128px;
  display: flex;
  justify-content: space-between;
}
.header02__logo01-01 {
  width: 42px;
}
.header02__logo01-02 {
  width: 63px;
}

/* .header03 */
.header03 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 40px;
  background-color: #90d9de;
  overflow: hidden;
  z-index: 99993;
  transform: translateY(0%);
  transition: transform 0.5s linear;
}
.header03.fixed {
  position: fixed;
}
.header03.upper {
  transform: translateY(-100%);
}
.header03__sound01 {
  position: absolute;
  top: 2px;
  left: 0;
  bottom: 2px;
  width: 66px;
  cursor: pointer;
}
.header03__sound01 .ok {
  display: none;
}
.header03__sound01.on .ok {
  display: block;
}
.header03__sound01.on .ng {
  display: none;
}
.header03__indicator01 {
  margin: 4px auto 0;
  width: 205px;
  transform: translate(10px, 0);
  position: relative;
}
.header03__indicator01 > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  line-height: 0;
  font-size: 0;
}
.header03__indicator01 .p01 {
  margin: 0 0 0 30px;
}
.header03__indicator01 .p02 {
  margin: 0 0 0 75px;
}
.header03__indicator01 .p03 {
  margin: 0 0 0 122px;
}
.header03__indicator01 .p04 {
  margin: 0 0 0 175px;
}
.header03__indicator01 .p01 .on,
.header03__indicator01 .p02 .on,
.header03__indicator01 .p03 .on,
.header03__indicator01 .p04 .on {
  display: none;
}
.header03__indicator01 .p01.current .on,
.header03__indicator01 .p02.current .on,
.header03__indicator01 .p03.current .on,
.header03__indicator01 .p04.current .on {
  display: block;
}
.header03__indicator01 .p01.current .off,
.header03__indicator01 .p02.current .off,
.header03__indicator01 .p03.current .off,
.header03__indicator01 .p04.current .off {
  display: none;
}

.header03__menu01 {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  width: 50px;
  height: 40px;
  cursor: pointer;
}
.header03__menu01 .bar01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 26px;
  height: 18px;
}
.header03__menu01 .bar01 span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #00003e;
  transition: all 0.4s;
  box-sizing: border-box;
}
.header03__menu01 .bar01 span:nth-of-type(1) {
  top: 0;
}
.header03__menu01 .bar01 span:nth-of-type(2) {
  top: calc(50% - 1px);
}
.header03__menu01 .bar01 span:nth-of-type(3) {
  bottom: 0;
}
.header03__menu01.opened .bar01 span:nth-of-type(1) {
  top: calc(50% - 1px);
  transform: rotate(-315deg);
}
.header03__menu01.opened .bar01 span:nth-of-type(2) {
  opacity: 0;
}
.header03__menu01.opened .bar01 span:nth-of-type(3) {
  top: calc(50% - 1px);
  transform: rotate(315deg);
}

@media screen and (max-width: 350px) {
  .header03__indicator01 {
    transform-origin: 90% center;
    transform: scale(0.9);
  }
}
@media screen and (max-width: 320px) {
  .header03__indicator01 {
    transform-origin: 82% center;
    transform: scale(0.8);
  }
}

/* .footer01 */
.footer01 {
  padding: 36px 0 60px;
  width: 100%;
  background-color: #fff;
  position: relative;
}
.footer01__inner {
  margin: 0 auto;
  padding: 0 30px;
  width: 100%;
}
.footer01__logo01 {
  margin: 0 auto 30px;
  width: 128px;
  display: flex;
  justify-content: space-between;
}
.footer01__logo01-01 {
  width: 42px;
}
.footer01__logo01-02 {
  width: 63px;
}
.footer01__link01 {
  margin: 0 auto 40px;
  width: 100%;
  max-width: 400px;
  line-height: 1;
  font-size: 12px;
  color: #000;
}
.footer01__link01 ul {
  margin: 0 0 -20px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.footer01__link01 ul li {
  margin: 0 0 20px;
}
.footer01__link01 ul li + li::before {
  display: inline-block;
  content: "-";
  margin: 0 2px;
}
.footer01__link01 ul li:nth-child(4)::before {
  display: none;
}
.footer01__link01 ul li a {
  margin: 0 5.76px;
  color: #000;
}
.footer01__link01 ul li a:hover {
  text-decoration: underline;
}
.footer01__copy01 {
  padding: 25px 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
  border-top: 1px solid #888;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer01__copy01__logo {
  width: 93px;
}
.footer01__copy01__copy {
  text-align: center;
  line-height: 1;
  font-size: 12px;
  color: #000;
}

/* .footer02 */
.footer02 {
  padding: 35px 0 30px;
  width: 100%;
  background-color: #90d9de;
  position: relative;
}
.footer02__inner {
  margin: 0 auto;
  padding: 0 30px;
  width: 100%;
  max-width: 860px;
}
.footer02__logo01 {
  margin: 0 0 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.footer02__logo01-01 {
  margin: 0 24px 0 0;
  width: 34px;
}
.footer02__logo01-01.type02 {
  margin: 0 30px 0 0;
  width: 97px;
}
.footer02__logo01-02 {
  width: 51px;
}
.footer02__link01 {
  margin: 0 auto 24px;
  width: 100%;
  line-height: 1;
  font-size: 12px;
  color: #000;
}
.footer02__link01 ul {
  margin: 0 0 -14px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.footer02__link01 ul li {
  margin: 0 0 14px;
}
.footer02__link01 ul li + li::before {
  display: inline-block;
  content: "-";
  margin: 0 2px;
}
.footer02__link01 ul li a {
  margin: 0 5.76px;
  color: #000;
}
.footer02__link01 ul li a:hover {
  text-decoration: underline;
}
.footer02__copy01 {
  padding: 20px 0 0;
  width: 100%;
  border-top: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer02__copy01__logo {
  margin: 0 30px 0 0;
  width: 93px;
}
.footer02__copy01__copy {
  text-align: center;
  line-height: 1;
  font-size: 12px;
  color: #000;
}

.footer02__note01 {
  margin: 40px 0 0;
  text-align: center;
  line-height: 1.5;
  font-size: 10px;
  color: #000;
}
.footer02__note01 a {
  color: #000;
  text-decoration: underline;
}

/* .pulldown01 */
.pulldown01 {
  position: absolute;
  top: 0;
  left: 110%;
  width: 100vw;
  height: 100%;
  background-color: #cdf0f2;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 99992;
  transition: all 0.6s;
}
body.fromPc .pulldown01,
body.fromTablet .pulldown01 {
  height: 100vh;
}
.pulldown01.fixed {
  position: fixed;
}
.pulldown01.opened {
  left: 0;
  transition: all 0.6s;
}
.pulldown01__inner {
  width: 100%;
  padding: calc(90 / 375 * 100%) 0 0;
}
.pulldown01__box01 {
  margin: 0 auto calc(35 / 375 * 100%);
  padding: calc(40 / 375 * 100%) 0;
  width: calc(340 / 375 * 100%);
  background-color: #fff;
  border-radius: calc(10 / 375 * 100vw);
}
.pulldown01__box01__title01 {
  margin: 0 auto calc(16 / 340 * 100%);
  width: calc(134 / 340 * 100%);
}
.pulldown01__box01__text01 {
  text-align: center;
  line-height: 1.8;
  font-size: calc(13 / 375 * 100vw);
  width: 100%;
  color: #00003e;
}
.pulldown01__text01 {
  margin: 0 auto calc(40 / 375 * 100%);
  width: calc(320 / 375 * 100%);
  line-height: 1.6;
  font-size: max(calc(12 / 375 * 100vw), 11px);
  color: #000;
}
.fromTablet .pulldown01__text01 {
  font-size: 11px;
}

.pulldown01__text01 p + p {
  margin-top: calc(15 / 320 * 100%);
  padding-top: calc(15 / 320 * 100%);
  border-top: 1px solid #fff;
}

.pulldown01__box01__btn01 {
  margin: 0 auto calc(40 / 375 * 100%);
  width: calc(304 / 375 * 100vw);
  background-color: #ff0033;
  border: calc(3 / 375 * 100vw) solid #00003e;
  border-radius: calc(30 / 375 * 100vw);
  box-shadow: max(calc(4 / 375 * 100vw), 4px) max(calc(4 / 375 * 100vw), 4px)
    #00003e;
  overflow: hidden;
}
.pulldown01__box01__btn01__area01 {
  height: calc(54 / 375 * 100vw);
  background: url(/images/common/arrow02_01.svg) no-repeat right
    calc(10 / 375 * 100vw) center / calc(36 / 375 * 100vw);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.pulldown01__box01__btn01__area01.opened {
  background-image: url(/images/common/arrow02_02.svg);
}
.pulldown01__box01__btn01__text01 {
  margin: 0 0 0 calc(54 / 304 * 100%);
  width: calc(177 / 304 * 100%);
}
.pulldown01__box01__btn01__area02 {
  display: none;
  height: calc(106 / 375 * 100vw);
  overflow: hidden;
}
.pulldown01__box01__btn01__area02 > div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pulldown01__box01__btn01__area02 a {
  display: block;
  margin: 0 auto;
  width: calc(180 / 310 * 100%);
}
.pulldown01__box01__btn01__text02 {
  margin: 0 auto calc(10 / 310 * 100%);
  width: calc(159 / 310 * 100%);
}

/* .landscape01 */
.landscape01 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: calc(15 / 375 * 100vw) 0;
  background-color: #fff;
  overflow: hidden;
  z-index: 99997;
}
.landscape01__box01 {
  margin: 0 auto;
  width: calc(345 / 375 * 100vw);
  height: 100%;
  border: 2px solid #90d9de;
  border-radius: calc(10 / 375 * 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
}
.landscape01__pic01 {
  margin: 0 auto calc(20 / 375 * 100vh);
  height: calc(160 / 375 * 100vh);
  text-align: center;
}
.landscape01__pic01 img {
  display: inline-block;
  width: auto;
  height: 100%;
}
.landscape01__text01 {
  line-height: 1;
  font-size: calc(18 / 375 * 100vh);
  font-weight: bold;
  color: #00003e;
}

/* .loader01 */
.loader01 {
  /*position: absolute;*/
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #90d9de;
  overflow: hidden;
  z-index: 99998;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader01.for-emg {
  position: absolute;
  display: block;
  padding: 50px 0 0;
}
.loader01__text01 {
  margin: 0 auto 30px;
  width: 148px;
}
.loader01__arrow01 {
  margin: 0 auto;
  width: 192px;
  display: flex;
  justify-content: space-between;
}
.loader01__arrow01 li {
  width: 17px;
  animation: animeScaling01 1.8s linear infinite;
}
.loader01__arrow01 li:nth-child(1) {
  animation-delay: 0s;
}
.loader01__arrow01 li:nth-child(2) {
  animation-delay: 0.3s;
}
.loader01__arrow01 li:nth-child(3) {
  animation-delay: 0.6s;
}
.loader01__arrow01 li:nth-child(4) {
  animation-delay: 0.9s;
}
.loader01__arrow01 li:nth-child(5) {
  animation-delay: 1.2s;
}
.loader01__arrow01 li:nth-child(6) {
  animation-delay: 1.5s;
}

/* .soundArea01 */
.soundArea01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: calc(20 / 375 * 100%) 0;
  background-color: #90d9de;
  overflow: hidden;
  z-index: 99996;
}
.soundArea01__box01 {
  margin: 0 auto;
  width: calc(335 / 375 * 100%);
  height: 100%;
  background-color: #fff;
  border-radius: calc(10 / 375 * 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
}
.soundArea01__box01__text01 {
  margin: 0 auto calc(26 / 335 * 100%);
  text-align: center;
  line-height: 1.7;
  font-size: calc(16 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}
.soundArea01__box01__btn01 {
  margin: 0 auto calc(26 / 335 * 100%);
  width: calc(282 / 335 * 100%);
  cursor: pointer;
}
.soundArea01__box01__note01 {
  text-align: center;
  line-height: 1.7;
  font-size: calc(14 / 375 * 100vw);
  color: #00003e;
}

/* .modalArea01 */
.modalArea01 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  z-index: 99991;
}
.modalArea01__inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.modalArea01__box01 {
  margin: 0 auto;
  width: calc(335 / 375 * 100%);
  height: calc(380 / 375 * 100vw);
  background-color: rgba(144, 217, 222, 0.9);
  border-radius: calc(10 / 375 * 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modalArea01__box01__text01 {
  text-align: center;
  line-height: 1.7;
  font-size: calc(20 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}

/* .modalArea02 */
.modalArea02 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #00003e;
  overflow: hidden;
  z-index: 99991;
}
.modalArea02__inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.modalArea02__text01 {
  text-align: center;
  line-height: 1.2;
  font-size: calc(24 / 375 * 100vw);
  font-weight: bold;
  color: #fff;
}

/* .modalArea03 */
.modalArea03 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  z-index: 99991;
}
.modalArea03__inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.modalArea03__box01 {
  margin: 0 auto;
  padding: calc(40 / 375 * 100%) 0;
  width: calc(335 / 375 * 100%);
  background-color: rgba(144, 217, 222, 0.9);
  border-radius: calc(10 / 375 * 100vw);
}
.modalArea03__box01__text01 {
  margin: 0 0 calc(5 / 335 * 100%);
  text-align: center;
  line-height: 1.2;
  font-size: calc(26 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}
.modalArea03__box01__text02 {
  margin: 0 0 calc(15 / 335 * 100%);
  text-align: center;
  line-height: 1.2;
  font-size: calc(20 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}
.modalArea03__box01__btn01 {
  margin: 0 auto calc(10 / 335 * 100%);
  width: calc(304 / 335 * 100%);
  cursor: pointer;
}
.modalArea03__box01__btn01:last-child {
  margin-bottom: 0;
}

/* tapArea01 */
.tapArea01 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 99990;
}

/* .all-blackout */
.all-blackout {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  z-index: 99991;
}

/* .modalDebug */
.modalDebug {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #000;
  overflow: auto;
  display: flex;
  justify-content: space-between;
  z-index: 99997;
}
.modalDebug ul {
  width: 90%;
}
.modalDebug ul li {
  padding: 8px 10px;
  width: 100%;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid #000;
  cursor: pointer;
}
.modalDebug ul li + li {
  margin: 5px 0 0;
}

/* .area00 */
.area00 {
  width: 100%;
  position: relative;
  z-index: 2;
}
.area00__bg {
  margin: 50px 0 0;
  padding: calc(1164 / 750 * 100%) 0 0;
  width: 100%;
  border-radius: 0 0 calc(40 / 750 * 100vw) calc(40 / 750 * 100vw);
  overflow: hidden;
  position: relative;
}
.area00__bg::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: calc(8 / 750 * 100%);
  height: 100%;
  background-color: #fff;
  line-height: 0;
  font-size: 0;
}
.area00__bg > div {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
}
.area00__bg__img01 {
  left: 0;
  width: 50%;
  overflow: hidden;
}
.area00__bg__img02 {
  right: 0;
  width: 50%;
  overflow: hidden;
}
.area00__bg__img01 > img,
.area00__bg__img02 > img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(575 / 375 * 100%);
  max-width: none;
  height: 100%;
  transform: translateX(0%);
  transition: all 2s;
}
.area00__bg__img02 > img {
  left: auto;
  right: 0;
  transform: translateX(0%);
}
.area00__bg__img01.init > img {
  transform: translateX(-34%);
}
.area00__bg__img02.init > img {
  transform: translateX(34%);
}

.area00__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.area00__title01 {
  margin: calc(16 / 375 * 100%) auto 0;
  width: calc(271 / 375 * 100%);
  transform: scale(1, 1);
  opacity: 1;
  transition: all 1.5s 0.5s;
}
.area00__title01.init {
  transform: scale(1.5, 1.5);
  opacity: 0;
}
.area00__btn01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: calc(454 / 375 * 100%) auto 0;
  width: calc(312 / 375 * 100%);
}
.area00__btn01 a {
  display: block;
  position: relative;
}
.area00__btn01 a > span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90%;
  border-radius: calc(30 / 375 * 100vw);
  overflow: hidden;
}
.area00__btn01 a > span > span {
  position: absolute;
  top: 0;
  left: -150%;
  width: 200%;
  height: 150%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4)
  );
  transform: rotate(-30deg);
}
.area00__text01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: calc(523 / 375 * 100%) auto 0;
  width: calc(90 / 375 * 100%);
}

.area00__arrow01 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto calc(-55 / 750 * 100%);
  padding: calc(24 / 750 * 100%) 0 0;
  width: calc(90 / 750 * 100%);
  background-color: #bbe6e8;
  border-radius: 50% 50% 0 0;
}
.area00__arrow01__arrow {
  margin: 0 auto;
  width: calc(40 / 90 * 100%);
}

/* .area01 */
.area01 {
  margin: calc(-30 / 375 * 100%) 0 0;
  padding: calc(120 / 375 * 100%) 0 calc(50 / 375 * 100%);
  width: 100%;
  position: relative;
  background: url(/images/index/bg01.png) no-repeat center bottom / cover;
}
.area01__inner {
  width: 100%;
}
.area01__title01 {
  margin: 0 auto calc(20 / 375 * 100%);
  width: calc(131 / 375 * 100%);
}
.area01__text01 {
  width: 100%;
  text-align: center;
  line-height: 1.8;
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}

/* .area02 */
.area02 {
  padding: calc(20 / 375 * 100%) 0;
  width: 100%;
  position: relative;
}
.area02__box01 {
  margin: 0 auto calc(66 / 375 * 100%);
  padding: 0 0 calc(25 / 375 * 100%);
  width: calc(340 / 375 * 100%);
  background-color: #fff;
  border-radius: calc(10 / 375 * 100vw);
  position: relative;
  display: flex;
}
.area02__box01:last-child {
  margin-bottom: 0;
}
.area02__box01::before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: calc(22 / 375 * 100%) 0 0;
  width: calc(36 / 375 * 100%);
  line-height: 0;
  font-size: 0;
  background: url(/images/index/arrow01.png) no-repeat center top / cover;
}
.area02__box01:last-child::before {
  display: none;
}
.area02__case01 {
  margin: calc(-20 / 340 * 100%) 0 0 calc(20 / 340 * 100%);
  width: calc(190 / 340 * 100%);
}
.area02__point01 {
  margin: 0 0 calc(16 / 190 * 100%);
  width: calc(142 / 190 * 100%);
}
.area02__title01 {
  margin: 0 0 calc(10 / 190 * 100%);
  line-height: 1.3;
  font-size: calc(22 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}
.area02__text01 {
  line-height: 1.5;
  font-size: calc(13 / 375 * 100vw);
  width: calc(176 / 190 * 100%);
  color: #00003e;
}
.area02__pic01 {
  margin: calc(-24 / 375 * 100%) 0 0;
  width: calc(116 / 375 * 100%);
}

/* .area03 */
.area03 {
  padding: 0 0 calc(70 / 375 * 100%);
  width: 100%;
  position: relative;
}
.area03.pb30 {
  padding-bottom: calc(30 / 375 * 100%);
}
.area03__btn01 {
  margin: 0 auto calc(10 / 375 * 100%);
  width: calc(312 / 375 * 100%);
}
.area03__btn01 a {
  display: block;
}
.area03__text01 {
  margin: 0 auto calc(25 / 375 * 100%);
  width: calc(87 / 375 * 100%);
}
.area03__text01:last-child {
  margin-bottom: 0;
}
.area03__text02 {
  margin: 0 auto;
  line-height: 1.6;
  font-size: max(calc(12 / 375 * 100vw), 11px);
  width: calc(320 / 375 * 100%);
  color: #000;
}
.fromTablet .area03__text02 {
  font-size: 11px;
}

.area03__text02 p + p {
  margin-top: calc(15 / 320 * 100%);
  padding-top: calc(15 / 320 * 100%);
  border-top: 1px solid #fff;
}

/* .area04 */
.area04 {
  padding: calc(60 / 375 * 100%) 0 calc(40 / 375 * 100%);
  width: 100%;
  background-color: #ebf5f8;
  position: relative;
}
.area04.pb80 {
  padding-bottom: calc(80 / 375 * 100%);
}
.area04__title01 {
  margin: 0 auto calc(20 / 375 * 100%);
  width: calc(171 / 375 * 100%);
}
.area04__title02 {
  margin: 0 auto calc(20 / 375 * 100%);
  text-align: center;
  line-height: 1.3;
  font-size: calc(20 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}
.area04__btn01 {
  margin: 0 auto calc(20 / 375 * 100%);
  width: calc(340 / 375 * 100%);
  border: 1px solid #00003e;
  border-radius: calc(10 / 375 * 100vw);
  background-color: #fff;
  box-shadow: 3px 3px 0 rgba(0, 0, 62, 0.3);
}
.area04__btn01:last-child {
  margin-bottom: 0;
}
.area04__btn01 a {
  padding: calc(14 / 340 * 100%) calc(10 / 340 * 100%) calc(10 / 340 * 100%)
    calc(20 / 340 * 100%);
  color: #4d4d4d;
  display: flex;
  text-decoration: none;
}
.area04__btn01 a span {
  display: block;
}
.area04__btn01__icon01 {
  margin: 0 calc(18 / 310 * 100%) 0 0;
  width: calc(60 / 310 * 100%);
}
.area04__btn01__case01 {
  width: calc(230 / 310 * 100%);
}
.area04__btn01__title01 {
  margin: 0 0 calc(5 / 230 * 100%);
  line-height: 1.2;
  font-size: calc(18 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}
.area04__btn01__text01 {
  line-height: 1.6;
  font-size: max(calc(12 / 375 * 100vw), 11px);
  color: #4d4d4d;
}

/* .area05 */
.area05 {
  padding: 0 0 calc(40 / 375 * 100%);
  width: 100%;
  background-color: #ebf5f8;
  position: relative;
}
.area03 + .area05 {
  padding-top: calc(40 / 375 * 100%);
}
.area05.pt40 {
  padding-top: calc(40 / 375 * 100%);
}
.area05.nobgcolor {
  background-color: transparent;
}
.area05__text01 {
  margin: 0 auto calc(30 / 375 * 100%);
  width: calc(320 / 375 * 100%);
  line-height: 1.6;
  font-size: max(calc(12 / 375 * 100vw), 11px);
  color: #000;
}
.fromTablet .area05__text01 {
  font-size: 11px;
}

.area05__text01 p + p {
  margin: calc(15 / 375 * 100%) 0 0;
  padding: calc(15 / 375 * 100%) 0 0;
  border-top: 1px solid #e3e3e3;
}
.area05__banner01 {
  margin: 0 auto calc(40 / 375 * 100%);
  width: calc(340 / 375 * 100%);
}
.area05__banner01 a {
  display: block;
}
.area05__banner01 a + a {
  margin: calc(15 / 340 * 100%) 0 0;
}
.area05__sns01 {
  margin: 0 auto;
  width: calc(220 / 375 * 100%);
  display: flex;
  justify-content: space-between;
}
.area05__sns01 a {
  display: block;
  width: calc(50 / 220 * 100%);
}

/* .area06 */
.area06 {
  padding: 0 0 calc(20 / 375 * 100%);
  width: 100%;
  background-color: #fff;
  position: relative;
}
.area06__space01 {
  margin: 0 0 calc(20 / 375 * 100%);
  padding: calc(80 / 375 * 100%) 0 0;
  background-color: #e9f7f8;
  position: relative;
}
.area06__title01 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto calc(-6 / 375 * 100%);
  width: calc(100 / 375 * 100%);
}
.area06__text01 {
  margin: 0 0 calc(20 / 375 * 100%);
  text-align: center;
  line-height: 1.2;
  font-size: calc(16 / 375 * 100vw);
  font-weight: bold;
}
.area06__text01 p {
  display: none;
}
.area06__resultArea01 {
  margin: 0 0 calc(196 / 375 * 100%);
  width: 100%;
  position: relative;
}
.area06__pic01 {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(-10 / 375 * 100%) 0 0 calc(43 / 375 * 100%);
  width: calc(124 / 375 * 100%);
  transform: scale(0);
}
.area06__pic01.expand {
  transform: scale(1);
  transition: transform 0.5s ease-in-out;
}
.area06__pic01 img {
  display: none;
}
.area06__graph01 {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(15 / 375 * 100%) 0 0 calc(112 / 375 * 100%);
  width: calc(150 / 375 * 100%);
  transform: scale(0) translate(0%, 0%);
}
.area06__graph01.moving01 {
  transform: scale(1.6) translate(0%, 0%);
  transition: all 0.5s ease-in-out;
}
.area06__graph01.moving02 {
  transform: scale(1) translate(44%, -10%);
  transition: all 0.5s ease-in-out;
}
.area06__graph01 svg {
  width: 100%;
  transform-origin: center;
  transform: rotate(-90deg);
}
.area06__graph01 svg .circle01 {
  fill: none;
  stroke: #bababa;
  stroke-width: 18;
  stroke-dasharray: 749.7; /* calc(119 * 2 * 3.14) */
  stroke-dashoffset: 0;
}
.area06__graph01 svg .circle02-070 {
  fill: none;
  stroke: #55d2dc;
  stroke-width: 40;
  stroke-dasharray: 816.4; /* calc(130 * 2 * 3.14) */
  stroke-dashoffset: 244.92; /* 130 * 2 * 3.14 * (1 - 0.7) */
  opacity: 0;
}
.area06__graph01 svg .circle02-080 {
  fill: none;
  stroke: #55d2dc;
  stroke-width: 40;
  stroke-dasharray: 816.4; /* calc(130 * 2 * 3.14) */
  stroke-dashoffset: 163.28; /* 130 * 2 * 3.14 * (1 - 0.8) */
  opacity: 0;
}
.area06__graph01 svg .circle02-090 {
  fill: none;
  stroke: #55d2dc;
  stroke-width: 40;
  stroke-dasharray: 816.4; /* calc(130 * 2 * 3.14) */
  stroke-dashoffset: 81.64; /* 130 * 2 * 3.14 * (1 - 0.9) */
  opacity: 0;
}
.area06__graph01 svg .circle02-100 {
  fill: none;
  stroke: #55d2dc;
  stroke-width: 40;
  stroke-dasharray: 816.4; /* calc(130 * 2 * 3.14) */
  stroke-dashoffset: 0; /* 130 * 2 * 3.14 * (1 - 1.0) */
  opacity: 0;
}
.area06__graph01 svg .score070 {
  animation: animeGraph070 0.8s ease-in-out;
}
.area06__graph01 svg .score080 {
  animation: animeGraph080 0.8s ease-in-out;
}
.area06__graph01 svg .score090 {
  animation: animeGraph090 0.8s ease-in-out;
}
.area06__graph01 svg .score100 {
  animation: animeGraph100 0.8s ease-in-out;
}

.area06__graph01__text01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  margin: calc(40 / 150 * 100%) 0 0;
  align-items: center;
  text-align: center;
  flex-direction: column;
}
.area06__graph01__text01__text {
  line-height: 1;
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
  transform: scale(0);
}
.area06__graph01__text01__text.expand {
  transform: scale(1);
  transition: transform 0.5s ease-in-out;
}
.area06__graph01__text01__score {
  display: flex;
  line-height: 1.1;
  font-size: calc(50 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
  transform: scale(0);
}
.area06__graph01__text01__score.expand {
  transform: scale(1);
  transition: transform 0.5s ease-in-out;
}

.area06__sns01 {
  display: none;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.area06__sns01__title {
  margin: calc(5 / 375 * 100%) calc(12 / 375 * 100%) 0 0;
  line-height: 1;
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  transform: translateY(100%);
  opacity: 0;
}
.area06__sns01 a {
  display: block;
  width: calc(30 / 375 * 100%);
  transform: translateY(100%);
  opacity: 0;
}
.area06__sns01 a + a {
  margin-left: calc(15 / 375 * 100%);
}
.area06__sns01__title.upper,
.area06__sns01 a.upper {
  transform: translateY(0%);
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

/* .area07 */
.area07 {
  padding: calc(20 / 375 * 100%) 0;
  width: 100%;
  background-color: #e9f7f8;
  position: relative;
}
.area07.disabled::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.area07__title01 {
  margin: 0 0 calc(12 / 375 * 100%);
  text-align: center;
  line-height: 1.2;
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
}
.area07__btnList01 {
  margin: 0 0 calc(-12 / 375 * 100%);
  display: flex;
  flex-direction: column;
}
.area07__btnList01 > li {
  margin: 0 0 calc(12 / 375 * 100%);
}
.area07__btn01 {
  margin: 0 auto;
  width: calc(320 / 375 * 100%);
}
.area07__btn01 a {
  display: block;
  text-decoration: none;
  position: relative;
}
.area07__btn01 a > span.text {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 5.2% 0 0;
  text-align: center;
  line-height: 1;
  font-size: calc(16 / 375 * 100vw);
  font-weight: bold;
  color: #fff;
}
.area07__btn01 a > span.dire {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90%;
  border-radius: calc(30 / 375 * 100vw);
  overflow: hidden;
}
.area07__btn01 a > span.dire > span {
  position: absolute;
  top: 0;
  left: -150%;
  width: 200%;
  height: 150%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4)
  );
  transform: rotate(-30deg);
}
.area07__btn01.action a {
  animation: animeScale01 2s ease-in-out;
}
.area07__btn01.action a > span.dire > span {
  animation: animeKirari01 2s linear;
}

.area07__note01 {
  margin: calc(8 / 375 * 100%) 0 0;
  text-align: center;
  line-height: 1.4;
  font-size: max(calc(10 / 375 * 100vw), 10px);
}

.area07__btnList02 {
  margin: calc(30 / 375 * 100%) 0 0;
  width: 100%;
}
.area07__btnList02__btn01 {
  display: none;
  margin: 0 auto;
  width: calc(300 / 375 * 100vw);
}
.area07__btnList02__btn01 a {
  display: block;
}

/* .area08 */
.area08 {
  padding: calc(30 / 375 * 100%) 0 calc(60 / 375 * 100%);
  width: 100%;
  background-color: #cdf0f2;
  position: relative;
}
.area08__block01 {
  padding: 0 0 calc(30 / 375 * 100%);
  width: 100%;
}
.area08__block01:last-child {
  padding-bottom: 0;
}
.area08__title01 {
  margin: 0 auto calc(22 / 375 * 100%);
  width: calc(312 / 375 * 100%);
}
.area08__box01 {
  margin: 0 auto;
  padding: calc(20 / 375 * 100%) 0;
  width: calc(340 / 375 * 100%);
  background-color: #fff;
  border-radius: calc(10 / 375 * 100vw);
  position: relative;
}

.area08__box01:last-child {
  margin-bottom: 0;
}
.area08__title02 {
  margin: 0 auto calc(18 / 340 * 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.area08__title02 > div + div {
  margin: 0 0 0 calc(18 / 340 * 100%);
}
.area08__title02__icon {
  width: calc(50 / 340 * 100%);
}
.area08__title02__text {
  line-height: 1.3;
  font-size: calc(22 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}
.area08__case01 {
  margin: 0 0 calc(18 / 340 * 100%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.area08__pic01 {
  margin: 0 0 0 calc(10 / 340 * 100%);
  width: calc(143 / 340 * 100%);
}
.area08__case01.type02 .area08__pic01 {
  margin: 0 calc(10 / 340 * 100%) 0 0;
}
.area08__text01 {
  margin: 0 calc(30 / 340 * 100%) 0 0;
  width: calc(140 / 340 * 100%);
  line-height: 1.5;
  font-size: calc(14 / 375 * 100vw);
  color: #00003e;
}
.area08__text01.upper {
  margin-top: calc(-16 / 340 * 100%);
}
.area08__case01.type02 .area08__text01 {
  margin: 0 0 0 calc(30 / 340 * 100%);
}
.area08__btnList01 {
  margin: 0 0 calc(-12 / 340 * 100%);
  display: flex;
  flex-direction: column;
}
.area08__btnList01 li {
  margin: 0 0 calc(12 / 340 * 100%);
}
.area08__btn01 {
  margin: 0 auto;
  width: calc(320 / 340 * 100%);
}
.area08__btn01 a {
  display: block;
  text-decoration: none;
  position: relative;
}
.area08__btn01 a span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 5.2% 0 0;
  text-align: center;
  line-height: 1;
  font-size: calc(16 / 375 * 100vw);
  font-weight: bold;
  color: #fff;
}
.area08__note01 {
  margin: calc(8 / 340 * 100%) 0 0;
  text-align: center;
  line-height: 1.4;
  font-size: max(calc(10 / 375 * 100vw), 10px);
}

/* .area09 */
.area09 {
  padding: 0 0 calc(30 / 375 * 100%);
  width: 100%;
  position: relative;
  background-color: #cdf0f2;
}
.area09__title01 {
  margin: 0 auto calc(33 / 375 * 100%);
  width: calc(147 / 375 * 100%);
}
.area09__tab01 {
  margin: 0 auto calc(20 / 375 * 100%);
  width: calc(300 / 375 * 100%);
  display: flex;
}
.area09__tab01 > li {
  padding: 0 0 calc(5 / 150 * 100%);
  width: 50%;
  text-align: center;
  line-height: 1.4;
  font-size: calc(16 / 375 * 100vw);
  font-weight: bold;
  color: #9e9e9e;
  border-bottom: calc(4 / 375 * 100vw) solid #9e9e9e;
  cursor: pointer;
}
.area09__tab01 > li.active {
  color: #00003e;
  border-color: #00003e;
}
.area09__target01 {
  position: relative;
  width: 100%;
}
.area09__target01 > li {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
}
.area09__target01 > li.active {
  opacity: 1;
  position: relative;
  z-index: 2;
}

.area09__slide01 {
  margin: 0 auto calc(70 / 375 * 100%);
  width: calc(300 / 375 * 100%);
  position: relative;
}
.area09__slide01 > ul {
  width: calc((320 * 8) / 300 * 100%);
  display: flex;
}
.area09__slide01 > ul > li {
  margin: 0 calc(20 / (320 * 8) * 100%) 0 0;
  width: calc(300 / (320 * 8) * 100%);
  background-color: #fff;
  border-radius: calc(20 / 375 * 100vw);
  overflow: hidden;
}
.area09__slide01__pic01 {
  width: 100%;
}
.area09__slide01__textarea01 {
  padding: calc(20 / 300 * 100%) 0;
  width: 100%;
}
.area09__slide01__title01 {
  margin: 0 auto calc(16 / 300 * 100%);
  text-align: center;
  line-height: 1.1;
  font-size: calc(20 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}
.area09__slide01__title01 .small {
  font-size: calc(13 / 375 * 100vw);
}
.area09__slide01__text01 {
  margin: 0 auto;
  width: calc(260 / 300 * 100%);
  line-height: 1.5;
  font-size: calc(13 / 375 * 100vw);
  color: #00003e;
}
.area09__slide01__btn01 {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(160 / 300 * 100%) 0 0 calc(-20 / 300 * 100%);
  width: calc(37 / 300 * 100%);
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  z-index: 5;
}
.area09__slide01__btn02 {
  position: absolute;
  top: 0;
  right: 0;
  margin: calc(160 / 300 * 100%) calc(-20 / 300 * 100%) 0 0;
  width: calc(37 / 300 * 100%);
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  z-index: 5;
}
.area09__slide01__dot01 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 0 calc(-30 / 300 * 100%);
  line-height: 0;
  font-size: 0;
  display: flex;
  justify-content: center;
}
.area09__slide01__dot01 span {
  display: block;
  width: calc(8 / 375 * 100vw);
  height: calc(8 / 375 * 100vw);
  background-color: #a9a9a9;
  border-radius: calc(4 / 375 * 100vw);
}
.area09__slide01__dot01 span.current {
  background-color: #00003e;
}
.area09__slide01__dot01 span + span {
  margin-left: calc(15 / 375 * 100vw);
}

.area09__btn01 {
  margin: 0 auto calc(26 / 375 * 100%);
  width: calc(312 / 375 * 100%);
}
.area09__btn01 a {
  display: block;
}

/* .area10 */
.area10 {
  padding: 0 0 calc(30 / 375 * 100%);
  width: 100%;
  position: relative;
}
.area10__title01 {
  margin: 0 0 calc(20 / 375 * 100%);
  text-align: center;
  line-height: 1.3;
  font-size: calc(18 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}
.area10__title01 span {
  display: block;
  margin: 0 0 calc(3 / 375 * 100%);
}
.area10__title01 strong {
  font-size: calc(22 / 375 * 100vw);
}
.area10__pic01 {
  margin: 0 auto;
  width: calc(236 / 375 * 100%);
}

/* .cp-textBox01 */
.cp-textBox01 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: calc(12 / 375 * 100vw) calc(12 / 375 * 100vw) 0 0;
}
.cp-textBox01.shrinked {
  height: calc(86 / 375 * 100vw) !important;
  border-radius: calc(12 / 375 * 100vw) !important;
}

.cp-textBox01__shadow01 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(43 / 375 * 100%) 0 0 calc(331 / 375 * 100%);
  aspect-ratio: 1 / 1;
  width: calc(40 / 375 * 100%);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 calc(100vw + 100vh) rgba(0, 0, 0, 0.6);
  z-index: 99988;
}

.cp-textBox01__balloon01 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(15 / 375 * 100%) 0 0 calc(55 / 375 * 100%);
  width: calc(254 / 375 * 100%);
  z-index: 99989;
}

.cp-textBox01__label01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 5;
}
.cp-textBox01__label01 > img {
  display: none;
}

/* .cp-textArea01 */
.cp-textArea01 {
  width: 100%;
  height: calc(86 / 375 * 100vw);
  border: calc(4 / 375 * 100vw) solid #90d9de;
  border-radius: calc(12 / 375 * 100vw);
  padding: 0 calc(10 / 375 * 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.cp-textArea01__face01 {
  width: calc(62 / 335 * 100%);
}
.cp-textArea01__face01 img {
  display: none;
}
.cp-textArea01__face01 img.on {
  display: block;
}
.cp-textArea01__text01 {
  width: calc(262 / 335 * 100%);
  line-height: 1.3;
  font-size: calc(16 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
}
.cp-textArea01__taparea01 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}
.cp-textArea01__icon01 {
  position: absolute;
  bottom: 0;
  transform: translateY(0%);
  right: 0;
  padding: calc(16 / 750 * 100vw);
  width: calc(76 / 750 * 100vw);
  line-height: 0;
  font-size: 0;
}
.cp-textArea01__icon01.bound01 {
  animation: ani-bound01 0.5s ease-out;
}
@keyframes ani-bound01 {
  0% {
    transform: translateY(0%);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateY(20%);
  }
  100% {
    transform: translateY(0%);
  }
}

/* .cp-choice01 */
.cp-choice01 {
  padding: calc(220 / 375 * 100%) 0 0;
  width: 100%;
  position: relative;
  opacity: 0;
}
.cp-choice01__group01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: calc(18 / 375 * 100%) 0;
}
.cp-choice01__btn01 {
  margin: 0 auto calc(14 / 375 * 100%);
  padding: calc(52 / 375 * 100%) 0 0;
  width: calc(322 / 375 * 100%);
  line-height: 0;
  font-size: 0;
  background: url(/images/main/btn01.png) no-repeat left top / 100% 100%;
  position: relative;
  cursor: pointer;
}
.cp-choice01.disabled .cp-choice01__btn01 {
  cursor: default;
}
.cp-choice01__btn01.ok {
  background-image: url(/images/main/btn01_ok.png);
  animation: animeBtnAction01 0.3s ease-in-out;
}
.cp-choice01__btn01.ng {
  background-image: url(/images/main/btn01_ng.png);
  animation: animeBtnAction02 0.15s linear 2;
}
.cp-choice01__btn01:last-child {
  margin-bottom: 0;
}
.cp-choice01__btn01 span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 0 calc(50 / 322 * 100%) 0 calc(45 / 322 * 100%);
  line-height: 1.2;
  font-size: calc(15 / 375 * 100vw);
  font-weight: bold;
  color: #00003e;
  display: flex;
  align-items: center;
}

/*== 375px以下 ==*/
@media screen and (max-width: 375px) {
  .cp-choice01 {
    padding: calc(180 / 375 * 100%) 0 0;
  }
  .cp-choice01__btn01 {
    margin: 0 auto calc(10 / 375 * 100%);
    padding: calc(42 / 375 * 100%) 0 0;
    background-image: url(/images/main/btn01_n.png);
  }
  .cp-choice01.disabled .cp-choice01__btn01 {
    cursor: default;
  }
  .cp-choice01__btn01.ok {
    background-image: url(/images/main/btn01_n_ok.png);
  }
  .cp-choice01__btn01.ng {
    background-image: url(/images/main/btn01_n_ng.png);
  }
}

/* .cp-blackout */
.cp-blackout {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}

/* .cp-animmeArea01 */
.cp-animmeArea01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 共通シーン */
/* .cp-scene01 */
.cp-scene01 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}
.cp-scene01__inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cp-scene01__pic01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-scene01__pic01.p00 {
  top: 50%;
  transform: translateY(-50%);
}
.cp-scene01__pic01.p01 {
  top: -1%;
  height: calc((104% - (130 / 750 * 100vw)) / 2);
}
.cp-scene01__pic01.p02 {
  top: auto;
  bottom: -1%;
  height: calc((104% - (130 / 750 * 100vw)) / 2);
}
.cp-scene01__pic01.p01 img,
.cp-scene01__pic01.p02 img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* .cp-scene02 */
.cp-scene02 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.cp-scene02__inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #f7f7e0;
}
.cp-scene02__bg01 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.cp-scene02__balloon01 {
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 0 calc(406 / 375 * 100%) calc(44 / 375 * 100%);
  width: calc(134 / 375 * 100%);
}
.cp-scene02__balloon02 {
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 0 calc(385 / 375 * 100%) calc(168 / 375 * 100%);
  width: calc(188 / 375 * 100%);
}
.cp-scene02__balloon02.type02 {
  margin: 0 0 calc(370 / 375 * 100%) calc(178 / 375 * 100%);
  width: calc(168 / 375 * 100%);
}

.cp-scene02__chara01,
.cp-scene02__chara02,
.cp-scene02__chara03 {
  position: absolute;
  opacity: 0;
}
.cp-scene02__chara01,
.cp-scene02__chara03 {
  opacity: 1;
}
/* 夫 */
.cp-scene02 .point01 {
  bottom: 0;
  left: calc(-70 / 375 * 100%);
  margin: 0 0 calc(50 / 375 * 100%);
  padding: calc(370 / 375 * 100%) 0 0;
  width: calc(370 / 375 * 100%);
}
/* 妻（中） */
.cp-scene02 .point02 {
  bottom: 0;
  left: calc(95 / 375 * 100%);
  margin: 0 0 calc(25 / 375 * 100%);
  padding: calc(370 / 375 * 100%) 0 0;
  width: calc(370 / 375 * 100%);
}
/* 妻（最初） */
.cp-scene02 .point03 {
  bottom: 0;
  left: calc(300 / 375 * 100%);
  margin: 0 0 calc(25 / 375 * 100%);
  padding: calc(370 / 375 * 100%) 0 0;
  width: calc(370 / 375 * 100%);
}

.cp-scene02__chara01 img,
.cp-scene02__chara02 img,
.cp-scene02__chara03 img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}
.cp-scene02__chara01 img,
.cp-scene02__chara03 img,
.cp-scene02__chara05 img {
  opacity: 0;
}
.cp-scene02__chara01.chara01 img:nth-child(1),
.cp-scene02__chara02.chara01 img:nth-child(1) {
  opacity: 1;
}

.cp-scene02__count01 {
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 0 calc(20 / 375 * 100%) calc(100 / 375 * 100%) 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  opacity: 0;
}
.cp-scene02__count01__text01 {
  margin: 0 calc(6 / 375 * 100vw) 0 0;
  line-height: 1.2;
  font-size: max(calc(12 / 375 * 100vw), 11px);
  color: #fff;
}
.cp-scene02__count01__circle {
  width: calc(62 / 375 * 100vw);
  height: calc(62 / 375 * 100vw);
  border: 3px solid #fff;
  border-radius: calc(31 / 375 * 100vw);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp-scene02__count01__text02 {
  margin: 0 0 calc(6 / 62 * 100%);
  line-height: 1;
  font-size: max(calc(12 / 375 * 100vw), 11px);
  color: #fff;
}
.cp-scene02__count01__num {
  line-height: 1;
  font-size: calc(30 / 375 * 100vw);
  font-weight: bold;
  color: #fff;
}

.cp-scene02__btn01 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto calc(20 / 375 * 100%);
  width: calc(312 / 375 * 100%);
}
.cp-scene02__btn01 > li {
  display: none;
}
.cp-scene02__btn01 > li a {
  display: block;
  position: relative;
}
.cp-scene02__btn01 > li a > span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90%;
  border-radius: calc(30 / 375 * 100vw);
  overflow: hidden;
}
.cp-scene02__btn01 > li a > span > span {
  position: absolute;
  top: 0;
  left: -150%;
  width: 200%;
  height: 150%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4)
  );
  transform: rotate(-30deg);
}
.cp-scene02__btn01 > li.action a {
  animation: animeScale01 2s ease-in-out;
}
.cp-scene02__btn01 > li.action a > span > span {
  animation: animeKirari01 2s linear;
}

/* Aコース(火災) */
/* .cp-sceneA01 */
.cp-sceneA01 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ececec;
  overflow: hidden;
}
.cp-sceneA01__inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cp-sceneA01__inner.outage::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 100%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}
.cp-sceneA01__bg01,
.cp-sceneA01__bg02 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-sceneA01__bg02 {
  display: none;
}
.cp-sceneA01__bg01 img,
.cp-sceneA01__bg02 img {
  width: 100%;
  height: 100%;
}

.cp-sceneA01__item01,
.cp-sceneA01__item02,
.cp-sceneA01__item03 {
  position: absolute;
  top: 0;
  left: 0;
}
.cp-sceneA01__item01 {
  margin: calc(305 / 1712 * 100%) 0 0 calc(1200 / 1712 * 100%);
  width: calc(56 / 1712 * 100%);
}
.cp-sceneA01__item02 {
  margin: calc(426 / 1712 * 100%) 0 0 calc(1227 / 1712 * 100%);
  width: calc(67 / 1712 * 100%);
}
.cp-sceneA01__item03 {
  display: none;
  margin: calc(402 / 1712 * 100%) 0 0 calc(1136 / 1712 * 100%);
  width: calc(59 / 1712 * 100%);
}

.cp-sceneA01__chara01,
.cp-sceneA01__chara02,
.cp-sceneA01__chara03 {
  position: absolute;
  opacity: 0;
}
.cp-sceneA01__chara01 img,
.cp-sceneA01__chara02 img,
.cp-sceneA01__chara03 img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}
.cp-sceneA01__chara01 img {
  opacity: 0;
}
.cp-sceneA01__chara01.chara01 img:nth-child(1),
.cp-sceneA01__chara01.chara02 img:nth-child(2),
.cp-sceneA01__chara01.chara03 img:nth-child(3),
.cp-sceneA01__chara01.chara04 img:nth-child(4),
.cp-sceneA01__chara01.chara05 img:nth-child(5) {
  opacity: 1;
}

.cp-sceneA01 .point01 {
  /* ソファの前 */
  top: calc(150 / 614 * 100%);
  left: calc(240 / 1712 * 100%);
  padding: 0 calc(330 / 1712 * 100%) 0 0;
  height: calc(330 / 614 * 100%);
}
.cp-sceneA01 .point01b {
  /* ソファの前(しゃがみ) */
  top: calc(150 / 614 * 100%);
  left: calc(180 / 1712 * 100%);
  padding: 0 calc(330 / 1712 * 100%) 0 0;
  height: calc(330 / 614 * 100%);
}
.cp-sceneA01 .point02 {
  /* 窓の前 */
  top: calc(150 / 614 * 100%);
  left: calc(-10 / 1712 * 100%);
  padding: 0 calc(330 / 1712 * 100%) 0 0;
  height: calc(330 / 614 * 100%);
}
.cp-sceneA01 .point03 {
  /* 玄関前 */
  top: calc(150 / 614 * 100%);
  left: calc(960 / 1712 * 100%);
  padding: 0 calc(330 / 1712 * 100%) 0 0;
  height: calc(330 / 614 * 100%);
}

/* .cp-sceneA02 */
.cp-sceneA02 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ececec;
  overflow: hidden;
}
.cp-sceneA02__inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cp-sceneA02__bg01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-sceneA02__bg01 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* .cp-sceneA03 */
.cp-sceneA03 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ececec;
  overflow: hidden;
}
.cp-sceneA03__inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cp-sceneA03__bg01 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-sceneA03__bg01 img {
  width: 100%;
  height: 100%;
}

.cp-sceneA03__balloon01 {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(10 / 1500 * 100%) 0 0 calc(630 / 1500 * 100%);
  width: calc(402 / 1500 * 100%);
}
.cp-sceneA03__balloon01.type02 {
  margin: calc(48 / 1500 * 100%) 0 0 calc(665 / 1500 * 100%);
  width: calc(360 / 1500 * 100%);
}

.cp-sceneA03__chara01,
.cp-sceneA03__chara02,
.cp-sceneA03__chara03,
.cp-sceneA03__chara04,
.cp-sceneA03__chara05,
.cp-sceneA03__chara06,
.cp-sceneA03__chara07 {
  position: absolute;
  opacity: 0;
}
.cp-sceneA03__chara01,
.cp-sceneA03__chara03 {
  opacity: 1;
}
/* 夫（最初） */
.cp-sceneA03 .point01 {
  top: calc(190 / 614 * 100%);
  left: calc(-40 / 1500 * 100%);
  padding: 0 calc(340 / 1500 * 100%) 0 0;
  height: calc(340 / 614 * 100%);
}
/* 夫（中間地点） */
.cp-sceneA03 .point02 {
  top: calc(190 / 614 * 100%);
  left: calc(450 / 1500 * 100%);
  padding: 0 calc(340 / 1500 * 100%) 0 0;
  height: calc(340 / 614 * 100%);
}
/* サブ男（中間地点） */
.cp-sceneA03 .point03 {
  top: calc(150 / 614 * 100%);
  left: calc(580 / 1500 * 100%);
  padding: 0 calc(300 / 1500 * 100%) 0 0;
  height: calc(300 / 614 * 100%);
}
/* サブ女（最初） */
.cp-sceneA03 .point04 {
  top: calc(180 / 614 * 100%);
  left: calc(1500 / 1500 * 100%);
  padding: 0 calc(320 / 1500 * 100%) 0 0;
  height: calc(325 / 614 * 100%);
}
/* サブ女（中間地点） */
.cp-sceneA03 .point05 {
  top: calc(180 / 614 * 100%);
  left: calc(770 / 1500 * 100%);
  padding: 0 calc(320 / 1500 * 100%) 0 0;
  height: calc(325 / 614 * 100%);
}
.cp-sceneA03__chara01 img,
.cp-sceneA03__chara02 img,
.cp-sceneA03__chara03 img,
.cp-sceneA03__chara04 img,
.cp-sceneA03__chara05 img,
.cp-sceneA03__chara06 img,
.cp-sceneA03__chara07 img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}
.cp-sceneA03__chara01 img,
.cp-sceneA03__chara03 img,
.cp-sceneA03__chara05 img {
  opacity: 0;
}
.cp-sceneA03__chara01.chara01 img:nth-child(1),
.cp-sceneA03__chara01.chara02 img:nth-child(2),
.cp-sceneA03__chara01.chara03 img:nth-child(3) {
  opacity: 1;
}
.cp-sceneA03__chara03.chara01 img:nth-child(1),
.cp-sceneA03__chara03.chara02 img:nth-child(2) {
  opacity: 1;
}
.cp-sceneA03__chara05.chara01 img:nth-child(1),
.cp-sceneA03__chara05.chara02 img:nth-child(2) {
  opacity: 1;
}

/* .cp-sceneA04 */
.cp-sceneA04 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ececec;
  overflow: hidden;
}
.cp-sceneA04__inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cp-sceneA04__bg01 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-sceneA04__bg01 img {
  width: 100%;
  height: 100%;
}
.cp-sceneA04__bg02 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(763 / 1286 * 100%);
}

.cp-sceneA04__chara01,
.cp-sceneA04__chara02,
.cp-sceneA04__chara03 {
  position: absolute;
}
/* 夫（最初） */
.cp-sceneA04 .point01 {
  /*340*/
  top: calc(210 / 614 * 100%);
  left: calc((0 - 400) / 1286 * 100%);
  padding: 0 calc(306 / 1286 * 100%) 0 0;
  height: calc(306 / 614 * 100%);
}
/* サブ男（最初） */
.cp-sceneA04 .point02 {
  /*300*/
  top: calc(170 / 614 * 100%);
  left: calc((110 - 400) / 1286 * 100%);
  padding: 0 calc(270 / 1286 * 100%) 0 0;
  height: calc(270 / 614 * 100%);
}
/* サブ女（最初） */
.cp-sceneA04 .point03 {
  /*320*/
  top: calc(175 / 614 * 100%);
  left: calc((220 - 400) / 1286 * 100%);
  padding: 0 calc(288 / 1286 * 100%) 0 0;
  height: calc(288 / 614 * 100%);
}
.cp-sceneA04__chara01 img,
.cp-sceneA04__chara02 img,
.cp-sceneA04__chara03 img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}

/* .cp-sceneA05 */
.cp-sceneA05 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ececec;
  overflow: hidden;
}
.cp-sceneA05__inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cp-sceneA05__bg01 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-sceneA05__bg01 img {
  width: 100%;
  height: 100%;
}

.cp-sceneA05__chara01,
.cp-sceneA05__chara02,
.cp-sceneA05__chara03,
.cp-sceneA05__chara04,
.cp-sceneA05__chara05,
.cp-sceneA05__chara06 {
  position: absolute;
  opacity: 0;
}
.cp-sceneA05__chara02,
.cp-sceneA05__chara04,
.cp-sceneA05__chara06 {
  opacity: 1;
}
/* 夫（最初） */
.cp-sceneA05 .point01 {
  top: calc(170 / 614 * 100%);
  left: calc((80 - 800) / 1286 * 100%);
  padding: 0 calc(370 / 1286 * 100%) 0 0;
  height: calc(370 / 614 * 100%);
}
/* 夫（中間地点） */
.cp-sceneA05 .point02 {
  top: calc(170 / 614 * 100%);
  left: calc(80 / 1286 * 100%);
  padding: 0 calc(370 / 1286 * 100%) 0 0;
  height: calc(370 / 614 * 100%);
}
/* サブ男（最初） */
.cp-sceneA05 .point03 {
  top: calc(200 / 614 * 100%);
  left: calc((330 - 800) / 1286 * 100%);
  padding: 0 calc(245 / 1286 * 100%) 0 0;
  height: calc(245 / 614 * 100%);
}
/* サブ男（中間地点） */
.cp-sceneA05 .point04 {
  top: calc(200 / 614 * 100%);
  left: calc(330 / 1286 * 100%);
  padding: 0 calc(245 / 1286 * 100%) 0 0;
  height: calc(245 / 614 * 100%);
}
/* サブ女（最初） */
.cp-sceneA05 .point05 {
  top: calc(200 / 614 * 100%);
  left: calc((450 - 800) / 1286 * 100%);
  padding: 0 calc(245 / 1286 * 100%) 0 0;
  height: calc(245 / 614 * 100%);
}
/* サブ女（中間地点） */
.cp-sceneA05 .point06 {
  top: calc(200 / 614 * 100%);
  left: calc(450 / 1286 * 100%);
  padding: 0 calc(245 / 1286 * 100%) 0 0;
  height: calc(245 / 614 * 100%);
}
.cp-sceneA05__chara01 img,
.cp-sceneA05__chara02 img,
.cp-sceneA05__chara03 img,
.cp-sceneA05__chara04 img,
.cp-sceneA05__chara05 img,
.cp-sceneA05__chara06 img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}
.cp-sceneA05__chara01 img,
.cp-sceneA05__chara03 img,
.cp-sceneA05__chara05 img {
  opacity: 0;
}
.cp-sceneA05__chara01.chara01 img:nth-child(1) {
  opacity: 1;
}
.cp-sceneA05__chara03.chara01 img:nth-child(1) {
  opacity: 1;
}
.cp-sceneA05__chara05.chara01 img:nth-child(1) {
  opacity: 1;
}

/* .cp-smaphoA01 */
.cp-smaphoA01 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-smaphoA01__mobile01 {
  position: absolute;
  top: 150%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  transform: scale(0.6);
  transition: all 1s linear;
}
.cp-smaphoA01__mobile01.action01 {
  top: 0;
  transform: scale(1);
  transition: all 1s linear;
}
.cp-smaphoA01__mobile01 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoA01__mobile01 > div.bg {
  margin: calc((-210 * (750 / 563)) / 750 * 100%) auto 0;
  width: calc(713 / 750 * 100%);
  transform-origin: top center;
  transform: scale(calc(750 / 563));
}
.cp-smaphoA01__mobile01__inner {
  bottom: 0;
  height: 100%;
  overflow: hidden;
}
.cp-smaphoA01__mobile01__inner > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoA01__mobile01__inner > div.m01,
.cp-smaphoA01__mobile01__inner > div.m02 {
  display: none;
}
.cp-smaphoA01__mobile01__inner > div.m01 {
  position: relative;
}
.cp-smaphoA01__mobile01__inner > div.m01 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.cp-smaphoA01__mobile01__inner > div.m01 > div.shadow {
  display: none;
  bottom: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.cp-smaphoA01__mobile01__inner > div.lock {
  bottom: 0;
  background-color: #cee09a;
}
.cp-smaphoA01__mobile01__inner > div.lock.hide {
  transform: translateY(-160%);
  transition: all 0.5s linear;
}
.cp-smaphoA01__mobile01__inner .lock__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: calc(410 / 750 * 100%) 0 0;
  display: flex;
  flex-direction: column;
}
.cp-smaphoA01__mobile01__inner .lock__inner li {
  position: relative;
}
.cp-smaphoA01__mobile01__inner .lock__inner li.disabled::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  line-height: 0;
  font-size: 0;
}
.cp-smaphoA01__mobile01__inner .lock__inner li > div {
  margin: 0 auto;
  width: calc(718 / 750 * 100%);
  position: relative;
}
.cp-smaphoA01__mobile01__inner .lock__inner li > div.btn01 {
  margin-bottom: calc(20 / 750 * 100%);
  cursor: pointer;
}
.cp-smaphoA01__mobile01__inner .lock__inner li > div.btn01 img {
  display: block;
  margin: 0 auto;
  width: 0;
}
.cp-smaphoA01__mobile01__inner .lock__inner li > div.btn02 {
  margin-bottom: calc(20 / 750 * 100%);
  cursor: pointer;
}
.cp-smaphoA01__mobile01__inner .lock__inner li > div.btn02 img {
  display: block;
  margin: 0 auto;
  width: 0;
}
.cp-smaphoA01__mobile01__inner .lock__inner li > div.btn01.expand img,
.cp-smaphoA01__mobile01__inner .lock__inner li > div.btn02.expand img {
  width: 100%;
  transition: all 0.45s ease-in-out;
}

.cp-smaphoA01__mobile01 .tap01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(100 / 750 * 100vw);
  height: calc(100 / 750 * 100vw);
  line-height: 0;
  font-size: 0;
  background-color: rgba(255, 255, 255, 0.7);
  border: 4px solid #ffde28;
  border-radius: calc(50 / 750 * 100vw);
  transform: scale(1);
  opacity: 0;
}
.cp-smaphoA01__mobile01__inner > div.m04 .tap01 {
  bottom: auto;
  margin: calc(1088 / 750 * 100%) auto 0;
}
.cp-smaphoA01__mobile01 .tap01.tap {
  animation: animeTap01 0.7s linear;
}

.cp-smaphoA01__mobile01 .tap03 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(120 / 750 * 100vw);
  height: calc(120 / 750 * 100vw);
  text-align: center;
  line-height: 1;
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  color: #f00;
}
.cp-smaphoA01__mobile01 .tap03 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp-smaphoA01__mobile01 .tap03 > div.circle {
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid #f00;
  border-radius: calc(60 / 750 * 100vw);
  transform: scale(1);
  animation: animeTap02 0.4s ease-out infinite alternate;
}

/* .cp-smaphoA02 */
.cp-smaphoA02 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-smaphoA02__mobile01 {
  position: absolute;
  top: 150%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  transform: scale(0.6);
  transition: all 1s linear;
}
.cp-smaphoA02__mobile01.action01 {
  top: 0;
  transform: scale(1);
  transition: all 1s linear;
}
.cp-smaphoA02__mobile01 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoA02__mobile01 > div.bg {
  margin: calc((-210 * (750 / 563)) / 750 * 100%) auto 0;
  width: calc(713 / 750 * 100%);
  transform-origin: top center;
  transform: scale(calc(750 / 563));
}
.cp-smaphoA02__mobile01__inner {
  bottom: 0;
  height: 100%;
  overflow: hidden;
}
.cp-smaphoA02__mobile01__inner > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoA02__mobile01__inner > div.m02,
.cp-smaphoA02__mobile01__inner > div.m03,
.cp-smaphoA02__mobile01__inner > div.m04,
.cp-smaphoA02__mobile01__inner > div.m05,
.cp-smaphoA02__mobile01__inner > div.m06,
.cp-smaphoA02__mobile01__inner > div.m07 {
  display: none;
}
.cp-smaphoA02__mobile01__inner > div.m03 {
  background-color: #fff;
  margin: 0;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: all 0.3s linear;
}
.cp-smaphoA02__mobile01__inner > div.m03 img {
  opacity: 0;
}
.cp-smaphoA02__mobile01__inner > div.m03.small {
  margin: calc(166 / 750 * 100%) 0 0 calc(400 / 750 * 100%);
  width: calc(120 / 750 * 100vw);
  height: calc(120 / 750 * 100vw);
  border-radius: calc(8 / 750 * 100vw);
}
.cp-smaphoA02__mobile01__inner > div.m04 {
  top: auto;
  bottom: 0;
  margin: 0 0 calc(172 / 750 * 100%);
}

.cp-smaphoA02__mobile01__inner > div.m05 {
  left: 0;
  transition: all 0.3s linear;
}
.cp-smaphoA02__mobile01__inner > div.m05.hide {
  left: 100%;
}
.cp-smaphoA02__mobile01__inner > div.m07 {
  top: 140%;
}

.cp-smaphoA02__mobile01__inner > div.btn01 {
  margin: calc(166 / 750 * 100%) 0 0 calc(400 / 750 * 100%);
  width: calc(120 / 750 * 100%);
}
.cp-smaphoA02__mobile01__inner > div.btn02 {
  display: none;
  top: auto;
  bottom: 0;
  margin: 0 0 calc(172 / 750 * 100%) calc(220 / 750 * 100%);
  width: calc(120 / 750 * 100vw);
  height: calc(120 / 750 * 100vw);
  cursor: pointer;
}

.cp-smaphoA02__mobile01__inner > div.shadow01 {
  display: none;
  position: absolute;
  top: auto;
  bottom: 0;
  margin: 0 0 calc(122 / 750 * 100%) calc(170 / 750 * 100%);
  width: calc(220 / 750 * 100vw);
  height: calc(220 / 750 * 100vw);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(100vw + 100vh) rgba(0, 0, 0, 0.6);
}

.cp-smaphoA02__mobile01 .tap01,
.cp-smaphoA02__mobile01 .tap02 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(100 / 750 * 100vw);
  height: calc(100 / 750 * 100vw);
  line-height: 0;
  font-size: 0;
  background-color: rgba(255, 255, 255, 0.7);
  border: 4px solid #ffde28;
  border-radius: calc(50 / 750 * 100vw);
  transform: scale(1);
  opacity: 0;
}
.cp-smaphoA02__mobile01 .tap02 {
  width: calc(110 / 750 * 100vw);
  height: calc(110 / 750 * 100vw);
  background-color: transparent;
}
.cp-smaphoA02__mobile01__inner > div.m05 .tap02 {
  right: auto;
  bottom: auto;
  margin: calc(595 / 750 * 100%) 0 0 calc(252 / 750 * 100%);
}
.cp-smaphoA02__mobile01__inner .tap01.tap {
  animation: animeTap01 0.7s linear;
}
.cp-smaphoA02__mobile01__inner .tap02.tap {
  animation: animeTap03 2s ease-in-out;
}

.cp-smaphoA02__mobile01__inner > div.tap03 {
  display: none;
  top: auto;
  bottom: 0;
  margin: 0 0 calc(172 / 750 * 100%) calc(220 / 750 * 100%);
  width: calc(120 / 750 * 100vw);
  height: calc(120 / 750 * 100vw);
  text-align: center;
  line-height: 1;
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  color: #f00;
}
.cp-smaphoA02__mobile01__inner > div.tap03 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp-smaphoA02__mobile01__inner > div.tap03 > div.circle {
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid #f00;
  border-radius: calc(60 / 750 * 100vw);
  transform: scale(1);
  animation: animeTap02 0.4s ease-out infinite alternate;
}

/* .cp-smaphoA03 */
.cp-smaphoA03 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: all 1s linear;
}
.cp-smaphoA03.shadow {
  background-color: rgba(0, 0, 0, 0.6);
  transition: all 1s linear;
}
.cp-smaphoA03__mobile01 {
  position: absolute;
  top: 150%;
  left: 0;
  right: 0;
  width: 100%;
  transition: all 1s linear;
}
.cp-smaphoA03__mobile01.action01 {
  top: 0;
  transition: all 1s linear;
}
.cp-smaphoA03__mobile01.action02 {
  top: -15%;
  transition: all 1s linear;
}

/* .cp-smaphoA04 */
.cp-smaphoA04 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-smaphoA04__mobile01 {
  position: absolute;
  top: 150%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  transform: scale(0.6);
  transition: all 1s linear;
}
.cp-smaphoA04__mobile01.action01 {
  top: 0;
  transform: scale(1);
  transition: all 1s linear;
}
.cp-smaphoA04__mobile01 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoA04__mobile01 > div.bg {
  margin: calc((-210 * (750 / 563)) / 750 * 100%) auto 0;
  width: calc(713 / 750 * 100%);
  transform-origin: top center;
  transform: scale(calc(750 / 563));
}
.cp-smaphoA04__mobile01__inner {
  bottom: 0;
  height: 100%;
  overflow: hidden;
}
.cp-smaphoA04__mobile01__inner > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoA04__mobile01__inner > div.m01 > .spot {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.cp-smaphoA04__mobile01__inner > div.m02,
.cp-smaphoA04__mobile01__inner > div.m03,
.cp-smaphoA04__mobile01__inner > div.m04 {
  display: none;
}

.cp-smaphoA04__mobile01__inner > div.m01 {
  bottom: 0;
  background-color: #cee09a;
}

.cp-smaphoA04__mobile01__inner > div.m01 .btn01,
.cp-smaphoA04__mobile01__inner > div.m01 .btn02,
.cp-smaphoA04__mobile01__inner > div.m01 .btn03 {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(168 / 750 * 100%) 0 0 calc(60 / 750 * 100%);
  width: calc(120 / 750 * 100%);
}
.cp-smaphoA04__mobile01__inner > div.m01 .btn01 {
  cursor: pointer;
}
.cp-smaphoA04__mobile01__inner > div.m01 .btn02 {
  margin-left: calc(230 / 750 * 100%);
}
.cp-smaphoA04__mobile01__inner > div.m01 .btn03 {
  margin-left: calc(400 / 750 * 100%);
}

.cp-smaphoA04__mobile01__inner > div.m02 {
  background-color: #fff;
  margin: 0;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: all 0.3s linear;
}
.cp-smaphoA04__mobile01__inner > div.m02 img {
  opacity: 0;
}
.cp-smaphoA04__mobile01__inner > div.m02.small {
  margin: calc(166 / 750 * 100%) 0 0 calc(60 / 750 * 100%);
  width: calc(120 / 750 * 100vw);
  height: calc(120 / 750 * 100vw);
  border-radius: calc(8 / 750 * 100vw);
}
.cp-smaphoA04__mobile01__inner > div.m03.hide {
  transform: translateY(110%);
}

.cp-smaphoA04__mobile01__inner > div.m03 > div {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.cp-smaphoA04__mobile01__inner > div.m03 .parts01 {
  margin: calc(674 / 750 * 100%) 0 0 calc(32 / 750 * 100%);
  width: calc(336 / 750 * 100%);
}
.cp-smaphoA04__mobile01__inner > div.m03 .parts02 {
  margin: calc(939 / 750 * 100%) 0 0;
  width: 100%;
}
.cp-smaphoA04__mobile01__inner > div.m03 .parts03 {
  margin: calc(1092 / 750 * 100%) 0 0 calc(239 / 750 * 100%);
  width: calc(244 / 750 * 100%);
}
.cp-smaphoA04__mobile01__inner > div.m03 .parts04 {
  display: block;
  margin: calc(1438 / 750 * 100%) 0 0 calc(382 / 750 * 100%);
  width: calc(336 / 750 * 100%);
}
.cp-smaphoA04__mobile01__inner > div.m03 .btn01 {
  display: none;
  margin: calc(674 / 750 * 100%) 0 0 calc(32 / 750 * 100%);
  padding: calc(188 / 750 * 100%) 0 0;
  width: calc(336 / 750 * 100%);
  cursor: pointer;
}

.cp-smaphoA04__mobile01 .tap01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(100 / 750 * 100vw);
  height: calc(100 / 750 * 100vw);
  line-height: 0;
  font-size: 0;
  background-color: rgba(255, 255, 255, 0.7);
  border: 4px solid #ffde28;
  border-radius: calc(50 / 750 * 100vw);
  transform: scale(1);
  opacity: 0;
}
.cp-smaphoA04__mobile01 .tap01.tap {
  animation: animeTap01 0.7s linear;
}
.cp-smaphoA04__mobile01__inner > div.m02 .tap01 {
  right: auto;
  bottom: auto;
  margin: calc(594 / 750 * 100%) 0 0 calc(156 / 750 * 100%);
}
.cp-smaphoA04__mobile01__inner > div.m03 .tap01.type01 {
  display: block;
  right: auto;
  bottom: auto;
  margin: calc(1080 / 750 * 100%) 0 0 calc(311 / 750 * 100%);
}
.cp-smaphoA04__mobile01__inner > div.m03 .tap01.type02 {
  display: block;
  right: auto;
  bottom: auto;
  margin: calc(1436 / 750 * 100%) 0 0 calc(500 / 750 * 100%);
}

.cp-smaphoA04__mobile01 .tap03 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(120 / 750 * 100vw);
  height: calc(120 / 750 * 100vw);
  text-align: center;
  line-height: 1;
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  color: #f00;
}
.cp-smaphoA04__mobile01 .tap03 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp-smaphoA04__mobile01 .tap03 > div.circle {
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid #f00;
  border-radius: calc(60 / 750 * 100vw);
  transform: scale(1);
  animation: animeTap02 0.4s ease-out infinite alternate;
}
.cp-smaphoA04__mobile01__inner > div.m03 .tap03 {
  right: auto;
  bottom: auto;
  margin: calc(708 / 750 * 100%) 0 0 calc(140 / 750 * 100%);
}

/* Bコース(津波) */
/* .cp-sceneB01 */
.cp-sceneB01 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ececec;
  overflow: hidden;
}
.cp-sceneB01__inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cp-sceneB01__inner.outage::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 100%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}
.cp-sceneB01__bg01,
.cp-sceneB01__bg02 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-sceneB01__bg01 img,
.cp-sceneB01__bg02 img {
  width: 100%;
  height: 100%;
}
.cp-sceneB01__bg03,
.cp-sceneB01__bg04 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(570 / 1380 * 100%);
}
.cp-sceneB01__bg05,
.cp-sceneB01__bg06 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(880 / 1380 * 100%);
}
.cp-sceneB01__bg02,
.cp-sceneB01__bg04,
.cp-sceneB01__bg06 {
  display: none;
}

.cp-sceneB01__item01_01,
.cp-sceneB01__item01_02 {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(245 / 1380 * 100%) 0 0 calc(355 / 1380 * 100%);
  width: calc(211 / 1380 * 100%);
}
.cp-sceneB01__item01_02 {
  opacity: 0;
}

.cp-sceneB01__item02_01 {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(257 / 1380 * 100%) 0 0 calc(242 / 1380 * 100%);
  width: calc(126 / 1380 * 100%);
}
.cp-sceneB01__item02_02 {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(334 / 1380 * 100%) 0 0 calc(116 / 1380 * 100%);
  width: calc(190 / 1380 * 100%);
}
.cp-sceneB01__item02_02 {
  opacity: 0;
}

.cp-sceneB01__balloon01 {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(40 / 1380 * 100%) 0 0 calc(35 / 1380 * 100%);
  width: calc(349 / 1380 * 100%);
  z-index: 10;
}

.cp-sceneB01__chara00_01,
.cp-sceneB01__chara00_02,
.cp-sceneB01__chara01,
.cp-sceneB01__chara02,
.cp-sceneB01__chara03,
.cp-sceneB01__chara04,
.cp-sceneB01__chara05,
.cp-sceneB01__chara06,
.cp-sceneB01__chara07,
.cp-sceneB01__chara08 {
  position: absolute;
  opacity: 0;
}
.cp-sceneB01__chara00_01 img,
.cp-sceneB01__chara00_02 img,
.cp-sceneB01__chara01 img,
.cp-sceneB01__chara02 img,
.cp-sceneB01__chara03 img,
.cp-sceneB01__chara04 img,
.cp-sceneB01__chara05 img,
.cp-sceneB01__chara06 img,
.cp-sceneB01__chara07 img,
.cp-sceneB01__chara08 img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}
.cp-sceneB01__chara00_01 img,
.cp-sceneB01__chara00_02 img,
.cp-sceneB01__chara01 img,
.cp-sceneB01__chara03 img,
.cp-sceneB01__chara05 img,
.cp-sceneB01__chara07 img {
  opacity: 0;
}
.cp-sceneB01__chara00_01.chara01 img:nth-child(1), /*座り*/
.cp-sceneB01__chara00_01.chara02 img:nth-child(2), /*しゃがみ*/

.cp-sceneB01__chara00_02.chara01 img:nth-child(1), /*座り*/

.cp-sceneB01__chara01.chara01 img:nth-child(1), /*不安*/
.cp-sceneB01__chara01.chara02 img:nth-child(2), /*正面スマホ不安*/
.cp-sceneB01__chara01.chara03 img:nth-child(3), /*正面スマホ*/
.cp-sceneB01__chara01.chara04 img:nth-child(4), /*左静止*/

.cp-sceneB01__chara03.chara01 img:nth-child(1),
.cp-sceneB01__chara05.chara01 img:nth-child(1),
.cp-sceneB01__chara07.chara01 img:nth-child(1) {
  opacity: 1;
}

.cp-sceneB01 .point01_01 {
  /* 妻1 */
  top: calc(148 / 614 * 100%);
  left: calc(265 / 1380 * 100%);
  padding: 0 calc(310 / 1380 * 100%) 0 0;
  height: calc(310 / 614 * 100%);
}
.cp-sceneB01 .point01_02 {
  /* 妻2 */
  top: calc(155 / 614 * 100%);
  left: calc(195 / 1380 * 100%);
  padding: 0 calc(330 / 1380 * 100%) 0 0;
  height: calc(330 / 614 * 100%);
}
.cp-sceneB01 .point02_01 {
  /* 店員1 */
  top: calc(190 / 614 * 100%);
  left: calc(-340 / 1380 * 100%);
  padding: 0 calc(330 / 1380 * 100%) 0 0;
  height: calc(330 / 614 * 100%);
}
.cp-sceneB01 .point02_02 {
  /* 店員2 */
  top: calc(190 / 614 * 100%);
  left: calc(0 / 1380 * 100%);
  padding: 0 calc(330 / 1380 * 100%) 0 0;
  height: calc(330 / 614 * 100%);
}
.cp-sceneB01 .point03 {
  /* 女性客 */
  top: calc(165 / 614 * 100%);
  left: calc(330 / 1380 * 100%);
  padding: 0 calc(330 / 1380 * 100%) 0 0;
  height: calc(330 / 614 * 100%);
}
.cp-sceneB01 .point04 {
  /* 男性客 */
  top: calc(180 / 614 * 100%);
  left: calc(-400 / 1380 * 100%);
  padding: 0 calc(330 / 1380 * 100%) 0 0;
  height: calc(330 / 614 * 100%);
}

/* .cp-sceneB02 */
.cp-sceneB02 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ececec;
  overflow: hidden;
}
.cp-sceneB02__inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cp-sceneB02__bg01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-sceneB02__bg01 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.cp-sceneB02__chara01,
.cp-sceneB02__chara02 {
  position: absolute;
  opacity: 0;
}
.cp-sceneB02__chara01 {
  opacity: 1;
}
.cp-sceneB02__chara01 img,
.cp-sceneB02__chara02 img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}
.cp-sceneB02__chara01 img {
  opacity: 0;
}
.cp-sceneB02__chara01.chara01 img:nth-child(1) {
  /*不安*/
  opacity: 1;
}

.cp-sceneB02 .point01 {
  /* 妻 */
  top: calc(10 / 614 * 100%);
  left: 0;
  width: calc(950 / 100 * 100vw);
  height: calc(950 / 614 * 100%);
}

/* .cp-sceneB03 */
.cp-sceneB03 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ececec;
  overflow: hidden;
}
.cp-sceneB03__inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cp-sceneB03__bg01 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-sceneB03__bg01 img {
  width: 100%;
  height: 100%;
}

.cp-sceneB03__chara01,
.cp-sceneB03__chara02,
.cp-sceneB03__chara03,
.cp-sceneB03__chara04 {
  position: absolute;
  opacity: 0;
}
.cp-sceneB03__chara02,
.cp-sceneB03__chara03,
.cp-sceneB03__chara04 {
  opacity: 1;
}
.cp-sceneB03__chara01 img,
.cp-sceneB03__chara02 img,
.cp-sceneB03__chara03 img,
.cp-sceneB03__chara04 img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}
.cp-sceneB03__chara01 img,
.cp-sceneB03__chara02 img,
.cp-sceneB03__chara03 img,
.cp-sceneB03__chara04 img {
  opacity: 0;
}
.cp-sceneB03__chara01.chara01 img:nth-child(1), /*不安*/
.cp-sceneB03__chara01.chara02 img:nth-child(2), /*正面スマホ不安*/
.cp-sceneB03__chara01.chara03 img:nth-child(3), /*正面スマホ*/
.cp-sceneB03__chara01.chara04 img:nth-child(4), /*左静止*/

.cp-sceneB03__chara03.chara01 img:nth-child(1),
.cp-sceneB03__chara04.chara01 img:nth-child(1) {
  opacity: 1;
}

.cp-sceneB03 .point01 {
  /* 妻1 */
  top: calc(215 / 614 * 100%);
  left: calc(90 / 1286 * 100%);
  padding: 0 calc(390 / 1286 * 100%) 0 0;
  height: calc(390 / 614 * 100%);
}
.cp-sceneB03 .point02 {
  /* 妻2 */
  top: calc(215 / 614 * 100%);
  left: calc(-450 / 1286 * 100%);
  padding: 0 calc(390 / 1286 * 100%) 0 0;
  height: calc(390 / 614 * 100%);
}
.cp-sceneB03 .point03 {
  /* 女性客 */
  top: calc(170 / 614 * 100%);
  left: calc(420 / 1286 * 100%);
  padding: 0 calc(340 / 1286 * 100%) 0 0;
  height: calc(340 / 614 * 100%);
}
.cp-sceneB03 .point04 {
  /* 男性客 */
  top: calc(170 / 614 * 100%);
  left: calc(280 / 1286 * 100%);
  padding: 0 calc(340 / 1286 * 100%) 0 0;
  height: calc(340 / 614 * 100%);
}

/* .cp-smaphoB01 */
.cp-smaphoB01 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-smaphoB01__mobile01 {
  position: absolute;
  top: 150%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  transform: scale(0.6);
  transition: all 1s linear;
}
.cp-smaphoB01__mobile01.action01 {
  top: 0;
  transform: scale(1);
  transition: all 1s linear;
}
.cp-smaphoB01__mobile01 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoB01__mobile01 > div.bg {
  margin: calc((-210 * (750 / 563)) / 750 * 100%) auto 0;
  width: calc(713 / 750 * 100%);
  transform-origin: top center;
  transform: scale(calc(750 / 563));
}
.cp-smaphoB01__mobile01__inner {
  bottom: 0;
  height: 100%;
  overflow: hidden;
}
.cp-smaphoB01__mobile01__inner > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoB01__mobile01__inner > div.m01,
.cp-smaphoB01__mobile01__inner > div.m02 {
  display: none;
}
.cp-smaphoB01__mobile01__inner > div.m01 {
  position: relative;
}
.cp-smaphoB01__mobile01__inner > div.m01 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.cp-smaphoB01__mobile01__inner > div.m01 > div.shadow {
  display: none;
  bottom: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.cp-smaphoB01__mobile01__inner > div.lock {
  bottom: 0;
  background-color: #cee09a;
}
.cp-smaphoB01__mobile01__inner > div.lock.hide {
  transform: translateY(-160%);
  transition: all 0.5s linear;
}
.cp-smaphoB01__mobile01__inner .lock__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: calc(410 / 750 * 100%) 0 0;
  display: flex;
  flex-direction: column;
}
.cp-smaphoB01__mobile01__inner .lock__inner li {
  position: relative;
}
.cp-smaphoB01__mobile01__inner .lock__inner li.disabled::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  line-height: 0;
  font-size: 0;
}
.cp-smaphoB01__mobile01__inner .lock__inner li > div {
  margin: 0 auto;
  width: calc(718 / 750 * 100%);
  position: relative;
}
.cp-smaphoB01__mobile01__inner .lock__inner li > div.btn01 {
  margin-bottom: calc(20 / 750 * 100%);
  cursor: pointer;
}
.cp-smaphoB01__mobile01__inner .lock__inner li > div.btn01 img {
  display: block;
  margin: 0 auto;
  width: 0;
}
.cp-smaphoB01__mobile01__inner .lock__inner li > div.btn02 {
  margin-bottom: calc(20 / 750 * 100%);
  cursor: pointer;
}
.cp-smaphoB01__mobile01__inner .lock__inner li > div.btn02 img {
  display: block;
  margin: 0 auto;
  width: 0;
}
.cp-smaphoB01__mobile01__inner .lock__inner li > div.btn01.expand img,
.cp-smaphoB01__mobile01__inner .lock__inner li > div.btn02.expand img {
  width: 100%;
  transition: all 0.45s ease-in-out;
}

.cp-smaphoB01__mobile01 .tap01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(100 / 750 * 100vw);
  height: calc(100 / 750 * 100vw);
  line-height: 0;
  font-size: 0;
  background-color: rgba(255, 255, 255, 0.7);
  border: 4px solid #ffde28;
  border-radius: calc(50 / 750 * 100vw);
  transform: scale(1);
  opacity: 0;
}
.cp-smaphoB01__mobile01__inner > div.m04 .tap01 {
  bottom: auto;
  margin: calc(1088 / 750 * 100%) auto 0;
}
.cp-smaphoB01__mobile01 .tap01.tap {
  animation: animeTap01 0.7s linear;
}

.cp-smaphoB01__mobile01 .tap03 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(120 / 750 * 100vw);
  height: calc(120 / 750 * 100vw);
  text-align: center;
  line-height: 1;
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  color: #f00;
}
.cp-smaphoB01__mobile01 .tap03 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp-smaphoB01__mobile01 .tap03 > div.circle {
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid #f00;
  border-radius: calc(60 / 750 * 100vw);
  transform: scale(1);
  animation: animeTap02 0.4s ease-out infinite alternate;
}

/* .cp-smaphoB02 */
.cp-smaphoB02 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-smaphoB02__mobile01 {
  position: absolute;
  top: 150%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  transform: scale(0.6);
  transition: all 1s linear;
}
.cp-smaphoB02__mobile01.action01 {
  top: 0;
  transform: scale(1);
  transition: all 1s linear;
}
.cp-smaphoB02__mobile01 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoB02__mobile01 > div.bg {
  margin: calc((-210 * (750 / 563)) / 750 * 100%) auto 0;
  width: calc(713 / 750 * 100%);
  transform-origin: top center;
  transform: scale(calc(750 / 563));
}
.cp-smaphoB02__mobile01__inner {
  bottom: 0;
  height: 100%;
  overflow: hidden;
}
.cp-smaphoB02__mobile01__inner > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoB02__mobile01__inner > div.m02,
.cp-smaphoB02__mobile01__inner > div.m03,
.cp-smaphoB02__mobile01__inner > div.m05,
.cp-smaphoB02__mobile01__inner > div.m06,
.cp-smaphoB02__mobile01__inner > div.m07 {
  display: none;
}
.cp-smaphoB02__mobile01__inner > div.m03 {
  background-color: #fff;
  margin: 0;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: all 0.3s linear;
}
.cp-smaphoB02__mobile01__inner > div.m03 img {
  opacity: 0;
}
.cp-smaphoB02__mobile01__inner > div.m03.small {
  margin: calc(166 / 750 * 100%) 0 0 calc(400 / 750 * 100%);
  width: calc(120 / 750 * 100vw);
  height: calc(120 / 750 * 100vw);
  border-radius: calc(8 / 750 * 100vw);
}

.cp-smaphoB02__mobile01__inner > div.m05 {
  left: 0;
  transition: all 0.3s linear;
}
.cp-smaphoB02__mobile01__inner > div.m05.hide {
  left: 100%;
}

.cp-smaphoB02__mobile01__inner > div.btn01 {
  margin: calc(166 / 750 * 100%) 0 0 calc(400 / 750 * 100%);
  width: calc(120 / 750 * 100%);
}
.cp-smaphoB02__mobile01__inner > div.btn02 {
  display: none;
  margin: calc(1912 / 750 * 100%) 0 0 calc(15 / 750 * 100%);
  width: calc(720 / 750 * 100vw);
  height: calc(140 / 750 * 100vw);
  cursor: pointer;
}

.cp-smaphoB02__mobile01 .tap01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(100 / 750 * 100vw);
  height: calc(100 / 750 * 100vw);
  line-height: 0;
  font-size: 0;
  background-color: rgba(255, 255, 255, 0.7);
  border: 4px solid #ffde28;
  border-radius: calc(50 / 750 * 100vw);
  transform: scale(1);
  opacity: 0;
}
.cp-smaphoB02__mobile01__inner > div.m03 .tap01 {
  right: auto;
  bottom: auto;
  margin: calc(445 / 750 * 100%) 0 0 calc(116 / 750 * 100%);
}
.cp-smaphoB02__mobile01__inner .tap01.tap {
  animation: animeTap01 0.7s linear;
}

.cp-smaphoB02__mobile01__inner > div.tap03 {
  display: none;
  top: auto;
  bottom: 0;
  margin: calc(1922 / 750 * 100%) 0 0 calc(315 / 750 * 100%);
  width: calc(120 / 750 * 100vw);
  height: calc(120 / 750 * 100vw);
  text-align: center;
  line-height: 1;
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  color: #f00;
}
.cp-smaphoB02__mobile01__inner > div.tap03 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp-smaphoB02__mobile01__inner > div.tap03 > div.circle {
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid #f00;
  border-radius: calc(60 / 750 * 100vw);
  transform: scale(1);
  animation: animeTap02 0.4s ease-out infinite alternate;
}

/* .cp-smaphoB03 */
.cp-smaphoB03 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.cp-smaphoB03__mobile01 {
  position: absolute;
  top: 150%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  transform: scale(0.6);
  transition: all 1s linear;
}
.cp-smaphoB03__mobile01.action01 {
  top: 0;
  transform: scale(1);
  transition: all 1s linear;
}
.cp-smaphoB03__mobile01 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoB03__mobile01 > div.bg {
  margin: calc((-210 * (750 / 563)) / 750 * 100%) auto 0;
  width: calc(713 / 750 * 100%);
  transform-origin: top center;
  transform: scale(calc(750 / 563));
}
.cp-smaphoB03__mobile01__inner {
  bottom: 0;
  height: 100%;
  overflow: hidden;
}
.cp-smaphoB03__mobile01__inner > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.cp-smaphoB03__mobile01__inner > div.m01 > .spot {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.cp-smaphoB03__mobile01__inner > div.m02,
.cp-smaphoB03__mobile01__inner > div.m03,
.cp-smaphoB03__mobile01__inner > div.m04,
.cp-smaphoB03__mobile01__inner > div.m05 {
  display: none;
}

.cp-smaphoB03__mobile01__inner > div.m01 {
  bottom: 0;
  background-color: #cee09a;
}

.cp-smaphoB03__mobile01__inner > div.m01 .btn01,
.cp-smaphoB03__mobile01__inner > div.m01 .btn02,
.cp-smaphoB03__mobile01__inner > div.m01 .btn03 {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(168 / 750 * 100%) 0 0 calc(60 / 750 * 100%);
  width: calc(120 / 750 * 100%);
}
.cp-smaphoB03__mobile01__inner > div.m01 .btn01 {
  cursor: pointer;
}
.cp-smaphoB03__mobile01__inner > div.m01 .btn02 {
  margin-left: calc(230 / 750 * 100%);
}
.cp-smaphoB03__mobile01__inner > div.m01 .btn03 {
  margin-left: calc(400 / 750 * 100%);
}

.cp-smaphoB03__mobile01__inner > div.m02,
.cp-smaphoB03__mobile01__inner > div.m04 {
  background-color: #fff;
  margin: 0;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: all 0.3s linear;
}
.cp-smaphoB03__mobile01__inner > div.m02 img,
.cp-smaphoB03__mobile01__inner > div.m04 img {
  opacity: 0;
}
.cp-smaphoB03__mobile01__inner > div.m02.small,
.cp-smaphoB03__mobile01__inner > div.m04.small {
  margin: calc(166 / 750 * 100%) 0 0 calc(60 / 750 * 100%);
  width: calc(120 / 750 * 100vw);
  height: calc(120 / 750 * 100vw);
  border-radius: calc(8 / 750 * 100vw);
}
.cp-smaphoB03__mobile01__inner > div.m03 {
  transform: translateY(0);
  transition: all 0.8s linear;
}
.cp-smaphoB03__mobile01__inner > div.m03.hide {
  transform: translateY(110%);
}

.cp-smaphoB03__mobile01__inner > div.m02 > div {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.cp-smaphoB03__mobile01__inner > div.m02 .btn01 {
  display: none;
  margin: calc(812 / 750 * 100%) 0 0 calc(32 / 750 * 100%);
  padding: calc(106 / 750 * 100%) 0 0;
  width: calc(686 / 750 * 100%);
  cursor: pointer;
}

.cp-smaphoB03__mobile01 .tap01 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(100 / 750 * 100vw);
  height: calc(100 / 750 * 100vw);
  line-height: 0;
  font-size: 0;
  background-color: rgba(255, 255, 255, 0.7);
  border: 4px solid #ffde28;
  border-radius: calc(50 / 750 * 100vw);
  transform: scale(1);
  opacity: 0;
}
.cp-smaphoB03__mobile01 .tap01.tap {
  animation: animeTap01 0.7s linear;
}

.cp-smaphoB03__mobile01 .tap03 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: calc(120 / 750 * 100vw);
  height: calc(120 / 750 * 100vw);
  text-align: center;
  line-height: 1;
  font-size: calc(14 / 375 * 100vw);
  font-weight: bold;
  color: #f00;
}
.cp-smaphoB03__mobile01 .tap03 > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp-smaphoB03__mobile01 .tap03 > div.circle {
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid #f00;
  border-radius: calc(60 / 750 * 100vw);
  transform: scale(1);
  animation: animeTap02 0.4s ease-out infinite alternate;
}
.cp-smaphoB03__mobile01__inner > div.m02 .tap03 {
  right: auto;
  bottom: auto;
  margin: calc(803 / 750 * 100%) 0 0 calc(315 / 750 * 100%);
}

/* .contents01 */
.contents01 {
  padding: 60px 20px 50px;
  width: 100%;
  position: relative;
  background: #fff url(/images/common/bg01.png) repeat center top / 160px;
}
.contents01__block01 {
  margin: 0 auto 40px;
  width: 814px;
  display: flex;
  justify-content: space-between;
}
.contents01__block01--left {
  width: 390px;
  position: relative;
}
.contents01__block01--right {
  width: 344px;
}
.contents01__title01 {
  margin: -30px auto 25px;
  width: 275px;
}
.contents01__text01 {
  margin: 0 auto 28px;
  width: 100%;
  text-align: center;
  line-height: 1.6;
  font-size: 16px;
  font-weight: bold;
  color: #00003e;
}
.contents01__text01 p + p {
  margin: 12px 0 0;
}
.contents01__banner01 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 280px;
}
.contents01__banner01 a {
  display: block;
}
.contents01__mobile01 {
  margin: 0 auto;
  padding: 43px 0 0;
  width: 344px;
  height: 588px;
  background: url(/images/common/mobile01.png) no-repeat left top / 100%;
}
.contents01__mobile01__inner {
  margin: 0 auto;
  width: 308px;
  height: 526px;
  border-radius: 12px;
  overflow: hidden;
}
.contents01__mobile01 iframe {
  display: block;
  margin: 0 auto;
  width: 308px;
  height: 526px;
}
.contents01__text02 {
  margin: 0 auto 55px;
  width: 834px;
  text-align: center;
  line-height: 1.7;
  font-size: 11px;
  color: #000;
}
.contents01__banner02 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 532px;
  gap: 20px;
  margin: 0 auto 30px;
}
.contents01__banner02 a {
  display: block;
  width: 256px;
}
.contents01__sns01 {
  margin: 0 auto;
  width: 160px;
  display: flex;
  justify-content: space-between;
}
.contents01__sns01 a {
  display: block;
  width: 36px;
}

.is-sp {
  display: none;
}
.is-pc {
  display: block;
}

/*===============================================*/
/* SP */
/*===============================================*/
@media screen and (max-width: 850px) {
  .is-sp {
    display: block;
  }
  .is-pc {
    display: none;
  }

  .contents01 {
    padding: 30px 20px;
    background-size: calc(160 / 850 * 100%);
  }
  .contents01__block01 {
    margin: 0 auto 40px;
    width: 100%;
    display: flex;
  }
  .contents01__block01--left {
    display: none;
  }
  .contents01__block01--right {
    width: 100%;
  }
  .contents01__mobile01 {
    margin: 0 auto;
    padding: 52px 0 0;
    width: 426px;
    height: 728px;
    background: url(/images/common/mobile01.png) no-repeat left top / 100%;
  }
  .contents01__mobile01__inner {
    margin: 0 auto;
    width: 382px;
    height: 652px;
    border-radius: 12px;
    overflow: hidden;
  }
  .contents01__mobile01 iframe {
    display: block;
    margin: 0 auto;
    width: 382px;
    height: 652px;
  }
  .contents01__text02 {
    margin: 0 auto 40px;
    width: 100%;
    max-width: 568px;
    line-height: 1.4;
  }
  .contents01__text02 span {
    display: inline-block;
  }
  .contents01__banner02 a {
    width: 310px;
  }
  .contents01__sns01 {
    margin: 0 auto;
    width: 176px;
    display: flex;
    justify-content: space-between;
  }
  .contents01__sns01 a {
    display: block;
    width: 40px;
  }
}