@charset "utf-8";


/* ----------------------------------------------------------
   PC/MB 顯示切換（與原廠 for_pc / for_m 一致）
   ---------------------------------------------------------- */
.for_phone, .for_m { display: none !important; }

@media screen and (max-width: 767px) {
  .for_pc { display: none !important; }
  .for_phone, .for_m { display: inherit !important; }
}

/*基本*/
body {
  margin: 0;
  padding: 0;
 
}

/* ----------------------------------------------------------
   WRAPPER 基本設定
   ---------------------------------------------------------- */
.WRAPPER {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  min-width: 1220px;
  overflow: hidden;
  font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica;
}


@media screen and (max-width: 767px) {
  .WRAPPER { min-width: 100%; }
}


/* ----------------------------------------------------------
   全頁背景區塊  .Area_bg（包在 for_pc div 裡）
   bg_re：repeat-y 粉色底  pc_bg.jpg 2000×5146
   ---------------------------------------------------------- */
.Area_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -10;
}

.bg_re {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 2000px;
  height: 110%;
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 2000px auto;
  z-index: -8;
}



.pc_bg_deco {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2000px;
  height: 3444px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 2000px auto;
  pointer-events: none;
  z-index: 9;
}


.bg_00 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2000px;
  height: 1741px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 2000px auto;
  z-index: -7;
}

.bg_01 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2000px;
  height: 1741px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 2000px auto;
  z-index: -6;
}

.bg_02 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2000px;
  height: 1741px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 2000px auto;
  z-index: -5;
}

.bg_03 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2000px;
  height: 1741px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 2000px auto;
  z-index: -4;
  mix-blend-mode: screen;
}



.Area_top {
  position: relative;
  height: 1041px
}

@media screen and (max-width: 767px) {
  .Area_top {
    height: 84vw;
  }
 .m_KV{
  position: absolute;
  z-index: -1;
 }
 .m_KV_bg{top: 0vw; position: absolute;height:2010vh; background-image: url("m_bg.jpg?t=1778809442493"); background-size: 100%; width: 100vw;z-index: -1;background-repeat: repeat-y;}
 .m_04{
  mix-blend-mode: screen;
 }
}


.Area01 {
  position: relative;
  min-height: 720px;
  padding-bottom: 20px;
}

.Area01 .layout_bg {
  height: 150px;
  position:relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  pointer-events: none;
}
.Area01 .layout_bg img { width: 1220px; display: block; }

.Area01 .PD_layout {
  padding: 0 20px 0;
}

@media screen and (max-width: 767px) {
  .Area01 { min-height: 84vw;  }
  .Area01 .layout_bg  { height: 19vw; left: -25vw;width: 150vw; }
  .Area01 .layout_bg img { width: 100%; }
  .Area01 .PD_layout { padding:0  }
}


.Area_danji .danji_box ul li .activityText .gifts span{
  color: #fffe8f;
}

.Area_danji .danji_box ul li .activityText p.gifts {
  color: #fff;
}
.Area02 {
  padding: 30px 0 70px;
  text-align: center;
}

.Area02 .Area_title02 {
  margin-bottom: 20px;
}
.Area02 .Area_title02 img { width: 600px; }

.Area02 .f-c {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.Area02 .f-c a { display: block; }
.Area02 .f-c img { width: 366px; display: block; }

@media screen and (max-width: 767px) {
  .Area02 { padding: 4vw 0 6vw; }
  .Area02 .Area_title02 img { width: 70vw; }
  .Area02 .f-c { gap: 1vw; flex-wrap: wrap; padding: 1vw; }
  .Area02 .f-c img { width: 100%; }
  .Area02 .f-c a { width: 32vw; display: flex; }
  
}

.Area_danji_title {
  text-align: center;
  margin-bottom: 16px;
}
.Area_danji_title img { width: 600px; }

@media screen and (max-width: 767px) {
  .Area_danji_title img { width: 70vw; }
  .Area_danji_title {
  text-align: center;
  margin-bottom: 2vw;
}
.Area_danji .danji_box ul li a{width:98vw;}
}


.Area03,
.Area04,
.Area05 {
  position: relative;
  margin-bottom: 10px;
}

.Area03 .layout_bg,
.Area04 .layout_bg,
.Area05 .layout_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  pointer-events: none;
}
.Area03 .layout_bg img,
.Area04 .layout_bg img,
.Area05 .layout_bg img {
  width: 1220px;
  display: block;
}

