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 {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background: #dcdee4;
}

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

  body:before {
    content: "";
    display: inline-block;
    width: 100vw;
    height: 100vh;
    background: url('/images/gn_pc_bg.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
    position: fixed;
    opacity: 1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    z-index: -1;
  }

}

.gn_wrapper img {
  width: 100%;
}

.gn_wrapper video {
  width: 100%;
}

.gn_wrapper {
  background: #dcdee4;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
  display: block;
}

@media only screen and (max-width: 500px) {
  .gn_wrapper {
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    background: #dcdee4;
  }
}

.gn_head {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.gn_head_movie {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.gn_wrapper .lp01:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 177%;
  overflow: hidden;
  position: relative;
}



.gn_middle {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.gn_wrapper .lp02:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 658.8%;
  overflow: hidden;
  position: relative;
}

.gn_middle_bg {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  z-index: 3;
}

.gn_middle_logo {
  position: absolute;
  left: 24.6%;
  top: 12.46%;
  width: 50.8%;
  z-index: 4;
}

.gn_middle_logotext {
  position: absolute;
  left: 12.8%;
  top: 16.55%;
  width: 73.6%;
  z-index: 5;
}

.gn_middle_text {
  position: absolute;
  left: 8.6%;
  top: 19.4%;
  width: 82.6%;
  z-index: 6;
}









.gn_point_container {
  width: 100%;
}

.gn_point_tab1_btn1:not(.active),
.gn_point_tab1_btn2:not(.active),
.gn_point_tab1_btn3:not(.active),
.gn_point_tab2_btn1:not(.active),
.gn_point_tab2_btn2:not(.active),
.gn_point_tab2_btn3:not(.active),
.gn_point_tab3_btn1:not(.active),
.gn_point_tab3_btn2:not(.active),
.gn_point_tab3_btn3:not(.active) {
  opacity: 1;
}

.active {
  opacity: 1;
}

.gn_point_tab1,
.gn_point_tab2,
.gn_point_tab3 {
  display: none;
  width: 100%;
}

.gn_point_tab1_btn,
.gn_point_tab2_btn,
.gn_point_tab3_btn {
  display: none;
}

.gn_point_tab1,
.gn_point_tab1_btn {
  display: block;
}

.gn_point_container img {
  max-width: 100%;
  height: auto;
}

.gn_point_tab1_btn1,
.gn_point_tab1_btn2,
.gn_point_tab1_btn3,
.gn_point_tab2_btn1,
.gn_point_tab2_btn2,
.gn_point_tab2_btn3,
.gn_point_tab3_btn1,
.gn_point_tab3_btn2,
.gn_point_tab3_btn3 {
  cursor: pointer;
  transition: opacity 0.3s;
}

.gn_point_tab1_btn1 {
  position: absolute;
  left: 0%;
  top: 29.25%;
  width: 100%;
  z-index: 7;
}

.gn_point_tab1_btn2 {
  position: absolute;
  left: 33.7%;
  top: 29.66%;
  width: 33%;
  z-index: 8;
}

.gn_point_tab1_btn3 {
  position: absolute;
  left: 66.7%;
  top: 29.66%;
  width: 33.3%;
  z-index: 9;
}

.gn_point_tab1_bg {
  position: absolute;
  left: 0%;
  top: 42.56%;
  width: 100%;
  z-index: 10;
}

.gn_point_tab1_video {
  position: absolute;
  left: 26.6%;
  top: 32.23%;
  width: 46.9%;
  z-index: 11;
}

.gn_point_tab1_textbubble {
  position: absolute;
  left: 28.4%;
  top: 40.36%;
  width: 26.5%;
  z-index: 12;
}

.gn_point_tab1_text {
  position: absolute;
  left: 13.1%;
  top: 39.65%;
  width: 73.9%;
  z-index: 13;
}

.gn_point_tab1_subtext {
  position: absolute;
  left: 13.1%;
  top: 44.17%;
  width: 73.7%;
  z-index: 14;
}

.gn_point_tab1_comptext {
  position: absolute;
  left: 9.8%;
  top: 46.14%;
  width: 80.5%;
  z-index: 15;
}

.gn_point_tab1_wear {
  position: absolute;
  left: 9.9%;
  top: 48.29%;
  width: 80.4%;
  z-index: 16;
}

.gn_point_tab1_trans {
  position: absolute;
  left: 9.9%;
  top: 53.16%;
  width: 76.8%;
  z-index: 17;
}

.gn_point_tab1_transtext {
  position: absolute;
  left: 9.9%;
  top: 55.65%;
  width: 80.1%;
  z-index: 18;
}

.gn_point_tab2_btn1 {
  position: absolute;
  left: 0.1%;
  top: 29.66%;
  width: 33%;
  z-index: 19;
}

.gn_point_tab2_btn2 {
  position: absolute;
  left: 0.1%;
  top: 29.25%;
  width: 99.9%;
  z-index: 20;
  pointer-events: none;
}

.gn_point_tab2_btn3 {
  position: absolute;
  left: 67.1%;
  top: 29.66%;
  width: 32.9%;
  z-index: 21;
}

.gn_point_tab2_maintext {
  position: absolute;
  left: 9.8%;
  top: 32.17%;
  width: 80.5%;
  z-index: 22;
}

.gn_point_tab2_lens {
  position: absolute;
  left: 19.3%;
  top: 34.33%;
  width: 62.3%;
  z-index: 23;
}

.gn_point_tab2_sb1 {
  position: absolute;
  left: 9.3%;
  top: 41.26%;
  width: 39.8%;
  z-index: 24;
}

.gn_point_tab2_sb2 {
  position: absolute;
  left: 50.9%;
  top: 41.41%;
  width: 40.1%;
  z-index: 25;
}

.gn_point_tab2_midtext {
  position: absolute;
  left: 14.3%;
  top: 46.66%;
  width: 71.6%;
  z-index: 26;
}

.gn_point_tab2_illust {
  position: absolute;
  left: 8%;
  top: 49.12%;
  width: 84.2%;
  z-index: 27;
}

.gn_point_tab3_btn1 {
  position: absolute;
  left: 0.1%;
  top: 29.66%;
  width: 33.3%;
  z-index: 28;
}

.gn_point_tab3_btn2 {
  position: absolute;
  left: 33.4%;
  top: 29.66%;
  width: 33%;
  z-index: 29;
}

.gn_point_tab3_btn3 {
  position: absolute;
  left: 0.1%;
  top: 29.25%;
  width: 100%;
  z-index: 30;
  pointer-events: none;
}

.gn_point_tab3_text {
  position: absolute;
  left: 10.4%;
  top: 32.67%;
  width: 79.6%;
  z-index: 31;
}

.gn_point_tab3_illust {
  position: absolute;
  left: 8.1%;
  top: 36.95%;
  width: 84.1%;
  z-index: 32;
}

.gn_point_tab3_lens {
  position: absolute;
  left: 8.3%;
  top: 51.52%;
  width: 83.8%;
  z-index: 33;
}

.gn_model_text1 {
  position: absolute;
  left: 0%;
  top: 62.58%;
  width: 59.3%;
  z-index: 34;
}

.gn_model_img1 {
  position: absolute;
  left: 53.9%;
  top: 61.34%;
  width: 42%;
  z-index: 35;
}

.gn_model_img2 {
  position: absolute;
  left: 4.3%;
  top: 65.71%;
  width: 46.7%;
  z-index: 36;
}

.gn_model_text2 {
  position: absolute;
  left: 53.3%;
  top: 70.52%;
  width: 42.6%;
  z-index: 37;
}

.gn_model_prf {
  position: absolute;
  left: 4.4%;
  top: 73.31%;
  width: 44.7%;
  z-index: 38;
}

.gn_model_insta {
  position: absolute;
  left: 4%;
  top: 78.76%;
  width: 14.5%;
  z-index: 39;
}

.gn_model_official {
  position: absolute;
  left: 20.2%;
  top: 78.76%;
  width: 14.5%;
  z-index: 40;
}

.gn_model_hp {
  position: absolute;
  left: 35.7%;
  top: 79.31%;
  width: 16.3%;
  z-index: 41;
}

.gn_model_img3 {
  position: absolute;
  left: 55.5%;
  top: 73.3%;
  width: 40.3%;
  z-index: 42;
}

.gn_lineup_title {
  position: absolute;
  left: 4.9%;
  top: 82%;
  width: 90.3%;
  z-index: 43;
}

.gn_lineup_wear1 {
  position: absolute;
  left: 4%;
  top: 86.42%;
  width: 92.3%;
  z-index: 44;
}

.gn_lineup_wear2 {
  position: absolute;
  left: 3.8%;
  top: 90.1%;
  width: 92.4%;
  z-index: 45;
}

.gn_lineup_wear3 {
  position: absolute;
  left: 4%;
  top: 95.29%;
  width: 92.3%;
  z-index: 46;
}




.gn_jpt {
  position: relative;
  overflow: hidden;
  background: #f2e9e0;
}

.gn_wrapper .lp03:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 515.8%;
  overflow: hidden;
  position: relative;
}

