@charset "utf-8";

/*-------------------------------------------------------
ページ共通
-------------------------------------------------------*/

html:not(.s_firstShow):not(.s_secondShow) {
  overflow: hidden;
}

html:not(.s_firstShow):not(.s_secondShow) .gfx100s.wrapper.top {
  opacity: 0;
}

.gfx100s.wrapper.top {
  transition: opacity 0.3s;
}

#FixBanner01 {
  display: none;
}

html.s_showBanner #FixBanner01 {
  display: block;
}

/* パララックス
------------------------*/
.js_parallax.s_parallaxY,
.js_parallax.s_parallaxX {
  transition: opacity 0.7s 0s, transform 0.7s 0s;
}

.js_parallax.s_parallaxY {
  transform: translateY(60px);
  opacity: 0;
}

.js_parallax.s_parallaxY.s_aniShow {
  transform: translateY(0);
  opacity: 1;
}

.js_parallax.s_parallaxX {
  transform: translateX(60px);
  opacity: 0;
}

.js_parallax.s_parallaxX.s_aniShow {
  transform: translateX(0);
  opacity: 1;
}

/* アニメーション

------------------------*/
@keyframes loop-text-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes loop-text-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

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

  100% {
    transform: translateY(200%);
  }
}

/*text
------------------------*/
.top-m_textA {
  line-height: 2.25;
  letter-spacing: 0.05em;
}

.top-m_textA p+p {
  margin-top: 1em;
}

@media screen and (max-width: 767px) {
  .top-m_textA {
    font-size: 13px;
    line-height: 1.92;
  }

  .top-m_textA p+p {
    margin-top: 1em;
  }
}

/* btn
------------------------*/
.top-m_btnA {
  overflow: hidden;
  position: relative;
  display: inline-block;
  max-width: 170px;
  width: 100%;
  background-color: transparent;
  border: 1px solid #000;
  border-radius: 999em;
  font-weight: bold;
  line-height: 1.45;
  text-decoration: none !important;
  padding: 9px 27px 9px 20px;
  cursor: pointer;
  margin-top: 25px;
  opacity: 1 !important;
  user-select: none;
}

.top-m_btnA::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 7px;
  height: 7px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  margin: auto 0;
}

.top-m_btnA,
.top-m_btnA::before {
  transition: 0.3s !important;
}

@media screen and (min-width: 768px) {

  /* hover */
  .top-m_btnA:hover {
    color: #fff;
    background-color: #000;
  }

  .top-m_btnA:hover::before {
    right: 15px;
    border-color: #fff;
  }
}

@media screen and (max-width: 767px) {
  .top-m_btnA {
    max-width: 136px;
    font-size: 13px;
    padding: 6px 20px 6px 15px;
  }

  .top-m_btnA::before {
    right: 15px;
  }
}

/* .top-m_headA
------------------------*/
.top-m_headA {
  font-size: 40px;
}

.top-m_headA__title {
  text-align: center;
  color: #aba7a5;
  font-family: "Fjalla One", sans-serif;
  line-height: 1;
  margin-bottom: 40px;
}

.top-m_headA__title sup {
  font-size: 13px;
  line-height: 1;
  vertical-align: top;
}

.top-m_headA__catch {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.46;
}

@media screen and (max-width: 767px) {
  .top-m_headA {
    font-size: 25px;
  }

  .top-m_headA__title {
    margin-bottom: 20px;
  }

  .top-m_headA__title sup {
    font-size: 10px;
  }

  .top-m_headA__catch {
    font-size: 0.96em;
  }
}

/* credit
------------------------*/
.top-m_creditA {
  position: absolute;
  top: calc(100% + 20px);
  left: 30px;
  font-size: 14px;
  line-height: 1;
}

.top-m_creditA.s_inner {
  top: auto;
  bottom: 20px;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .top-m_creditA {
    top: calc(100% + 10px);
    left: 10px;
    font-size: 10px;
  }

  .top-m_creditA.s_inner {
    top: auto;
    bottom: 10px;
  }
}

