@charset "UTF-8";
/* CSS Document */


/*-----------
top
-----------*/

#main_visual {
  position: relative;
  background: url(../img/mv_bg_purple.jpg) center 0 repeat-y;
  background-size: auto 33.33%;
  overflow: hidden;
}

#main_visual_inner {
  position: relative;
  margin: 0 auto;
}

#main_visual_inner .logo_dirtgrade {
  position: absolute;
  top: 0;
  left: 0.8%;
  padding-top: 2.6%;
  width: 8.52%;
  z-index: 10;
}

#main_visual_inner .logo_dirtgrade img {
  width: 100%;
}

#main_visual .bg_marche {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 78.33%;
  transform: translateX(-50%);
}

#main_visual .bg_obi {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 21.67%;
  transform-origin: left;
  overflow: hidden;
  background: url(../img/mv_bg_gold.jpg) center 0 no-repeat;
  background-size: auto 100%;
}

#main_visual .white {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.4;
}

#main_visual .title {
  position: absolute;
  top: 1.16%;
  left: 7.5%;
  width: 75.71%;
}

#main_visual img {
  position: absolute;
}

#main_visual .title img {
  top: 0;
}

#main_visual .title .t_01 {
  left: 0;
  margin-top: 0.5%;
  width: 29.37%;
}
#main_visual .title .t_02 {
  left: 26.1%;
  width: 26.1%;
}
#main_visual .title .t_03 {
  left: 49.87%;
  margin-top: 12.96%;
  width: 8.68%;
}
#main_visual .title .t_04 {
  left: 57.1%;
  margin-top: 15.35%;
  width: 22.39%;
}
#main_visual .title .t_05 {
  left: 77.42%;
  margin-top: 26.67%;
  width: 7.36%;
}
#main_visual .title .t_06 {
  left: 85.53%;
  margin-top: 26.42%;
  width: 4.65%;
}
#main_visual .title .t_07 {
  left: 90.5%;
  margin-top: 26.29%;
  width: 9.3%;
}

#main_visual .txt_win {
  top: 0;
  left: 13.24%;
  margin-top: 22.53%;
  width: 34.86%;
}

#main_visual .txt_small {
  top: 0;
  left: 48.95%;
  margin-top: 4.9%;
  width: 36.67%;
}

#main_visual .txt_01 {
  top: 0;
  left: 15.81%;
  margin-top: 30.62%;
  width: 29.81%;
}

#main_visual .marche {
  top: 0;
  left: 14.5%;
  margin-top: 29.38%;
  width: 76%;
}

#main_visual .obi {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 15.48%;
}

#main_visual .obi .obi_txt_01 {
  top: 0;
  left: 13.62%;
  margin-top: 1.33%;
  width: 27.67%;
}

#main_visual .obi .obi_marche_en {
  position: absolute;
  display: block;
  top: 0;
  left: 10.71%;
  margin-top: 7.33%;
  width: 78.71%;
}

#main_visual .obi .obi_marche_en img {
  width: 100%;
}

#main_visual .obi .obi_marche_jp {
  position: absolute;
  top: 0;
  left: 12.14%;
  margin-top: 5.9%;
  width: 42.43%;
}

#main_visual .obi .obi_marche_jp .mask {
  width: 100%;
  overflow: hidden;
}

#main_visual .obi .obi_marche_jp img {
  position: static;
  width: 100%;
}

#main_visual .icon_scroll {
  position: absolute;
  bottom: 0;
  right: 10.9%;
  margin-bottom: 1%;
  width: 48px;
}

#main_visual .icon_scroll img {
  position: absolute;
  bottom: 0;
  width: 100%;
}


/*-----------
parts
-----------*/

.anm {
  transition: all 0.6s 0.4s;
  backface-visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
}

.anm.visible {
  opacity: 1;
  transform: translateY(0px);
}

.h_large {
  position: relative;
  display: table;
  margin: 0 auto;
}

.h_large .anm_txt {
  transition: all 0.8s;
  backface-visibility: hidden;
  opacity: 0;
  transform: scale(2.2);
}

.visible .h_large .anm_txt {
  opacity: 1;
  transform: scale(1);
}

.h_large .anm_frame {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.6s 0.5s;
  backface-visibility: hidden;
  opacity: 0;
  transform: translateY(6px) scaleX(0.9);
  transform-origin: bottom;
}

.visible .h_large .anm_frame {
  opacity: 1;
  transform: translateY(0px) scaleX(1);
}

.anm_cnt {
  transition: all 0.6s 1.1s;
  backface-visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
}

.visible .anm_cnt {
  opacity: 1;
  transform: translateY(0px);
}


/*----top_nav----*/

#top_nav{
  width: 100%;
  margin: 0;
  background: url("../img/top_nav_pc_bg.png") center top repeat-y;
  background-size: 3000px auto;
}

#top_nav ul{
  width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0 6px;
}

#top_nav li{
  width: 324px;
  margin:0 14px 14px 0;
  position: relative;
}

#top_nav li a {
  display: block;
  background: url(../img/top_nav_pc_bg_on.png) left 0 no-repeat;
  background-size: 200%;
  transition: background-position 0.8s cubic-bezier(0.33, 1, 0.68, 1);
  backface-visibility: hidden;
}

#top_nav li a:hover {
  background-position: right 0;
  opacity: 1;
}

#top_nav li a img {
  transition: opacity 0.2s;
  backface-visibility: hidden;
}

#top_nav li a:hover img {
  opacity: 0.6;
}

#top_nav li .nolink {
  background: url(../img/top_nav_pc_bg_off.png) 0 0 no-repeat;
  background-size: 100%;
}

#top_nav li img{
  width: 100%;
}

#top_nav li:nth-child(3n){
  margin:0 0 14px 0;
}

#top_nav li .nav_comingsoon{
  position: absolute;
  width: 88px;
  height: auto;
  right: -7px;
  top: -6px;
}