.Area03 .PD_layout,
.Area04 .PD_layout,
.Area05 .PD_layout {
padding: 150px 20px 100px;
}

@media screen and (max-width: 767px) {
  .Area03 .layout_bg img,
  .Area04 .layout_bg img,
  .Area05 .layout_bg img { width: 100%; }

  .Area03 .layout_bg,
  .Area04 .layout_bg,
  .Area05 .layout_bg {
    height: 23vw; left: -25vw;width: 150vw; 
  }
  .Area03 .PD_layout,
  .Area04 .PD_layout,
  .Area05 .PD_layout {padding: 21vw 0 10vw; }

  
}



.Area_bottom {
  display: block;
  text-align: center;
  padding: 20px 0 40px;
}
.Area_bottom img {
  width: 600px;
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .Area_bottom { padding: 4vw 0 8vw; }
  .Area_bottom img { width: 80vw; }
}





.Area_brand_rohto,
.Area_brand_zeiss {
  padding: 0 0 50px 0;
}
.Area_brand_rohto a,
.Area_brand_zeiss a { display: block; }
.Area_brand_rohto img,
.Area_brand_zeiss img { width: 1220px; display: block; }

@media screen and (max-width: 767px) {
  .Area_brand_rohto,
.Area_brand_zeiss {
  padding: 0 0 2vw 0;
  width: 98vw;
}
  .Area_brand_rohto img,
  .Area_brand_zeiss img { width: 100%; }
}


.Area_star_pd {
  padding: 30px 0 10px;
  text-align: center;
}
.Area_star_pd .Area_title02 { margin-bottom: 20px; }
.Area_star_pd .Area_title02 img { width: 600px; display: inline-block; }
.Area_star_pd .f-c {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.Area_star_pd .f-c a { display: block; margin: 0 18px; width: 45%;  }
.Area_star_pd .f-c a.eve { margin-top: 70px; }
.Area_star_pd .f-c a img { width: 100%; display: block; }

@media screen and (max-width: 767px) {
  
  .Area_star_pd { padding: 4vw 0 2vw; }
  .Area_star_pd .Area_title02 img { width: 70vw; }
  .Area_star_pd .f-c a { width: 95%; }
  .Area_star_pd .f-c a { display: block; margin: 0 ;}
.Area_star_pd .f-c a.eve { margin-top: 0px; }
}


.Area_hot_section {
  position: relative;
  margin-bottom: 10px;
}
.Area_hot_section .layout_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  pointer-events: none;
}
.Area_hot_section .layout_bg img {
  width: 1220px;
  display: block;
}
.Area_hot_section .PD_layout {
  padding: 120px 20px 100px;
}

@media screen and (max-width: 767px) {
  .Area_hot_section .layout_bg img { width: 100%; }
  .Area_hot_section .layout_bg {
height: 23vw;
        left: -7vw;
        width: 114vw;}
  .Area_hot_section .PD_layout { padding: 21vw 0 10vw; }
}


.Area_logo_bar {
  padding: 30px 0 50px;
  text-align: center;
}
.Area_logo_bar .Area_title04 { margin-bottom: 20px; }
.Area_logo_bar .Area_title04 img { width: 600px; display: inline-block; }
.Area_logo_bar .f-c {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.Area_logo_bar .f-c a { display: block; }
.Area_logo_bar .f-c a img { width: 190px; display: block; }

@media screen and (max-width: 767px) {
  .Area_logo_bar { padding: 4vw 0 8vw; }
  .Area_logo_bar .Area_title04 img { width: 70vw; }
  .Area_logo_bar .f-c { gap: 2vw; }
  .Area_logo_bar .f-c a img { width: 27vw; }
}