@charset "UTF-8";
/* default */
*    { margin: 0; padding: 0; }
body { margin: auto; width: 100vw; height: 100vh; overflow-x: hidden; background: #d6e496; }
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500&family=M+PLUS+Rounded+1c:wght@700&display=swap');
/*============================================================*/
/* ローディングアニメーション */
.loading      { background: rgba(255,255,255,.7); background: #d6e496; position: absolute; z-index: 1000; width: 100%; height: 100vh; top: 0; left: 0; display: flex; align-items: center; }
.loading.hide { opacity: 0; pointer-events: none; transition: opacity 500ms; }
.circle       { margin:0 auto; width: 10vw; height: 10vw; border-radius: 10vw; border: 6px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: circle 1s linear infinite; }
@keyframes circle {
    0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*============================================================*/
header           { width: 100%; display: flex; align-items: center; position: absolute; top: 1.5625vw; z-index: 10; pointer-events: none; }
header .logo     { margin: 0 0 0 2.604167vw; width: 10.15625vw; pointer-events: auto; }
header .logo img { width: 100%; }
/*EN,JP,Contact*/
.header_btns     { width: 89.84375vw; pointer-events: none; }
.header_btns ul  { margin: 0 2.1875vw 0 0; list-style: none none; float: right; display: flex; align-items: center; pointer-events: auto; }
.header_btns li  { margin-left: 0.3125vw; width: 1.927083vw; }
.header_btns li img                 { width: 100%; }
.header_btns li a:hover img         { opacity: .7; }
.header_btns li.contact             { margin-left: 1.791146vw; width: 8.541667vw; }
.header_btns li.contact a:hover img { opacity: .7; }

/*============================================================*/
.dogreen_stage { width: 100%; height: 67.708333vw; position: relative; margin: -9.5vw auto 0 auto; }
.lens_mask     { padding-top: 67.708333vw; width: 100vw; position: relative; z-index: 2; background: url(../img/mask.png) no-repeat; background-position: center; background-size: cover; pointer-events: none; }
.lens_mask img          { width: 100%; }
.lens_mask img.le_top_m { width: 4.9213vw; position:absolute; left: 10.54166vw; top: 20.619vw; }
.lens_mask img.le_top_s { width: 2.218vw; position:absolute; left: 7.6931vw; top: 26.016vw; }
.lens_mask img.le_btm   { width: 6.66667vw; position:absolute; left: 10.87166vw; top: 47.17vw; }
.lens_mask img.ri_top   { width: 6.66667vw; position:absolute; right: 8.1312vw; top: 25.9vw; }
.lens_mask img.ri_btm_s { width: 2.218vw; position:absolute; right: 15.1856vw; top: 47.641vw; }

.base_background { width: 100vw; height: 67.708333vw; position: absolute; left: 50%; top: 0; transform: translate(-50%,0%); z-index: 1; overflow: hidden; }

/*ボタンの大きさ*/
.top_to_three,
.prod_to_three,
.mr_to_three,
.three_to_top  { width: 7.96875vw; height: 4.270833vw; }/*上下へスライドボタン*/
.prod_to_top,
.top_to_prod,
.top_to_mr,
.mr_to_top,
.three_to_prod,
.three_to_mr   { width: 4.270833vw; height: 7.96875vw; }/*左右へスライドボタン*/
.mr_to_web     { width: 11.979167vw; height: auto; }
.three_modal01,
.three_modal02,
.three_modal03 { width: 9.375vw; height: auto; }

.foot_links         { text-align: center; width: 100%; color: #fff; font-weight: 400; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 1vw; }
.foot_links p       { color: #fff; display: inline; }
.foot_links p a     { color: #fff; text-decoration: none; }
.foot_links p span  { font-size: 110%; }
.foot_links p:hover { opacity: 0.7; cursor: pointer; }

.top_to_three img,
.prod_to_three img,
.mr_to_three img,
.three_to_top img  { width: 7.96875vw; height: auto; }/*上下へスライドボタン*/
.prod_to_top img,
.top_to_prod img,
.top_to_mr img,
.mr_to_top img,
.three_to_prod img,
.three_to_mr img  { width: 4.270833vw; height: auto; }/*左右へスライドボタン*/

/*各画面ボタンの配置
==========================================================*/
/*ステージ全体の背景*/
.stage_bg    { width: 203.125vw; height: 125vw; background: url(../img/stage_bg.png)no-repeat; background-size: cover; }
.dg_fw       { width: 203.125vw; height: 125.625vw; position: absolute; top: 0; left: 0; }
.stBtn:hover { /*opacity: 0.7;*/ cursor: pointer; }
/*TOP*/
.dg_fw #dg_top { width: 67.708333vw; height: 67.708333vw; position: absolute; bottom: 0; left: 67.708333vw; }
#animation_container         { position: relative; width: 67.708333vw!important; height: 67.708333vw!important; }
#animation_container #canvas { width: 67.708333vw!important; height: 67.708333vw!important; }

.dg_fw #dg_top .stBtn.top_to_prod        { position: absolute; top: 33.020833vw; left: 5.78125vw; transform: translate(-50%,-50%); }
.dg_fw #dg_top .stBtn.top_to_three       { position: absolute; top: 10.104167vw; left: 50%; transform: translate(-50%,0); }
.dg_fw #dg_top .stBtn.top_to_mr          { position: absolute; top: 33.020833vw; right: 5.28125vw; transform: translate(0%,-50%); }
.dg_fw #dg_top .stBtn.top_to_prod:hover  { background: url(../img/to_prod_btn_ac.png) no-repeat; background-size: cover; }
.dg_fw #dg_top .stBtn.top_to_three:hover { background: url(../img/to_three_btn_ac.png) no-repeat; background-size: cover; }
.dg_fw #dg_top .stBtn.top_to_mr:hover    { background: url(../img/to_mr_btn_ac.png) no-repeat; background-size: cover; }
.dg_fw #dg_top .stBtn:hover img.nega     { opacity: 0; background: none; }
.dg_fw #dg_top .foot_links { position: absolute; bottom: 6vw; }
/*製品紹介*/
.dg_fw #dg_product { width: 67.708333vw; height: 67.708333vw; position: absolute; bottom: 0; left: 0; background: url(../img/dg_products_anim.png) no-repeat; background-size: cover; }
.dg_fw #dg_product .stBtn.prod_to_three       { position: absolute; top: 10.104167vw; left: 50%; transform: translate(-50%,0); }
.dg_fw #dg_product .stBtn.prod_to_top         { position: absolute; top: 33.020833vw; right: 5.28125vw; transform: translate(0%,-50%); }
.dg_fw #dg_product .stBtn.prod_to_three:hover { background: url(../img/to_three_btn_ac.png) no-repeat; background-size: cover; }
.dg_fw #dg_product .stBtn.prod_to_top:hover   { background: url(../img/prod_to_top_btn_ac.png) no-repeat; background-size: cover; }
.dg_fw #dg_product .stBtn:hover img.nega      { opacity: 0; background: none; }
.dg_fw #dg_product .swiperModalButton         { margin: 0 auto; position: relative; width: 60%; display: flex; justify-content: space-between; top: 43%; }
.dg_fw #dg_product .mr160dg                   { width: 18.958333vw; }
.dg_fw #dg_product .mr174                     { width: 18.958333vw; }
.dg_fw #dg_product .mr160dg_btn               { width: 100%; }
.dg_fw #dg_product .mr174_btn                 { width: 100%; }
.dg_fw #dg_product .modalOpen02 img.mr160dg_btn,
.dg_fw #dg_product .modalOpen02 img.mr174_btn { animation: bounce 4s ease-in-out 0.3s forwards; animation-iteration-count: infinite; }
@keyframes bounce {
   0% { transform: scale(1); }
  50% { transform: scale(0.9); }
}
.dg_fw #dg_product .foot_links { position: absolute; bottom: 6vw; }

/*MRについて*/
.dg_fw #dg_mr { width: 67.708333vw; height: 67.708333vw; position: absolute; bottom: 0; right: 0vw; background: url(../img/dg_mr_anim.png) no-repeat; background-size: cover; }
.dg_fw #dg_mr .stBtn.mr_to_three       { position: absolute; top: 10.104167vw; left: 50%; transform: translate(-50%,0); }
.dg_fw #dg_mr .stBtn.mr_to_top         { position: absolute; top: 33.020833vw; left: 5.78125vw; transform: translate(-50%,-50%); }
.dg_fw #dg_mr .stBtn.mr_to_web         { position: absolute; top: 46.66667vw; left: 34.166667vw; transform: translate(-50%,0); }
.dg_fw #dg_mr .stBtn.mr_to_web:hover   { opacity: .7; }
.dg_fw #dg_mr .stBtn.mr_to_three:hover { background: url(../img/to_three_btn_ac.png) no-repeat; background-size: cover; }
.dg_fw #dg_mr .stBtn.mr_to_top:hover   { background: url(../img/mr_to_top_btn_ac.png) no-repeat; background-size: cover; }
.dg_fw #dg_mr .stBtn:hover img.nega    { opacity: 0; background: none; }
.dg_fw #dg_mr .foot_links { position: absolute; bottom: 6vw; }

/*3つの特長*/
.dg_fw #dg_three { width: 67.708333vw; height: 67.708333vw; position: absolute; top: 0; left: 67.708333vw; background: url(../img/dg_sky_anim.png) no-repeat; background-size: cover; }
.dg_fw #dg_three .stBtn.three_to_prod { position: absolute; top: 33.645833vw; left: 5.78125vw; transform: translate(-50%,-50%); }
.dg_fw #dg_three .stBtn.three_to_top  { position: absolute; top: 52vw; left: 50%; transform: translate(-50%,0); }
.dg_fw #dg_three .stBtn.three_to_mr   { position: absolute; top: 33.645833vw; right: 5.28125vw; transform: translate(0%,-50%); }
.dg_fw #dg_three .stBtn.three_to_prod:hover   { background: url(../img/to_prod_btn_ac.png) no-repeat; background-size: cover;  }
.dg_fw #dg_three .stBtn.three_to_top:hover    { background: url(../img/three_to_top_btn_ac.png) no-repeat; background-size: cover;  }
.dg_fw #dg_three .stBtn.three_to_mr:hover     { background: url(../img/to_mr_btn_ac.png) no-repeat; background-size: cover;  }
.dg_fw #dg_three .stBtn:hover img.nega        { opacity: 0; background: none; }
.dg_fw #dg_three .three_modal01               { position: absolute; top: 41.302083vw; left: 26%; transform: translate(-50%,0%); }
.dg_fw #dg_three .three_modal02               { position: absolute; top: 41.302083vw; left: 50%; transform: translate(-50%,0%); }
.dg_fw #dg_three .three_modal03               { position: absolute; top: 41.302083vw; left: 74%; transform: translate(-50%,0%); }
.dg_fw #dg_three .modalOpen01 img.stBtn:hover { opacity: .7; }
.dg_fw #dg_three .foot_links     { position: absolute; bottom: 7vw; color: #009842; }
.dg_fw #dg_three .foot_links p   { color: #009842; display: inline; }
.dg_fw #dg_three .foot_links p a { color: #009842; text-decoration: none; }

/*ステージ・スライド・アニメーション
============================================================*/
#stage_all { width: 203.125vw; height: 125vw; position: absolute; overflow: hidden; left: 50%; top: 0;
 transform: translate(-16.66666%, -57.916667vw); /*製品紹介*/
 transform: translate(-83.33333%, -57.916667vw);  /*MRについて*/
 transform: translate(-50%, 0vw);  /*3つの特長*/
 transform: translate(-50%, -57.916667vw); /*TOP*/
}
/*TOP から 製品紹介*/
#stage_all.c_to_l       { left: 50%; top: 0; animation: anim-center-to-left 1s;
transform: translate(-16.66666%, -57.916667vw); /*製品紹介*/
}
@keyframes anim-center-to-left {
  0% { transform: translate(-50%, -57.916667vw); }
100% { transform: translate(-16.66666%, -57.916667vw); }
}
/*TOP から MRについて*/
#stage_all.c_to_r       { left: 50%; top: 0; animation: anim-center-to-right 1s;
transform: translate(-83.33333%, -57.916667vw);  /*MRについて*/
}
@keyframes anim-center-to-right {
  0% { transform: translate(-50%, -57.916667vw); }
100% { transform: translate(-83.33333%, -57.916667vw); }
}
/*TOP から 3つの特長*/
#stage_all.c_to_t       { left: 50%; top: 0; animation: anim-center-to-sky 1s;
transform: translate(-50%, 0vw);  /*3つの特長*/
}
@keyframes anim-center-to-sky {
  0% { transform: translate(-50%, -57.916667vw); }
100% { transform: translate(-50%, 0vw); }
}
/*製品紹介 から TOP*/
#stage_all.l_to_c       { left: 50%; top: 0; animation: anim-left-to-center 1s;
transform: translate(-50%, -57.916667vw); /*TOP*/
}
@keyframes anim-left-to-center {
  0% { transform: translate(-16.66666%, -57.916667vw); }
100% { transform: translate(-50%, -57.916667vw); }
}
/* MRについて から TOP*/
#stage_all.r_to_c       { left: 50%; top: 0; animation: anim-right-to-center 1s;
transform: translate(-50%, -57.916667vw); /*TOP*/
}
@keyframes anim-right-to-center {
  0% { transform: translate(-83.33333%, -57.916667vw); }
100% { transform: translate(-50%, -57.916667vw); }
}
/* MRについて から 3つの特長*/
#stage_all.r_to_t       { left: 50%; top: 0; animation: anim-right-to-sky 2s;
transform: translate(-50%, 0vw);  /*3つの特長*/
}
@keyframes anim-right-to-sky {
  0% { transform: translate(-83.33333%, -57.916667vw); }
 50% { transform: translate(-50%, -57.916667vw); }
100% { transform: translate(-50%, 0vw); }
}
/* 3つの特長 から TOP*/
#stage_all.t_to_c       { left: 50%; top: 0; animation: anim-sky-to-center 1s;
transform: translate(-50%, -57.916667vw); /*TOP*/
}
@keyframes anim-sky-to-center {
  0% { transform: translate(-50%, 0vw); }
100% { transform: translate(-50%, -57.916667vw); }
}
/* 製品紹介 から 3つの特長*/
#stage_all.l_to_t       { left: 50%; top: 0; animation: anim-left-to-sky 2s;
transform: translate(-50%, 0vw);  /*3つの特長*/
}
@keyframes anim-left-to-sky {
  0% { transform: translate(-16.66666%, -57.916667vw); }
 50% { transform: translate(-50%, -57.916667vw); }
100% { transform: translate(-50%, 0vw); }
}
/* 3つの特長 から 製品紹介*/
#stage_all.t_to_l       { left: 50%; top: 0; animation: anim-sky-to-left 2s;
transform: translate(-16.66666%, -57.916667vw); /*製品紹介*/
}
@keyframes anim-sky-to-left {
  0% { transform: translate(-50%, 0vw); }
 50% { transform: translate(-50%, -57.916667vw); }
100% { transform: translate(-16.66666%, -57.916667vw); }
}
/* 3つの特長 から MRについて*/
#stage_all.t_to_r       { left: 50%; top: 0; animation: anim-sky-to-right 2s;
transform: translate(-83.33333%, -57.916667vw);  /*MRについて*/
}
@keyframes anim-sky-to-right {
  0% { transform: translate(-50%, 0vw); }
 50% { transform: translate(-50%, -57.916667vw); }
100% { transform: translate(-83.33333%, -57.916667vw); }
}
/* 製品紹介 から MRについて*/
#stage_all.l_to_r       { left: 50%; top: 0; animation: anim-left-to-right 2s;
transform: translate(-83.33333%, -57.916667vw);  /*MRについて*/
}
@keyframes anim-left-to-right {
  0% { transform: translate(-16.66666%, -57.916667vw); }
100% { transform: translate(-83.33333%, -57.916667vw); }
}
/* MRについて から 製品紹介*/
#stage_all.r_to_l       { left: 50%; top: 0; animation: anim-right-to-left 2s;
transform: translate(-16.66666%, -57.916667vw); /*製品紹介*/
}
@keyframes anim-right-to-left {
  0% { transform: translate(-83.33333%, -57.916667vw); }
100% { transform: translate(-16.66666%, -57.916667vw); }
}