/*-------------------------------------------------------
ページ個別
-------------------------------------------------------*/

/* top-kv
------------------------*/
.top-kv {
  position: relative;
  width: 100%;
  height: 5000px;
  z-index: 2;
}

.top-kv__visual {
  overflow: hidden;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000;
}

.top-kv__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.top-kv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-kv__word {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Fjalla One", sans-serif;
  font-size: 14.2857vw;
  line-height: 1;
  opacity: 0;
  transform-origin: 50% 50%;
}

.top-kv__head,
.top-kv__camera {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.top-kv__scroll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 110px;
  margin: 0 auto;
}

.top-kv__scrollText {
  font-family: "Fjalla One", sans-serif;
  text-align: center;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 1.92vh;
}

.top-kv__scrollWheel {
  overflow: hidden;
  position: relative;
  background-color: rgba(255, 255, 255, 0.4);
  width: 1px;
  height: 8.46vh;
  margin: 0 auto;
}

.top-kv__scrollWheel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255);
  width: 1px;
  height: 4.81vh;
}

.top-kv__scrollWheel::before {
  animation: wheel 2s infinite linear 0.5s both;
}

.top-kv__head,
.top-kv__camera {
  opacity: 0;
}

.top-kv__head img,
.top-kv__camera img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* s_firstShow */
.top-kv__word {
  transition: opacity 0.7s 0.2s;
}

html.s_firstShow .top-kv__word {
  opacity: 1;
}

/* s_secondShow */
html.s_secondShow .top-kv {
  margin-top: -2750px;
}

@media screen and (max-width: 767px) {
  .top-kv__word {
    font-size: 100px;
  }

  .top-kv {
    z-index: 21;
  }

  .top-kv__scrollText {
    font-size: 13px;
    margin-bottom: 0.96vh;
  }
}

@media (orientation: landscape) {

  /* デバイスが横向きの場合の記述 */
  .top-kv img.s_landscape {
    display: block;
  }

  .top-kv img.s_portrait {
    display: none;
  }
}

@media (orientation: portrait) {

  /* デバイスが縦向きの場合の記述 */
  .top-kv img.s_landscape {
    display: none;
  }

  .top-kv img.s_portrait {
    display: block;
  }
}

/* top-concept
------------------------*/
.top-concept {
  position: relative;
  z-index: 1;
}

.top-concept__inner {
  position: relative;
  background: url(../images/top/wapk_concept_bg_01_pc.png) no-repeat 50% 100% / 100% auto;
  padding: 0 30px 14.29vw;
  min-height: 97.43vw;
  display: flex;
  align-items: flex-end;
}

.top-concept__inner::before {
  content: "";
  position: absolute;
  bottom: 62vw;
  left: 0;
  width: 100%;
  height: 5000px;
  background: #000;
  z-index: -1;
}

.top-concept__content {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.top-concept__title {
  text-align: center;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  font-size: 60px;
  line-height: 1;
  margin-bottom: 50px;
}

.top-concept__text {
  max-width: 830px;
  text-align: center;
  color: #fff;
  margin: 0 auto;
}

.top-concept__movie {
  position: relative;
  width: 100%;
  margin-top: 80px;
  padding-top: 56.25%;
}

.top-concept__movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.top-concept__moviePlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .top-concept__inner {
    background-image: url(../images/top/wapk_concept_bg_01_sp.png);
    min-height: 200vw;
    padding-bottom: 8vw;
  }

  .top-concept__inner::before {
    bottom: 61.33vw;
  }

  .top-concept__title {
    font-size: 35px;
    margin-bottom: 25px;
  }

  .top-concept__text {
    margin: 0 -15px;
  }

  .top-concept__movie {
    margin: 40px -10px 0;
  }
}

@media screen and (max-width: 374px) {
  .top-concept__text .top-m_textA {
    font-size: 11px;
  }
}

/* top-creativity
------------------------*/
.top-creativity {
  overflow: hidden;
}

