@charset "utf-8";

:root {
  --bg-color: #6cc7d9;
}

body{
  margin:0;
  padding:0;
  background-color: var(--bg-color) !important;
}

/* 覆蓋公版 */
.PD_layout[data-pd-h3="5"] .PD h3 span {
  background-color: #d4edf1;
}

@media screen and (max-width:640px) {
  .PD_layout .PD h3 span,
  .PD_layout[data-pd-h3="5"] .PD h3 span {
    word-break: normal;
    overflow: hidden;
    white-space: nowrap;
  }
}


.WRAPPER {
  position: relative;
  display:block;
  margin: 0 auto;
  padding: 0;
  width:100%;
  min-width:1220px;
  overflow:hidden;
  font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;
  background: url(bg_2000.jpg?t=1748490686553) no-repeat top center var(--bg-color);
}

.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none;}

@media screen and (max-width:640px) {
  .WRAPPER {
    min-width: inherit;
    background: url(bg_640.jpg?t=1748490686553) no-repeat top center/100% auto var(--bg-color);
  }
  .WRAPPER img {  width:100%;  height:auto;}
}

/*回版頭*/
#gotop {
  display: none; position:fixed; z-index: 105; right:20px; bottom:30px;padding:10px 10px 3px 10px; border-radius:50px; font:12px/30px Verdana; text-align:center; color:#000;
  background-color:rgba(255,255,255,0.7);
  cursor:pointer;
  transition: all 0.3s ease;
}
#gotop:hover { padding-top:40px; background-color:#fff;}
#gotop::before { content: ""; position:absolute; top:7px; left:18px; width: 0; height: 0; border: 4px solid #000; border-color: transparent transparent #000; }
@media screen and (max-width:767px){
    #gotop { right:20px; bottom:20px; }
}

.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { display:block;}
.Area .go_bt { transition: all 0.4s ease;}
.Area .go_bt:hover { transform:scale(0.95);}
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
h2.position-relative {
  z-index: 99;
}
@media screen and (max-width:640px) {
  .Area1220 { width:100%; }
  .Area1220 > .content {
    width: 93%;
    margin-inline: auto;
  }
  .Area960 { width:100%;}
  .Area_1bn { margin: 0 auto; padding:0; overflow:hidden;}
  .Area_1bn a { float:left; margin:0 0 2% 0; padding:0; width:100%; list-style: none;}
  .Area_2bn { margin: 0 auto; padding:0; overflow:hidden;}
  .Area_2bn a { float:left; margin:0 1% 2%; padding:0; width:48%; list-style: none;}
  .Area_3bn { margin: 0 auto; padding:0; overflow:hidden;}
  .Area_3bn a { float:left; margin:0 1% 2% ; padding:0; width:31.3%; list-style: none;}
}


/* .Area_top {} */
.Area_top .momologo { z-index: 100; position: absolute;top: 15px; left:40px;}
.Area_top .momologo a {
  display:block;
  width:200px;
  height:30px;
  background: url(momo_logo.png?t=1748490686553) no-repeat;
}
.Area_top .momologo a:hover{ background: url(momo_logo_on.png?t=1748490686553) no-repeat;}
@media screen and (max-width:640px){
  .Area_top { height: auto;}
  .Area_top .momologo { display:none;}
}

.m_logo {
  width: 30%;
  position: absolute;
  left: 4vw;
  top: 4vw;
  z-index: 100;
}

.brand-logo {
  float: right;
  margin-top: 30px;
}
.brand-logo.for_phone {
  width: clamp(70px, 10vw, 120px);
  margin-top: 10px;
  margin-right: 10px;
}

/* .for_pc {} */
.for_phone { display:none !important;}
    @media screen and (max-width:640px){
        .for_pc { display:none !important;}
        .for_phone { display: inherit !important;}
    }


/* 版頭 */
.Area_title {
  overflow: hidden;
  z-index: 10;
}
.Area_title h1 {
  margin-top: 40px;
  position: relative;
  z-index: 190;
}
@media screen and (max-width:640px) {
  .Area_title {
    margin-top: 0;
    margin-bottom: 20px;
  }
  .Area_title h1 {
    margin-top: 5vw;
  }
}

.Area_title ul {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255, 0.5);
  border-radius: 4px;
  padding: 4px;
}
.Area_title ul li img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-main-fv {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 122/84;
  margin: auto;
}
.top-main-fv-sub {
  position: absolute;
  height: 100%;
  right: 0;
  display: flex;
}
.top-main-fv-sub > a img {
  height: 100%;
  width: auto;
}
.top-main-fv > img {
  position: absolute;
  bottom: 0;
  left: 0;
}
.top-main-fv > a {
  position: absolute;
  bottom: 0;
  left: 0;
}
.top-main-fv > a:last-child {
  left: auto;
  right: 0;
}