/*モーダル・スライド
============================================================*/
/* モーダル */
.modal              { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s; pointer-events: none; opacity: 0; z-index: 100; background: rgba(0,0,0,.7); }
.modal02            { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s; pointer-events: none; opacity: 0; z-index: 100; background: rgba(0,0,0,.7); }
.modal.is-active    { opacity: 1; pointer-events: auto; }
.modal02.is-active  { opacity: 1; pointer-events: auto; }
.modal__overlay     { position: absolute; width: 100%; height: 100%; cursor: pointer; }
.modal__content     { position: relative; width: 100%; width: 56.145833vw; }
.modal__content img { width: 100%; }
.modal_inner        { width: 46.875vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; }
/* 閉じるボタン */
.modal__close-btn       { width: 1.5vw; position: absolute; right: 1.25vw; top: 1.25vw; cursor: pointer; }
.modal__close-btn img   { width: 100%; }
.modal__close-btn:hover { /*opacity: 0.7;*/ }

.swiper02 { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; }
/* swiper-button-prev,swiper-button-next */
.swiper-button-next,
.swiper-button-prev             { width: 2.864583vw; height: 2.864583vw; z-index: 10; cursor: pointer; }
.swiper-button-prev,
.swiper-rtl .swiper-button-next { left: 0; right: auto; }
.swiper-button-next,
.swiper-rtl .swiper-button-prev { right: 0; left: auto; }
.swiper-button-prev:after       { content:''; width: 2.864583vw; height: 2.864583vw; background: url(../img/slide_left.png) no-repeat; background-size: cover; }
.swiper-button-next:after       { content:''; width: 2.864583vw; height: 2.864583vw; background: url(../img/slide_right.png) no-repeat; background-size: cover; }

/*スライダー画面中央のNEXT*/
.swiper .swiper-slide .swiper-button-next.next1 { width: 100%; height: 2.1875vw; position: absolute; top: calc(100% - 3.333vw); }
.swiper .swiper-slide .swiper-button-next.next1:after { content:''; width: 9.3229vw; height: 2.1875vw; background: url(../img/prod1_next.png) no-repeat; background-size: contain; }
.swiper .swiper-slide .swiper-button-next.next2 { width: 100%; height: 2.1875vw; position: absolute; top: calc(100% - 3.333vw); }
.swiper .swiper-slide .swiper-button-next.next2:after { content:''; width: 9.3229vw; height: 2.1875vw; background: url(../img/prod2_next.png) no-repeat; background-size: contain; }

/*footer
============================================================*/
footer { width: 100%; }
footer .container            { padding: 1em; text-align: center; }
footer .container a          { margin:0 auto; display: block; height: auto; width: 10.15625vw; min-width: 120px; }
footer .container a img      { width: 100%; }
footer .container .copyright { font-size: .88vw; font-family: sans-serif; color: #717071; }