.top-creativity__inner {
  padding: 30px 30px 100px;
}

.top-creativity__head {
  margin-bottom: 50px;
}

.top-creativity__titleWrap {
  white-space: nowrap;
  margin: 0 -30px;
}

.top-creativity__title {
  display: inline-block;
  font-family: "Fjalla One", sans-serif;
  font-size: 21.43vw;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.03em;
  padding-right: 0.5em;
}

.top-creativity__title sup {
  font-size: 15px;
  vertical-align: 13.5vw;
  margin-left: 1em;
  letter-spacing: 0;
}

.top-creativity__image {
  position: relative;
  margin: -1.5vw -30px 0;
}

.top-creativity__imageColumn {
  display: flex;
  width: 100%;
}

.top-creativity__imageColumnLeft,
.top-creativity__imageColumnRight {
  position: relative;
  width: 100%;
}

.top-creativity__imageColumnLeft img,
.top-creativity__imageColumnRight img {
  width: 100%;
}

.top-creativity__imageText {
  position: absolute;
  bottom: 3.57vw;
  left: 3.57vw;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
}

.top-creativity__imageNum {
  font-size: 23.21vw;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 1.07vw;
}

.top-creativity__imageNum>span {
  font-size: 5.571vw;
  letter-spacing: 0;
  display: inline-block;
  margin-left: 1.43vw;
  line-height: 1;
}

.top-creativity__imageUnit {
  font-size: 5.79vw;
  letter-spacing: -.01em;
  line-height: 1;
}

.top-creativity__content {
  width: 1240px;
  max-width: 100%;
  margin: 90px auto 0;
}

.top-creativityDevice {
  display: flex;
  justify-content: space-between;
  color: #726c65;
  font-family: "Fjalla One", sans-serif;
  font-size: 50px;
  letter-spacing: -1px;
  margin-bottom: 65px;
  line-height: 1;
}

.top-creativityDevice__item {
  width: 33.333%;
  text-align: center;
}

.top-creativityDevice__title {
  font-size: .5em;
  margin-bottom: 25px;
}

.top-creativityDevice__text {
  font-size: 1em;
}