.gn_jpt_main {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  z-index: 4;
}

.gn_jpt_main_focus {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  z-index: 3;
  filter: blur(12px);
}

.gn_jpt_lens {
  position: absolute;
  left: 35.6%;
  top: 20.67%;
  width: 28.9%;
  z-index: 5;
}

.gn_jpt_title {
  position: absolute;
  left: 15.9%;
  top: 26.64%;
  width: 68.2%;
  z-index: 6;
}

.gn_jpt_spec {
  position: absolute;
  left: 10.2%;
  top: 29.84%;
  width: 79.6%;
  z-index: 7;
}

.gn_jpt_01wear {
  position: absolute;
  left: 4.5%;
  top: 35.63%;
  width: 44.4%;
  z-index: 8;
}

.gn_jpt_02wear {
  position: absolute;
  left: 51.1%;
  top: 35.63%;
  width: 44.4%;
  z-index: 9;
}

.gn_jpt_midimg {
  position: absolute;
  left: 0%;
  top: 54.67%;
  width: 100%;
  z-index: 10;
}

.gn_jpt_imgtext {
  position: absolute;
  left: 87.7%;
  top: 56.48%;
  width: 12.4%;
  z-index: 11;
}

.gn_jpt_text {
  position: absolute;
  left: 16.7%;
  top: 70.1%;
  width: 66.4%;
  z-index: 12;
}

