@charset "UTF-8";
/* hover
=================================================================== */
/* ================================================ vw */
/* ================================================ vh */
/* common
=================================================================== */
/* layout
=================================================================== */
/* video / iframe
=================================================================== */
/* imgCover
=================================================================== */
/* mask
=================================================================== */
/* background
=================================================================== */
/* flex
=================================================================== */
/* animation delay
=================================================================== */
/* 3d
=================================================================== */
/* font
=================================================================== */
/* textTate
=================================================================== */
/* form
=================================================================== */
/* ============================================================================================ default */
/* ================================================ color */
:root {
  --color-body: 255, 233, 247;
  --color-chara: 236, 117, 172;
  --color-key-1: 117, 202, 214;
  --color-key-2: 252, 233, 0;
  --color-tabBg-default: 248, 223, 232;
  --color-tabBg-1: 223, 236, 255;
  --color-white: 255, 255, 255;
  --color-bgArrow-1: #5dc1cf;
  --color-bgArrow-2: #f3b3cf;
  --color-bgArrow-3: #ffe33f;
}

/* ================================================ body */
body {
  font-size: 12px;
  font-family: YakuHanJP, "zen-kaku-gothic-antique", sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1.8;
  color: #fff;
  background-color: rgba(var(--color-body), 1);
}

