@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; justify-content: space-between; align-items: center; position: absolute; top: 2.3vw; z-index: 10; pointer-events: none; }
header .logo     { margin: 0 0 0 3vw; width: 23vw; pointer-events: auto; }
header .logo img { width: 100%; }
/*EN,JP,Contact*/
.header_btns     { width: 26vw; pointer-events: auto; }
.header_btns ul  { margin: 0 3.1vw 0 0; list-style: none none; float: right; display: flex; align-items: center; }
.header_btns li  { margin-left: 1.25vw; width: 4.2vw; }
.header_btns li img                 { width: 100%; }
.header_btns li a:hover img         { opacity: .7; }
.header_btns li.contact             { margin-left: 2.5vw; width: 15.4vw; }
.header_btns li.contact a:hover img { opacity: .7; }

/*============================================================*/
.dogreen_stage { width: 100vw; height: 107.6923vw; position: relative; margin: 0 auto 0 auto; overflow: hidden; }
.lens_mask     { padding-top: 108vw; width: 147.6923vw; position: absolute; left: -23.846154vw; 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: 7.3vw; position:absolute; left: 27.487vw; top: 19.75385vw; }
.lens_mask img.le_top_s { width: 3.3vw; position:absolute; left: 23.077vw; top: 27.7vw; }
.lens_mask img.le_btm   { width: 9.846vw; position:absolute; left: 21.385vw; top: 75.3846vw; }
.lens_mask img.ri_top   { width: 9.846vw; position:absolute; right: 23.846154vw; top: 16.23vw; }
.lens_mask img.ri_btm_s { width: 3.3vw; position:absolute; right: 24.23vw; top: 75.3846vw; }

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

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

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

.top_to_three img,
.prod_to_three img,
.mr_to_three img,
.three_to_top img  { width: 100%; 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: 100%; height: auto; }/*上下へスライドボタン*/

/*各画面ボタンの配置
==========================================================*/
/*ステージ全体の背景*/
.stage_bg    { width: 300vw; height: 184.615385vw; position: relative; background: url(../img/stage_bg.png) no-repeat; background-size: cover; }
.dg_fw       { width: 300vw; height: 184.615385vw; position: absolute; top: 0; left: 0; }
.stBtn:hover { cursor: pointer; }

/*TOP*/
.dg_fw #dg_top { width: 100vw; height: 100vw; position: absolute; bottom: 0; left: 100vw; }
#animation_container         { position: relative; width: 100vw!important; height: 100vw!important; }
#animation_container #canvas { width:100vw!important; height: 100vw!important; }
.dg_fw #dg_top .stBtn.top_to_prod        { position: absolute; top: 50%; left: 10%; transform: translate(-50%,-50%); }
.dg_fw #dg_top .stBtn.top_to_three       { position: absolute; top: 13.6923vw; left: 50%; transform: translate(-50%,0); }
.dg_fw #dg_top .stBtn.top_to_mr          { position: absolute; top: 50%; right: 7%; 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: 8vw; }

/*製品紹介*/
.dg_fw #dg_product { width: 100vw; height: 100vw; 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: 13.6923vw; left: 50%; transform: translate(-50%,0); }
.dg_fw #dg_product .stBtn.prod_to_top         { position: absolute; top: 50%; right: 7%; 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: 28vw; }
.dg_fw #dg_product .mr174                     { width: 28vw; }
.dg_fw #dg_product .mr160dg_btn               { width: 100%; }
.dg_fw #dg_product .mr174_btn                 { width: 100%; }
.dg_fw #dg_product .modalOpen02 img           { 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: 8vw; }