.gn_jpt_lensdet {
  position: absolute;
  left: 4.9%;
  top: 75.18%;
  width: 42.4%;
  z-index: 13;
}

.gn_jpt_lenszoom {
  position: absolute;
  left: 27.1%;
  top: 73.67%;
  width: 32.8%;
  z-index: 14;
}

.gn_jpt_graph {
  position: absolute;
  left: 52.8%;
  top: 76.54%;
  width: 42.2%;
  z-index: 15;
}

.gn_jpt_cgraph {
  position: absolute;
  left: 64.7%;
  top: 77.01%;
  width: 25.9%;
  z-index: 16;
}

.gn_jpt_footimg {
  position: absolute;
  left: 26.5%;
  top: 84.96%;
  width: 47%;
  z-index: 17;
}

.gn_jpt_btn {
  position: absolute;
  left: 13.8%;
  top: 95.48%;
  width: 72.4%;
  z-index: 18;
}



.gn_vns {
  position: relative;
  overflow: hidden;
  background: #f4f0e7;
}

.gn_wrapper .lp04:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 521.8%;
  overflow: hidden;
  position: relative;
}

.gn_vns_main {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  z-index: 4;
}

.gn_vns_main_focus {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  z-index: 3;
  filter: blur(12px);
}

.gn_vns_lens {
  position: absolute;
  left: 27.5%;
  top: 19.37%;
  width: 35%;
  z-index: 5;
}

.gn_vns_title {
  position: absolute;
  left: 14.8%;
  top: 25.64%;
  width: 69.6%;
  z-index: 6;
}

.gn_vns_spec {
  position: absolute;
  left: 4.6%;
  top: 29.1%;
  width: 90.3%;
  z-index: 7;
}

.gn_vns_01wear {
  position: absolute;
  left: 4.1%;
  top: 35.69%;
  width: 44.4%;
  z-index: 8;
}

.gn_vns_02wear {
  position: absolute;
  left: 50.7%;
  top: 35.69%;
  width: 44.4%;
  z-index: 9;
}

.gn_vns_midimg {
  position: absolute;
  left: 0%;
  top: 54.73%;
  width: 100%;
  z-index: 10;
}

.gn_vns_imgtext {
  position: absolute;
  left: 87.3%;
  top: 56.34%;
  width: 12.4%;
  z-index: 11;
}

.gn_vns_text {
  position: absolute;
  left: 9.8%;
  top: 70.16%;
  width: 79.3%;
  z-index: 12;
}

.gn_vns_lensdet {
  position: absolute;
  left: 4.5%;
  top: 75.24%;
  width: 42.4%;
  z-index: 13;
}

.gn_vns_lenszoom {
  position: absolute;
  left: 26.7%;
  top: 73.71%;
  width: 32.8%;
  z-index: 14;
}

.gn_vns_graph {
  position: absolute;
  left: 52.4%;
  top: 76.58%;
  width: 42.2%;
  z-index: 15;
}

.gn_vns_cgraph {
  position: absolute;
  left: 61.2%;
  top: 78.32%;
  width: 23.1%;
  z-index: 16;
}

.gn_vns_footimg {
  position: absolute;
  left: 26.1%;
  top: 85.01%;
  width: 47%;
  z-index: 17;
}