.top-creativityMedia {
  display: flex;
  align-items: center;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.top-creativityMedia__image {
  flex: 0 0 400px;
}

.top-creativityMedia__content {
  overflow: hidden;
  flex: 1 1 auto;
}

.top-creativityMedia__text {}

.top-creativityMedia__btn {}

/* パララックス */
.top-creativity__title {
  transition: transform 0.7s 0.2s;
  transform: translateX(100vw);
}

.top-creativity__titleWrap.s_aniShow .top-creativity__title {
  transform: translateX(0);
}

.top-creativity__titleWrap.s_aniLoop .top-creativity__title {
  animation: loop-text-left 10s infinite linear 0.5s both;
}

@media screen and (min-width: 1401px) {
  .top-creativity__imageText {
    position: absolute;
    bottom: 50px;
    left: 50px;
  }

  .top-creativity__imageNum {
    font-size: 325px;
    margin-bottom: -15px;
  }

  .top-creativity__imageNum>span {
    font-size: 78px;
    margin-left: 20px;
  }

  .top-creativity__imageUnit {
    font-size: 81px;
  }
}

@media screen and (max-width: 767px) {
  .top-creativity__inner {
    padding-top: 75px;
  }

  .top-creativity__head {
    margin: 0 -30px 30px;
  }

  .top-creativity__title {
    font-size: 40vw;
  }

  .top-creativity__title sup {
    font-size: 10px;
    vertical-align: 25vw;
  }

  .top-creativity__image {
    margin-top: -2.5vw;
  }

  .top-creativity__imageColumn {
    display: block;
  }

  .top-creativity__imageColumnLeft {
    position: relative;
  }

  .top-creativity__imageText {
    bottom: 20px;
    left: 20px;
  }

  .top-creativity__imageNum {
    font-size: 162px;
    margin-bottom: 5px;
  }

  .top-creativity__imageNum>span {
    font-size: 39px;
    margin-left: 5px;
  }

  .top-creativity__imageUnit {
    font-size: 40px;
  }

  .top-creativity__content {
    margin-top: 45px;
  }

  .top-creativityDevice {
    display: block;
    font-size: 32px;
    margin-bottom: 32px;
  }

  .top-creativityDevice__item {
    width: 100%;
  }

  .top-creativityDevice__item+.top-creativityDevice__item {
    margin-top: 45px;
  }

  .top-creativityDevice__title {
    margin-bottom: 12px;
  }

  .top-creativityMedia {
    display: block;
  }

  .top-creativityMedia__image {
    max-width: 248px;
    margin: 35px auto;
  }
}

/* top-resolution
------------------------*/
.top-resolution {}

.top-resolution__inner {
  padding: 0 30px 100px;
}

.top-resolution__visualWrap {
  position: relative;
  height: 5000px;
  margin: 0 -30px;
}

.top-resolution__visual {
  overflow: hidden;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.top-resolution__visualImage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.top-resolution__visualImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-resolution__visualBg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #dbd8d8;
  transition: opacity 0.3s;
}

.top-resolution__visualContent {
  position: relative;
  display: table-cell;
  width: 100vw;
  height: 100vh;
  vertical-align: middle;
}

.top-resolution__visualContent {
  transform-origin: 50% 50%;
}

.top-resolution__content {
  max-width: 830px;
  width: 100%;
  margin: 60px auto 0;
}

.top-resolution__text {
  line-height: 2.25;
  letter-spacing: 0.05em;
}

.top-resolution__btn {}

/* s_01 */
.top-resolution__visualContent.s_01 {
  background: url(../images/top/wapk_resolution_image_01.jpg) no-repeat 50% 50% / cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.top-resolution__visualContent.s_01::before,
.top-resolution__visualContent.s_01::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #dbd8d8;
}

.top-resolution__visualContent.s_01::before {
  bottom: calc(100% - 1px);
}

.top-resolution__visualContent.s_01::after {
  top: calc(100% - 1px);
}

.top-resolution__visualContent.s_01 .top-resolution__visualHead {
  white-space: nowrap;
  margin: 0 -100000px;
}

/* s_02 */
.top-resolution__visualContent.s_02 {
  color: #fff;
}

@media screen and (max-width: 767px) {
  .top-resolution__inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  /* s_01 */
  .top-resolution__visualContent.s_01 {
    font-size: 20px;
  }
}

@media (orientation: portrait) {
  .top-resolution__visualImage {
    background-color: #000;
  }

  .top-resolution__visualImageInner {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .top-resolution__visualImage img {
    object-fit: contain;
  }

  /* s_01 */
  .top-resolution__visualContent.s_01 {
    background-size: 100% auto;
  }
}

/* top-bokeh
------------------------*/
.top-bokeh {}

.top-bokeh__inner {
  padding: 0 30px 100px;
}

.top-bokeh__visualWrap {
  position: relative;
  height: 2500px;
  margin: 0 -30px;
}

.top-bokeh__visual {
  overflow: hidden;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.top-bokeh__visualImage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.top-bokeh__visualImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-bokeh__visualBg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #dbd8d8;
}

.top-bokeh__visualContent {
  display: table-cell;
  width: 100vw;
  height: 100vh;
  vertical-align: middle;
}

.top-bokeh__content {
  max-width: 830px;
  width: 100%;
  margin: 60px auto 0;
}

.top-bokeh__text {
  line-height: 2.25;
  letter-spacing: 0.05em;
}

.top-bokeh__btn {}

@media (orientation: portrait) {
  .top-bokeh__visualImage {
    background-color: #000;
  }

  .top-bokeh__visualImageInner {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .top-bokeh__visualImage img {
    object-fit: contain;
  }
}

/* top-tonality
------------------------*/
.top-tonality {}

.top-tonality__inner {
  padding: 100px 30px;
}

.top-tonality__head {
  margin-bottom: 60px;
}

.top-tonality__head .top-m_headA__catch {
  background: linear-gradient(to right, #a83830 0%, #3564b7 16.6%, #a83830 33.2%, #3564b7 50%, #a83830 66.6%, #3564b7 83.2%, #a83830 100%) 0% center / 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-position-x: 0;
  transition: background-position-x 0.3s;
}

.top-tonality__image {
  position: relative;
  margin: 0 -30px;
}

.top-tonalityContent {
  max-width: 830px;
  width: 100%;
  margin: 55px auto 0;
}

.top-tonalityContent__title {
  text-align: center;
  font-family: "Fjalla One", sans-serif;
  font-size: 48px;
  line-height: 1.25;
  margin-bottom: 30px;
}

.top-tonalityContent__title.s_new::before {
  content: "NEW";
  display: inline-block;
  vertical-align: middle;
  color: #dd0000;
  font-size: 30px;
  line-height: 1;
  margin-right: 0.7em;
}

.top-tonalityContent__lead {
  text-align: center;
  margin-bottom: 60px;
}

.top-tonalityContent__text {}

.top-tonalityContent__btn {}

@media screen and (max-width: 767px) {
  .top-tonality__inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .top-tonality__head {
    margin-bottom: 30px;
  }

  .top-tonalityContent {
    margin-top: 45px;
  }

  .top-tonalityContent__title {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .top-tonalityContent__title.s_new::before {
    font-size: 15px;
  }

  .top-tonalityContent__lead {
    margin-bottom: 40px;
  }
}

/* top-mobility
------------------------*/
.top-mobility {}

.top-mobility__inner {
  padding: 100px 30px;
}

.top-mobility__head {
  margin-bottom: 60px;
}

.top-mobility__visual {
  position: relative;
  margin: 0 -30px;
}

.top-mobility__visualImage {}

.top-mobility__visualImage img {
  width: 100%;
}

.top-mobility__visualBg {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #dbd8d8;
}

.top-mobility__visualContent {
  width: 100%;
  height: 100%;
  padding-top: 2vw;
  background: url(../images/top/wapk_mobility_img_01_pc.png) no-repeat 50% 50% / 100% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.4);
}

.top-mobility__titleWrap {
  white-space: nowrap;
}

.top-mobility__title {
  font-family: "Fjalla One", sans-serif;
  font-size: 21.43vw;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.top-mobility__content {
  max-width: 830px;
  width: 100%;
  margin: 60px auto 0;
}

.top-mobility__text {}

/* パラックス */
.top-mobility__visualBg {
  opacity: 1;
  transition: opacity 2s 0.5s;
}

.top-mobility__visualBg.s_aniShow {
  opacity: 0;
}

.top-mobility__title {
  display: inline;
  margin-right: -100vw;
  transition: margin 0.7s;
}

.top-mobility__titleWrap.s_left .top-mobility__title {
  margin-left: 100vw;
}

.top-mobility__titleWrap.s_left.s_aniShow .top-mobility__title {
  margin-left: 0;
}

.top-mobility__titleWrap.s_right {
  direction: rtl;
}

.top-mobility__titleWrap.s_right .top-mobility__title {
  margin-right: 100vw;
}

.top-mobility__titleWrap.s_right.s_aniShow .top-mobility__title {
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .top-mobility__inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .top-mobility__head {
    margin-bottom: 30px;
  }

  .top-mobility__visualContent {
    background-image: url(../images/top/wapk_mobility_img_01_sp.png);
  }

  .top-mobility__title {
    font-size: 40vw;
  }

  .top-mobility__content {
    margin-top: 35px;
  }
}

/* top-portability
------------------------*/
.top-portability {
  position: relative;
}

.top-portability::before {
  content: "";
  position: absolute;
  top: -9vw;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/top/wapk_bg_01_sp.png) no-repeat 0 0 / auto 100%;
}

.top-portability__inner {
  position: relative;
  padding: 100px 30px;
}

.top-portability__head {
  margin-bottom: 60px;
}

.top-portability__image {
  text-align: center;
}

.top-portabilityMedia {
  display: flex;
  max-width: 1000px;
  width: 100%;
  margin: 70px auto 0;
}

.top-portabilityMedia__device {
  flex: 0 0 390px;
  color: #726c65;
  font-family: "Fjalla One", sans-serif;
}

.top-portabilityMedia__deviceWeight {
  font-size: 226px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: -10px;
}

.top-portabilityMedia__deviceWeight>span {
  font-size: 54px;
  line-height: 1;
}

.top-portabilityMedia__deviceSize {
  font-size: 33px;
}

.top-portabilityMedia__content {
  flex: 1 1 auto;
}

.top-portabilityMedia__text {}

.top-portabilityMedia__btn {}


@media screen and (max-width: 767px) {
  .top-portability::before {
    background-image: url(../images/top/wapk_bg_01_pc.png);
    top: -2vw;
  }

  .top-portability__inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .top-portability__head {
    margin-bottom: 30px;
  }

  .top-portability__image {
    margin-left: -30px;
    margin-right: -30px;
  }

  .top-portabilityMedia {
    display: block;
    margin-top: 25px;
  }

  .top-portabilityMedia__device {
    text-align: center;
    margin-bottom: 35px;
  }

  .top-portabilityMedia__deviceWeight {
    font-size: 135px;
    margin-bottom: -5px;
  }

  .top-portabilityMedia__deviceWeight>span {
    font-size: 32px;
  }

  .top-portabilityMedia__deviceSize {
    font-size: 20px;
  }
}

/* top-flexibility
------------------------*/
.top-flexibility {}

.top-flexibility__inner {
  padding: 100px 30px;
}

.top-flexibility__head {
  margin-bottom: 60px;
}

.top-flexibility__image {
  position: relative;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.top-flexibility__content {
  max-width: 830px;
  width: 100%;
  margin: 40px auto 0;
}

.top-flexibility__text {}

.top-flexibility__btn {}

@media screen and (max-width: 767px) {
  .top-flexibility__inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .top-flexibility__head {
    margin-bottom: 30px;
  }

  .top-flexibility__image {}

  .top-flexibility__content {
    margin-top: 35px;
  }
}

/* top-performance
------------------------*/
.top-performance {}

.top-performance__inner {
  padding: 100px 30px;
}

.top-performance__head {
  margin-bottom: 60px;
}

.top-performance__image {
  position: relative;
  margin: 0 -30px;
}

.top-performance__image img {
  width: 100%;
}

.top-performance__content {
  max-width: 830px;
  width: 100%;
  margin: 60px auto 0;
}

.top-performance__text {}

.top-performance__btn {}

@media screen and (max-width: 767px) {
  .top-performance__inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .top-performance__head {
    margin-bottom: 30px;
  }

  .top-performance__content {
    margin-top: 30px;
  }
}

/* top-easeofuse
------------------------*/
.top-easeofuse {
  position: relative;
}

.top-easeofuse::before {
  content: "";
  position: absolute;
  top: 0vw;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/top/wapk_bg_01_pc.png) no-repeat 0 0 / auto 100%;
}

.top-easeofuse__inner {
  padding: 100px 30px;
}

.top-easeofuse__head {
  margin-bottom: 60px;
}

.top-easeofuseMedia {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  max-width: 1000px;
  width: 100%;
  min-height: 47.14vw;
  margin: 0 auto;
}

.top-easeofuseMedia__image {
  position: absolute;
  top: 0;
  right: 50%;
  width: 50vw;
}

.top-easeofuseMedia__image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-right: 0.71vw;
}

.top-easeofuseMedia__content {
  width: 50%;
  padding-left: 2vw;
}

.top-easeofuseMedia__title {
  text-align: center;
  color: #726c65;
  font-family: "Fjalla One", sans-serif;
  white-space: nowrap;
}

.top-easeofuseMedia__titleMain,
.top-easeofuseMedia__titleSub {
  display: block;
}

.top-easeofuseMedia__titleMain {
  font-size: 210px;
  line-height: 1;
  letter-spacing: -0.025em;
}

.top-easeofuseMedia__titleSub {
  font-size: 77px;
  letter-spacing: -0.025em;
}

.top-easeofuseMedia__text {}

.top-easeofuseMedia__btn {}

@media screen and (max-width: 1000px) {
  .top-easeofuseMedia__titleMain {
    font-size: 20.5vw;
  }

  .top-easeofuseMedia__titleSub {
    font-size: 7.6vw;
  }
}

@media screen and (max-width: 767px) {
  .top-easeofuse::before {
    background-image: url(../images/top/wapk_bg_01_pc.png);
    top: 14vw;
  }

  .top-easeofuse__inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .top-easeofuse__head {
    margin-bottom: 30px;
  }

  .top-easeofuseMedia {
    display: block;
    width: auto;
    min-height: auto;
  }

  .top-easeofuseMedia__image {
    position: static;
    width: auto;
    margin-left: -30px;
  }

  .top-easeofuseMedia__image img {
    position: static;
    padding-right: 0;
  }

  .top-easeofuseMedia__content {
    width: auto;
    padding-left: 0;
  }

  .top-easeofuseMedia__title {
    margin-top: 15px;
    margin-bottom: 35px;
  }

  .top-easeofuseMedia__titleMain {
    font-size: 105px;
  }

  .top-easeofuseMedia__titleSub {
    font-size: 38px;
  }
}

/* top-movie
------------------------*/
.top-movie {}

.top-movie__inner {
  padding: 100px 30px;
}

.top-movie__head {
  margin-bottom: 60px;
}

.top-movie__image {
  position: relative;
  margin: 0 -30px;
}

.top-movie__image img {
  width: 100%;
}

.top-movie__device {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  font-size: 80px;
  line-height: 1.125;
}

.top-movie__content {
  max-width: 830px;
  width: 100%;
  margin: 60px auto 0;
}

.top-movie__text {}

.top-movie__btn {}

@media screen and (max-width: 1400px) {
  .top-movie__device {
    font-size: 5.71vw;
  }
}

@media screen and (max-width: 767px) {
  .top-movie__inner {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .top-movie__head {
    margin-bottom: 30px;
  }

  .top-movie__device {
    bottom: 20px;
    left: 20px;
    font-size: 28px;
  }

  .top-movie__content {
    margin-top: 35px;
  }
}

/* top-notes
------------------------*/
.top-notes {
  margin-top: 80px;
  padding: 0 20px;
}

.top-notes__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.top-notes__box {
  background-color: #f4f4f4;
  padding: 40px;
}

.top-notes__title {
  font-family: "Fjalla One", sans-serif;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.top-notes__list>li {
  position: relative;
  font-size: 12px;
  line-height: 1.667;
}

.top-notes__list.s_noteNumber>li {
  text-align: left;
  padding-left: 1.5em;
  counter-increment: cnt;
}

.top-notes__list.s_noteNumber>li:before {
  content: "*" counter(cnt);
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 767px) {
  .top-notes {
    margin-top: 40px;
  }

  .top-notes__box {
    padding: 20px;
  }

  .top-notes__title {
    font-size: 15px;
    margin-bottom: 15px;
  }

  .top-notes__list>li {
    font-size: 11px;
    line-height: 1.36;
  }
}

/* top-product
------------------------*/
.top-product {
  max-width: 790px;
  margin: 80px auto 0;
}

@media screen and (max-width: 767px) {
  .top-product {
    max-width: 90vw;
    font-size: 11px;
    margin-top: 30px;
  }
}

/* top-bannerArea
------------------------*/

.top-bannerArea {
  margin: 50px 5vw 0;
  text-align: center;
}

.top-bannerArea a {
  transition: opacity 0.3s;
}

.top-bannerArea a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 767px) {
  .top-bannerArea {
    margin-top: 40px;
  }
}