/*MRについて*/
.dg_fw #dg_mr { width: 100vw; height: 100vw; position: absolute; bottom: 0; right: 0; background: url(../img/dg_mr_anim.png) no-repeat; background-size: cover; }
.dg_fw #dg_mr .stBtn.mr_to_three       { position: absolute; top: 13.6923vw; left: 50%; transform: translate(-50%,0); }
.dg_fw #dg_mr .stBtn.mr_to_top         { position: absolute; top: 50%; left: 10%; transform: translate(-50%,-50%); }
.dg_fw #dg_mr .stBtn.mr_to_web         { position: absolute; top: 74%; left: 50%; 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: 8vw; }
/*3つの特長*/
.dg_fw #dg_three { width: 100vw; height: 100vw; position: absolute; top: -4px; left: 100vw; background: url(../img/dg_sky_anim.png) no-repeat; background-size: cover; }
.dg_fw #dg_three .stBtn.three_to_prod         { position: absolute; top: 50%; left: 10%; transform: translate(-50%,-50%); }
.dg_fw #dg_three .stBtn.three_to_top          { position: absolute; top: 74%; left: 50%; transform: translate(-50%,0); }
.dg_fw #dg_three .stBtn.three_to_mr           { position: absolute; top: 50%; right: 7%; 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: 61%; left: 26%; transform: translate(-50%,0%); }
.dg_fw #dg_three .three_modal02               { position: absolute; top: 61%; left: 50%; transform: translate(-50%,0%); }
.dg_fw #dg_three .three_modal03               { position: absolute; top: 61%; 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: 11vw; 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: 300vw; height: 184.615385vw; position: absolute; left: 0; top: 0;
 transform: translate( 0, 0);  /*3つの特長*/
 transform: translate(100vw, -81.538462vw); /*製品紹介*/
 transform: translate(-100vw, -181.538462vw);  /*MRについて*/
 transform: translate( 0, -81.538462vw); /*TOP*/
}
/*TOP から 製品紹介*/
#stage_all.c_to_l       { left: 0; top: 0; animation: anim-center-to-left 1s;
transform: translate(100vw, -81.538462vw); /*製品紹介*/
}
@keyframes anim-center-to-left {
  0% { transform: translate( 0, -81.538462vw); }
100% { transform: translate(100vw, -81.538462vw); }
}
/*TOP から MRについて*/
#stage_all.c_to_r       { left: 0; top: 0; animation: anim-center-to-right 1s;
transform: translate(-100vw, -81.538462vw);  /*MRについて*/
}
@keyframes anim-center-to-right {
  0% { transform: translate( 0, -81.538462vw); }
100% { transform: translate(-100vw, -81.538462vw); }
}
/*TOP から 3つの特長*/
#stage_all.c_to_t       { left: 0; top: 0; animation: anim-center-to-sky 1s;
transform: translate( 0, 0);  /*3つの特長*/
}
@keyframes anim-center-to-sky {
  0% { transform: translate( 0, -81.538462vw); }
100% { transform: translate( 0, 0); }
}
/*製品紹介 から TOP*/
#stage_all.l_to_c       { left: 0; top: 0; animation: anim-left-to-center 1s;
transform: translate( 0, -81.538462vw); /*TOP*/
}
@keyframes anim-left-to-center {
  0% { transform: translate(100vw, -81.538462vw); }
100% { transform: translate( 0, -81.538462vw); }
}
/* MRについて から TOP*/
#stage_all.r_to_c       { left: 0; top: 0; animation: anim-right-to-center 1s;
transform: translate( 0, -81.538462vw); /*TOP*/
}
@keyframes anim-right-to-center {
  0% { transform: translate(-100vw, -81.538462vw); }
100% { transform: translate( 0, -81.538462vw); }
}
/* MRについて から 3つの特長*/
#stage_all.r_to_t       { left: 0; top: 0; animation: anim-right-to-sky 2s;
transform: translate( 0, 0);  /*3つの特長*/
}
@keyframes anim-right-to-sky {
  0% { transform: translate(-100vw, -81.538462vw); }
 50% { transform: translate( 0, -81.538462vw); }
100% { transform: translate( 0, 0); }
}
/* 3つの特長 から TOP*/
#stage_all.t_to_c       { left: 0; top: 0; animation: anim-sky-to-center 1s;
transform: translate( 0, -81.538462vw); /*TOP*/
}
@keyframes anim-sky-to-center {
  0% { transform: translate( 0, 0); }
100% { transform: translate( 0, -81.538462vw); }
}
/* 製品紹介 から 3つの特長*/
#stage_all.l_to_t       { left: 0; top: 0; animation: anim-left-to-sky 2s;
transform: translate( 0, 0);  /*3つの特長*/
}
@keyframes anim-left-to-sky {
  0% { transform: translate(100vw, -81.538462vw); }
 50% { transform: translate( 0, -81.538462vw); }
100% { transform: translate( 0, 0); }
}
/* 3つの特長 から 製品紹介*/
#stage_all.t_to_l       { left: 0; top: 0; animation: anim-sky-to-left 2s;
transform: translate(100vw, -81.538462vw); /*製品紹介*/
}
@keyframes anim-sky-to-left {
  0% { transform: translate( 0, 0); }
 50% { transform: translate( 0, -81.538462vw); }
100% { transform: translate(100vw, -81.538462vw); }
}
/* 3つの特長 から MRについて*/
#stage_all.t_to_r       { left:0; top: 0; animation: anim-sky-to-right 2s;
transform: translate(-100vw, -81.538462vw);  /*MRについて*/
}
@keyframes anim-sky-to-right {
  0% { transform: translate( 0, 0); }
 50% { transform: translate( 0, -81.538462vw); }
100% { transform: translate(-100vw, -81.538462vw); }
}
/* 製品紹介 から MRについて*/
#stage_all.l_to_r       { left: 0; top: 0; animation: anim-left-to-right 2s;
transform: translate(-100vw, -81.538462vw);  /*MRについて*/
}
@keyframes anim-left-to-right {
  0% { transform: translate(100vw, -81.538462vw); }
100% { transform: translate(-100vw, -81.538462vw); }
}
/* MRについて から 製品紹介*/
#stage_all.r_to_l       { left: 0; top: 0; animation: anim-right-to-left 2s;
transform: translate(100vw, -81.538462vw); /*製品紹介*/
}
@keyframes anim-right-to-left {
  0% {  transform: translate(-100vw, -81.538462vw); }
100% { transform: translate(100vw, -81.538462vw); }
}