.gn_vns_btn {
  position: absolute;
  left: 3.5%;
  top: 95.54%;
  width: 45.5%;
  z-index: 18;
}

.gn_vns_btn2 {
  position: absolute;
  left: 50%;
  top: 95.54%;
  width: 45.5%;
  z-index: 18;
}

.gn_vns_astexp {
  position: absolute;
  left: 3.5%;
  top: 98.2%;
  width: 91.9%;
  z-index: 19;
}




.gn_mrc {
  position: relative;
  overflow: hidden;
  background: #e7e5e2;
}

.gn_wrapper .lp05:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 515.8%;
  overflow: hidden;
  position: relative;
}

.gn_mrc_main {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  z-index: 4;
}

.gn_mrc_main_focus {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  z-index: 3;
  filter: blur(12px);
}

.gn_mrc_lens {
  position: absolute;
  left: 35.6%;
  top: 20.69%;
  width: 29.1%;
  z-index: 5;
}

.gn_mrc_title {
  position: absolute;
  left: 9.7%;
  top: 26.62%;
  width: 80.7%;
  z-index: 5;
}

.gn_mrc_spec {
  position: absolute;
  left: 10.2%;
  top: 29.84%;
  width: 79.6%;
  z-index: 6;
}

.gn_mrc_01wear {
  position: absolute;
  left: 4.5%;
  top: 35.65%;
  width: 44.4%;
  z-index: 7;
}

.gn_mrc_02wear {
  position: absolute;
  left: 51.1%;
  top: 35.65%;
  width: 44.4%;
  z-index: 8;
}

.gn_mrc_midimg {
  position: absolute;
  left: 0%;
  top: 54.69%;
  width: 100%;
  z-index: 9;
}

.gn_mrc_imgtext {
  position: absolute;
  left: 87.7%;
  top: 55.51%;
  width: 12.5%;
  z-index: 10;
}

.gn_mrc_text {
  position: absolute;
  left: 16.2%;
  top: 70.1%;
  width: 67.3%;
  z-index: 11;
}

.gn_mrc_lensdet {
  position: absolute;
  left: 4.9%;
  top: 75.18%;
  width: 42.4%;
  z-index: 12;
}

.gn_mrc_lenszoom {
  position: absolute;
  left: 27.2%;
  top: 73.67%;
  width: 32.7%;
  z-index: 13;
}

.gn_mrc_graph {
  position: absolute;
  left: 52.8%;
  top: 76.54%;
  width: 42.2%;
  z-index: 14;
}

.gn_mrc_cgraph {
  position: absolute;
  left: 58.5%;
  top: 78.29%;
  width: 26.2%;
  z-index: 15;
}

.gn_mrc_footimg {
  position: absolute;
  left: 26.5%;
  top: 84.96%;
  width: 47%;
  z-index: 16;
}

.gn_mrc_btn {
  position: absolute;
  left: 13.8%;
  top: 95.5%;
  width: 72.4%;
  z-index: 17;
}





section.gn_footer {
  margin: 0 auto;
  padding-top: 25px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.12em;
}

.gn_footer_title {
  padding: 5px;
}

.gn_footer_contents {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
}

.gn_footer_contents>a {
  font-size: 12px;
  padding: 15px 0 10px;
  color: #000;
  text-decoration: none;
  width: 70%;
  border-bottom: 1px solid #9d9d9d;
}

.gn_footer_sns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  width: 60%;
  justify-content: center;
  margin: 0 auto;
  padding: 20px;
}

.gn_footer_text {
  font-size: 10px;
  text-align: left;
  width: 85%;
  margin: 0 auto;
}

.gn_footer_text>a {
  color: #000;
  font-size: 12px;
  font-weight: 600;
}

.gn_footer_copyright {
  width: 100%;
  height: auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-align: center;
  padding-top: 20px;
}








/* -----------------------------
--------------------------------
--------------------------------
--------------------------------
アニメーションスタイル
--------------------------------
--------------------------------
--------------------------------
----------------------------- */


.lp_trigger {
  opacity: 0;
  margin: 0;
  padding: 0;
}

.gn_point_tab1_text .animate {
  -webkit-animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


.gn_jpt_lens .animate {
  -webkit-animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.gn_vns_lens .animate {
  -webkit-animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.gn_mrc_lens .animate {
  -webkit-animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-fwd {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fade-in-fwd {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}



.gn_middle_logo .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.gn_middle_logotext .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.gn_point_tab2_lens .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.gn_point_tab3_illust .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


.gn_jpt_main .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.gn_vns_main .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.gn_mrc_main .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


.gn_point_tab1_textbubble .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both, bounce-top 2.5s infinite both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both, bounce-top 2.5s infinite both;
}


.gn_jpt_btn .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both, bounce-top 2.5s infinite both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both, bounce-top 2.5s infinite both;
}

.gn_vns_btn .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both, bounce-top 2.5s infinite both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both, bounce-top 2.5s infinite both;
}

.gn_vns_btn2 .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both, bounce-top 2.5s infinite both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both, bounce-top 2.5s infinite both;
}

.gn_mrc_btn .animate {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both, bounce-top 2.5s infinite both;
  animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both, bounce-top 2.5s infinite both;
}


@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}