.top-bottom-banner {
  aspect-ratio: 120/58;
}
@media screen and (max-width:640px) {
.top-bottom-banner {
  margin-top: 22px;
}
}

.custom-catalog {
  padding: 36px 0 24px;
  margin-bottom: 80px;
  row-gap: 36px;
}
.custom-catalog-btn {
  margin-bottom: 142px;
}
.custom-toei-begin {
}
.custom-catalog-header {
  margin-block: 10px;
  margin-inline: auto;
}
.custom-bottom-space {
  margin-bottom: 60px;
}

@media screen and (max-width:640px) {
  .custom-catalog-btn {
    margin-bottom: 0;
  }

  .custom-catalog-header {
    width: 80%;
  }
}

.features {
  box-sizing: border-box;
  padding: 40px 0;
  margin: 60px auto;
  background-color: #75c8fe;
  border: 5px solid #72d9fa;
  border-radius: 16px;
}
.features.for_phone  {
  margin-top: 20px;
}

.features img.round-corner {
  border-radius: 24px;
}
@media screen and (max-width:640px) {
  .features {
    padding: 25px 0;
    margin: 10px auto;
  }
}

.ga-videos {
  width: 1060px;
  margin: 2em auto;
}

.ga-videos > .yt-16-9 {
  width: 48%;
  margin: 1%;
}
@media screen and (max-width:640px) {
  .ga-videos {
    width: auto;
    margin: 0.5em auto;
  }
  .ga-videos > .yt-16-9 {
    width: 100%;
    max-width: none;
    margin-bottom: 12px;
  }
}
.bottom-video {
  width: 1060px;
  margin: 3em auto;
}
@media screen and (max-width: 640px) {
  .bottom-video {
    width: 93%;
    margin: 12px auto 0;
  }
}

.yt-16-9 iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
}


/* buy */
.Area_buy {
  /* margin-top: 35px; */
  /* padding: 0 10px 20px; */
  /* width: 1140px; */
  z-index: 10;
  border-radius: 24px;
  box-sizing: border-box;
}
.Area_buy h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
}
.Area_buy ul.flex {
  justify-content: space-around;
  row-gap: 16px;
  padding-bottom: 30px;
  padding-inline: 5px;
}

.Area_buy h2.gold-clouds {
  background: url(sheet-g.png?t=1748490686553) no-repeat 8% 115%;
}
.Area_buy h2.red-clouds {
  background: url(sheet-r.png?t=1748490686553) no-repeat 8% 115%;
}

@media screen and (max-width:640px) {
  .Area_buy h2 {
    height: 105px;
    max-height: 20vw;
  }
  .Area_buy h2 > img {
    max-width: 75%;
  }
  .Area_buy h2.gold-clouds {
    background: url(sheet-g-no-cloud.png?t=1748490686553) no-repeat top/contain;
  }
  .Area_buy h2.red-clouds {
    background: url(sheet-r-no-cloud.png?t=1748490686553) no-repeat top/contain;
  }
}

.Area_buy.blue {
  background-color: #275380;
}
.Area_buy.red {
  background-color: #b40001;
}
.Area_buy.gold {
  background-color: #ebda95;
}

.Area_buy .content {
  width: 100%;
}

@media screen and (max-width:640px) {
  .Area_buy {
    padding: 10px 5px;
    width: 95%;
  }
  .Area_buy .content {
    margin: auto;
  }
  .Area_buy ul.flex {
    width: 100%;
    min-height: auto;
    margin: auto;
    padding-bottom: 20px;
    padding-inline: 0;
    justify-content: center;
    row-gap: 0;
  }

  .Area_buy .flex li {
    width: 45%;
    margin: 2%;
  }
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* utils */
.float-left {
  float: left;
}
.position-relative {
  position: relative;
}
.mx-auto {
  margin-inline: auto;
}
.flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.yt-16-9 iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.sm\:w-3\/4 {
  width: 75%;
}
.sm\:w-2\/3 {
  width: 66.666667%;
}

@media screen and (max-width:640px) {
  .sm\:w-1\/2 {
    width: 50%;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


.stub {
  position: absolute;
  z-index: 10;
}
@media screen and (max-width:640px) {
  .stub {
    display: none;
  }
}
.stub.stub-bag {
  height: 60%;
  width: auto;
  left: calc(80% - 0px);
  top: 10vw;
}
.stub.stub-box {
  height: 83%;
  width: auto;
  left: calc(0% - 134px);
  top: 2vw;
}