/*モーダル・スライド
============================================================*/
/* モーダル */
.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: 96%; }
.modal__content img { width: 100%; }
.modal_inner        { width: 90%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; }
/* 閉じるボタン */
.modal__close-btn       { width: 3vw; position: absolute; right: 1.5385vw; top: 1.5385vw; 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: 3.1vw; height: 3.1vw; 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: 3.1vw; height: 3.1vw; background: url(../img/slide_left.png) no-repeat; background-size: cover; }
.swiper-button-next:after       { content:''; width: 3.1vw; height: 3.1vw; background: url(../img/slide_right.png) no-repeat; background-size: cover; }

/*スライダー画面中央のNEXT*/
#modal01 .swiper .swiper-slide .swiper-button-next.next1 { width: 100%; height: 3.28125vw; position: absolute; top: calc(100% - 5vw); }
#modal01 .swiper .swiper-slide .swiper-button-next.next1:after { content:''; width: 17vw; height: 4.2vw; background: url(../img/prod1_next.png) no-repeat; background-size: contain; }
#modal01 .swiper .swiper-slide .swiper-button-next.next2 { width: 100%; height: 3.28125vw; position: absolute; top: calc(100% - 5vw); }
#modal01 .swiper .swiper-slide .swiper-button-next.next2:after { content:''; width: 17vw; height: 4.2vw; 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: 23vw; }
footer .container a img      { width: 100%; }
footer .container .copyright { font-size: 2vw; font-family: sans-serif; color: #717071; }