@charset "utf-8";

:root {
  color-scheme: only light;
  --black: #000;
  --text: #303030;
  --text-dark: #2b2b2b;
  --line-dark: #265ea9;
  --line-theme: #205296;
  --line-light: #c1dff7;
  --theme: #153969;
  --theme-light: #006ae3;
  --theme-white: #abc0dd;
  --white: #FFFFFF;
  --res: min(100px, 6.812vw);
}

@media screen and (max-width:1279px) {
  :root {
    --res: min(13.888vw, 178px);
  }
}


/* default */
* {
  text-rendering: optimizeLegibility;
  font-family: 'Paperlogy', sans-serif;
  font-style: normal;
  font-weight: 400;
  word-wrap: break-word;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--text);
  font-size: var(--res);
  background: var(--white);
}

body {
  visibility: hidden;
}

body[data-font-loaded="true"] {
  visibility: visible;
}

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
table,
th,
td,
span,
small,
strong,
form,
fieldset,
legend,
select,
button,
input,
textarea,
figure,
figcaption {
  margin: 0;
  margin-block: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  font-weight: inherit;
  font-style: inherit;
  color: inherit
}

fieldset,
li,
img {
  border: 0;
  vertical-align: baseline;
}

ul,
ol {
  list-style: none;
}

input,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button {
  box-shadow: none;
  outline: 0;
  border: 0 none;
  background: transparent;
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
}

a,
a:focus,
a:active,
a:hover {
  outline: none;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a {
  display: inline-block
}

select::-ms-expand {
  display: none;
}

select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0 none;
  outline: 0 none;
}

img,
video,
picture,
svg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.screen-out {
  position: absolute;
  display: block;
  right: 100%;
  bottom: 100%;
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}


a:active,
a:hover,
button:active,
button:hover {
  color: inherit;
  font: inherit
}

/* common */
body {
  overflow-x: clip
}

.sec {
  display: block;
  position: relative;
  height: auto;
  z-index: 1;
  overflow-x: clip;
  height: auto;
}

.sec-bg {
  position: absolute;
  left: 0;
  z-index: -1;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.sec-wrap {
  position: relative;
  height: auto;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cmp-name {
  display: flex;
  width: fit-content;
  align-items: center;
  font-weight: 900;
  line-height: 105%;
  color: var(--theme);
  gap: .075em
}

.cmp-name>i {
  display: block;
  flex: none;
  font: inherit;
  letter-spacing: -.02em
}

.cmp-name .heart {
  width: .92em
}

.video-wrapper {
  position: relative;
  overflow: clip;
  margin: 0 auto
}

.video-wrapper::before {
  content: "";
  display: block;
  padding-top: 56.25%
}

.video-wrapper .video-player {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000
}

.video-wrapper .preview {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity .15s ease
}

.video-wrapper .preview>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale3d(1, 1, 1);
  transition: transform .5s ease-out
}

.video-wrapper .preview::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: url(../img/icon-play.svg) no-repeat center center / contain;
  z-index: 2;
}

.video-wrapper .video-player.playing+.preview {
  opacity: 0
}

.is-desktop .video-player:hover+.preview>img {
  transform: scale3d(1.02, 1.02, 1)
}

.has-line {
  display: inline-block;
  position: relative;
  z-index: -1;
  font: inherit;
  letter-spacing: inherit
}

.has-line>i {
  font: inherit;
  letter-spacing: inherit;
  position: relative;
  z-index: 2
}

.has-line::before {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  left: -.08em;
  right: -.08em;
  top: -.02em;
  bottom: -.02em;
  background: var(--theme);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s ease-in-out
}

.reveal[data-visible="true"] .has-line::before {
  clip-path: inset(0 0 0 0);
}

@media (min-width:1280px) {
  .sec-wrap {
    width: calc(100% - 2.26rem);
    max-width: 14.68rem
  }

  .mo-only {
    display: none
  }

  .pc-only {
    display: block
  }
}

@media (max-width:1279px) {
  .sec-wrap {
    width: calc(100% - .8rem)
  }

  .mo-only {
    display: block
  }

  .pc-only {
    display: none
  }
}

/* header */
#header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  background: var(--white);
  border-bottom: .03rem solid var(--line-dark)
}

#header .sec-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

#header .bi {
  flex: none;
  display: block;
  width: 1.9rem
}

@media (min-width:1280px) {
  #main {
    padding-top: .8rem
  }

  #header {
    height: .78rem
  }

  #header .sec-wrap {
    width: calc(100% - .8rem);
    max-width: 18.4rem
  }
}

@media (max-width:1279px) {
  #main {
    padding-top: .96rem
  }

  #header {
    height: .94rem
  }

  #header .sec-wrap {
    width: calc(100% - .24rem)
  }
}

/* footer */
#footer {
  background: var(--theme);
  color: var(--white);
  text-align: center
}

#footer .sec-title {
  display: block;
  font-weight: 600;
  position: relative;
  padding-bottom: 1.24rem
}

#footer .sec-title::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  width: 1px;
  background: var(--white);
  bottom: .24rem;
  height: .76rem;
  opacity: .35
}

#footer .sec-title>strong {
  display: inline-block;
  font: inherit;
  color: inherit;
  line-height: 110%;
  letter-spacing: -.02em;
  position: relative
}

#footer .sec-title>small {
  display: block;
  color: inherit;
  font-size: .39rem;
  line-height: 110%;
  letter-spacing: 0
}

#footer .bi {
  width: 4.78rem;
  margin: 0 auto;
  margin-top: .82rem
}

#footer .sec-dc {
  display: block;
  font-size: .37rem;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: .02em
}

#footer .sec-dc+.sec-dc {
  margin-top: .55rem
}

@media (min-width:1280px) {
  #footer .sec-wrap {
    padding-top: 1.68rem;
    padding-bottom: 1.54rem
  }

  #footer .sec-title {
    font-size: 1.32rem
  }

  #footer .sec-title>strong::before,
  #footer .sec-title>strong::after {
    display: block;
    position: absolute;
    top: 0;
    font: inherit
  }

  #footer .sec-title>strong::before {
    content: "“";
    right: 100%;
  }

  #footer .sec-title>strong::after {
    content: "”";
    left: 100%
  }

  #footer .sec-title>small {
    padding-top: .1rem
  }
}

@media (max-width:1279px) {
  #footer .sec-wrap {
    padding-top: 1.32rem;
    padding-bottom: 1.56rem
  }

  #footer .sec-title {
    font-size: 1.1rem
  }

  #footer .sec-title>small {
    padding-top: .17rem
  }
}


/* main */
.main {
  z-index: 9
}

.main .sec-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.main .sec-content {
  flex: 1;
  padding: 1.75rem 0
}

.main .sec-name {
  display: block;
  width: fit-content;
  font-size: .25rem;
  line-height: 144%;
  color: var(--white);
  font-weight: 400;
  background: var(--theme);
  border-radius: .2rem 0 .2rem 0;
  padding: 0 .16rem;
  margin-top: .5rem
}

.main .sec-title {
  padding-top: .24rem;
  padding-bottom: .4rem
}

.main .sec-title>span {
  color: var(--text);
  font-weight: 400;
  font-size: 1rem;
  line-height: 105%;
  letter-spacing: -.04em
}

.main .sec-title .cmp-name {
  font-size: 1.02rem
}

.main .sec-dc {
  color: var(--text);
  font-weight: 400;
  font-size: .23rem;
  line-height: .32rem;
  letter-spacing: -.02em
}

.main .sec-dc strong {
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit
}

.main .sec-dc+.sec-dc {
  margin-top: .15rem
}

.main .cta-btn {
  width: 3.24rem;
  height: .67rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .36rem;
  position: relative;
  z-index: 1;
  margin-top: .7rem
}

.main .cta-btn::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: .1rem;
  background-color: var(--theme);
  transition: transform .25s ease-out
}

.main .cta-btn>span {
  position: relative;
  z-index: 1;
  display: block;
  flex: none;
  font-weight: 500;
  letter-spacing: .05em;
  padding: 0 .05rem;
  font-size: .22rem;
  line-height: 110%;
  color: var(--white)
}

.main .cta-btn>.go {
  position: relative;
  z-index: 1;
  display: block;
  flex: none;
  width: .11rem
}