.gn_point_tab2_sb1 .animate {
  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.gn_point_tab2_sb2 .animate {
  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
  animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}


.gn_model_prf .animate {
  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
  animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}

.gn_model_img3 .animate {
  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
  animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}



.gn_jpt_title .animate {
  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
  animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}

.gn_vns_title .animate {
  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
  animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}

.gn_mrc_title .animate {
  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
  animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}



.gn_jpt_lenszoom .animate {
  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.gn_vns_lenszoom .animate {
  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.gn_mrc_lenszoom .animate {
  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}




.gn_model_text1 .animate {
  -webkit-animation: scale-in-hor-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-hor-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.gn_model_text2 .animate {
  -webkit-animation: scale-in-hor-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-hor-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-hor-left {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    opacity: 1;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }
}

@keyframes scale-in-hor-left {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    opacity: 1;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }
}



.gn_jpt_imgtext .animate {
  -webkit-animation: scale-in-ver-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-ver-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.gn_vns_imgtext .animate {
  -webkit-animation: scale-in-ver-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-ver-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.gn_mrc_imgtext .animate {
  -webkit-animation: scale-in-ver-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-ver-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-ver-top {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    opacity: 1;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }
}

@keyframes scale-in-ver-top {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    opacity: 1;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
  }
}



.gn_jpt_cgraph .animate {
  -webkit-animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.gn_vns_cgraph .animate {
  -webkit-animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.gn_mrc_cgraph .animate {
  -webkit-animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}








/* -----------------------------
--------------------------------
--------------------------------
--------------------------------
リストスタイル
--------------------------------
--------------------------------
--------------------------------
----------------------------- */



.gn_container_title {
  margin: 0 auto;
  padding-top: 25px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.12em;
}


.gn_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 100%;
  width: 95%;
  margin: 20px auto;
  font-family: 'Noto Sans JP', sans-serif;
}

.gn_container>a {
  text-decoration: none;
  color: #000;
}

.gn_product-card {
  background-color: white;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gn_product-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  background-color: #f0f0f0;
}

.gn_brand-logo {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.gn_spec-chart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40%;
  height: 40%;
}

.gn_product-info {
  padding: 10px;
}

.gn_product-name {
  font-size: 13px;
  margin-bottom: 5px;
}

.gn_product-name-jp {
  font-weight: bold;
}

.gn_product-name-en {
  color: #4a4c51;
  font-weight: bold;
}

.gn_specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin-top: 5px;
}

.gn_spec-item {
  font-size: 11px;
  padding: 3px 5px;
  background-color: #ffe0e0;
  border-radius: 3px;
  text-align: center;
  /* border: 1px solid #000; */
  box-sizing: border-box;
}

.gn_promo-tags {
  display: flex;
  margin-top: 5px;
  gap: 5px;
}

.gn_promo-tag {
  padding: 2px 5px;
  font-size: 10px;
  border-radius: 3px;
  font-weight: bold;
  color: #ffffff;
  background: #000000;
}

.gn_price {
  margin-top: 10px;
  font-weight: bold;
  font-size: 16px;
  text-align: right;
}

.gn_color-label {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  color: white;
  border-radius: 3px;
}

.gn_color-hazel {
  background-color: #996633;
}

.gn_color-brown {
  background-color: #663300;
}

.gn_color-mercury {
  background-color: #666666;
}

.gn_duration {
  display: inline-block;
  padding: 2px 6px;
  font-size: 12px;
  background-color: #e0e0e0;
  border-radius: 3px;
}




/* -----------------------------
    モーダル
    ----------------------------- */

.gn_modal_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}

.gn_modal_overlay.is-open {
  visibility: visible;
}

.gn_modal_inner {
  position: relative;
  width: 85%;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  overflow: visible;
}

.gn_modal_inner img {
  width: 100%;
  display: block;
  border-radius: 8px;
}

.gn_modal_close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #555;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1;
}

.gn_modal_close svg {
  width: 16px;
  height: 16px;
  display: block;
}

.gn_vns_astexp {
  cursor: pointer;
}