a, a:link, a:visited, a:hover {
  color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

::-moz-selection {
  color: #fff;
}

::selection {
  color: #fff;
}

/* ================================================ webfont */
.fontEn {
  font-family: "dinosaur", sans-serif;
  font-weight: 500;
}

.fontStyle-italic {
  font-style: italic;
}

/* ============================================================================================ common */
/* --------------------------------------- mask */
.mask {
  text-indent: -9999px;
  height: 0;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-box-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
  -webkit-mask-box-position: center center;
  mask-size: 100% auto;
  -webkit-mask-size: 100% auto;
  -webkit-mask-box-size: 100% auto;
}

/* --------------------------------------- wrapper */
.wrapper {
  position: relative;
  min-height: 100vh;
  z-index: 4;
}

/* ============================================================================= hoverText */
/* --------------------------------------- hoverText*/
.hoverText__wrapper {
  padding-top: 0;
  padding-bottom: 0;
}

.hoverText {
  position: relative;
  overflow: hidden;
}

.hoverText__base, .hoverText__position {
  white-space: nowrap;
  text-align: left;
  font-size: 0;
  line-height: 1;
}
.hoverText__base > span, .hoverText__position > span {
  display: inline-block;
  height: 100%;
  line-height: 1;
  min-width: 0.2em;
}

.hoverText__base {
  position: relative;
}
.hoverText__base > span {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

.hoverText__position {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hoverText__position > span {
  -webkit-transform: translateY(120%);
          transform: translateY(120%);
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

/* ============================================================================================ bgPattern */
.bgPattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bgPattern .st0 {
  fill: var(--color-bgArrow-1);
}
.bgPattern .st1 {
  fill: var(--color-bgArrow-2);
}
.bgPattern .st2 {
  fill: var(--color-bgArrow-3);
}

/* --------------------------------------- bgPattern__inner */
.bgPattern__inner {
  position: absolute;
  width: 183.0161054173%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* --------------------------------------- bgPattern__svg */
.bgPattern__svg {
  position: absolute;
  width: auto;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
}

/* ============================================================================================ bodyFrame */
.bodyFrame {
  position: fixed;
  width: 100%;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------- bodyFrame__inner */
.bodyFrame__inner {
  height: 42px;
  mask-repeat: repeat-x;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-box-repeat: repeat-x;
  mask-position: left top;
  -webkit-mask-position: left top;
  -webkit-mask-box-position: left top;
  mask-size: auto 100%;
  -webkit-mask-size: auto 100%;
  -webkit-mask-box-size: auto 100%;
}

/* --------------------------------------- bodyFrame top */
.bodyFrame--top {
  top: 0;
  -webkit-transform: translateY(-28.5714285714%);
          transform: translateY(-28.5714285714%);
  z-index: 50;
}
.bodyFrame--top .bodyFrame__inner {
  mask-image: url(../img/common/bodyFrame--top.svg);
  -webkit-mask-image: url(../img/common/bodyFrame--top.svg);
  background-color: rgba(var(--color-key-2), 1);
}

/* --------------------------------------- bodyFrame bottom */
.bodyFrame--bottom {
  bottom: 0;
}
.bodyFrame--bottom .bodyFrame__inner {
  mask-image: url(../img/common/bodyFrame--bottom.svg);
  -webkit-mask-image: url(../img/common/bodyFrame--bottom.svg);
  background-color: rgba(var(--color-key-1), 1);
}

/* ============================================================================================ footer */
.footer {
  position: fixed;
  width: 100%;
  height: 42px;
  bottom: 0;
  left: 0;
  z-index: 5;
}

/* --------------------------------------- footerInner */
.footerInner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: 1;
  font-size: min(10 * 100 / 1366 * 1vw, 10px);
}

/* --------------------------------------- footerInner__block */
.footerInner__block {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-top: 5px;
  padding-left: 95px;
  padding-right: 12px;
}

.footerInner__blockTarget {
  -ms-flex-item-align: center;
      align-self: center;
}

/* ========================================================================= globalLogo */
.globalLogo {
  position: relative;
  width: 65px;
  -webkit-transform: translateY(8%);
          transform: translateY(8%);
}

.globalLogo__inner {
  padding-top: 30%;
  mask-image: url(../img/common/globalLogo.svg);
  -webkit-mask-image: url(../img/common/globalLogo.svg);
  background-color: #fff;
}

/* --------------------------------------- footer__globalLogo */
.footer__globalLogo, a.footer__globalLogo {
  position: absolute;
  top: 0;
  height: 100%;
  left: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* ========================================================================= footerCopy__sideLink */
.footerCopy__sideLink--sp {
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

a.footerCopy__sideLink {
  margin-right: 15px;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #fff;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* ============================================================================================ wrapperInner */
.wrapperInner {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* ============================================================================================ mainFrame */
.mainFrame {
  position: relative;
  width: 462px;
  border-radius: 17px;
  background-color: rgba(var(--color-chara), 1);
  margin-left: auto;
  margin-right: auto;
  -webkit-box-shadow: 8px 8px 0 rgba(var(--color-chara), 0.2);
          box-shadow: 8px 8px 0 rgba(var(--color-chara), 0.2);
}

.mainFrame__paddingTop {
  position: relative;
  padding-top: 167.7489177489%;
  overflow: hidden;
}

/* ========================================================================= timerTitle */
/* --------------------------------------- timerTitle wrapper */
.timerTitle__wrapper {
  position: absolute;
  width: 100%;
  height: 19.7419354839%;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* --------------------------------------- timerTitle */
.timerTitle {
  width: 81.1688311688%;
  margin-left: auto;
  margin-right: auto;
}

.timerTitle__inner {
  padding-top: 24.5333333333%;
  -webkit-mask-image: url(../img/contents/timerTitle.svg);
          mask-image: url(../img/contents/timerTitle.svg);
  background-color: rgba(var(--color-white), 1);
}

/* ============================================================================================ timerArticle */
.timerArticle {
  position: absolute;
  width: 100%;
  padding-left: 1.7316017316%;
  padding-right: 1.7316017316%;
}

/* ============================================================================================ timerNav */
.timerNav {
  top: 19.7419354839%;
}

/* --------------------------------------- timerNav__list */
.timerNav__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* --------------------------------------- timerNav__target */
.timerNav__target {
  width: 49.1031390135%;
  cursor: pointer;
}

.timerNav__targetInner {
  position: relative;
  padding-top: 46.5753424658%;
}

/* ========================================================================= timerNav__bg */
.timerNav__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 92.1568627451%;
  background-color: rgba(var(--color-key-1), 1);
}

/* --------------------------------------- timerNav__corner */
.timerNav__corner {
  position: absolute;
  width: 5.4794520548%;
  z-index: 2;
}
.timerNav__corner > span {
  display: block;
  padding-top: 100%;
  background-color: rgba(var(--color-chara), 1);
  border-radius: 50%;
}
.timerNav__corner:nth-child(1) {
  top: 0;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.timerNav__corner:nth-child(2) {
  top: 0;
  right: 0;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.timerNav__corner:nth-child(3) {
  right: 0;
  bottom: 0;
  -webkit-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
}
.timerNav__corner:nth-child(4) {
  left: 0;
  bottom: 0;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}

/* ========================================================================= timerNav__title */
/* --------------------------------------- timerNav__targetMain */
.timerNav__targetMain {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* --------------------------------------- timerNav__title */
.timerNav__title .hoverText__base, .timerNav__title .hoverText__position {
  font-size: 18px;
  text-align: center;
}

/* --------------------------------------- timerNav__icon */
.timerNav__icon {
  width: 18.2648401826%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3%;
  margin-top: -3.5%;
}

.timerNav__iconInner {
  position: relative;
  padding-top: 100%;
  border-radius: 50%;
  background-color: #fff;
}
.timerNav__iconInner::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-box-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
  -webkit-mask-box-position: center center;
  mask-size: 100% auto;
  -webkit-mask-size: 100% auto;
  -webkit-mask-box-size: 100% auto;
  background-color: rgba(var(--color-key-1), 1);
}

.timerNav--default .timerNav__iconInner::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-box-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
  -webkit-mask-box-position: center center;
  mask-size: 100% auto;
  -webkit-mask-size: 100% auto;
  -webkit-mask-box-size: 100% auto;
  background-color: #fff;
  mask-image: url(../img/contents/navIcon--default--bg.svg);
  -webkit-mask-image: url(../img/contents/navIcon--default--bg.svg);
}
.timerNav--default .timerNav__iconInner::after {
  mask-image: url(../img/contents/navIcon--timer.svg);
  -webkit-mask-image: url(../img/contents/navIcon--timer.svg);
}

.timerNav--pomodoro .timerNav__iconInner::after {
  mask-image: url(../img/contents/navIcon--pomodoro.svg);
  -webkit-mask-image: url(../img/contents/navIcon--pomodoro.svg);
}

/* ============================================================================================ timerEvent */
.timerEvent {
  top: 32.9032258065%;
  z-index: 3;
}

.timerEvent__inner {
  position: relative;
  padding-top: 98.2062780269%;
  border-radius: 8px;
  background-color: rgba(var(--color-tabBg-default), 1);
}

/* ============================================================================================ timerEvent */
.teSection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ========================================================================= timerCountBox */
.timerCountBox {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}

.timerCountBox__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* --------------------------------------- timerCountBox__target */
.timerCountBox__target {
  position: relative;
  width: 19.0582959641%;
  height: 115px;
  text-align: center;
}

.timerCount--minute, .timerCount--second {
  line-height: 85px;
}

.timerCount--dot {
  position: relative;
  width: 9.4170403587%;
  line-height: 52px;
  z-index: 2;
}

/* --------------------------------------- text */
.timerCount__num--p, .timerCount__dot--p {
  height: 100%;
  font-size: 158px;
}

/* ========================================================================= timerCountBox */
.timerCountBox__info {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.timerCountBox__info--p {
  font-size: 18px;
  height: 29px;
  line-height: 22px;
  padding: 0 12px;
  border-style: solid;
  border-width: 2px;
  border-radius: 9999px;
  -webkit-transform: translateY(110%);
          transform: translateY(110%);
}

/* --------------------------------------- timerCountBox__info position */
.timerCountBox__infoWrapper--start, .timerCountBox__infoWrapper--prev, .timerCountBox__infoWrapper--break {
  position: absolute;
  left: 50%;
  font-size: 0;
  white-space: nowrap;
  line-height: 0;
  z-index: 3;
  pointer-events: none;
}

.timerCountBox__infoWrapper--start, .timerCountBox__infoWrapper--break {
  top: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.timerCountBox__infoWrapper--prev {
  bottom: 0;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.timerCountBox__infoWrapper--prev .timerCountBox__info--p {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

/* --------------------------------------- timerCountBox__info color */
.timerCountBox__info--work .timerCountBox__info--p {
  color: rgba(var(--color-key-1), 1);
  background-color: rgba(var(--color-key-2), 1);
  border-color: rgba(var(--color-key-1), 1);
}

.timerCountBox__info--break .timerCountBox__info--p {
  color: rgba(var(--color-key-2), 1);
  background-color: rgba(var(--color-key-1), 1);
  border-color: rgba(var(--color-key-2), 1);
}

.timerCountBox__infoWrapper--break .timerCountBox__info--p {
  color: rgba(var(--color-key-2), 1);
  background-color: rgba(var(--color-key-1), 1);
  border-color: rgba(var(--color-key-2), 1);
}

/* ============================================================================================ teSection__complete */
.teSection__default, .teSection__complete {
  pointer-events: none;
}

/* ========================================================================= completeBg__list */
.completeBg__list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* --------------------------------------- completeBg__target */
.completeBg__target {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.2s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.2s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.completeBg__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------------- completeBg__target svg */
.completeBg__target--default .completeBg__svg .st0 {
  fill: #75cad6;
}
.completeBg__target--default .completeBg__svg .st1 {
  fill: #8f70ae;
}
.completeBg__target--default .completeBg__svg .st2 {
  fill: #e75297;
}
.completeBg__target--default .completeBg__svg .st3 {
  fill: #fff;
}

.completeBg__target--cinnamon .completeBg__svg .st0 {
  fill: #ffe791;
}
.completeBg__target--cinnamon .completeBg__svg .st1 {
  fill: #fff;
}
.completeBg__target--cinnamon .completeBg__svg .st2 {
  fill: #85b1df;
}
.completeBg__target--cinnamon .completeBg__svg .st3 {
  fill: #f09dc1;
}

.completeBg__target--pompompurin .completeBg__svg .st0 {
  fill: #e95550;
}
.completeBg__target--pompompurin .completeBg__svg .st1 {
  fill: #a1d6dc;
}
.completeBg__target--pompompurin .completeBg__svg .st2 {
  fill: #ffe57a;
}

.completeBg__target--hangyodon .completeBg__svg .st0 {
  fill: #ee8365;
}
.completeBg__target--hangyodon .completeBg__svg .st1 {
  fill: #7dccf3;
}
.completeBg__target--hangyodon .completeBg__svg .st2 {
  fill: #73c6c7;
}

/* ========================================================================= completeChara__list */
.completeChara__list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* --------------------------------------- completeChara__target */
.completeChara__target {
  position: absolute;
  width: 41.7040358744%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  bottom: 0;
}

/* --------------------------------------- completeChara__padding */
.completeChara__padding {
  position: relative;
  padding-top: 72.5806451613%;
}

/* --------------------------------------- completeChara__parts */
.completeChara__parts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.completeChara__partsInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  top: 7.5%;
}

/* --------------------------------------- partsFace partsHand */
.completeChara__partsFace--img, .completeChara__partsHand--img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.completeChara__partsFace--img:after, .completeChara__partsHand--img:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.completeChara__partsFace {
  z-index: 1;
  overflow: hidden;
}

.completeChara__partsHand {
  z-index: 2;
}

/* partsFace partsHand img */
.completeChara__target--cinnamon .completeChara__partsFace--img::after {
  background-image: url(../img/contents/complete/cinnamon--face.png?20250918);
}
.completeChara__target--cinnamon .completeChara__partsHand--img::after {
  background-image: url(../img/contents/complete/cinnamon--hand.png?20250918);
}

.completeChara__target--pompompurin .completeChara__partsFace--img::after {
  background-image: url(../img/contents/complete/pompompurin--face.png?20250918);
}
.completeChara__target--pompompurin .completeChara__partsHand--img::after {
  background-image: url(../img/contents/complete/pompompurin--hand.png?20250918);
}

.completeChara__target--hangyodon .completeChara__partsFace--img::after {
  background-image: url(../img/contents/complete/hangyodon--face.png?20250922);
}
.completeChara__target--hangyodon .completeChara__partsHand--img::after {
  background-image: url(../img/contents/complete/hangyodon--hand.png?20250918);
}

.completeChara__partsHand--img {
  opacity: 0;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.completeChara__partsFace--img {
  -webkit-transform: translateY(-6%);
          transform: translateY(-6%);
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.8s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.8s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.completeChara__partsFace--img::after {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  opacity: 0;
}

.is--tool--pomodoro.is--chara--cinnamon.timer--complete.timer--complete--charaShow .completeChara__target--cinnamon .completeChara__partsFace--img {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
}
.is--tool--pomodoro.is--chara--cinnamon.timer--complete.timer--complete--charaShow .completeChara__target--cinnamon .completeChara__partsFace--img::after {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  opacity: 1;
}
.is--tool--pomodoro.is--chara--cinnamon.timer--complete.timer--complete--charaShow .completeChara__target--cinnamon .completeChara__partsHand--img {
  opacity: 1;
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
}

.is--tool--pomodoro.is--chara--pompompurin.timer--complete.timer--complete--charaShow .completeChara__target--pompompurin .completeChara__partsFace--img {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
}
.is--tool--pomodoro.is--chara--pompompurin.timer--complete.timer--complete--charaShow .completeChara__target--pompompurin .completeChara__partsFace--img::after {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  opacity: 1;
}
.is--tool--pomodoro.is--chara--pompompurin.timer--complete.timer--complete--charaShow .completeChara__target--pompompurin .completeChara__partsHand--img {
  opacity: 1;
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
}

.is--tool--pomodoro.is--chara--hangyodon.timer--complete.timer--complete--charaShow .completeChara__target--hangyodon .completeChara__partsFace--img {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
}
.is--tool--pomodoro.is--chara--hangyodon.timer--complete.timer--complete--charaShow .completeChara__target--hangyodon .completeChara__partsFace--img::after {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  opacity: 1;
}
.is--tool--pomodoro.is--chara--hangyodon.timer--complete.timer--complete--charaShow .completeChara__target--hangyodon .completeChara__partsHand--img {
  opacity: 1;
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
}

/* ========================================================================= teSection__completeTitle */
.teSection__completeTitle {
  position: absolute;
  width: 100%;
  left: 0;
  top: 29%;
  z-index: 3;
}

/* --------------------------------------- teSection__completeTitle p */
.teSection__completeTitle--p {
  position: relative;
  font-size: 0;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
}
.teSection__completeTitle--p > span {
  display: inline-block;
  font-size: 83px;
  height: 83px;
  line-height: 80px;
  -webkit-transform: translateY(110%);
          transform: translateY(110%);
}

.teSection__completeTitle--p > span {
  min-width: 0.3em;
  margin: 0 -0.02em;
}

/* ============================================================================================ timerBtnArticle */
.timerBtnArticle {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

/* --------------------------------------- timerBtn__padding */
.timerBtn__padding {
  position: relative;
  padding-top: 17.7489177489%;
}

/* --------------------------------------- timerBtn__inner */
.timerBtn__inner {
  position: absolute;
  width: 96.5367965368%;
  height: 85.3658536585%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* ========================================================================= timerBtn__target */
.timerBtn__target {
  position: absolute;
  height: 100%;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 7px;
}

/* --------------------------------------- timerBtn__inner */
.timerBtn__target--inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* ========================================================================= timerBtn edit */
.timerBtn--edit, .timerBtn--reset {
  width: 24.66367713%;
  left: 0;
  border-width: 2px;
  border-style: solid;
}
.timerBtn--edit .timerBtn__title, .timerBtn--reset .timerBtn__title {
  height: 100%;
  color: rgba(var(--color-key-2), 1);
  -webkit-transform: translateY(5%);
          transform: translateY(5%);
}
.timerBtn--edit .hoverText__base, .timerBtn--edit .hoverText__position, .timerBtn--reset .hoverText__base, .timerBtn--reset .hoverText__position {
  text-align: center;
}
.timerBtn--edit .hoverText__base > span, .timerBtn--edit .hoverText__position > span, .timerBtn--reset .hoverText__base > span, .timerBtn--reset .hoverText__position > span {
  font-size: 22px;
}

.timerBtn--edit {
  border-color: rgba(var(--color-key-2), 1);
}

.timerBtn--reset {
  border-color: rgba(var(--color-key-1), 1);
}

/* --------------------------------------- timerBtn__editIcon */
.timerBtn__editIcon {
  -ms-flex-item-align: center;
      align-self: center;
  width: 18.1818181818%;
  margin-left: 4%;
}

.timerBtn__editIcon--inner {
  position: relative;
  padding-top: 100%;
}

.timerBtn__editIcon--1, .timerBtn__editIcon--2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.timerBtn__editIcon--1 {
  mask-image: url(../img/contents/btnEdit__icon--1.svg);
  -webkit-mask-image: url(../img/contents/btnEdit__icon--1.svg);
  background-color: rgba(var(--color-key-1), 1);
}

.timerBtn__editIcon--2 {
  mask-image: url(../img/contents/btnEdit__icon--2.svg);
  -webkit-mask-image: url(../img/contents/btnEdit__icon--2.svg);
  background-color: rgba(var(--color-key-2), 1);
}

/* ========================================================================= timerBtn reset */
/* --------------------------------------- timerBtn__resetIcon */
.timerBtn--reset {
  background-color: rgba(var(--color-key-1), 1);
  border-color: rgba(var(--color-key-1), 1);
}
.timerBtn--reset .timerBtn__title {
  height: 100%;
  color: rgba(var(--color-key-2), 1);
}

.timerBtn__resetIcon--1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url(../img/contents/btnReset__icon.svg?20250919);
  -webkit-mask-image: url(../img/contents/btnReset__icon.svg?20250919);
  background-color: rgba(var(--color-key-2), 1);
}

/* ========================================================================= timerBtn event */
.timerBtn--event {
  width: 73.9910313901%;
  right: 0;
  background-color: rgba(var(--color-key-2), 1);
}
.timerBtn--event .hoverText__base, .timerBtn--event .hoverText__position {
  text-align: center;
}
.timerBtn--event .hoverText__base > span, .timerBtn--event .hoverText__position > span {
  font-size: 35px;
}
.timerBtn--event .timerBtn__target--inner {
  position: relative;
  display: block;
  overflow: hidden;
}
.timerBtn--event .timerBtn__title {
  color: rgba(var(--color-key-1), 1);
}
.timerBtn--event .timerBtn__title--stop, .timerBtn--event .timerBtn__title--complete {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------------- timerBtn__eventIcon */
.timerBtn__eventIcon {
  position: absolute;
  width: 7.8475336323%;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  pointer-events: none;
}

.timerBtn__eventIcon--inner {
  position: relative;
  padding-top: 100%;
  background-color: rgba(var(--color-key-1), 1);
  border-radius: 50%;
}
.timerBtn__eventIcon--inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-width: 4px 0 4px 6px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(var(--color-key-2), 1);
}
.timerBtn__eventIcon--inner::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 3px;
  height: 10px;
  border-width: 0 3px;
  border-style: solid;
  border-color: rgba(var(--color-key-1), 1);
  opacity: 0;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* --------------------------------------- timerBtn__eventIcon complete */
.timerBtn__eventIcon--complete {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  opacity: 0;
}
.timerBtn__eventIcon--complete::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-box-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
  -webkit-mask-box-position: center center;
  mask-size: 100% auto;
  -webkit-mask-size: 100% auto;
  -webkit-mask-box-size: 100% auto;
  background-color: rgba(var(--color-key-1), 1);
  -webkit-mask-image: url(../img/contents/btnReset__icon.svg?20250919);
          mask-image: url(../img/contents/btnReset__icon.svg?20250919);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* ============================================================================================ fixedBtn */
.fixedBtn {
  position: fixed;
  width: 80px;
  height: 80px;
  top: 15px;
  right: 30px;
  border-radius: 50%;
  z-index: 51;
  cursor: pointer;
}
.fixedBtn::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(var(--color-chara), 0.2);
  -webkit-transform: translate(5px, 5px);
          transform: translate(5px, 5px);
  z-index: 1;
}

/* --------------------------------------- fixedBtn__inner */
.fixedBtn__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 2;
  background-color: rgba(var(--color-chara), 1);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.fixedBtn__inner:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 83%;
  height: 83%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  border-width: 2px;
  border-style: dashed;
  border-radius: 50%;
}

/* --------------------------------------- fixedBtn__text */
.fixedBtn__text {
  position: absolute;
  width: 56.25%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.fixedBtn__text--p {
  text-indent: -9999px;
  height: 0;
  padding-top: 66.6666666667%;
  mask-image: url(../img/common/fixedBtn__title.svg);
  -webkit-mask-image: url(../img/common/fixedBtn__title.svg);
  background-color: #fff;
}

/* --------------------------------------- closeIcon */
.closeIcon {
  position: absolute;
  width: 27.7777777778%;
  height: 2px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  opacity: 0;
}
.closeIcon::before, .closeIcon::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background-color: #fff;
}
.closeIcon::before {
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}
.closeIcon::after {
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
}

/* ============================================================================================ specilaBtnArticle */
.specilaBtnArticle {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

/* --------------------------------------- specilaBtnArticle__padding */
.sbaPadding {
  position: relative;
  padding-top: 29.2207792208%;
}

.sbaInner {
  position: absolute;
  width: 96.5367965368%;
  height: 88.8888888889%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* --------------------------------------- specilaBtn__target */
.specilaBtn__target {
  border-radius: 7px;
}
.specilaBtn__target .hoverText__base, .specilaBtn__target .hoverText__position {
  text-align: center;
}

.specilaBtn__target--inner {
  position: relative;
  height: 100%;
}

a.specilaBtn__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* --------------------------------------- login */
.specilaBtn__target--login {
  height: 57.5%;
  background-color: rgba(var(--color-key-2), 1);
}
.specilaBtn__target--login a.specilaBtn__title {
  color: rgba(var(--color-key-1), 1);
}
.specilaBtn__target--login .hoverText__base > span, .specilaBtn__target--login .hoverText__position > span {
  font-size: 24px;
}

/* --------------------------------------- register */
.specilaBtn__target--register {
  height: 36.6666666667%;
  background-color: rgba(var(--color-key-1), 1);
}
.specilaBtn__target--register a.specilaBtn__title {
  color: rgba(var(--color-key-2), 1);
}
.specilaBtn__target--register .hoverText__base > span, .specilaBtn__target--register .hoverText__position > span {
  font-size: 18px;
}

/* =================================================================== specialBtn__icon */
.specialBtn__icon {
  position: absolute;
  width: 7.8475336323%;
  right: 2.2421524664%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.specialBtn__iconInner {
  position: relative;
  padding-top: 100%;
  border-radius: 50%;
  background-color: rgba(var(--color-key-1), 1);
}
.specialBtn__iconInner::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 50%;
  left: 54%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-left: 6px solid rgba(var(--color-key-2), 1);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* ============================================================================================ specialContents__info */
.specialContents__info {
  position: absolute;
  width: 100%;
  left: 0;
  top: 7%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.specialContents__info .timerCountBox__info--p {
  height: 35px;
  font-size: 24px;
  line-height: 28px;
  padding: 0 15px;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* =================================================================== specialContents__desc */
.specialContents__desc {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 4%;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.05em;
}

/* --------------------------------------- specialBtn__icon */
.specialContents__infoIcon {
  position: relative;
  top: -0.1em;
  font-size: 43px;
  line-height: 0;
  -ms-flex-item-align: center;
      align-self: center;
  color: rgba(var(--color-key-1), 1);
  margin: 0 2%;
}

/* --------------------------------------- leader p */
.specialContents__descLeader--p {
  font-size: 19px;
  color: rgba(var(--color-key-1), 1);
}

/* --------------------------------------- .num-25, .num-5 */
.num-25, .num-5 {
  display: inline-block;
  font-size: 21px;
  height: 25px;
  padding: 0 8px;
  border-radius: 9999px;
  letter-spacing: 0;
}

.num-25 {
  background-color: rgba(var(--color-key-2), 1);
  color: rgba(var(--color-key-1), 1);
}

.num-5 {
  background-color: rgba(var(--color-key-1), 1);
  color: rgba(var(--color-key-2), 1);
}

/* --------------------------------------- specialContents__descSub p */
.specialContents__descSub--p {
  font-size: 16px;
  color: rgba(var(--color-chara), 1);
}

.specialContents__descLeader--target {
  margin-top: 1.5%;
}

.specialContents__descSub {
  margin-top: 5.5%;
}

/* =================================================================== specialContents__chara */
.specialContents__chara {
  position: absolute;
  width: 100%;
  height: 46.7532467532%;
  left: 0;
  top: 17.6623376623%;
  overflow: hidden;
}

/* --------------------------------------- specialContents__charaSlider wrapper */
.specialContents__charaSlider--wrapper {
  position: relative;
  height: 100%;
  font-size: 0;
  text-align: left;
  white-space: nowrap;
}

.specialContents__charaList {
  display: inline-block;
  width: 693px;
  opacity: 0;
}

.specialContents__charaTarget {
  display: inline-block;
  width: 231px;
}
.specialContents__charaTarget > div {
  position: relative;
  padding-top: 77.9141104294%;
}

.specialContents__charaTarget--img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================================================ otherToolModal */
.otherToolModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transform: translate(0, calc(30 * 100 / 1366 * 1vw));
          transform: translate(0, calc(30 * 100 / 1366 * 1vw));
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.otm__inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.otm__inner p {
  position: absolute;
  font-size: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* --------------------------------------- otherToolModal--show */
.wrapperInner {
  transition-duration: 0.45s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.45s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.45s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.45s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.otherToolModal--show .wrapper {
  height: 100vh;
  overflow: hidden;
}
.otherToolModal--show .wrapperInner {
  -webkit-transform: translate(0, calc(50 * 100 / 1366 * 1vw));
          transform: translate(0, calc(50 * 100 / 1366 * 1vw));
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.otherToolModal--show .otherToolModal {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}
@-webkit-keyframes frameAnime {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, calc(10 * 100 / 1366 * 1vw)) rotate(10deg);
            transform: translate(0, calc(10 * 100 / 1366 * 1vw)) rotate(10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes frameAnime {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, calc(10 * 100 / 1366 * 1vw)) rotate(10deg);
            transform: translate(0, calc(10 * 100 / 1366 * 1vw)) rotate(10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}
.otherToolModal--show .otmBanner__frameInner {
  -webkit-animation: frameAnime 0.5s ease-in-out 1;
  animation: frameAnime 0.5s ease-in-out 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}
.otherToolModal--show .fixedBtn .fixedBtn__text {
  opacity: 0;
}
.otherToolModal--show .fixedBtn .closeIcon {
  opacity: 1;
}

/* =============================================================================================================== body class */
/* --------------------------------------- is--special */
.specilaBtnArticle {
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.timerBtnArticle {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.is--special.is--tool--pomodoro .timerEvent__inner {
  padding-top: 86.3228699552%;
}
.is--special.is--tool--pomodoro .timerBtnArticle {
  -webkit-transform: translate(0, 110%);
          transform: translate(0, 110%);
}
.is--special.is--tool--pomodoro .specilaBtnArticle {
  pointer-events: all;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}
.is--special.is--tool--pomodoro .teSection__complete {
  opacity: 0;
}

/* --------------------------------------- .is--tool--default / pomodoro */
.timerNav__bg, .timerNav__title, .timerNav__iconInner, .timerNav__targetInner, .timerNav__iconInner::after, .timerEvent__inner {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.teSection__default, .teSection__pomodoro {
  z-index: 2;
  opacity: 0;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.2s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.2s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.teSection__pomodoro {
  pointer-events: none;
}

/* --------------------------------------- color default */
.is--tool--default .timerNav--default .timerNav__bg {
  height: 120%;
  background-color: rgba(var(--color-tabBg-default), 1);
}
.is--tool--default .timerNav--default .timerNav__title {
  color: rgba(var(--color-chara), 1);
}
.is--tool--default .timerNav--default .timerNav__iconInner {
  background-color: rgba(var(--color-chara), 1);
}
.is--tool--default .teSection__default {
  opacity: 1;
}

/* --------------------------------------- pomodoro */
.is--tool--pomodoro {
  --color-body: 221, 241, 251;
  --color-chara: 116, 175, 255;
  --color-key-1: 220, 137, 248;
  --color-key-2: 202, 253, 3;
  --color-tabBg-1: 215, 231, 255;
  --color-bgArrow-1: #85b1df;
  --color-bgArrow-2: #f8d2e2;
  --color-bgArrow-3: #fffbda;
}
.is--tool--pomodoro .timerNav--pomodoro .timerNav__bg {
  height: 120%;
  background-color: rgba(var(--color-tabBg-1), 1);
}
.is--tool--pomodoro .timerNav--pomodoro .timerNav__title {
  color: rgba(var(--color-chara), 1);
}
.is--tool--pomodoro .timerNav--pomodoro .timerNav__iconInner {
  background-color: rgba(var(--color-chara), 1);
}
.is--tool--pomodoro .timerNav--pomodoro .timerNav__iconInner::after {
  background-color: #fff;
}
.is--tool--pomodoro .timerEvent__inner {
  background-color: rgba(var(--color-tabBg-1), 1);
}
.is--tool--pomodoro .teSection__pomodoro {
  opacity: 1;
  pointer-events: all;
}

/* --------------------------------------- pomodoro cinnamon */
.is--tool--pomodoro.is--chara--cinnamon {
  --color-body: 221, 241, 251;
  --color-chara: 116, 175, 255;
  --color-key-1: 220, 137, 248;
  --color-key-2: 202, 253, 3;
  --color-tabBg-1: 223, 236, 255;
  --color-bgArrow-1: #85b1df;
  --color-bgArrow-2: #f8d2e2;
  --color-bgArrow-3: #fffbda;
}

/* --------------------------------------- pomodoro pompompurin */
.is--tool--pomodoro.is--chara--pompompurin {
  --color-body: 255, 248, 222;
  --color-chara: 244, 162, 59;
  --color-key-1: 255, 136, 219;
  --color-key-2: 255, 255, 0;
  --color-tabBg-1: 255, 253, 237;
  --color-bgArrow-1: #60c0bd;
  --color-bgArrow-2: #ee846d;
  --color-bgArrow-3: #fff591;
}

/* --------------------------------------- pomodoro hangyodon */
.is--tool--pomodoro.is--chara--hangyodon {
  --color-body: 225, 240, 234;
  --color-chara: 118, 226, 221;
  --color-key-1: 9, 155, 255;
  --color-key-2: 252, 159, 255;
  --color-tabBg-1: 224, 244, 244;
  --color-bgArrow-1: #7dccf3;
  --color-bgArrow-2: #f4b0a1;
  --color-bgArrow-3: #73c6c7;
}

/* ========================================================================= timerCount__num color */
.is--tool--default .timerCount__num--p, .is--tool--default .timerCount__dot--p {
  color: rgba(var(--color-key-1), 1);
  text-shadow: 5px 5px 0 rgba(var(--color-key-1), 0.2);
}
.is--tool--default.timer--complete .timerCount__num--p, .is--tool--default.timer--complete .timerCount__dot--p {
  color: rgba(var(--color-key-2), 1);
  text-shadow: 5px 5px 0 rgba(var(--color-key-1), 0.5);
}

.is--tool--pomodoro .timerCount__num--p, .is--tool--pomodoro .timerCount__dot--p {
  color: rgba(var(--color-key-1), 1);
  text-shadow: 5px 5px 0 rgba(var(--color-key-1), 0.2);
}
.is--tool--pomodoro.timer--break .timerCount__num--p, .is--tool--pomodoro.timer--break .timerCount__dot--p {
  color: rgba(var(--color-key-2), 1);
  text-shadow: 5px 5px 0 rgba(var(--color-key-1), 0.5);
}
.is--tool--pomodoro.timer--complete .timerCount__num--p, .is--tool--pomodoro.timer--complete .timerCount__dot--p {
  color: rgba(var(--color-key-2), 1);
  text-shadow: 5px 5px 0 rgba(var(--color-key-1), 0.5);
}

/* ========================================================================= timerCountBox__infoWrapper */
.timer--start .charaSelect {
  pointer-events: none;
}
.timer--start .timerCountBox__infoWrapper--start .timerCountBox__info--p {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.timer--start .timerCountBox__infoWrapper--prev .timerCountBox__info--p {
  -webkit-transform: translateY(110%);
          transform: translateY(110%);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.timer--break .timerCountBox__infoWrapper--start .timerCountBox__info--p {
  -webkit-transform: translateY(-110%);
          transform: translateY(-110%);
}
.timer--break .timerCountBox__infoWrapper--break .timerCountBox__info--p {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.timer--complete .timerCountBox__infoWrapper--break .timerCountBox__info--p {
  -webkit-transform: translateY(-110%);
          transform: translateY(-110%);
}

/* ========================================================================= teSection__completeTitle show */
.teSection__completeTitle--p > span {
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.is--tool--default .teSection__completeTitle--p {
  color: rgba(var(--color-key-1), 1);
}

.is--tool--pomodoro .teSection__completeTitle--p {
  color: rgba(var(--color-key-1), 1);
}

.timer--complete .teSection__completeTitle--p > span {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
.timer--complete .teSection__completeTitle--p > span:nth-child(1) {
  transition-delay: 0.0333333333s;
  -webkit-transition-delay: 0.0333333333s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(2) {
  transition-delay: 0.0666666667s;
  -webkit-transition-delay: 0.0666666667s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(3) {
  transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(4) {
  transition-delay: 0.1333333333s;
  -webkit-transition-delay: 0.1333333333s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(5) {
  transition-delay: 0.1666666667s;
  -webkit-transition-delay: 0.1666666667s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(6) {
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(7) {
  transition-delay: 0.2333333333s;
  -webkit-transition-delay: 0.2333333333s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(8) {
  transition-delay: 0.2666666667s;
  -webkit-transition-delay: 0.2666666667s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(9) {
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(10) {
  transition-delay: 0.3333333333s;
  -webkit-transition-delay: 0.3333333333s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(11) {
  transition-delay: 0.3666666667s;
  -webkit-transition-delay: 0.3666666667s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(12) {
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(13) {
  transition-delay: 0.4333333333s;
  -webkit-transition-delay: 0.4333333333s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(14) {
  transition-delay: 0.4666666667s;
  -webkit-transition-delay: 0.4666666667s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(15) {
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(16) {
  transition-delay: 0.5333333333s;
  -webkit-transition-delay: 0.5333333333s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(17) {
  transition-delay: 0.5666666667s;
  -webkit-transition-delay: 0.5666666667s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(18) {
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(19) {
  transition-delay: 0.6333333333s;
  -webkit-transition-delay: 0.6333333333s;
}
.timer--complete .teSection__completeTitle--p > span:nth-child(20) {
  transition-delay: 0.6666666667s;
  -webkit-transition-delay: 0.6666666667s;
}

/* ========================================================================= completeBg svg show */
.is--tool--default.timer--complete .completeBg__target--default {
  opacity: 1;
}

.is--tool--pomodoro.is--chara--cinnamon.timer--complete .completeBg__target--cinnamon {
  opacity: 1;
}

.is--tool--pomodoro.is--chara--pompompurin.timer--complete .completeBg__target--pompompurin {
  opacity: 1;
}

.is--tool--pomodoro.is--chara--hangyodon.timer--complete .completeBg__target--hangyodon {
  opacity: 1;
}

/* ========================================================================= charaSelect */
.charaSelect .navigation-wrapper {
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
  opacity: 0;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.is--tool--pomodoro .charaSelect .navigation-wrapper {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  opacity: 1;
}

.is--tool--pomodoro .charaSelect__hoverArea {
  cursor: pointer;
}

.is--tool--pomodoro.timer--start .charaSelect {
  opacity: 0;
}
.is--tool--pomodoro.timer--start .charaSelect__hoverArea {
  pointer-events: none;
}

/* ========================================================================= timerBtn */
.timerBtn__target, .timerBtn__title, .timerBtn__title, .timerBtn__eventIcon--inner, .timerBtn__eventIcon--complete {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.timerBtn--event .timerBtn__title--stop, .timerBtn--event .timerBtn__title--complete {
  -webkit-transform: translateY(110%);
          transform: translateY(110%);
}

.timerBtn__eventIcon--inner {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.timerBtn__eventIcon--inner::before {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* --------------------------------------- .timer--start */
.timer--start .timerBtn--edit {
  -webkit-transform: translate(-150%, 0);
          transform: translate(-150%, 0);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.timer--start .timerBtn--event {
  width: 100%;
  background-color: rgba(var(--color-key-1), 1);
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.8s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.8s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.timer--start .timerBtn--event .timerBtn__title {
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}
.timer--start .timerBtn--event .timerBtn__title--start {
  -webkit-transform: translateY(-110%);
          transform: translateY(-110%);
}
.timer--start .timerBtn--event .timerBtn__title--stop {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
.timer--start .timerBtn--event .timerBtn__title--stop .hoverText {
  color: rgba(var(--color-key-2), 1);
}
.timer--start .timerBtn__eventIcon--inner {
  background-color: rgba(var(--color-key-2), 1);
}
.timer--start .timerBtn__eventIcon--inner::before {
  opacity: 0;
}
.timer--start .timerBtn__eventIcon--inner::after {
  opacity: 1;
}

/* --------------------------------------- .timer--complete */
.timer--complete .timerBtn--reset {
  -webkit-transform: translate(-150%, 0%);
          transform: translate(-150%, 0%);
}
.timer--complete .timerBtn--event {
  width: 100%;
  background-color: rgba(var(--color-key-2), 1);
}
.timer--complete .timerBtn--event .timerBtn__title--start {
  -webkit-transform: translateY(-110%);
          transform: translateY(-110%);
}
.timer--complete .timerBtn--event .timerBtn__title--start {
  -webkit-transform: translateY(-110%);
          transform: translateY(-110%);
}
.timer--complete .timerBtn--event .timerBtn__title--stop {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
.timer--complete .timerBtn--event .timerBtn__title--stop .hoverText {
  color: rgba(var(--color-key-1), 1);
}
.timer--complete .timerBtn--event {
  background-color: rgba(var(--color-key-2), 1);
}
.timer--complete .timerBtn--event .timerBtn__title--stop .hoverText {
  color: rgba(var(--color-key-1), 1);
}
.timer--complete .timerBtn__eventIcon--inner {
  background-color: rgba(var(--color-key-1), 1);
}
.timer--complete .timerBtn__eventIcon--inner::before {
  opacity: 0;
}
.timer--complete .timerBtn__eventIcon--inner::after {
  opacity: 1;
  border-color: rgba(var(--color-key-2), 1);
}

.timer--complete--reset .timerBtn--event {
  width: 100%;
  background-color: rgba(var(--color-key-1), 1);
}
.timer--complete--reset .timerBtn--event .timerBtn__title--start, .timer--complete--reset .timerBtn--event .timerBtn__title--stop {
  -webkit-transform: translateY(-110%);
          transform: translateY(-110%);
}
.timer--complete--reset .timerBtn--event .timerBtn__title--complete {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
.timer--complete--reset .timerBtn--event .timerBtn__title--complete .hoverText {
  color: rgba(var(--color-key-2), 1);
}
.timer--complete--reset .timerBtn__eventIcon--inner {
  background-color: rgba(var(--color-key-2), 1);
}
.timer--complete--reset .timerBtn__eventIcon--inner::before, .timer--complete--reset .timerBtn__eventIcon--inner::after {
  opacity: 0;
}
.timer--complete--reset .timerBtn__eventIcon--complete {
  opacity: 1;
  transition-delay: 0.15s;
  -webkit-transition-delay: 0.15s;
}

/* ========================================================================= fixedBtn */
.fixedBtn {
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transform: translate(0, calc(-150 * 100 / 1366 * 1vw));
          transform: translate(0, calc(-150 * 100 / 1366 * 1vw));
}

.fixedBtn--show .fixedBtn {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

/* ============================================================================================ max-height */
@media only screen and (max-height: 925px) and (min-width: 767px) {
  .mainFrame {
    width: calc(462 * 100 / 925 * 1vh);
  }
  .timerNav__title .hoverText__base, .timerNav__title .hoverText__position {
    font-size: calc(18 * 100 / 925 * 1vh);
  }
  .timerBtn--edit .hoverText__base > span, .timerBtn--edit .hoverText__position > span {
    font-size: calc(22 * 100 / 925 * 1vh);
  }
  .timerBtn--reset .hoverText__base > span, .timerBtn--reset .hoverText__position > span {
    font-size: calc(22 * 100 / 925 * 1vh);
  }
  .timerBtn--event .hoverText__base > span, .timerBtn--event .hoverText__position > span {
    font-size: calc(35 * 100 / 925 * 1vh);
  }
  .timerCountBox__target {
    width: calc(85 * 100 / 925 * 1vh);
    height: calc(115 * 100 / 925 * 1vh);
  }
  .timerCount--minute, .timerCount--second {
    line-height: calc(85 * 100 / 925 * 1vh);
  }
  .timerCount--dot {
    width: calc(42 * 100 / 925 * 1vh);
    line-height: calc(52 * 100 / 925 * 1vh);
  }
  .timerCount__num--p, .timerCount__dot--p {
    font-size: calc(158 * 100 / 925 * 1vh);
  }
  .timerCountBox__info--p {
    font-size: calc(18 * 100 / 925 * 1vh);
    height: calc(29 * 100 / 925 * 1vh);
    line-height: calc(23 * 100 / 925 * 1vh);
    padding: 0 calc(12 * 100 / 925 * 1vh);
  }
  .teSection__completeTitle--p > span {
    font-size: calc(83 * 100 / 925 * 1vh);
    height: calc(83 * 100 / 925 * 1vh);
    line-height: calc(80 * 100 / 925 * 1vh);
  }
  .specilaBtn__target--login .hoverText__base > span, .specilaBtn__target--login .hoverText__position > span {
    font-size: calc(24 * 100 / 925 * 1vh);
  }
  .specilaBtn__target--register .hoverText__base > span, .specilaBtn__target--register .hoverText__position > span {
    font-size: calc(18 * 100 / 925 * 1vh);
  }
  .specialContents__infoIcon {
    font-size: calc(43 * 100 / 925 * 1vh);
  }
  .specialContents__descLeader--p {
    font-size: calc(19 * 100 / 925 * 1vh);
  }
  .num-25, .num-5 {
    font-size: calc(21 * 100 / 925 * 1vh);
    height: calc(25 * 100 / 925 * 1vh);
  }
  .specialContents__descSub--p {
    font-size: calc(16 * 100 / 925 * 1vh);
  }
  .specialContents__info .timerCountBox__info--p {
    height: calc(35 * 100 / 925 * 1vh);
    font-size: calc(24 * 100 / 925 * 1vh);
    line-height: calc(28 * 100 / 925 * 1vh);
    padding: 0 calc(15 * 100 / 925 * 1vh);
  }
  .specialContents__charaList {
    width: calc(693 * 100 / 925 * 1vh);
  }
  .specialContents__charaTarget {
    width: calc(231 * 100 / 925 * 1vh);
  }
}
/* ============================================================================================ hover pc */
@media (hover: hover) and (pointer: fine) {
  .hoverText__wrapper {
    cursor: pointer;
  }
  .hoverText__wrapper:hover .hoverText__base > span, .hoverText__wrapper:hover .hoverText__position > span, .hoverText__wrapper:active .hoverText__base > span, .hoverText__wrapper:active .hoverText__position > span {
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.41, 0.12, 0.26, 0.97);
    -ms-transition-duration: 0.6s;
    -ms-transition-timing-function: cubic-bezier(0.41, 0.12, 0.26, 0.97);
    -webkit-transition-duration: 0.6s;
    -webkit-transition-timing-function: cubic-bezier(0.41, 0.12, 0.26, 0.97);
    -moz-transition-duration: 0.6s;
    -moz-transition-timing-function: cubic-bezier(0.41, 0.12, 0.26, 0.97);
  }
  .hoverText__wrapper:hover .hoverText__base > span, .hoverText__wrapper:active .hoverText__base > span {
    -webkit-transform: translateY(-120%);
            transform: translateY(-120%);
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(1), .hoverText__wrapper:active .hoverText__base > span:nth-child(1) {
    transition-delay: 0.05s;
    -webkit-transition-delay: 0.05s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(2), .hoverText__wrapper:active .hoverText__base > span:nth-child(2) {
    transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(3), .hoverText__wrapper:active .hoverText__base > span:nth-child(3) {
    transition-delay: 0.15s;
    -webkit-transition-delay: 0.15s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(4), .hoverText__wrapper:active .hoverText__base > span:nth-child(4) {
    transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(5), .hoverText__wrapper:active .hoverText__base > span:nth-child(5) {
    transition-delay: 0.25s;
    -webkit-transition-delay: 0.25s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(6), .hoverText__wrapper:active .hoverText__base > span:nth-child(6) {
    transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(7), .hoverText__wrapper:active .hoverText__base > span:nth-child(7) {
    transition-delay: 0.35s;
    -webkit-transition-delay: 0.35s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(8), .hoverText__wrapper:active .hoverText__base > span:nth-child(8) {
    transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(9), .hoverText__wrapper:active .hoverText__base > span:nth-child(9) {
    transition-delay: 0.45s;
    -webkit-transition-delay: 0.45s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(10), .hoverText__wrapper:active .hoverText__base > span:nth-child(10) {
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(11), .hoverText__wrapper:active .hoverText__base > span:nth-child(11) {
    transition-delay: 0.55s;
    -webkit-transition-delay: 0.55s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(12), .hoverText__wrapper:active .hoverText__base > span:nth-child(12) {
    transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(13), .hoverText__wrapper:active .hoverText__base > span:nth-child(13) {
    transition-delay: 0.65s;
    -webkit-transition-delay: 0.65s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(14), .hoverText__wrapper:active .hoverText__base > span:nth-child(14) {
    transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(15), .hoverText__wrapper:active .hoverText__base > span:nth-child(15) {
    transition-delay: 0.75s;
    -webkit-transition-delay: 0.75s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(16), .hoverText__wrapper:active .hoverText__base > span:nth-child(16) {
    transition-delay: 0.8s;
    -webkit-transition-delay: 0.8s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(17), .hoverText__wrapper:active .hoverText__base > span:nth-child(17) {
    transition-delay: 0.85s;
    -webkit-transition-delay: 0.85s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(18), .hoverText__wrapper:active .hoverText__base > span:nth-child(18) {
    transition-delay: 0.9s;
    -webkit-transition-delay: 0.9s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(19), .hoverText__wrapper:active .hoverText__base > span:nth-child(19) {
    transition-delay: 0.95s;
    -webkit-transition-delay: 0.95s;
  }
  .hoverText__wrapper:hover .hoverText__base > span:nth-child(20), .hoverText__wrapper:active .hoverText__base > span:nth-child(20) {
    transition-delay: 1s;
    -webkit-transition-delay: 1s;
  }
  .hoverText__wrapper:hover .hoverText__position > span, .hoverText__wrapper:active .hoverText__position > span {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(1), .hoverText__wrapper:active .hoverText__position > span:nth-child(1) {
    transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(2), .hoverText__wrapper:active .hoverText__position > span:nth-child(2) {
    transition-delay: 0.15s;
    -webkit-transition-delay: 0.15s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(3), .hoverText__wrapper:active .hoverText__position > span:nth-child(3) {
    transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(4), .hoverText__wrapper:active .hoverText__position > span:nth-child(4) {
    transition-delay: 0.25s;
    -webkit-transition-delay: 0.25s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(5), .hoverText__wrapper:active .hoverText__position > span:nth-child(5) {
    transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(6), .hoverText__wrapper:active .hoverText__position > span:nth-child(6) {
    transition-delay: 0.35s;
    -webkit-transition-delay: 0.35s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(7), .hoverText__wrapper:active .hoverText__position > span:nth-child(7) {
    transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(8), .hoverText__wrapper:active .hoverText__position > span:nth-child(8) {
    transition-delay: 0.45s;
    -webkit-transition-delay: 0.45s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(9), .hoverText__wrapper:active .hoverText__position > span:nth-child(9) {
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(10), .hoverText__wrapper:active .hoverText__position > span:nth-child(10) {
    transition-delay: 0.55s;
    -webkit-transition-delay: 0.55s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(11), .hoverText__wrapper:active .hoverText__position > span:nth-child(11) {
    transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(12), .hoverText__wrapper:active .hoverText__position > span:nth-child(12) {
    transition-delay: 0.65s;
    -webkit-transition-delay: 0.65s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(13), .hoverText__wrapper:active .hoverText__position > span:nth-child(13) {
    transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(14), .hoverText__wrapper:active .hoverText__position > span:nth-child(14) {
    transition-delay: 0.75s;
    -webkit-transition-delay: 0.75s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(15), .hoverText__wrapper:active .hoverText__position > span:nth-child(15) {
    transition-delay: 0.8s;
    -webkit-transition-delay: 0.8s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(16), .hoverText__wrapper:active .hoverText__position > span:nth-child(16) {
    transition-delay: 0.85s;
    -webkit-transition-delay: 0.85s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(17), .hoverText__wrapper:active .hoverText__position > span:nth-child(17) {
    transition-delay: 0.9s;
    -webkit-transition-delay: 0.9s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(18), .hoverText__wrapper:active .hoverText__position > span:nth-child(18) {
    transition-delay: 0.95s;
    -webkit-transition-delay: 0.95s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(19), .hoverText__wrapper:active .hoverText__position > span:nth-child(19) {
    transition-delay: 1s;
    -webkit-transition-delay: 1s;
  }
  .hoverText__wrapper:hover .hoverText__position > span:nth-child(20), .hoverText__wrapper:active .hoverText__position > span:nth-child(20) {
    transition-delay: 1.05s;
    -webkit-transition-delay: 1.05s;
  }
  .timerBtn--event:hover ~ .timerBtn__eventIcon .timerBtn__eventIcon--complete::before, .timerBtn--event:hover ~ .timerBtn__eventIcon .timerBtn__eventIcon--complete::after, .timerBtn--event:active ~ .timerBtn__eventIcon .timerBtn__eventIcon--complete::before, .timerBtn--event:active ~ .timerBtn__eventIcon .timerBtn__eventIcon--complete::after {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  @-webkit-keyframes rotateAnime {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0);
              transform: translate(-50%, -50%) rotate(0);
    }
    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
              transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotateAnime {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0);
              transform: translate(-50%, -50%) rotate(0);
    }
    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
              transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  .fixedBtn:hover .fixedBtn__inner, .fixedBtn:active .fixedBtn__inner {
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  }
  .fixedBtn:hover .fixedBtn__inner::after, .fixedBtn:active .fixedBtn__inner::after {
    -webkit-animation: rotateAnime 15s linear infinite;
    animation: rotateAnime 15s linear infinite;
  }
  a.footerCopy__sideLink:hover, a.footerCopy__sideLink:active {
    text-decoration-color: rgba(255, 255, 255, 0);
  }
  .keenArrow--prev:hover .keenArrow__icon::after, .keenArrow--prev:active .keenArrow__icon::after {
    -webkit-transform: translateX(-20%);
            transform: translateX(-20%);
  }
  .keenArrow--next:hover .keenArrow__icon::after, .keenArrow--next:active .keenArrow__icon::after {
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
  }
  @-webkit-keyframes keenDot-anime {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    5% {
      -webkit-transform: translate3d(0, -10%, 0);
              transform: translate3d(0, -10%, 0);
    }
    10% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    20% {
      -webkit-transform: translate3d(0, -10%, 0);
              transform: translate3d(0, -10%, 0);
    }
    30% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
  }
  @keyframes keenDot-anime {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    5% {
      -webkit-transform: translate3d(0, -10%, 0);
              transform: translate3d(0, -10%, 0);
    }
    10% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    20% {
      -webkit-transform: translate3d(0, -10%, 0);
              transform: translate3d(0, -10%, 0);
    }
    30% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
  }
  .keenDot:hover .keenDotChara, .keenDot:active .keenDotChara {
    -webkit-animation: keenDot-anime 1.5s ease-in-out 0s infinite;
    animation: keenDot-anime 1.5s ease-in-out 0s infinite;
  }
  .timerEditModal__closeBtn:hover .timerEditModal__closeBtn--line::before, .timerEditModal__closeBtn:hover .timerEditModal__closeBtn--line::after, .timerEditModal__closeBtn:active .timerEditModal__closeBtn--line::before, .timerEditModal__closeBtn:active .timerEditModal__closeBtn--line::after {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  @-webkit-keyframes jumpAnime {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    10% {
      -webkit-transform: translate3d(0, -0.3vw, 0);
              transform: translate3d(0, -0.3vw, 0);
    }
    20% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    30% {
      -webkit-transform: translate3d(0, -0.3vw, 0);
              transform: translate3d(0, -0.3vw, 0);
    }
    40% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
  }
  @keyframes jumpAnime {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    10% {
      -webkit-transform: translate3d(0, -0.3vw, 0);
              transform: translate3d(0, -0.3vw, 0);
    }
    20% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    30% {
      -webkit-transform: translate3d(0, -0.3vw, 0);
              transform: translate3d(0, -0.3vw, 0);
    }
    40% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
  }
  .otmBanner__link:hover .otmBanner__chara, .otmBanner__link:active .otmBanner__chara {
    -webkit-animation: jumpAnime 1.3s ease-in-out infinite;
    animation: jumpAnime 1.3s ease-in-out infinite;
  }
  .otmBanner__link:hover .otmBanner__img, .otmBanner__link:active .otmBanner__img {
    -webkit-box-shadow: 0 0 20px rgba(var(--color-chara), 0.6);
            box-shadow: 0 0 20px rgba(var(--color-chara), 0.6);
  }
}
/* ============================================================================================ charaSelect */
.charaSelect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.charaSelect .navigation-wrapper, .charaSelect #chara--slider, .charaSelect #chara--slider div {
  height: 100%;
}
.charaSelect .navigation-wrapper {
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
  opacity: 0;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* ====================================================================== charaSelect__target */
.charaSelect__targetInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.charaSelect__targetInner--img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

/* --------------------------------------- charaSelect__target img */
.charaSelect__target--cinnamon .charaSelect__targetInner--img {
  background-image: url(../img/contents/charaSelect/charaSelect--cinnamon.png?20250919);
}

.charaSelect__target--pompompurin .charaSelect__targetInner--img {
  background-image: url(../img/contents/charaSelect/charaSelect--pompompurin.png?20250918);
}

.charaSelect__target--hangyodon .charaSelect__targetInner--img {
  background-image: url(../img/contents/charaSelect/charaSelect--hangyodon.png?20250918);
}

/* --------------------------------------- charaSelect__hoverArea */
.charaSelect__hoverArea {
  position: absolute;
  width: 100%;
  height: 42.600896861%;
  left: 0;
  bottom: 15.9817351598%;
  z-index: 2;
}

/* ====================================================================== chara keenArrow */
.keenArrow {
  position: absolute;
  width: 22.4215246637%;
  height: 43.3789954338%;
  bottom: 15.9817351598%;
  cursor: pointer;
}

.keenArrow--prev {
  left: 0;
}
.keenArrow--prev .keenArrow__icon {
  left: 20%;
}
.keenArrow--prev .keenArrow__icon::after {
  -webkit-mask-image: url(../img/contents/charaSelect/keenArrow--prev.svg);
          mask-image: url(../img/contents/charaSelect/keenArrow--prev.svg);
}

.keenArrow--next {
  right: 0;
}
.keenArrow--next .keenArrow__icon {
  right: 20%;
}
.keenArrow--next .keenArrow__icon::after {
  -webkit-mask-image: url(../img/contents/charaSelect/keenArrow--next.svg);
          mask-image: url(../img/contents/charaSelect/keenArrow--next.svg);
}

/* --------------------------------------- keenArrow__icon */
.keenArrow__icon {
  position: absolute;
  width: 20%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.keenArrow__icon::after {
  display: block;
  content: "";
  padding-top: 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-box-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
  -webkit-mask-box-position: center center;
  mask-size: 100% auto;
  -webkit-mask-size: 100% auto;
  -webkit-mask-box-size: 100% auto;
  background-color: rgba(var(--color-key-1), 1);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* ====================================================================== chara keenDots */
.keenDots {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 4.1095890411%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* --------------------------------------- keenDot */
.keenDot {
  position: relative;
  width: 11.6591928251%;
  margin-left: 1.7937219731%;
  margin-right: 1.7937219731%;
  cursor: pointer;
}

/* --------------------------------------- keenDotInner */
.keenDotInner {
  position: relative;
  padding-top: 100%;
}

/* --------------------------------------- keenDotBg keenDotChara */
.keenDotBg, .keenDotChara {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.keenDotChara {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 2;
}

.keenDotBg {
  z-index: 1;
}
.keenDotBg::before, .keenDotBg::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.keenDotBg::before {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
.keenDotBg::after {
  width: 73.0769230769%;
  height: 73.0769230769%;
  border-style: solid;
  border-width: 3px;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(0.5);
          transform: translate(-50%, -50%) scale(0.5);
}

.keenDot.dot--active .keenDotBg::before {
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(0.2);
          transform: translate(-50%, -50%) scale(0.2);
}
.keenDot.dot--active .keenDotBg::after {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

/* --------------------------------------- keenDotChara img */
.keenDot:nth-child(1) .keenDotBg::before, .keenDot:nth-child(1) .keenDotBg::after {
  background-color: #c1dcff;
}
.keenDot:nth-child(1) .keenDotBg::after {
  border-color: #7eb6ff;
}
.keenDot:nth-child(1) .keenDotChara {
  background-image: url(../img/contents/charaSelect/keenDot__thum--cinnamon.png?20250918);
}
.keenDot:nth-child(2) .keenDotBg::before, .keenDot:nth-child(2) .keenDotBg::after {
  background-color: #ffeb96;
}
.keenDot:nth-child(2) .keenDotBg::after {
  border-color: #ffd522;
}
.keenDot:nth-child(2) .keenDotChara {
  background-image: url(../img/contents/charaSelect/keenDot__thum--pompompurin.png?20250918);
}
.keenDot:nth-child(3) .keenDotBg::before, .keenDot:nth-child(3) .keenDotBg::after {
  background-color: #d4eae0;
}
.keenDot:nth-child(3) .keenDotBg::after {
  border-color: #99ceb5;
}
.keenDot:nth-child(3) .keenDotChara {
  background-image: url(../img/contents/charaSelect/keenDot__thum--hangyodon.png?20250918);
}

/* ======================================================================================== timerEvent__box kitty */
.timerEvent__box {
  pointer-events: none;
}

.timerEvent__box, .timerEvent__boxWrapper, .timerEvent__boxBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-touch-action: none;
      touch-action: none;
}

.timerEvent__boxWrapper {
  z-index: 1;
}
.timer--complete .timerEvent__boxWrapper {
  opacity: 0;
}

.timerEvent__boxBg {
  z-index: 0;
}

/* --------------------------------------- timerEvent__boxChara */
.timerEvent__boxChara {
  position: absolute;
  width: 33.1838565022%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  z-index: 4;
  transition-duration: 0.05s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition-duration: 0.05s;
  -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transition-duration: 0.05s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -moz-transition-duration: 0.05s;
  -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.timerEvent__boxChara--inner {
  position: relative;
  padding-top: 110%;
  opacity: 0;
}

.timerEvent__boxChara--svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ====================================================================== kittyParts ribbon */
.timerEvent__kittyParts {
  position: absolute;
  width: 22.4215246637%;
  top: 0;
  left: 0;
  will-change: transform, left, top;
}

.timerEvent__kittyParts--inner {
  position: relative;
  padding-top: 70%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url(../img/contents/timerEvent/kitty/kittyParts--1.png?20250918);
  -webkit-transform: scale(1.45) translateY(-5%);
          transform: scale(1.45) translateY(-5%);
}

.chara--parts--1 .timerEvent__kittyParts--inner {
  padding-top: 70%;
  background-image: url(../img/contents/timerEvent/kitty/kittyParts--1.png?20250918);
}

.chara--parts--2 .timerEvent__kittyParts--inner {
  padding-top: 100%;
  background-image: url(../img/contents/timerEvent/kitty/kittyParts--2--1.png?20250918);
}

.chara--parts--2 .timerEvent__kittyParts.parts--change .timerEvent__kittyParts--inner {
  padding-top: 100%;
  background-image: url(../img/contents/timerEvent/kitty/kittyParts--2--2.png?20250918);
}

.chara--parts--3 .timerEvent__kittyParts--inner {
  padding-top: 100%;
  background-image: url(../img/contents/timerEvent/kitty/kittyParts--3--1.png?20250918);
}

.chara--parts--3 .timerEvent__kittyParts.parts--change .timerEvent__kittyParts--inner {
  padding-top: 100%;
  background-image: url(../img/contents/timerEvent/kitty/kittyParts--3--2.png?20250918);
}

.timerEvent__kittyParts.size--large {
  width: 22.4215246637%;
}

.timerEvent__kittyParts.size--medium {
  width: 17.9372197309%;
}

.timerEvent__kittyParts.size--small {
  width: 12.331838565%;
}

/* ======================================================================================== timerEvent__box cinnamon */
/* ====================================================================== teCinnamon */
.teCinnamon {
  position: absolute;
  width: 44.8430493274%;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
}

/* --------------------------------------- tePompompurin__padding */
.teCinnamon__padding {
  position: relative;
  padding-top: 60%;
}

.teCinnamon__chara {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url(../img/contents/timerEvent/cinnamon/chara.png?20250918);
  z-index: 1;
  -webkit-transform: rotate(16deg);
          transform: rotate(16deg);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform-origin: 45% 56%;
          transform-origin: 45% 56%;
}
.teCinnamon__chara.active {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

/* ====================================================================== teCinnamon__complete */
.teCinnamon__complete--wrapper {
  position: absolute;
  width: 67.264573991%;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 5%);
          transform: translate(-50%, 5%);
}

.teCinnamon__complete {
  position: relative;
  padding-top: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url(../img/contents/timerEvent/cinnamon/complete.png?20250918);
}

/* ====================================================================== balloon */
.balloon {
  position: absolute;
  width: 150%;
  bottom: 0;
  left: -31%;
}

.balloonInner {
  position: relative;
  padding-top: 100%;
  -webkit-transform-origin: 43% 85%;
          transform-origin: 43% 85%;
  -webkit-transform: rotate(-23deg);
          transform: rotate(-23deg);
  z-index: 1;
}

.balloonTarget, .balloonSvg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 43% 85%;
          transform-origin: 43% 85%;
}

@-webkit-keyframes balloon-anime {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}

@keyframes balloon-anime {
  0% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
}
@-webkit-keyframes balloon-anime-2 {
  0% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  100% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
}
@keyframes balloon-anime-2 {
  0% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  100% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
}
/* --------------------------------------- balloonTarget */
.balloonTarget--1 {
  -webkit-animation: balloon-anime-2 1s ease-in-out 0s infinite alternate;
  animation: balloon-anime-2 1s ease-in-out 0s infinite alternate;
}

.balloonTarget--2 {
  -webkit-animation: balloon-anime 1.3s ease-in-out 0s infinite alternate;
  animation: balloon-anime 1.3s ease-in-out 0s infinite alternate;
}

.balloonTarget--3 {
  -webkit-animation: balloon-anime 1.5s ease-in-out 0s infinite alternate;
  animation: balloon-anime 1.5s ease-in-out 0s infinite alternate;
}

.balloonTarget--1 {
  z-index: 1;
}

.balloonTarget--2 {
  z-index: 2;
}

.balloonTarget--3 {
  z-index: 2;
}

/* --------------------------------------- balloonInner 1 svg */
.balloonTarget--1 .st0 {
  fill: #fff;
}
.balloonTarget--1 .st1 {
  fill: #a1d6d3;
}
.balloonTarget--1 .st2 {
  fill: none;
  stroke: #a1c3e6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.balloonTarget--2 .st0 {
  fill: #a1c3e6;
}
.balloonTarget--2 .st1 {
  fill: #fff;
}
.balloonTarget--2 .st2 {
  fill: none;
  stroke: #a1c3e6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.balloonTarget--3 .st0 {
  fill: #fff697;
}
.balloonTarget--3 .st1 {
  fill: #fff;
}
.balloonTarget--3 .st2 {
  fill: none;
  stroke: #a1c3e6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

/* --------------------------------------- balloonInner 1 2 3 */
.balloonInner--1, .balloonInner--2, .balloonInner--3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.chara--parts--1 .balloonInner--1 {
  display: block;
}

.chara--parts--2 .balloonInner--2 {
  display: block;
}

.chara--parts--3 .balloonInner--3 {
  display: block;
}

/* ======================================================================================== timerEvent__box pompompurin */
/* ====================================================================== tePompompurin */
.tePompompurin {
  position: absolute;
  width: 67.264573991%;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  overflow: hidden;
}

/* --------------------------------------- tePompompurin__padding */
.tePompompurin__padding {
  position: relative;
  padding-top: 100%;
}

/* ====================================================================== teHangyodon__parts */
.tePompompurin__parts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------------- shadow main mainParts */
.tePompompurin__parts--shadow, .tePompompurin__parts--main, .tePompompurin__parts--mainParts {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.tePompompurin__parts--main, .tePompompurin__parts--mainParts {
  z-index: 4;
}

.tePompompurin__parts--main {
  background-image: url(../img/contents/timerEvent/pompompurin/main.png?20250919);
}

.tePompompurin__parts--shadow {
  z-index: 1;
}

/* --------------------------------------- complete */
.tePompompurin__complete {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url(../img/contents/timerEvent/pompompurin/complete.png?20250918);
}

/* --------------------------------------- anime */
.tePompompurin__parts--anime {
  z-index: 2;
}

.teAnime {
  position: absolute;
  width: 2500%;
  height: 100%;
  top: 0;
  left: 0;
}

@-webkit-keyframes cup-anime {
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes cup-anime {
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.teAnime__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position-x: 0%;
  background-position-y: 50%;
  background-size: 100% auto;
  -webkit-animation: cup-anime 2s steps(25) 0s infinite;
  animation: cup-anime 2s steps(25) 0s infinite;
}

.cupAnime--speedChange .teAnime__inner {
  -webkit-animation: cup-anime 0.4s steps(25) 0s infinite;
  animation: cup-anime 0.4s steps(25) 0s infinite;
}

.tePompompurin__parts--shadow {
  background-image: url(../img/contents/timerEvent/pompompurin/shadow--1.png?20250918);
}

.teAnime__inner {
  background-image: url(../img/contents/timerEvent/pompompurin/sheets--1.png?20250919);
}

.chara--parts--1 .tePompompurin__parts--shadow {
  background-image: url(../img/contents/timerEvent/pompompurin/shadow--1.png?20250918);
}
.chara--parts--1 .teAnime__inner {
  background-image: url(../img/contents/timerEvent/pompompurin/sheets--1.png?20250919);
}

.chara--parts--2 .tePompompurin__parts--shadow {
  background-image: url(../img/contents/timerEvent/pompompurin/shadow--2.png?20250918);
}
.chara--parts--2 .teAnime__inner {
  background-image: url(../img/contents/timerEvent/pompompurin/sheets--2.png?20250919);
}

.chara--parts--3 .tePompompurin__parts--shadow {
  background-image: url(../img/contents/timerEvent/pompompurin/shadow--3.png?20250918);
}
.chara--parts--3 .teAnime__inner {
  background-image: url(../img/contents/timerEvent/pompompurin/sheets--3.png?20250919);
}

/* ======================================================================================== timerEvent__box hangyodon */
.timerEvent__box::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: 0.7;
  pointer-events: none;
}

/* ====================================================================== teHangyodon */
.teHangyodon {
  position: absolute;
  width: 67.264573991%;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  overflow: hidden;
}

/* --------------------------------------- teHangyodon__padding */
.teHangyodon__padding {
  position: relative;
  padding-top: 100%;
}

/* ====================================================================== teHangyodon__parts */
.teHangyodon__parts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------------- hightLignt main complete */
.teHangyodon__parts--hightLignt, .teHangyodon__parts--main, .teHangyodon__parts--main--2 {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.teHangyodon__parts--hightLignt {
  background-image: url(../img/contents/timerEvent/hangyodon/highLignt.png?20250918);
  z-index: 5;
}

.teHangyodon__parts--main {
  background-image: url(../img/contents/timerEvent/hangyodon/main--1.png?20250918);
  z-index: 3;
}

.teHangyodon__parts--main--2 {
  background-image: url(../img/contents/timerEvent/hangyodon/main--2.png);
  z-index: 3;
}

.teHangyodon__complete {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url(../img/contents/timerEvent/hangyodon/complete.png?20250918);
  -webkit-transform: translateY(8%);
          transform: translateY(8%);
}

/* ====================================================================== mask */
.teHangyodon__parts--mask {
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-box-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
  -webkit-mask-box-position: center center;
  mask-size: 100% auto;
  -webkit-mask-size: 100% auto;
  -webkit-mask-box-size: 100% auto;
  mask-image: url(../img/contents/timerEvent/hangyodon/mask.svg);
  -webkit-mask-image: url(../img/contents/timerEvent/hangyodon/mask.svg);
}

/* --------------------------------------- drink */
.teHangyodon__parts--drink {
  z-index: 1;
}

.drinkTarget {
  position: absolute;
  top: 33%;
  left: 10%;
  width: 80%;
  height: 46%;
}

.chara--parts--1 .drinkTarget {
  background-color: #d4eae0;
}

.chara--parts--2 .drinkTarget {
  background-color: #f5b1a2;
}

.chara--parts--3 .drinkTarget {
  background-color: #f5b4d0;
}

.teHangyodon__parts--drinkbg {
  z-index: 0;
}
.teHangyodon__parts--drinkbg .drinkTarget.drinkbgTarget {
  background-color: #fff;
}

.teHangyodon__parts--drinkFront {
  z-index: 4;
}
.teHangyodon__parts--drinkFront .drinkTarget {
  opacity: 0.15;
  background-color: #fff;
}

.teHangyodon__parts--drink, .teHangyodon__parts--drinkFront {
  -webkit-transform: translateY(1%);
          transform: translateY(1%);
}

/* --------------------------------------- awaSvg */
.awaSvg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.awaSvg .st0 {
  fill: #fff;
}

/* --------------------------------------- awaBack */
.teHangyodon__parts--awaBack {
  z-index: 2;
}

/* --------------------------------------- awaFront */
.teHangyodon__parts--awaFront {
  z-index: 2;
}

@-webkit-keyframes awa-anime {
  0% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%);
  }
  100% {
    -webkit-transform: translateX(0%) translateY(-100%);
            transform: translateX(0%) translateY(-100%);
  }
}

@keyframes awa-anime {
  0% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%);
  }
  100% {
    -webkit-transform: translateX(0%) translateY(-100%);
            transform: translateX(0%) translateY(-100%);
  }
}
.js--awa {
  -webkit-animation: awa-anime 6s linear 0s infinite;
  animation: awa-anime 6s linear 0s infinite;
}
.js--awa:nth-child(2n) {
  -webkit-animation: awa-anime 9s linear 0s infinite;
  animation: awa-anime 9s linear 0s infinite;
}
.js--awa:nth-child(3n) {
  -webkit-animation: awa-anime 7s linear 1s infinite;
  animation: awa-anime 7s linear 1s infinite;
}
.js--awa:nth-child(5n) {
  -webkit-animation: awa-anime 5s linear 0s infinite;
  animation: awa-anime 5s linear 0s infinite;
}

/* --------------------------------------- progress complete*/
.timerEvent__box--progress, .timerEvent__box--complete {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.timerEvent__box--complete {
  opacity: 0;
  -webkit-transform: translate(0, 10%);
          transform: translate(0, 10%);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.timer--complete .timerEvent__box--progress {
  display: none;
}
.timer--complete .timerEvent__box--complete {
  display: block;
}

.is--tool--pomodoro.is--chara--hangyodon.timer--start.timer--complete--charaShow .teHangyodon {
  opacity: 0;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

.is--tool--pomodoro.is--chara--pompompurin.timer--start.timer--complete--charaShow .tePompompurin {
  opacity: 0;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

.teCinnamon__complete {
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.is--tool--pomodoro.is--chara--cinnamon.timer--start.timer--complete--charaShow .teCinnamon {
  opacity: 0;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}
.is--tool--pomodoro.is--chara--cinnamon.timer--start.timer--complete--charaShow .teCinnamon__complete {
  opacity: 0;
}

/* --------------------------------------- dot-anime*/
@-webkit-keyframes dot-anime {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes dot-anime {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.timer--start .timerCount__dot--p {
  -webkit-animation: dot-anime 1s linear 0s infinite;
  animation: dot-anime 1s linear 0s infinite;
}

.timer--complete .timerCount__dot--p {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

/* --------------------------------------- timerEvent box */
.timerEvent__box {
  opacity: 0;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  z-index: 3;
}

.is--tool--default.timer--set .timerEvent--kitty {
  opacity: 1;
}

/* --------------------------------------- timerEvent teHangyodon */
.teHangyodon {
  opacity: 0;
  -webkit-transform: translate(-50%, 16%);
          transform: translate(-50%, 16%);
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.is--tool--pomodoro.is--chara--hangyodon.timer--start .timerEvent--hangyodon {
  opacity: 1;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.is--tool--pomodoro.is--chara--hangyodon.timer--start .teHangyodon {
  opacity: 1;
  -webkit-transform: translate(-50%, 6%);
          transform: translate(-50%, 6%);
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}

/* --------------------------------------- timerEvent tePompompurin */
.tePompompurin {
  opacity: 0;
  -webkit-transform: translate(-50%, 16%);
          transform: translate(-50%, 16%);
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.is--tool--pomodoro.is--chara--pompompurin.timer--start .timerEvent--pompompurin {
  opacity: 1;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.is--tool--pomodoro.is--chara--pompompurin.timer--start .tePompompurin {
  opacity: 1;
  -webkit-transform: translate(-50%, 6%);
          transform: translate(-50%, 6%);
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}

/* --------------------------------------- timerEvent teCinnamon */
.teCinnamon {
  opacity: 0;
  -webkit-transform: translate(-50%, 10%);
          transform: translate(-50%, 10%);
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.is--tool--pomodoro.is--chara--cinnamon.timer--start .timerEvent--cinnamon {
  opacity: 1;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.is--tool--pomodoro.is--chara--cinnamon.timer--start .teCinnamon {
  opacity: 1;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}

/* ============================================================================================ timerEditModal */
.timerEditModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 70;
  background-color: rgba(87, 87, 87, 0.7);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.temInner {
  position: absolute;
  width: 305px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  padding: 20px 10px 10px;
  border-width: 2px;
  border-style: solid;
  border-color: #fff;
  border-radius: 10px;
  background-color: rgba(var(--color-body), 1);
  color: rgba(var(--color-chara), 1);
}

/* ====================================================================== temBlock */
.timerEditModal__closeBtn {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  right: 0;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: #fff;
  background-color: rgba(var(--color-chara), 1);
  z-index: 5;
  cursor: pointer;
}

.timerEditModal__closeBtn--line {
  position: absolute;
  width: 14px;
  height: 2px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.timerEditModal__closeBtn--line::before, .timerEditModal__closeBtn--line::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.timerEditModal__closeBtn--line::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.timerEditModal__closeBtn--line::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/* ====================================================================== temBlock */
.temBlock__title {
  font-size: 15px;
  line-height: 1;
  text-align: center;
  margin-bottom: 15px;
}

/* --------------------------------------- temBlock */
.temBlock {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.temBlock::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: calc(100% + 20px);
  height: 2px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  top: auto;
  bottom: 0;
  background-color: #fff;
}
.temBlock:last-of-type {
  padding-bottom: 0;
}
.temBlock:last-of-type::after {
  display: none;
}

.temBlock__select--wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.temBlock__selectTarget {
  position: relative;
}

/* ====================================================================== timerSelect */
.timerSelect {
  width: 90px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  color: rgba(var(--color-chara), 1);
  background-color: #fff;
  letter-spacing: 0.03em;
  border-radius: 12px;
  padding: 10px 0 10px 15px;
}

select:disabled ~ .selectIcon {
  background-color: #e6c6ef;
}

.timerSelect[name=second-1] {
  margin-left: 13px;
}

/* --------------------------------------- selectIcon */
.selectIcon {
  position: absolute;
  width: 20px;
  height: 40px;
  right: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 9999px;
  pointer-events: none;
  background-color: rgba(var(--color-chara), 1);
}

/* --------------------------------------- selectIcon__arrow */
.selectIcon__arrow {
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid #fff;
}

/* --------------------------------------- selectText */
.timerText {
  -ms-flex-item-align: center;
      align-self: center;
  font-size: 20px;
  line-height: 1;
  margin-left: 8px;
}

/* --------------------------------------- timerEditBtn */
.timerEditBtn {
  position: relative;
  padding: 13px;
  border-radius: 5px;
  background-color: rgba(var(--color-chara), 1);
  cursor: pointer;
}
.timerEditBtn .hoverText__base, .timerEditBtn .hoverText__position {
  text-align: center;
}
.timerEditBtn .hoverText__base > span, .timerEditBtn .hoverText__position > span {
  font-size: 20px;
  font-family: YakuHanJP, "zen-kaku-gothic-antique", sans-serif;
  font-weight: 700;
  color: #fff;
}
.timerEditBtn .timerBtn__eventIcon--inner {
  background-color: #fff;
}
.timerEditBtn .timerBtn__eventIcon--inner::before {
  border-color: transparent transparent transparent rgba(var(--color-chara), 1);
}

.timerEditModal--show .timerEditModal {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.temBlock--default, .temBlock--pomodoro {
  display: none;
}

.is--tool--default .temBlock--default {
  display: block;
}

.is--tool--pomodoro .temBlock--pomodoro {
  display: block;
}

.is--tool--pomodoro.is--chara--hangyodon.timerEditModal--show {
  --color-chara: 94, 207, 189;
}

/* ============================================================================================ bgBalloon */
.bgBalloon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.bgBalloon__Target {
  position: absolute;
  width: 7.3333333333%;
  left: 0;
  bottom: 0;
}

.bgBalloon__Target--inner {
  padding-top: 554.5454545455%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.bgBalloon__Target--1 {
  left: 20%;
  bottom: 10%;
  width: 10%;
}
.bgBalloon__Target--1 .bgBalloon__Target--inner {
  background-image: url(../img/contents/timerEvent/cinnamon/bgBalloon--1.svg);
}

.bgBalloon__Target--2 {
  left: 10%;
  bottom: 0%;
  width: 9%;
}
.bgBalloon__Target--2 .bgBalloon__Target--inner {
  background-image: url(../img/contents/timerEvent/cinnamon/bgBalloon--2.svg);
}

.bgBalloon__Target--3 {
  left: 50%;
  bottom: 0%;
  width: 12%;
}
.bgBalloon__Target--3 .bgBalloon__Target--inner {
  background-image: url(../img/contents/timerEvent/cinnamon/bgBalloon--3.svg);
}

.bgBalloon__Target--4 {
  left: 60%;
  bottom: 20%;
  width: 13%;
}
.bgBalloon__Target--4 .bgBalloon__Target--inner {
  background-image: url(../img/contents/timerEvent/cinnamon/bgBalloon--4.svg);
}

.bgBalloon__Target--5 {
  left: 65%;
  bottom: 10%;
  width: 11%;
}
.bgBalloon__Target--5 .bgBalloon__Target--inner {
  background-image: url(../img/contents/timerEvent/cinnamon/bgBalloon--5.svg);
}

.bgBalloon__Target--6 {
  left: 80%;
  bottom: 20%;
  width: 8%;
}
.bgBalloon__Target--6 .bgBalloon__Target--inner {
  background-image: url(../img/contents/timerEvent/cinnamon/bgBalloon--6.svg);
}

/* ============================================================================= otm__inner */
.otm__inner {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* ============================================================ otmBanner */
.otmBanner {
  position: relative;
}

.otm__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* --------------------------------------- otmBanner link */
.otmBanner__link {
  position: relative;
  width: calc(165 * 100 / 1366 * 1vw);
  margin: 0 calc(20 * 100 / 1366 * 1vw);
}

/* --------------------------------------- otmBanner img */
.otmBanner__chara {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: calc(100% - 10 * 100 / 1366 * 1vw);
  z-index: 2;
}

.otmBanner__chara--inner {
  padding-top: 37.5757575758%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

/* --------------------------------------- otmBanner img */
.otmBanner__img {
  padding-top: 100%;
  border-radius: calc(42 * 100 / 1366 * 1vw);
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: #fff;
  -webkit-box-shadow: 0 0 15px rgba(var(--color-chara), 0.15);
          box-shadow: 0 0 15px rgba(var(--color-chara), 0.15);
  z-index: 1;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.otmBanner--kitty .otmBanner__chara--inner {
  background-image: url(../img/contents/otherModal/1--chara.svg);
}
.otmBanner--kitty .otmBanner__img {
  background-image: url(../img/contents/otherModal/1--bg.svg);
}

.otmBanner--nannichi .otmBanner__chara--inner {
  background-image: url(../img/contents/otherModal/2--chara.svg);
}
.otmBanner--nannichi .otmBanner__img {
  background-image: url(../img/contents/otherModal/2--bg.svg);
}

/* --------------------------------------- .timer--start */
.timerBtn--reset {
  width: 33.6322869955%;
  -webkit-transform: translate(-150%, 0);
          transform: translate(-150%, 0);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.timer--pause .timerBtn--reset {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}
.timer--pause .timerBtn--event {
  width: 65.0224215247%;
  background-color: rgba(var(--color-key-2), 1);
}
.timer--pause .timerBtn--event .timerBtn__title--start {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
.timer--pause .timerBtn--event .timerBtn__title--stop {
  -webkit-transform: translateY(110%);
          transform: translateY(110%);
}
.timer--pause .timerBtn__eventIcon--inner {
  background-color: rgba(var(--color-key-1), 1);
}
.timer--pause .timerBtn__eventIcon--inner::before {
  opacity: 1;
}
.timer--pause .timerBtn__eventIcon--inner::after {
  opacity: 0;
}

.timerEvent__boxChara--main {
  display: block;
}

.timerEvent__boxChara--complete {
  display: none;
}

.timer--complete .timerEvent__boxChara--main {
  display: none;
}
.timer--complete .timerEvent__boxChara--complete {
  display: block;
}

/* ============================================================================= edit 20250910 */
.timer--pause .balloonTarget {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.timer--pause .tePompompurin .teAnime__inner {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.timer--pause .js--awa {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.timer--pause .timerCount__dot--p {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.timer--reset .teSection {
  opacity: 0 !important;
}

.timer--complete .timerCount__num--p, .timer--complete .timerCount__dot--p {
  text-shadow: 0 0 0 rgba(var(--color-key-1), 0) !important;
}

.is--tool--pomodoro.is--chara--cinnamon.timer--start.timer--break .teCinnamon {
  opacity: 0;
}

.is--tool--pomodoro.is--chara--cinnamon.timer--start.timer--break .timerEvent__box--complete {
  opacity: 1;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
}

.tePompompurin .timerEvent__box--progress {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.is--tool--pomodoro.is--chara--pompompurin.timer--start.timer--break .tePompompurin .timerEvent__box--progress {
  opacity: 0;
}

.is--tool--pomodoro.is--chara--pompompurin.timer--start.timer--break .tePompompurin .timerEvent__box--complete {
  opacity: 1;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
}

.teHangyodon .timerEvent__box--progress {
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.6s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.6s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.6s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.is--tool--pomodoro.is--chara--hangyodon.timer--start.timer--break .teHangyodon .timerEvent__box--progress {
  opacity: 0;
}

.is--tool--pomodoro.is--chara--hangyodon.timer--start.timer--break .teHangyodon .timerEvent__box--complete {
  opacity: 1;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
}

/* --------------------------------------- pompompurin svg 表示 */
.tePompompurin__parts--animeSvg {
  z-index: 3;
  opacity: 0;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.tePompompurin__parts--animeSvg svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cupAnime--speedChange .tePompompurin__parts--main {
  background-image: url(../img/contents/timerEvent/pompompurin/main--2.png?20250919);
}
.cupAnime--speedChange .tePompompurin__parts--animeSvg {
  opacity: 0.4;
}

/* ============================================================================= 使うシーンを選択 */
.temBlock__sound .temBlock__title {
  font-size: 16px;
}

.temBlock__title--subText {
  font-size: 12px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  margin-top: -3px;
  margin-bottom: 18px;
}

.soundBtn__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 10px;
}

.soundBtn__target {
  width: 50px;
  cursor: pointer;
}

.soundBtn__icon {
  position: relative;
  padding-top: 100%;
}
.soundBtn__icon::before, .soundBtn__icon::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.soundBtn__icon::before {
  background-color: rgba(var(--color-key-1), 1);
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
.soundBtn__icon::after {
  border-width: 2px;
  border-style: solid;
  border-color: rgba(var(--color-chara), 0);
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}

.soundBtn__iconInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.soundBtn__target:nth-child(1) .soundBtn__iconInner {
  background-image: url(../img/contents/soundIcon--1.svg);
}
.soundBtn__target:nth-child(2) .soundBtn__iconInner {
  background-image: url(../img/contents/soundIcon--2.svg);
}
.soundBtn__target:nth-child(3) .soundBtn__iconInner {
  background-image: url(../img/contents/soundIcon--3.svg);
}
.soundBtn__target:nth-child(4) .soundBtn__iconInner {
  background-image: url(../img/contents/soundIcon--4.svg);
}

.soundBtn__title {
  font-size: 12px;
  text-align: center;
  line-height: 1;
  margin-top: 10px;
  color: rgba(var(--color-key-1), 1);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.soundBtn__target.selected .soundBtn__icon::before {
  background-color: rgba(var(--color-chara), 1);
  -webkit-transform: translate(-50%, -50%) scale(0.8);
          transform: translate(-50%, -50%) scale(0.8);
}
.soundBtn__target.selected .soundBtn__icon::after {
  border-color: rgba(var(--color-chara), 1);
}
.soundBtn__target.selected .soundBtn__title {
  color: rgba(var(--color-chara), 1);
}

@media (hover: hover) and (pointer: fine) {
  .soundBtn__target:hover .soundBtn__icon::before, .soundBtn__target:active .soundBtn__icon::before {
    background-color: rgba(var(--color-chara), 1);
  }
  .soundBtn__target:hover .soundBtn__title, .soundBtn__target:active .soundBtn__title {
    color: rgba(var(--color-chara), 1);
  }
}
/* ============================================================================= balloonSheet */
@-webkit-keyframes balloonSheet-anime {
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes balloonSheet-anime {
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.balloonSheet {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.balloonSheet__inner {
  position: absolute;
  width: 700%;
  height: 100%;
  top: 0;
  left: 0;
}
.balloonSheet__inner::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.balloonSheet {
  opacity: 1;
}

.balloonSheet--show .balloonSvg {
  opacity: 0;
}
.balloonSheet--show .balloonSheet {
  opacity: 1;
}
.balloonSheet--show .balloonSheet .balloonSheet__inner {
  -webkit-animation: balloonSheet-anime 0.5s steps(7) 0.3s forwards;
  animation: balloonSheet-anime 0.5s steps(7) 0.3s forwards;
}

.balloonSheet--1 .balloonSheet__inner::after {
  background-image: url(../img/contents/timerEvent/cinnamon/balloon--1--1--sheet.png?20250918);
}

.balloonSheet--2 .balloonSheet__inner::after {
  background-image: url(../img/contents/timerEvent/cinnamon/balloon--1--2--sheet.png?20250918);
}

.balloonSheet--3 .balloonSheet__inner::after {
  background-image: url(../img/contents/timerEvent/cinnamon/balloon--1--3--sheet.png?20250918);
}

.chara--parts--2 .balloonSheet--1 .balloonSheet__inner::after {
  background-image: url(../img/contents/timerEvent/cinnamon/balloon--2--1--sheet.png?20250918);
}
.chara--parts--2 .balloonSheet--2 .balloonSheet__inner::after {
  background-image: url(../img/contents/timerEvent/cinnamon/balloon--2--2--sheet.png?20250918);
}
.chara--parts--2 .balloonSheet--3 .balloonSheet__inner::after {
  background-image: url(../img/contents/timerEvent/cinnamon/balloon--2--3--sheet.png?20250918);
}

.chara--parts--3 .balloonSheet--1 .balloonSheet__inner::after {
  background-image: url(../img/contents/timerEvent/cinnamon/balloon--3--1--sheet.png?20250918);
}
.chara--parts--3 .balloonSheet--2 .balloonSheet__inner::after {
  background-image: url(../img/contents/timerEvent/cinnamon/balloon--3--2--sheet.png?20250918);
}
.chara--parts--3 .balloonSheet--3 .balloonSheet__inner::after {
  background-image: url(../img/contents/timerEvent/cinnamon/balloon--3--3--sheet.png?20250918);
}

.lottie--target {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.timerBtn__target {
  padding-bottom: 3px;
}

@media only screen and (max-height: 925px) and (min-width: 767px) {
  .timerBtn__target {
    padding-bottom: calc(3 * 100 / 925 * 1vh);
  }
}
/* ============================================================================= edit 20250912 */
.is--tool--pomodoro .timerNav--default .timerNav__iconInner::before {
  background-color: rgba(var(--color-key-1), 1);
}

.timerEvent__inner--cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--color-tabBg-default), 1);
  z-index: 10;
  pointer-events: none;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.4s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.is--tool--pomodoro .timerEvent__inner--cover {
  background-color: rgba(var(--color-tabBg-1), 1);
}

.cover--disable .timerEvent__inner--cover {
  opacity: 0;
}

.is--special.is--tool--pomodoro .timerEvent__inner--cover {
  opacity: 0;
}

#end--3 {
  -webkit-transform: translateY(8%);
          transform: translateY(8%);
}

.timer--complete--charaShow.cover--disable .teSection.teSection__complete {
  overflow: visible;
}

#end--1 {
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.is--tool--pomodoro.is--chara--cinnamon.timer--complete--charaShow #end--1 {
  opacity: 0;
}

/* ============================================================================= edit 20250918 */
/* =============================================================== headerBtn */
.headerBtn {
  position: fixed;
  height: calc(50 * 100 / 1366 * 1vw);
  left: calc(6 * 100 / 1366 * 1vw);
  top: 6px;
  left: 20px;
  z-index: 60;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}

/* --------------------------------------- headerBtn__link */
.headerBtn__link, a.headerBtn__link {
  position: relative;
  height: calc(38 * 100 / 1366 * 1vw);
  top: calc(6 * 100 / 1366 * 1vw);
  border-width: 2px;
  border-style: solid;
  border-color: rgba(var(--color-chara), 1);
  background-color: rgba(var(--color-chara), 1);
  border-radius: 9999px;
  padding-left: calc(40 * 100 / 1366 * 1vw);
  padding-right: calc(15 * 100 / 1366 * 1vw);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* --------------------------------------- logo */
.logo {
  width: calc(83 * 100 / 1366 * 1vw);
}

.logoInner {
  position: relative;
  text-indent: -9999px;
  height: 0;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.logo--sanrioPlus {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.logo--sanrioPlus .logoInner {
  padding-top: 21.686746988%;
  mask-image: url(../img/common/logo--sanrioPlus.svg);
  -webkit-mask-image: url(../img/common/logo--sanrioPlus.svg);
  -webkit-transform: translateY(-5%);
          transform: translateY(-5%);
  background-color: #fff;
}

.headerBtn__link:hover, a.headerBtn__link:hover {
  background-color: #fff;
}
.headerBtn__link:hover .logo--sanrioPlus .logoInner, a.headerBtn__link:hover .logo--sanrioPlus .logoInner {
  background-color: rgba(var(--color-chara), 1);
}

.btnIcon {
  position: absolute;
  width: calc(25 * 100 / 1366 * 1vw);
  height: calc(25 * 100 / 1366 * 1vw);
  right: calc(10 * 100 / 1366 * 1vw);
  top: 50%;
  border-radius: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.arrowBlank {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.arrowBlank:before, .arrowBlank:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-box-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
  -webkit-mask-box-position: center center;
  mask-size: 100% auto;
  -webkit-mask-size: 100% auto;
  -webkit-mask-box-size: 100% auto;
  mask-image: url(../img/common/arrowBlank.svg);
  -webkit-mask-image: url(../img/common/arrowBlank.svg);
  background-color: #fff;
}
.arrowBlank:after {
  -webkit-transform: translate(-100%, 0%);
          transform: translate(-100%, 0%);
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

.peAll {
  pointer-events: all;
}

.btnIcon.btnIcon--back {
  right: auto;
  left: calc(5 * 100 / 1366 * 1vw);
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
  background-color: #fff;
}
.btnIcon.btnIcon--back .arrowBlank::before {
  background-color: rgba(var(--color-chara), 1);
}
.btnIcon.btnIcon--back .arrowBlank::after {
  background-color: #fff;
}

.teHangyodon .timerEvent__box--progress {
  overflow: hidden;
}

/* ============================================================================================ hover pc */
@media (hover: hover) and (pointer: fine) {
  .arrowBlank__hoverWrapper:hover .arrowBlank:before, .arrowBlank__hoverWrapper:active .arrowBlank:before {
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition-duration: 0.15s;
    -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition-duration: 0.15s;
    -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition-duration: 0.15s;
    -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transform: translate(100%, 0%);
            transform: translate(100%, 0%);
  }
  .arrowBlank__hoverWrapper:hover .arrowBlank:after, .arrowBlank__hoverWrapper:active .arrowBlank:after {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition-duration: 0.4s;
    -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition-duration: 0.4s;
    -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-delay: 0.1s;
    -webkit-transition-delay: 0.1s;
  }
  .arrowBlank__hoverWrapper:hover .btnIcon.btnIcon--back, .arrowBlank__hoverWrapper:active .btnIcon.btnIcon--back {
    background-color: rgba(var(--color-chara), 1);
  }
}
/* ============================================================================================ shareBox */
.shareBox {
  position: absolute;
  left: 12px;
  bottom: calc(100% + 10px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* --------------------------------------- shareTitle */
.shareTitle {
  position: relative;
  width: min(120 * 100 / 1366 * 1vw, 120px);
  height: min(38 * 100 / 1366 * 1vw, 38px);
  border-radius: 9999px;
  background-color: rgba(var(--color-key-1), 1);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.shareTitle__inner {
  position: absolute;
  width: min(50 * 100 / 1366 * 1vw, 50px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.shareTitle--p {
  padding-top: 24.1379310345%;
  mask-image: url(../img/common/snsShare.svg);
  -webkit-mask-image: url(../img/common/snsShare.svg);
  background-color: #fff;
}

/* --------------------------------------- shareList */
.shareList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.shareTarget {
  position: relative;
  width: min(38 * 100 / 1366 * 1vw, 38px);
  height: min(38 * 100 / 1366 * 1vw, 38px);
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  background-color: rgba(var(--color-chara), 1);
  margin-left: min(12 * 100 / 1366 * 1vw, 12px);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  border-color: rgba(255, 255, 255, 0);
}

/* --------------------------------------- shareList */
.snsIcon {
  position: absolute;
  width: min(18 * 100 / 1366 * 1vw, 18px);
  height: min(18 * 100 / 1366 * 1vw, 18px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  background-color: #fff;
}

.snsIcon--x {
  mask-image: url(../img/common/snsIcon--x.svg);
  -webkit-mask-image: url(../img/common/snsIcon--x.svg);
}

.snsIcon--line {
  mask-image: url(../img/common/snsIcon--line.svg);
  -webkit-mask-image: url(../img/common/snsIcon--line.svg);
}

.snsIcon--fb {
  mask-image: url(../img/common/snsIcon--fb.svg);
  -webkit-mask-image: url(../img/common/snsIcon--fb.svg);
}

/* --------------------------------------- shareTarget hover pc */
@media (hover: hover) and (pointer: fine) {
  .shareTarget:hover, .shareTarget:active {
    border-color: white;
  }
}