.is-desktop .main .cta-btn:hover::before {
  transform: scale3d(1.02, 1.02, 1)
}

.is-desktop .main .cta-btn:hover .go {
  animation: go-icon-move .45s ease-in-out alternate infinite;
}


.main .sec-name,
.main .sec-title,
.main .sec-dc,
.main .kv,
.main .cta-btn {
  will-change:transform, opacity;
  opacity:0;
}

.main .reveal[data-visible="true"] .sec-name,
.main .reveal[data-visible="true"] .sec-title,
.main .reveal[data-visible="true"] .sec-dc,
.main .reveal[data-visible="true"] .cta-btn {
  animation: commonFadeInUp .7s ease-out forwards;
}
.main .reveal[data-visible="true"] .kv{
  animation: commonFadeInRight .7s ease-out forwards;
}

.main .reveal[data-visible="true"] .kv{
  animation-delay:.25s
}
.main .reveal[data-visible="true"] .sec-name{
  animation-delay:.3s
}
.main .reveal[data-visible="true"] .sec-title{
  animation-delay:.4s
}
.main .reveal[data-visible="true"] .sec-dc{
  animation-delay:.5s
}
.main .reveal[data-visible="true"] .sec-dc + .sec-dc{
  animation-delay:.55s
}
.main .reveal[data-visible="true"] .cta-btn{
  animation-delay:.65s
}

@keyframes commonFadeInUp{
  0%{
    opacity: 0;
    transform:translate3d(0,.2rem,0);
  }  
  100%{
    opacity: 1;
    transform:translate3d(0,0,0);
  }
}
@keyframes commonFadeInRight{
  0%{
    opacity: 0;
    transform:translate3d(-.35rem,0,0);
  }  
  100%{
    opacity: 1;
    transform:translate3d(0,0,0);
  }
}

@keyframes go-icon-move {
  0% {
    transform: translate3d(0, 0, 0);
  }

  85%,
  100% {
    transform: translate3d(25%, 0, 0);
  }
}

.quick-btn {
  position: absolute;
  z-index: 20;
  right: .46rem;
  bottom: .58rem;
}

.quick-btn.sticky {
  position: fixed;
}

.quick-btn>img {
  pointer-events: none;
  will-change: transform;
  transition: transform .25s ease-out
}

.quick-btn::before {
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 100%;
  width: 100%;
  padding-top: 100%;
  content: "";
  z-index: -1;
  display: block;
  box-shadow: 0px 0 .24rem .11rem #00000040;
}

.is-desktop .quick-btn:hover>img {
  transform: scale3d(1.02, 1.02, 1);
}

@media (min-width:1280px) {
  .main .sec-bg {
    background-image: url(../img/main-bg.jpg)
  }

  .main .kv {
    width: 9.51rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -9.6rem
  }

  .main .sec-wrap {
    display: flex;
    flex-direction: row-reverse;
    gap: 0;
    height: auto
  }

  .main .sec-visual {
    flex: none;
    width: 48%
  }

  .quick-btn {
    width: 1.94rem;
    right: .46rem;
    bottom: .58rem;
  }
}

@media (max-width:1279px) {
  .main .sec-bg {
    background-image: url(../img/m_main.jpg)
  }

  .main .sec-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto
  }

  .main .sec-content {
    padding: 1.75rem 0
  }

  .main .sec-visual {
    height: 2.75rem
  }

  .quick-btn {
    width: 1.92rem;
    right: .32rem;
    bottom: .36rem;
  }
}



/* why */
/*** 01 ***/
.why-01 {
  background: url(../img/why01-bg.jpg) no-repeat center center / cover;
}

.why-01 .sec-title {
  color: var(--white);
  text-align: center
}

.why-01 .sec-title>span,
.why-01 .sec-title>strong {
  letter-spacing: -.04em;
  line-height: 115%;
  display: block
}

.why-01 .sec-title>span {
  font-weight: 400
}

.why-01 .sec-title>strong {
  font-weight: 600
}


.why-01 .sec-title > span,
.why-01 .sec-title > strong,
.why-01 .video-wrapper {
  will-change:transform, opacity;
  opacity:0;
}

.why-01 .reveal[data-visible="true"] .sec-title > span,
.why-01 .reveal[data-visible="true"] .sec-title > strong,
.why-01 .reveal[data-visible="true"] .video-wrapper {
  animation: commonFadeInUp .7s ease-out forwards;
}
.why-01 .reveal[data-visible="true"] .sec-title > span{
  animation-delay:.3s
}
.why-01 .reveal[data-visible="true"] .sec-title > strong{
  animation-delay:.4s
}
.why-01 .reveal[data-visible="true"] .video-wrapper{
  animation-delay:.55s
}

@media (min-width:1280px) {
  .why-01 .sec-wrap {
    padding: 1.24rem 0 1.32rem
  }

  .why-01 .video-wrapper {
    width: 14rem
  }

  .why-01 .sec-title {
    padding-bottom: .64rem
  }

  .why-01 .sec-title>span {
    font-size: .7rem
  }

  .why-01 .sec-title>strong {
    font-size: .9rem
  }
}

@media (max-width:1279px) {
  .why-01 .sec-wrap {
    padding: 1.12rem 0 1.44rem
  }

  .why-01 .sec-title {
    padding-bottom: .56rem
  }

  .why-01 .sec-title>span,
  .why-01 .sec-title>strong {
    font-size: .72rem
  }
}


/*** 02 ***/
.why-02 {
  background-color: #0d0d0c;
  background-repeat: no-repeat;
  background-position: center center;
}

.why-02 .sec-title>span,
.why-02 .sec-title>strong {
  display: block;
  color: var(--white);
}

.why-02 .sec-title>span {
  line-height: 120%;
  font-weight: 400;
  letter-spacing: -.04em;
  font-size: .5rem;
  padding-bottom: .02rem
}

.why-02 .sec-title>strong {
  line-height: 115%;
  font-weight: 600;
  letter-spacing: -.02em
}

.why-02 .sec-title .has-line {
  padding-left: .1em
}

.why-02 .sec-dc {
  position: relative;
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--white);
  line-height: 160%
}

.why-02 .sec-dc::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  background-color: var(--line-theme);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .3s ease-in-out
}

.why-02 .welfare-mission {
  z-index: 1;
  display: flex;
  gap: .0;
  position: relative;
  color: var(--white);
  width: 4.6rem;
  align-items: center;
  justify-content: center;
  height: 1.24rem
}

.why-02 .welfare-mission::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  background: var(--theme);
  opacity: .85;
  border-radius: .3rem;
  z-index: -1
}

.why-02 .welfare-mission .icon {
  flex: none;
  width: .88rem;
  padding: .18rem
}

.why-02 .welfare-mission>p {
  flex: 1;
  position: relative;
  padding: 0 .22rem
}

.why-02 .welfare-mission>p::before {
  content: "";
  display: block;
  position: absolute;
  background: var(--theme-white);
  opacity: .35;
  width: 1px;
  height: 1rem;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.why-02 .welfare-mission>p>strong {
  color: var(--white);
  display: block;
  font-size: .2rem;
  line-height: .28rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.why-02 .welfare-mission>p>span {
  color: var(--theme-white);
  display: block;
  font-size: .16rem;
  line-height: .23rem;
  font-weight: 300;
  letter-spacing: -.02em
}

.why-02 .reveal[data-visible="true"] .sec-dc::before {
  clip-path: inset(0 0 0 0)
}

.why-02 .sec-title > span,
.why-02 .sec-title > strong,
.why-02 .sec-dc,
.why-02 .welfare-mission {
  will-change:transform, opacity;
  opacity:0;
}

.why-02 .reveal[data-visible="true"] .sec-title > span,
.why-02 .reveal[data-visible="true"] .sec-title > strong,
.why-02 .reveal[data-visible="true"] .sec-dc,
.why-02 .reveal[data-visible="true"] .welfare-mission {
  animation: commonFadeInUp .7s ease-out forwards;
}
.why-02 .reveal[data-visible="true"] .sec-title > span{
  animation-delay:.3s
}
.why-02 .reveal[data-visible="true"] .sec-title > strong{
  animation-delay:.4s
}
.why-02 .reveal[data-visible="true"] .sec-title > strong .has-line::before{
  transition-delay:.45s
}
.why-02 .reveal[data-visible="true"] .sec-dc{
  animation-delay:.55s
}
.why-02 .reveal[data-visible="true"] .sec-dc::before{
  transition-delay:.6s
}
.why-02 .reveal[data-visible="true"] .welfare-mission{
  animation-delay:.7s
}



@media (min-width:1280px) {
  .why-02 {
    background-size: cover;
    background-image: url(../img/why02-bg.jpg)
  }

  .why-02 .sec-wrap {
    padding-top: 1.93rem;
    padding-bottom: 2.37rem;
    padding-left: .28rem
  }

  .why-02 .sec-title>strong {
    font-size: .7rem
  }

  .why-02 .sec-dc {
    font-size: .21rem;
    padding-top: .48rem;
    margin-bottom: .8rem
  }

  .why-02 .sec-dc::before {
    height: .03rem;
    top: .21rem;
    width: .64rem
  }
}

@media (max-width:1279px) {
  .why-02 {
    background-size: 100% auto;
    background-position-y: 0;
    background-image: url(../img/m_why02.jpg)
  }

  .why-02 .sec-wrap {
    padding-top: 3.5rem;
    padding-bottom: 1.12rem;
    width: 100%;
    padding-left: .4rem
  }

  .why-02 .sec-title>strong {
    font-size: .65rem
  }

  .why-02 .sec-dc {
    font-size: .265rem;
    padding-top: .54rem;
    margin-bottom: .6rem
  }

  .why-02 .sec-dc::before {
    height: .03rem;
    top: .18rem;
    width: .64rem
  }
}


/*** 03 ***/
.why-03 {
  background-color: #353b51;
  background-repeat: no-repeat;
  background-position: center center;
}

.why-03 .sec-title>span {
  display: block;
  color: var(--white);
  line-height: 117%;
  font-weight: 600;
  letter-spacing: -.02em
}

.why-03 .has-line::before {
  top: .04em;
  bottom: .04em
}

.why-03 .sec-dc {
  position: relative;
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--white)
}

.why-03 .sec-dc>strong {
  font-weight: 600;
  letter-spacing: -.02em
}

.why-03 .message-author {
  color: var(--white);
  position: relative;
}

.why-03 .message-author>strong,
.why-03 .message-author>small {
  display: block;
  font-weight: 700;
  letter-spacing: .02em
}

.why-03 .message-author>small {
  text-indent: .75em
}


.why-03 .sec-title > span,
.why-03 .sec-dc,
.why-03 .message-author {
  will-change:transform, opacity;
  opacity:0;
}

.why-03 .reveal[data-visible="true"] .sec-title > span,
.why-03 .reveal[data-visible="true"] .sec-dc,
.why-03 .reveal[data-visible="true"] .message-author {
  animation: commonFadeInUp .7s ease-out forwards;
}
.why-03 .reveal[data-visible="true"] .sec-title > span{
  animation-delay:.3s
}
.why-03 .reveal[data-visible="true"] .sec-title > span .has-line::before{
  transition-delay:.35s
}
.why-03 .reveal[data-visible="true"] .sec-title > span + span{
  animation-delay:.4s
}
.why-03 .reveal[data-visible="true"] .sec-title > span + span .has-line::before{
  transition-delay:.45s
}
.why-03 .reveal[data-visible="true"] .sec-dc{
  animation-delay:.55s
}
.why-03 .reveal[data-visible="true"] .sec-dc + .sec-dc {
  animation-delay:.6s
}
.why-03 .reveal[data-visible="true"] .sec-dc + .sec-dc + .sec-dc{
  animation-delay:.65s
}
.why-03 .reveal[data-visible="true"] .message-author{
  animation-delay:.75s
}

.why-03 .reveal[data-visible="true"] .message-author::before{
  transition-delay:.8s
}

@media (min-width:1280px) {
  .why-03 {
    background-size: cover;
    background-image: url(../img/why03-bg.jpg)
  }

  .why-03 .sec-wrap {
    display: flex;
    flex-direction: row-reverse;
    gap: 0;
    height: 11rem;
    align-items: flex-start;
  }

  .why-03 .sec-visual {
    flex: none;
    width: 47%
  }

  .why-03 .sec-content {
    padding-top: .76rem
  }

  .why-03 .sec-title {
    padding-bottom: .28rem
  }

  .why-03 .sec-title>span {
    font-size: .7rem
  }

  .why-03 .sec-dc {
    font-size: .21rem;
    line-height: .34rem
  }

  .why-03 .sec-dc>strong {
    font-size: .27rem;
  }

  .why-03 .sec-dc+.sec-dc {
    margin-top: .1rem
  }

  .why-03 .message-author {
    padding-top: .38rem
  }

  .why-03 .message-author::before {
    content: "";
    display: block;
    position: absolute;
    background: var(--white);
    opacity: .25;
    height: 1px;
    left: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .3s ease-in-out;
    width: 2.5rem;
    top: .16rem
  }

  .why-03 .reveal[data-visible="true"] .message-author::before {
    clip-path: inset(0 0 0 0)
  }

  .why-03 .message-author>strong {
    font-size: .23rem;
    line-height: .26rem
  }

  .why-03 .message-author>small {
    font-size: .15rem;
    line-height: .2rem
  }
}

@media (max-width:1279px) {
  .why-03 {
    background-size: 100% auto;
    background-position-y: 0;
    background-image: url(../img/m_why03.jpg)
  }

  .why-03 .sec-wrap {
    display: flex;
    flex-direction: column-reverse;
    gap: 0;
    align-items: flex-start;
    width: 100%;
    padding: 0
  }

  .why-03 .sec-wrap .sec-visual {
    flex: none;
    width: 100%;
    padding-top: 79.2%
  }

  .why-03 .sec-content {
    padding-left: .4rem;
    padding-bottom: 1.1rem
  }

  .why-03 .sec-title {
    padding-bottom: .36rem
  }

  .why-03 .sec-title>span {
    font-size: .7rem;
    line-height: .82rem
  }

  .why-03 .sec-dc {
    font-size: .22rem;
    line-height: .35rem
  }

  .why-03 .sec-dc>strong {
    font-size: .29rem;
  }

  .why-03 .sec-dc+.sec-dc {
    margin-top: .13rem
  }

  .why-03 .message-author {
    padding-top: .38rem
  }

  .why-03 .message-author>strong {
    font-size: .245rem;
    line-height: .3rem
  }

  .why-03 .message-author>small {
    font-size: .16rem;
    line-height: .2rem
  }
}


/* how */
/*** 01 ***/
.how-01 {
  background-repeat: no-repeat;
  background-position: center center;
}

.how-01 .sec-wrap {
  padding-top: 1.35rem
}

.how-01 .sec-title {
  text-align: center;
}

.how-01 .sec-title>span {
  display: block;
  color: var(--text);
  font-size: .4rem;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 120%
}

.how-01 .sec-title>strong {
  display: block;
  color: var(--theme);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 110%
}

.how-01 .sec-dc {
  text-align: center;
  color: var(--text);
  font-size: .21rem;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .3rem;
  margin-top: .17rem
}

.how-01 .sec-dc>strong {
  font: inherit;
  letter-spacing: inherit;
  font-weight: 600
}

.how-01 .workers {
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.how-01 .workers>li {
  flex: none;
  text-align: center;
  width: fit-content
}

.how-01 .workers>li>strong {
  display: block;
  width: fit-content;
  min-width: .82rem;
  margin: 0 auto;
  background: var(--theme);
  padding: .01rem .16rem 0;
  border-radius: .16rem;
  line-height: .31rem;
  color: var(--white);
  font-size: .26rem;
  letter-spacing: 0;
  font-weight: 600
}

.how-01 .workers>li>span {
  display: block;
  min-width: 100%;
  width: fit-content;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -.02em;
  font-size: .16rem;
  line-height: .22rem;
  padding-top: .1rem
}


.how-01 .sec-title > span,
.how-01 .sec-title > strong,
.how-01 .sec-dc,
.how-01 .workers > li {
  will-change:transform, opacity;
  opacity:0;
}

.how-01 .reveal[data-visible="true"] .sec-title > span,
.how-01 .reveal[data-visible="true"] .sec-title > strong,
.how-01 .reveal[data-visible="true"] .sec-dc,
.how-01 .reveal[data-visible="true"] .workers > li {
  animation: commonFadeInUp .7s ease-out forwards;
}
.how-01 .reveal[data-visible="true"] .sec-title > span{
  animation-delay:.3s
}
.how-01 .reveal[data-visible="true"] .sec-title > strong{
  animation-delay:.4s
}
.how-01 .reveal[data-visible="true"] .sec-dc{
  animation-delay:.5s
}
.how-01 .reveal[data-visible="true"] .workers > li:nth-child(1){
  animation-delay:.65s
}
.how-01 .reveal[data-visible="true"] .workers > li:nth-child(2){
  animation-delay:.7s
}
.how-01 .reveal[data-visible="true"] .workers > li:nth-child(3){
  animation-delay:.75s
}
.how-01 .reveal[data-visible="true"] .workers > li:nth-child(4){
  animation-delay:.85s
}


@media (min-width:1280px) {
  .how-01 {
    background-color: #dde9f9;
    background-size: auto 100%;
    background-image: url(../img/how01-bg.jpg)
  }

  .how-01 .sec-wrap {
    padding-bottom: 1.04rem
  }

  .how-01 .workers {
    padding-top: 5.62rem;
    gap: 1.32rem
  }
}

@media (max-width:1279px) {
  .how-01 {
    background-color: #c2dbf4;
    background-size: 100% auto;
    background-position-y: 0;
    background-image: url(../img/m_how01.jpg)
  }

  .how-01 .sec-wrap {
    padding-bottom: .88rem;
    width: 100%;
    padding-left: 0;
    padding-right: 0
  }

  .how-01 .workers {
    width: 100%;
    padding-top: 58.6%;
    gap: .32rem
  }
}

/*** 02 ***/
.how-02 {
  background-repeat: no-repeat;
  background-position: center center;
}

.how-02 .sec-wrap {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0
}

.how-02 .sec-title {
  text-align: center;
}

.how-02 .sec-title>span {
  display: block;
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1rem
}

.how-02 .sec-title>span+span {
  font-size: .87rem
}

.how-02 .sec-title strong {
  font: inherit;
  line-height: inherit;
  color: var(--theme);
  font-weight: 700;
  letter-spacing: -.02em
}

.make-worker-process {
  display: block;
  margin: 0 auto
}


.how-02 .sec-title > span,
.how-02 .make-worker-process {
  will-change:transform, opacity;
  opacity:0;
}

.how-02 .reveal[data-visible="true"] .sec-title > span,
.how-02 .reveal[data-visible="true"] .sec-dc,
.how-02 .reveal[data-visible="true"] .make-worker-process {
  animation: commonFadeInUp .7s ease-out forwards;
}
.how-02 .reveal[data-visible="true"] .sec-title > span{
  animation-delay:.3s
}
.how-02 .reveal[data-visible="true"] .sec-title > span + span{
  animation-delay:.4s
}
.how-02 .reveal[data-visible="true"] .make-worker-process{
  animation-delay:.65s
}


@media (min-width:1280px) {
  .how-02 {
    background-color: #dde9f9;
    background-size: auto 100%;
    background-image: url(../img/how02-bg.jpg)
  }

  .how-02 .sec-wrap {
    padding-top: .55rem;
    padding-bottom: 1.5rem
  }

  .make-worker-process {
    padding-top: .73rem;
    width: 14.5rem;
    max-width: calc(100% - .18rem)
  }
}

@media (max-width:1279px) {
  .how-02 {
    background-color: #d1e1f5;
    background-size: 100% auto;
    background-position-y: 0;
    background-image: url(../img/m_how02.jpg)
  }

  .how-02 .sec-wrap {
    padding-top: 1rem;
    padding-bottom: .85rem
  }

  .make-worker-process {
    padding-top: .52rem;
    width: 7rem;
    max-width: calc(100% - .2rem)
  }
}

/* what */
/*** 01 ***/
.what-01 {
  background: var(--white);
  background-repeat: no-repeat;
  background-position: center center;
}

.what-01 .sec-wrap {
  display: flex;
  gap: 0
}

.what-01 .sec-visual {
  flex: none;
  position: relative;
  z-index: 0
}

.what-01 .sec-visual .kv {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  background: url(../img/what01-kv-bg.jpg) no-repeat center / cover
}

.what-01 .sec-visual .kv img {
  position: absolute;
  bottom: 0;
  opacity: 0;
  width: 108.2%;
  left: -6.66%
}

.what-01 .sec-content {
  position: relative;
  z-index: 1
}

.what-01 .sec-title {
  letter-spacing: -.04em
}

.what-01 .sec-title>span {
  font: inherit;
  display: block;
  color: var(--text-dark);
  font-weight: 600;
}

.what-01 .sec-title>span strong {
  font: inherit;
  color: var(--theme);
  font-weight: 800
}

.what-01 .sec-dc {
  letter-spacing: -.02em;
  font-weight: 400;
  line-height: .38rem
}

.what-01 .sec-dc>strong {
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  color: var(--theme)
}

.what-01 .project-name {
  display: block;
  background: var(--theme);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--white);
  width: fit-content;
  line-height: 125%;
  border-radius: .75em;
  padding: 0 .95em
}

.what-01 .project-photo {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .13rem;
  margin-top: .42rem;
  margin-bottom: .28rem
}

.what-01 .project-photo>li {
  display: block;
  flex: none;
  overflow: clip;
  border-radius: .4rem;
  width: 1.77rem
}

.what-01 .sec-title > span,
.what-01 .sec-dc,
.what-01 .project-name,
.what-01 .project-photo {
  will-change:transform, opacity;
  opacity:0;
}

.what-01 .reveal[data-visible="true"] .sec-title > span,
.what-01 .reveal[data-visible="true"] .sec-dc,
.what-01 .reveal[data-visible="true"] .project-name,
.what-01 .reveal[data-visible="true"] .project-photo {
  animation: commonFadeInUp .7s ease-out forwards;
}
.what-01 .reveal[data-visible="true"] .sec-title > span{
  animation-delay:.4s
}
.what-01 .reveal[data-visible="true"] .sec-title > span + span{
  animation-delay:.45s
}
.what-01 .reveal[data-visible="true"] .sec-title > span + span + span{
  animation-delay:.5s
}
.what-01 .reveal[data-visible="true"] .project-name{
  animation-delay:.6s
}
.what-01 .reveal[data-visible="true"] .project-photo{
  animation-delay:.7s
}
.what-01 .reveal[data-visible="true"] .sec-dc{
  animation-delay:.8s
}

.what-01 .reveal[data-visible="true"] .sec-visual .kv {
  animation: maskFadeIn .8s 0s ease-in-out forwards;
}

.what-01 .reveal[data-visible="true"] .sec-visual .kv img {
  animation: maskImgFadeIn .75s .8s cubic-bezier(0.25, 1.375, 0.7, 1) forwards;
}

@keyframes maskImgFadeIn {
  0% {
    transform: translate3d(0, 5%, 0);
    opacity: 0;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes maskFadeIn {
  0% {
    transform: translate3d(-42%, -50%, 0);
    opacity: 0;
  }

  100% {
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
}

@media (min-width:1280px) {
  .what-01 .sec-wrap {
    flex-direction: row-reverse;
    align-items: stretch;
    height: 10.65rem
  }

  .what-01 .sec-visual {
    width: 57.9%
  }

  .what-01 .sec-visual .kv {
    left: 47.65%;
    top: 52.12%;
    width: 9.76rem;
    height: 9.22rem;
    mask-image: url(../img/what01-kv-mask.svg);
    -webkit-mask-image: url(../img/what01-kv-mask.svg);
  }

  .what-01 .sec-content {
    padding-top: 1.62rem
  }

  .what-01 .sec-title {
    font-size: .7rem;
    line-height: .85rem;
    padding-bottom: .46rem
  }

  .what-01 .project-name {
    font-size: .34rem;
    line-height: 125%
  }

  .what-01 .sec-dc {
    font-size: .24rem
  }
}

@media (max-width:1279px) {
  .what-01 .sec-wrap {
    flex-direction: column-reverse
  }

  .what-01 .sec-visual {
    padding-top: 67.8125%
  }

  .what-01 .sec-visual .kv {
    left: 81.5625%;
    top: 65%;
    width: 4.27rem;
    height: 4.04rem;
    mask-image: url(../img/m_what01-kv-mask.svg);
    -webkit-mask-image: url(../img/m_what01-kv-mask.svg);
  }

  .what-01 .sec-content {
    padding-bottom: .88rem
  }

  .what-01 .sec-title {
    font-size: .66rem;
    line-height: .78rem;
    padding-bottom: .32rem
  }

  .what-01 .project-name {
    font-size: .34rem;
    line-height: 125%
  }

  .what-01 .sec-dc {
    font-size: .25rem
  }
}


/*** 02 ***/
.what-02 {
  background-image: url(../img/what02-bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.what-02 .sec-title {
  text-align: center
}

.what-02 .sec-title>span {
  display: block;
  line-height: 120%;
  font-size: .4rem;
  letter-spacing: -.04em;
  font-weight: 400;
}

.what-02 .sec-title>strong {
  display: block;
  line-height: 1rem;
  font-size: .9rem;
  letter-spacing: -.02em;
  color: var(--theme);
  font-weight: 700;
  line-height: 1rem
}

.what02-list {
  display: grid;
  align-items: stretch;
  justify-content: center
}

.what02-list>li {
  box-sizing: border-box;
  background: #f6f9fc;
  border: .01rem solid var(--line-light);
  border-radius: .34rem;
  padding: .34rem 0
}

.what02-list>li.gray {
  border-color: #ebebeb
}

.what02-list .icon {
  display: block;
  margin: 0 auto;
  width: 1.88rem;
  border-radius: 100%;
  border: .08rem solid var(--white);
  box-sizing: border-box;
  overflow: clip;
  background-color: #e4f0fa;
  box-shadow: 0 0 .2rem .02rem #e4f0fa;
}

.what02-list>li.gray .icon {
  background-color: #f6f0ea;
  box-shadow: 0 0 .2rem .02rem #f6f0ea;
}

.what02-list p {
  display: block;
  text-align: center
}

.what02-list .title {
  font-weight: 600;
  font-size: .37rem;
  color: var(--theme);
  line-height: .4rem;
  position: relative;
  padding-bottom: .48rem;
  margin-top: .24rem
}

.what02-list .title strong {
  font: inherit;
  color: var(--theme-light)
}

.what02-list .title::after {
  content: "";
  display: block;
  position: absolute;
  bottom: .24rem;
  left: 0;
  width: 100%;
  height: .1rem;
  background: url(../img/what02-item-line.png) no-repeat center / auto 100%;
  transform: translate3d(0, 50%, 0);
}

.what02-list .detail {
  padding-bottom: .1rem;
  font-size: .21rem;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .35rem
}


.what-02 .sec-title > span,
.what-02 .sec-title > strong,
.what-02 .what02-list li,
.what-02 .what02-list .icon,
.what-02 .what02-list .title,
.what-02 .what02-list .detail {
  will-change:transform, opacity;
  opacity:0;
}

.what-02 .reveal[data-visible="true"] .sec-title > span,
.what-02 .reveal[data-visible="true"] .sec-title > strong,
.what-02 .reveal[data-visible="true"] .what02-list li,
.what-02 .reveal[data-visible="true"] .what02-list .icon,
.what-02 .reveal[data-visible="true"] .what02-list .title,
.what-02 .reveal[data-visible="true"] .what02-list .detail {
  animation: commonFadeInUp .7s ease-out forwards;
}
.what-02 .reveal[data-visible="true"] .sec-title > span{
  animation-delay:.25s
}
.what-02 .reveal[data-visible="true"] .sec-title > strong{
  animation-delay:.3s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(1){
  animation-delay:.4s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(2){
  animation-delay:.45s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(3){
  animation-delay:.5s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(4){
  animation-delay:.55s
}

.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(1) .icon{
  animation-delay:.5s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(1) .title{
  animation-delay:.55s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(1) .detail{
  animation-delay:.65s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(2) .icon{
  animation-delay:.55s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(2) .title{
  animation-delay:.6s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(2) .detail{
  animation-delay:.7s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(3) .icon{
  animation-delay:.6s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(3) .title{
  animation-delay:.65s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(3) .detail{
  animation-delay:.7s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(4) .icon{
  animation-delay:.65s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(4) .title{
  animation-delay:.7s
}
.what-02 .reveal[data-visible="true"] .what02-list li:nth-child(4) .detail{
  animation-delay:.75s
}



@media (min-width:1280px) {
  .what02-list {
    gap: .17rem
  }

  .what-02 .sec-wrap {
    padding-top: 1.6rem;
    padding-bottom: 1.72rem
  }

  .what-02 .sec-title>strong {
    margin-top: .04rem
  }

  .what02-list {
    grid-template-columns: repeat(4, 1fr);
    gap: .17rem;
    margin-top: 1rem
  }

  .what02-list>li {
    width: 3.5rem
  }
}

@media (max-width:1279px) {
  .what-02 {
    background-size: auto 94%;
    background-color: #dee9f9
  }

  .what-02 .sec-wrap {
    width: 100%;
    padding: 1.12rem 0
  }

  .what-02 .sec-title>strong {
    margin-top: .08rem
  }

  .what02-list {
    max-width: 6.52rem;
    margin: 0 auto;
    grid-template-columns: repeat(2, 1fr);
    gap: .12rem;
    margin-top: .68rem;
  }
}




/* who */

/*** 01 ***/
.who-01 {
  background-color: var(--black);
  background-repeat: no-repeat;
  background-position: center center;
}

.who-01 .sec-title>span,
.who-01 .sec-title>strong {
  display: block;
  color: var(--white)
}

.who-01 .sec-title>span {
  font-weight: 400;
  line-height: 125%;
  letter-spacing: -.04em
}

.who-01 .sec-title>strong {
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -.02em
}

.who-01 .sec-dc {
  color: var(--white);
  font-weight: 400;
  letter-spacing: -.02em
}

.who-01 .sec-dc>strong {
  font: inherit;
  letter-spacing: inherit
}

.who-01 .sec-dc>strong {
  font-weight: 600;
  letter-spacing: -.02em
}

.who-01 .taiwha-foundation {
  color: var(--white)
}

.who-01 .taiwha-foundation>strong {
  display: block;
  font-weight: 600;
  letter-spacing: -.02rem
}

.who-01 .sec-title > span,
.who-01 .sec-title > strong,
.who-01 .taiwha-foundation,
.who-01 .sec-dc {
  will-change:transform, opacity;
  opacity:0;
}

.who-01 .reveal[data-visible="true"] .sec-title > span,
.who-01 .reveal[data-visible="true"] .sec-title > strong,
.who-01 .reveal[data-visible="true"] .taiwha-foundation,
.who-01 .reveal[data-visible="true"] .sec-dc  {
  animation: commonFadeInUp .7s ease-out forwards;
}
.who-01 .reveal[data-visible="true"] .sec-title > span{
  animation-delay:.3s
}
.who-01 .reveal[data-visible="true"] .sec-title > strong{
  animation-delay:.35s
}
.who-01 .reveal[data-visible="true"] .taiwha-foundation{
  animation-delay:.45s
}
.who-01 .reveal[data-visible="true"] .sec-dc{
  animation-delay:.55s
}

@media (min-width:1280px) {
  .who-01 {
    background-size: cover;
    background-image: url(../img/who01-bg.jpg)
  }

  .who-01 .sec-wrap {
    padding: 2.06rem .2rem 2.44rem
  }

  .who-01 .sec-title>span {
    font-size: .4rem
  }

  .who-01 .sec-title>strong {
    font-size: .9rem
  }

  .who-01 .sec-dc {
    font-size: .24rem;
    line-height: .38rem
  }

  .who-01 .taiwha-foundation>strong {
    font-size: .38rem;
    line-height: .44rem;
    padding-bottom: .24rem
  }

  .who-01 .taiwha-foundation {
    padding-bottom: .4rem;
    padding-top: .52rem
  }

  .who-01 .taiwha-foundation .bi {
    display: block;
    width: 5.62rem;
    padding: .23rem .16rem .23rem 0;
    position: relative
  }

  .who-01 .taiwha-foundation .bi::before,
  .who-01 .taiwha-foundation .bi::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--white);
    opacity: .2
  }

  .who-01 .taiwha-foundation .bi::before {
    top: 0
  }

  .who-01 .taiwha-foundation .bi::after {
    bottom: 0
  }
}

@media (max-width:1279px) {
  .who-01 {
    background-size: 100% auto;
    background-position-y: 0;
    background-image: url(../img/m_who01.jpg)
  }

  .who-01 .sec-wrap {
    width: 100%;
    padding-top: 1.22rem;
    padding-bottom: 1.33rem
  }

  .who-01 .sec-title {
    text-align: center
  }

  .who-01 .sec-title>span {
    font-size: .37rem
  }

  .who-01 .sec-title>strong {
    font-size: .73rem;
    line-height: 135%
  }

  .who-01 .sec-dc {
    padding-left: .4rem;
    text-align: left;
    font-size: .24rem;
    line-height: .46rem
  }

  .who-01 .taiwha-foundation {
    padding-bottom: .2rem;
    padding-left: .4rem
  }

  .who-01 .taiwha-foundation::before {
    content: "";
    display: block;
    padding-top: 90.7%
  }

  .who-01 .taiwha-foundation>strong {
    font-size: .355rem;
    line-height: .4rem
  }
}


/*** 02 ***/
.who-02 {
  background: url(../img/who02-bg.jpg) no-repeat center center / cover;
}

.who-02 .sec-title {
  color: var(--white);
  text-align: center
}

.who-02 .sec-title>strong {
  display: block;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 115%
}

.video-group {
  display: flex;
  justify-content: center;
}

.video-group>li {
  color: var(--white);
  text-align: center
}

.video-group>li>p strong,
.video-group>li>p span {
  display: block;
  letter-spacing: -.02em
}

.video-group>li>p strong {
  font-size: .38rem;
  line-height: .5rem;
  font-weight: 600
}

.video-group>li>p span {
  font-size: .24rem;
  line-height: .38rem;
  font-weight: 400
}

.video-group .video-wrapper {
  width: 100%
}

.video-group .video-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  border: .02rem solid rgba(255, 255, 255, .45);
  z-index: 1;
  pointer-events: none;
}

/*
.video-group .video-wrapper,
.video-group .video-wrapper::after {
  border-radius: .5rem
}
*/

.who-02 .sec-title > strong,
.who-02 .video-group .video-wrapper,
.who-02 .video-group>li>p strong,
.who-02 .video-group>li>p span {
  will-change:transform, opacity;
  opacity:0;
}

.who-02 .reveal[data-visible="true"] .sec-title > strong,
.who-02 .reveal[data-visible="true"] .video-group .video-wrapper,
.who-02 .reveal[data-visible="true"] .video-group>li>p strong,
.who-02 .reveal[data-visible="true"] .video-group>li>p span  {
  animation: commonFadeInUp .7s ease-out forwards;
}
.who-02 .reveal[data-visible="true"] .sec-title > strong{
  animation-delay:.3s
}
.who-02 .reveal[data-visible="true"] .sec-title > strong + strong{
  animation-delay:.35s
}
.who-02 .reveal[data-visible="true"] .video-group .video-wrapper{
  animation-delay:.45s
}
.who-02 .reveal[data-visible="true"] .video-group>li>p strong{
  animation-delay:.5s
}
.who-02 .reveal[data-visible="true"] .video-group>li>p span{
  animation-delay:.55s
}


@media (min-width:1280px) {
  .who-02 .sec-wrap {
    padding: 1.3rem 0
  }

  .who-02 .sec-title {
    padding-bottom: .64rem
  }

  .who-02 .sec-title>strong {
    font-size: .9rem
  }

  .video-group {
    gap: .45rem;
    margin-top: .84rem
  }

  .video-group>li {
    flex: 1
  }

  .video-group>li>p {
    padding-top: .28rem
  }

  .video-group .video-wrapper .preview::before {
    width: 1.16rem;
    height: 1.16rem
  }
}

@media (max-width:1279px) {
  .who-02 .sec-wrap {
    padding: 1.12rem 0
  }

  .who-02 .sec-title {
    padding-bottom: .56rem;
    padding-top: .1rem
  }

  .who-02 .sec-title>strong {
    font-size: .93rem
  }

  .who-02 .sec-title>strong+strong {
    font-size: .7rem;
    letter-spacing: -.04em
  }

  .video-group {
    gap: .78rem;
    flex-direction: column
  }

  .video-group>li>p {
    padding-top: .35rem
  }

  .video-group .video-wrapper .preview::before {
    width: 1.12rem;
    height: 1.12rem
  }
}


/* message */
.message {
  background: #dedfe3
}

.message .sec-visual {
  position: relative;
  z-index: 0
}

.message .sec-visual .kv {
  position: absolute
}

.message .sec-content {
  z-index: 1;
  position: relative;
}

.message .sec-title>span,
.message .sec-title>strong {
  display: block
}

.message .sec-title>span {
  font-size: .4rem;
  line-height: 120%;
  font-weight: 500;
  letter-spacing: -.04em;
  margin-bottom: .1rem
}

.message .sec-title>strong {
  font-size: .8rem;
  line-height: 110%;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--theme)
}

.message .sec-title>strong .has-line {
  margin-left: .1em;
  padding-left: .05em;
  font: inherit;
  font-weight: 700;
  color: var(--white);
  margin-right: .1em
}

.message .sec-title>strong .has-line::before {
  top: .05em;
  bottom: .05em
}

.message .sec-content>p {
  line-height: .35rem
}

.message .sec-dc {
  font-size: .21rem;
  font-weight: 400;
  letter-spacing: -.02em
}

.message .sec-dc.big {
  font-size: .24rem
}

.message .sec-dc strong,
.message .sec-dc em {
  font: inherit;
  font-weight: 600;
  letter-spacing: -.02em
}

.message .sec-dc.big em {
  color: var(--theme)
}

.message .sec-title {
  padding-bottom: .35rem
}

.message .sec-dc+.sec-dc {
  margin-top: .15rem
}

.message .message-author {
  font-weight: 400;
  font-size: .27rem;
  letter-spacing: -.04em;
  margin-top: .56rem
}

.message .message-author .sign {
  display: block;
  mix-blend-mode: multiply;
  width: 2.3rem;
  margin-top: .12rem;
  margin-left: -.06rem
}



.message .sec-title > span,
.message .sec-title > strong,
.message .sec-dc,
.message .message-author,
.message .message-author .sign,
.message .kv > img{
  will-change:transform, opacity;
  opacity:0;
}

.message .reveal[data-visible="true"] .sec-title > span,
.message .reveal[data-visible="true"] .sec-title > strong,
.message .reveal[data-visible="true"] .sec-dc,
.message .reveal[data-visible="true"] .message-author,
.message .reveal[data-visible="true"] .message-author .sign{
  animation: commonFadeInUp .7s ease-out forwards;
}
.message .reveal[data-visible="true"] .kv > img {
  animation: commonFadeInRight .7s .5s ease-out forwards;
}
.message .reveal[data-visible="true"] .sec-title > span{
  animation-delay:.3s
}
.message .reveal[data-visible="true"] .sec-title > strong{
  animation-delay:.35s
}
.message .reveal[data-visible="true"] .sec-title > strong + strong{
  animation-delay:.4s
}
.message .reveal[data-visible="true"] .sec-title > strong + strong + strong{
  animation-delay:.45s
}
.message .reveal[data-visible="true"] .sec-title>strong .has-line::before{
  transition-delay:.3s
}
.message .reveal[data-visible="true"] .sec-title>strong + strong .has-line::before{
  transition-delay:.4s
}
.message .reveal[data-visible="true"] .sec-dc.big{
  animation-delay:.55s
}
.message .reveal[data-visible="true"] .sec-dc{
  animation-delay:.6s
}
.message .reveal[data-visible="true"] .message-author,
.message .reveal[data-visible="true"] .message-author .sign{  
  animation-delay:.65s
}


@media (min-width:1280px) {
  .message .sec-wrap {
    display: flex;
    align-items: stretch;
    gap: 0;
    justify-content: center
  }

  .message .sec-visual {
    flex: none;
    width: 50%
  }

  .message .sec-visual .kv {
    width: 101.1%;
    left: -8%;
    bottom: -.05rem
  }

  .message .sec-content {
    flex: 1;
    padding-left: .68rem;
    padding-top: 1.75rem;
    padding-bottom: 1.65rem
  }
}

@media (max-width:1279px) {
  .message .sec-content {
    padding-top: 1.6rem;
    padding-bottom: 0
  }

  .message .sec-visual {
    height: 1.85rem
  }

  .message .sec-visual .kv {
    width: 78.75%;
    left: 80%;
    top: -4.4%;
    transform: translate3d(-50%, -50%, 0)
  }
}



/* event */
.evt {
  background: #fff
}

.evt .sec-title>span,
.evt .sec-title strong {
  display: block;
  font: inherit;
  letter-spacing: -.04em
}

.evt .sec-title>span {
  font-weight: 400;
  color: var(--text);
  font-size: .4rem;
  line-height: .48rem;
}

.evt .sec-title strong {
  font-weight: 600;
  color: var(--text-dark);
  font-size: .8rem;
  line-height: .86rem
}

.evt .sec-title strong span {
  font: inherit;
  color: inherit;
  letter-spacing: inherit
}

.evt .sec-title em {
  display: inline-block;
  position: relative;
  font: inherit;
  color: var(--theme);
  font-weight: 700
}

.evt .sec-title em::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: .01rem;
  background: var(--theme);
  bottom: .035em
}

.evt .sec-title .cmp-name {
  display: inline-flex
}

.evt .sec-title .cmp-name>i {
  font-weight: 900;
  letter-spacing: 0;
  color: var(--theme)
}

.evt .sec-dc {
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: .34rem
}

.evt .sec-dc>strong {
  line-height: .34rem;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 0
}

.evt .sec-dc>strong em {
  line-height: .34rem;
  font-weight: 800;
  color: var(--theme);
  letter-spacing: 0
}

.event-info>p,
.join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
}

.join-btn {
  width: 4.23rem;
  height: 1.24rem;
  background: var(--theme);
  gap: .24rem
}

.join-btn>.go {
  display: block;
  fill: var(--white);
  width: .2rem;
  height: .35rem;
  margin-left: .02rem
}

.join-btn>span {
  display: block;
  flex: none
}

.join-btn .text {
  font-weight: 500;
  letter-spacing: -.02em;
  font-size: .33rem;
  line-height: .41rem;
  color: var(--white);
  text-align: left
}

.join-btn .icon {
  width: .72rem
}

.is-desktop .join-btn:hover {
  color: var(--white)
}

.is-desktop .join-btn:hover>.go {
  animation: go-icon-move .45s ease-in-out alternate infinite;
}

.event-info {
  display: block;
  width: fit-content;
  margin: 0 auto
}

.event-info>p {
  height: .33rem;
  gap: .13rem;
  justify-content: flex-start;
}

.event-info>p+p {
  margin-top: .12rem
}

.event-info>p>em {
  flex: none;
  font-weight: 600;
  background: var(--theme);
  color: var(--white);
  letter-spacing: -.02em;
  font-size: .24rem;
  line-height: .34rem;
  width: 1.33rem;
  text-align: center;
  border-radius: .16rem
}

.event-info>p>strong {
  flex: none;
  font-weight: 600;
  color: var(--text-dark);
  font-size: .24rem;
  letter-spacing: -.02em;
  line-height: 120%
}


@media (min-width:1280px) {
  .evt .sec-wrap {
    display: flex;
    align-items: stretch;
    justify-content: flex-top
  }

  .evt .sec-visual {
    flex: none
  }

  .evt .sec-content {
    flex: 1;
    position: relative;
    padding-top: 1.4rem;
  }

  .evt .sec-dc,
  .evt .sec-dc>strong {
    font-size: .24rem
  }

  .evt .sec-dc>strong em {
    font-size: .27rem
  }

  .evt .gift {
    position: absolute
  }

  .event-info {
    margin-top: .4rem;
    margin-bottom: .56rem
  }

  .join-btn {
    border-radius: .16rem .62rem .62rem .16rem;
  }
}

@media (max-width:1279px) {
  .evt .sec-wrap {
    width: 100%;
    padding-left: 0;
    padding-right: 0
  }

  .evt .sec-content {
    text-align: center;
    padding-bottom: 1.28rem
  }

  .evt .sec-dc,
  .evt .sec-dc>strong {
    font-size: .27rem
  }

  .evt .sec-dc>strong em {
    font-size: .3rem
  }

  .event-info {
    width: 4.56rem;
    margin: 0 auto .4rem
  }

  .event-info>p {
    width: 100%
  }

  .join-btn {
    border-radius: .62rem
  }
}


.evt .sec-title > span,
.evt .sec-title > strong,
.evt .sec-dc,
.evt .gift,
.evt .event-info > p,
.evt .join-btn{
  will-change:transform, opacity;
  opacity:0;
}

.evt .reveal[data-visible="true"] .sec-title > span,
.evt .reveal[data-visible="true"] .sec-title > strong,
.evt .reveal[data-visible="true"] .sec-dc,
.evt .reveal[data-visible="true"] .gift,
.evt .reveal[data-visible="true"] .event-info > p,
.evt .reveal[data-visible="true"] .join-btn{
  animation: commonFadeInUp .7s ease-out forwards;
}



/*** 01 ***/
.event-01 .gift .name,
.event-01 .gift .visual,
.event-01 .gift .note {
  display: block;
  text-align: center;
  width: 100%
}

.event-01 .gift .name strong,
.event-01 .gift .name small {
  display: block;
}

.event-01 .gift .name strong {
  color: var(--theme);
  font-weight: 700;
  font-size: .51rem;
  line-height: .6rem;
  letter-spacing: -.02em
}

.event-01 .gift .name small {
  font-weight: 500;
  font-size: .37rem;
  line-height: .4rem;
  letter-spacing: -.02em
}

.event-01 .gift .note {
  color: #454545;
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: .2rem;
  line-height: .28rem
}

.event-01 .gift .note a {
  display: block;
  font: inherit;
  font-weight: 500
}


.event-01 .reveal[data-visible="true"] .sec-title > span{
  animation-delay:.3s
}
.event-01 .reveal[data-visible="true"] .sec-title > strong{
  animation-delay:.35s
}
.event-01 .reveal[data-visible="true"] .sec-title > strong + strong{
  animation-delay:.4s
}
.event-01 .reveal[data-visible="true"] .sec-title > strong + strong + strong{
  animation-delay:.45s
}
.event-01 .reveal[data-visible="true"] .sec-dc{
  animation-delay:.5s
}
.event-01 .reveal[data-visible="true"] .sec-dc + .sec-dc{
  animation-delay:.55s
}
.event-01 .reveal[data-visible="true"] .gift{
  animation-delay:.65s
}
.event-01 .reveal[data-visible="true"] .event-info > p{
  animation-delay:.7s
}
.event-01 .reveal[data-visible="true"] .event-info > p + p{
  animation-delay:.75s
}
.event-01 .reveal[data-visible="true"] .join-btn{
  animation-delay:.8s
}



@media (min-width:1280px) {
  .event-01 .sec-wrap {
    flex-direction: row-reverse
  }

  .event-01 .sec-visual {
    width: 55.58%
  }

  .event-01 .sec-content {
    padding-bottom: .7rem
  }

  .event-01 .gift {
    right: calc(100% + 1.84rem);
    width: 5.48rem;
    top: 2.1rem
  }

  .event-01 .gift .name {
    padding-bottom: .32rem
  }

  .event-01 .sec-title {
    padding-bottom: .32rem
  }

  .event-01 .sec-dc+.sec-dc {
    margin-top: .15rem
  }
}

@media (max-width:1279px) {
  .event-01 .sec-content {
    padding-top: 1.38rem
  }

  .event-01 .sec-title {
    padding-bottom: .28rem
  }

  .event-01 .sec-dc+.sec-dc {
    margin-top: .15rem
  }

  .event-01 .gift {
    margin: 0 auto;
    width: 4.93rem;
    margin-top: .15rem;
    position: relative
  }

  .event-01 .gift .visual {
    padding-bottom: 1rem
  }

  .event-01 .gift .note {
    padding-bottom: .52rem
  }

  .event-01 .gift .name {
    position: absolute;
    left: 0;
    top: 4.06rem
  }
}

/*** 02 ***/
.event-02 .sec-title strong {
  display: inline-block;
}

.event-02 .sec-title .underline {
  position: relative;
  width: fit-content
}

.event-02 .sec-title .underline::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: .01rem;
  background: var(--text-dark);
  bottom: .05em
}


.event-02 .reveal[data-visible="true"] .sec-title > strong{
  animation-delay:.3s
}
.event-02 .reveal[data-visible="true"] .sec-title > strong + strong{
  animation-delay:.35s
}
.event-02 .reveal[data-visible="true"] .sec-dc{
  animation-delay:.4s
}
.event-02 .reveal[data-visible="true"] .sec-dc + .sec-dc{
  animation-delay:.45s
}
.event-02 .reveal[data-visible="true"] .gift{
  animation-delay:.55s
}
.event-02 .reveal[data-visible="true"] .event-info > p{
  animation-delay:.65s
}
.event-02 .reveal[data-visible="true"] .event-info > p + p{
  animation-delay:.7s
}
.event-02 .reveal[data-visible="true"] .join-btn{
  animation-delay:.75s
}

@media (min-width:1280px) {
  .event-02 .sec-wrap {
    flex-direction: row
  }

  .event-02 .sec-visual {
    width: 42.5%;
    max-width: calc(100% - 8rem)
  }

  .event-02 .sec-content {
    padding-bottom: 1.9rem;
    padding-left: .42rem
  }

  .event-02 .gift {
    left: calc(100% - 1rem);
    width: 6.97rem;
    top: 3.38rem
  }

  .event-02 .sec-title {
    padding-bottom: .45rem
  }

  .event-02 .sec-title .underline {
    font-size: .76rem;
  }

  .event-02 .sec-dc+.sec-dc {
    margin-top: .2rem
  }
}

@media (max-width:1279px) {
  .event-02 .sec-content {
    padding-top: .6rem
  }

  .event-02 .sec-title {
    padding-bottom: .34rem
  }

  .event-02 .sec-title .cmp-name {
    font-size: .84rem;
    line-height: .92rem
  }

  .event-02 .sec-title strong {
    font-size: .8rem;
  }

  .event-02 .sec-dc {
    line-height: .38rem
  }

  .event-02 .sec-dc+.sec-dc {
    margin-top: .23rem
  }

  .event-02 .gift {
    width: 5.53rem;
    display: block;
    margin: .34rem auto -.7rem
  }
}


/* modal */
.modal-container {
  position: fixed;
  top: 0;
  width: 100%;
  top: 0;
  height: 100%;
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
  backdrop-filter: blur(.04rem);
  transition: pointer-events 0s .35s
}

.modal-container.shown {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: auto
}

#dimedLayer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: var(--theme);
  opacity: 0;
  pointer-events: none;
  width: 6.5rem;
  overflow: clip;
  display: none;
}

.modal.opened {
  z-index: 10;
  opacity: 1;
  pointer-events: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-head {
  position: relative;
  width: 100%;
  background: #173a64;
  flex: none;
  height: .65rem
}

.modal-close {
  position: absolute;
  width: .65rem;
  height: .65rem;
  right: .13rem;
  top: 0;
  box-sizing: border-box;
}

.modal-close>svg {
  position: absolute;
  width: .32rem;
  height: .32rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-wrap {
  background: var(--white);
  position: relative;
  margin: 0 auto;
  height: auto;
  width: 100%;
  box-sizing: border-box;
  padding: .5rem 0
}

.modal.opened .modal-wrap {
  overflow-y: auto;
  max-height: calc(95vh - .65rem);
  flex: 1;
  overflow-x: clip;
  overscroll-behavior: contain;
}


.modal-wrap .modal-title {
  position: relative;
  margin: 0 auto;
  text-align: center
}

.fieldset {
  padding: 0 .58rem
}

.item-box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.item-box+.item-box {
  margin-top: .3rem;
}

.item-box .input-label,
.item-box .input-label>label {
  display: block;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-dark);
  font-size: .26rem;
  line-height: .35rem
}

.item-box .input-label {
  padding-bottom: .08rem
}

.item-box .input-box {
  display: flex;
  width: 100%;
  background: #fff;
  border: .01rem solid #797979;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  align-items: center
}

.item-box .input-box>input {
  flex: 1
}

.input-box input:not([type="checkbox"]) {
  outline: none;
  display: block;
  color: var(--text-black);
  font-weight: 600;
  font-size: .25rem;
  line-height: .68rem;
  padding: 0 0 0 .36rem;
  letter-spacing: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: none;
  background: transparent
}

.input-box input:not([type="checkbox"])::placeholder,
.input-box input:not([type="checkbox"])::-webkit-input-placeholder {
  font-weight: 400;
  color: #9d9d9d
}


.item-box.agreement .input-box {
  height: auto;
  padding: .21rem .35rem
}

.item-box.agreement .input-box li {
  color: #9d9d9d;
  font-size: .21rem;
  line-height: .29rem;
}

.agreement label {
  position: relative;
}

.agreement label::before,
.agreement label::after {
  content: "";
  display: block;
  position: absolute;
  width: .32rem;
  height: .32rem;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.agreement label::before {
  border: .015rem solid #b8b8b8;
  border-radius: .015rem;
}

.agreement label::after {
  background: url(../img/checkmark.svg) no-repeat center / contain;
  width: .24rem;
  height: .24rem;
  right: .04rem;
  opacity: 0
}

.agreement input {
  position: absolute;
  width: 1px;
  height: 1px;
  font-size: 1px;
  line-height: 1px;
  padding: 0;
  margin: 0;
  right: 100%;
  bottom: 100%;
}

.agreement input:checked+label::after {
  opacity: 1
}


.submit-btn {
  margin: 0 auto;
  margin-top: .45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2890e1;
  border-radius: .1rem;
  width: 3.8rem;
  height: .78rem;
  gap: .52rem
}

.submit-btn>span {
  flex: none;
  color: var(--white);
  letter-spacing: .06em;
  font-size: .25rem;
  line-height: .32rem;
  font-weight: 500
}

.submit-btn>svg.go {
  flex: none;
  width: .13rem;
  height: .19rem;
  fill: var(--white)
}

.is-desktop .submit-btn:hover .go {
  animation: go-icon-move .45s ease-in-out alternate infinite;
}

.modal-desc {
  text-align: center;
  font-size: .35rem;
  line-height: .47rem;
  letter-spacing: -.02em;
  max-width: 80%;
  word-wrap: break-word;
  word-break: keep-all;
  margin: 0 auto
}

.modal-desc>strong {
  font: inherit;
  font-weight: 600
}


.modal-foot {
  position: relative;
  width: 100%
}

.modal-foot>p {
  color: var(--white);
  font-size: .21rem;
  line-height: .26rem;
  letter-spacing: -.02em;
  text-align: center;
  font-weight: 400;
  top: 50%;
  left: 39%;
  width: fit-content;
  transform: translate3d(-50%, -50%, 0);
  position: absolute;
}

.modal-tag {
  display: block;
  text-align: center;
  font-weight: 400;
  letter-spacing: -.04em;
  font-size: .38rem;
  line-height: .5rem;
  margin-top: -.04rem
}

.modal-title {
  display: block;
  text-align: center;
  color: var(--theme);
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: .74rem;
  line-height: .785rem;
  padding-top: .04rem
}

.modal-title .cmp-name {
  margin: 0 auto
}

.modal-title>strong {
  font: inherit
}

.modal[data-name="warning"] .submit-btn {
  width: 2.4rem
}

.modal[data-name="warning"] .modal-desc {
  padding: .25rem 0
}

.modal[data-name="apply"] .modal-desc {
  font-size: .23rem;
  line-height: .3rem;
  padding-top: .16rem;
  padding-bottom: .22rem
}

.modal[data-name="retry"] .modal-wrap,
.modal[data-name="complete"] .modal-wrap {
  border-radius: 0 0 .5rem .5rem
}

.modal[data-name="retry"] .modal-desc,
.modal[data-name="complete"] .modal-desc {
  padding: .32rem 0 0
}