@charset "utf-8";
/* ------------------------------------------------------------ common */
.parallax { 
	position: relative;
}
.contents { 
	padding: 100px 0 0; 
	position: relative;
	z-index: 100;
	height:100%;
	background: #fff; 
}

.img-wrap {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 740px; 
  top: 0;
}

.cover1,
.cover2,
.cover3,
.cover4,
.cover5,
.cover6, 
.cover7,
.cover8,
.cover9, 
.cover10 {
  animation: cover 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #D4D7D7;
  height: 10%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

.cover1 {
  top: 0;
}

.cover2 {
  animation-delay: .2s;
  top: 10%;
}

.cover3 {
  animation-delay: .3s;
  top: 20%;
}
.cover4 {
  animation-delay: .4s;
  top: 30%;
}

.cover5 {
  animation-delay: .8s;
  top: 40%;
}

.cover6 {
  animation-delay: .9s;
  top: 50%;
}
.cover7 {
  animation-delay: 1s;
  top: 60%;
}

.cover8 {
  animation-delay: 1.4s;
  top: 70%;
}

.cover9 {
  animation-delay: 1.5s;
  top: 80%;
}
.cover10 {
  animation-delay: 1.6s;
  top: 90%;
}

@keyframes cover {
  100% {
    transform: translateX(100%);
  }
}

header { position: relative; z-index: 1; }
header nav ul li:nth-child(1) a { border-bottom: solid 2px #000; }
/* ------------------------------------------------------------ fv */
#firstview { text-align: center; background: #D4D7D7; height: 740px; overflow: hidden; position: relative; }
/* ------------------------------------------------------------ sub_nav1 */
.sub_nav1 ul li { float: left; width: 340px; border: solid 1px #A6A6A6; background: #fff; padding: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0 0 0 30px; }
.sub_nav1 ul li:nth-child(3n+1) { clear: both; margin: 0; }
.sub_nav1 ul li a { display: table; }
.sub_nav1 ul li img { display: table-cell; width: 110px; padding: 0 24px 0 0; } 
.sub_nav1 ul li h3 { display: table-cell; width: 196px; vertical-align: middle; text-align: left; font-size: 12px; line-height: 18px; }
.sub_nav1 ul li h3 span { font-size: 20px; font-family: 'Montserrat', sans-serif; font-style: italic; line-height: 22px; display: block; padding: 0 0 4px; }
/* ------------------------------------------------------------ sub_nav2 */
.sub_nav2 { text-align: center; padding: 30px 0 65px; }
.sub_nav2 ul { display: inline-block; *display: inline; *zoom: 1; }
.sub_nav2 ul li { float: left; font-size: 14px; line-height: 22px; padding: 0 22px 0 0; }
/* ------------------------------------------------------------ news */
.news { padding: 0 0 145px; }
.news h3 { float: left; width: 160px; font-size: 12px; line-height: 22px; }
.news h3 span { font-size: 34px; font-family: 'Montserrat', sans-serif; font-style: italic; line-height: 34px; display: block; letter-spacing: 2px; }
.news dl { float: right; width: 920px; border-bottom: 1px solid #808080; }
.news dl:first-of-type { border-top: 1px solid #808080;}
.news dl dt { font-size: 14px; line-height: 22px; float: left; width: 172px; padding: 20px 40px 20px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.news dl dd { font-size: 16px; line-height: 22px; padding: 20px 30px 20px 142px; }
/* ------------------------------------------------------------ online_shop_ranking */
.online_shop_ranking { padding: 0 0 200px; }
.online_shop_ranking h3 { font-size: 22px; line-height: 30px; font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 500; background: url(../images/common/crown.svg) no-repeat center top; background-size: 45px auto; text-align: center; padding: 45px 0 40px; }
.online_shop_ranking ul { padding: 0 0 115px; }
.online_shop_ranking ul li { float: left; width: 200px; padding: 0 0 0 20px; }
.online_shop_ranking ul li:first-child { padding: 0; }
.online_shop_ranking ul li:nth-child(n+6) { display: none; } 
.online_shop_ranking ul li a:hover p { color: #ebefef; }
.online_shop_ranking ul li p { font-size: 14px; line-height: 24px; text-align: center; }
.online_shop_ranking ul li .target { padding: 20px 0 0; }
.online_shop_ranking .btn { display: block; width: 460px; font-size: 18px; line-height: 30px; text-align: center; border: solid 1px #000; margin: 0 auto; padding: 28px 0; }
.online_shop_ranking .btn:hover { background: #000; color: #fff; }
/* ------------------------------------------------------------ about_us */
.about_us { display: flex; align-items: top; justify-content: space-between; padding: 0 9% 0 0; position: relative; }
.about_us .img { width: 40%; min-width: 600px; padding: 0 4% 0 0; }
.about_us .img img { width: 100%; height: auto; }
.about_us .textbox { min-width: 560px; max-width: 46%; }
.about_us .textbox h3 { font-size: 26px; line-height: 100%; font-family: 'Montserrat', sans-serif; font-style: italic; padding: 0 0 40px; letter-spacing: 3px; }
.about_us .textbox p { line-height: 35px; }
.about_us .textbox p strong { display: block; font-size: 26px; line-height: 42px; padding: 16px 0; }
.about_us .textbox::before { position: absolute; content: ""; width: 1000px; height: 700px; background: url(../images/index/arrow_01.png) no-repeat right center; z-index: -1; top: -50px; right: 0; }
/* ------------------------------------------------------------ online_shop */
.online_shop { display: flex; align-items: top; justify-content: space-between; margin: 280px auto 260px; padding: 0 0 0 9%; position: relative; }
.online_shop img { width: 40%; height: auto; min-width: 600px; padding: 0 0 0 5%; }
.online_shop .textbox { min-width: 540px; max-width: 46%; }
.online_shop .textbox h3 { font-size: 26px; line-height: 100%; font-family: 'Montserrat', sans-serif; font-style: italic; padding: 0 0 40px; letter-spacing: 3px; }
.online_shop .textbox p { line-height: 35px; }
.online_shop .textbox p strong { display: block; font-size: 26px; line-height: 42px; padding: 16px 0; }
.online_shop .textbox::before { position: absolute; content: ""; width: 1000px; height: 700px; background: url(../images/index/arrow_02.png) no-repeat left center; z-index: -1; top: -200px; left: 0; }
/* ------------------------------------------------------------ emulab_sns */
.emulab_sns { background: url(../images/index/sns_bg.png) no-repeat center center; text-align: center; padding: 23px 0; margin: 0 auto 165px; }
.emulab_sns h3 { line-height: 32px; }
.emulab_sns h3 span { display: block; font-size: 30px; line-height: 30px; font-family: 'Montserrat', sans-serif; font-style: italic; padding: 0 0 5px; }
.emulab_sns ul { display: inline-block; *display: inline; *zoom: 1; padding: 45px 0 0; }
.emulab_sns ul li { float: left; width: 50px; }
.emulab_sns ul li:first-child { margin: 0 50px 0 0; }
.emulab_sns p { line-height: 30px; font-weight: bold; }
.emulab_sns p span { color: #009DD9; font-weight: bold; }
/* ------------------------------------------------------------ studio_emu_group */
.studio_emu_group { background: #D4D7D7; padding: 0 0 100px; }
.studio_emu_group h3 { font-size: 32px; line-height: 36px; text-align: center; padding: 140px 0 55px; }
.studio_emu_group h3 span { display: block; font-size: 18px; line-height: 30px; font-family: 'Montserrat', sans-serif; font-style: italic; }
.studio_emu_group p { line-height: 32px; text-align: center; letter-spacing: normal; }
.studio_emu_group .nav { padding: 95px 0 0; }
.studio_emu_group .nav .box { float: left; width: 340px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0 0 10px 30px; }
.studio_emu_group .nav .box:nth-child(3n+1) { clear: both; margin: 0; }
.studio_emu_group .nav .box p { font-size: 11px; text-align: right; line-height: 20px; }
.studio_emu_group .nav .box a { display: table; background: #fff; padding: 4px; }
.studio_emu_group .nav .box a img { display: table-cell; width: 110px; padding: 0 24px 0 0; }
.studio_emu_group .nav .box a h4 { display: table-cell; width: 196px; vertical-align: middle; font-size: 12px; line-height: 18px; text-align: left; letter-spacing: normal; }
.studio_emu_group .nav .box a:hover h4 { opacity: 0.5; }
.studio_emu_group .nav .box a h4 span { display: block; font-size: 20px; line-height: 22px; font-family: 'Montserrat', sans-serif; font-style: italic; padding: 0 0 4px; letter-spacing: 1px;}

.studio_emu_group .btn { display: block; width: 560px; margin: 110px auto 0; background: url(../images/common/arrow_02.gif) no-repeat 530px center #fff; font-size: 14px; line-height: 20px; text-align: left; padding: 40px 0 35px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.studio_emu_group .btn span { display: block; font-size: 20px; line-height: 30px; }
.studio_emu_group .btn small { display: block; font-size: 12px; line-height: 22px; }






/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){

/* ------------------------------------------------------------ common */
header nav ul li:nth-child(1) a { border-bottom: solid 2px #000; }
.img-wrap {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
.img-wrap img {
  width: 100%;
  height: 100vh;
}
.contents { 
	padding: 40px 0 0; 
}

/* ------------------------------------------------------------ fv */
#firstview { text-align: center; background: #D4D7D7; height: 100vh; overflow: hidden; position: relative; background-attachment: fixed; margin: 0 auto; }
/* ------------------------------------------------------------ sub_nav1 */
.sub_nav1 ul li { float: none; width: 100%; margin: 0 auto 10px; }
.sub_nav1 ul li:nth-child(3n+1) { clear: both; margin: 0 auto 10px; }
.sub_nav1 ul li a {}
.sub_nav1 ul li img { width: 100%; height: auto; padding: 0 24px 0 0; } 
.sub_nav1 ul li h3 { width: 75%; font-size: 10px; line-height: 14px; padding: 0 0 0 15px; background: url(../images/common/arrow_02.gif) no-repeat 94% center; letter-spacing: 1px; }
.sub_nav1 ul li h3 span { font-size: 18px; line-height: 18px; padding: 0 0 4px; }
/* ------------------------------------------------------------ sub_nav2 */
.sub_nav2 { text-align: left; padding: 20px 0 25px; }
.sub_nav2 ul { width: 90%; margin: 0 auto; display: block; }
.sub_nav2 ul li { float: none; font-size: 14px; line-height: 22px; padding: 0 0 10px; }

/* ------------------------------------------------------------ news */
.news { padding: 0 0 70px; }
.news h3 { width: 30%; font-size: 10px; line-height: 14px; }
.news h3 span { font-size: 22px; line-height: 30px; letter-spacing: 2px; }
.news dl { width: 70%; background: url(../images/common/arrow_04.gif) no-repeat right center; }
.news dl dt { font-size: 10px; line-height: 14px; float: none; width: 100%; padding: 12px 0 0; }
.news dl dd { font-size: 10px; line-height: 14px; padding: 4px 20px 12px 0; }
/* ------------------------------------------------------------ online_shop_ranking */
.online_shop_ranking { padding: 0 0 130px; }
.online_shop_ranking h3 { font-size: 16px; line-height: 21px; background: url(../images/common/crown.svg) no-repeat center top; background-size: 35px auto; padding: 40px 0 25px; }

.online_shop_ranking ul { padding: 0 0 20px; }
.online_shop_ranking ul li { width: 48%; padding: 0 0 30px 4%; }
.online_shop_ranking ul li:nth-child(2n+1) { clear: both; padding: 0; }
.online_shop_ranking ul li:nth-child(6) { display: block; } 
.online_shop_ranking ul li img { width: 100%; height: auto; }
.online_shop_ranking ul li p { font-size: 10px; line-height: 15px; }
.online_shop_ranking ul li .target { padding: 12px 0 0; }
.online_shop_ranking .btn { width: 240px; font-size: 14px; padding: 10px 0; }
/* ------------------------------------------------------------ about_us */
.about_us { display: block; padding: 0; }
.about_us img { width: 90%; height: auto; min-width: inherit; padding: 0; margin: 20px auto 0; }
.about_us .textbox { min-width: inherit; max-width: inherit; width: 90%; margin: 0 auto; }
.about_us .textbox h3 { font-size: 26px; line-height: 20px; padding: 0 0 20px; letter-spacing: 2px; }
.about_us .textbox p { font-size: 11px; line-height: 20px; letter-spacing: normal; }
.about_us .textbox p strong { font-size: 16px; line-height: 27px; padding: 8px 0; }

.about_us .textbox::before { width: 250px; height: 175px; background-size: 100%; top: -20px; right: 0; }
/* ------------------------------------------------------------ online_shop */
.online_shop { display: block; margin: 50px auto 100px; padding: 0; }
.online_shop img { width: 90%; height: auto; min-width: inherit; padding: 0; margin: 20px auto 0; }
.online_shop .textbox { min-width: inherit; max-width: inherit; width: 90%; margin: 0 auto; }
.online_shop .textbox h3 { font-size: 26px; line-height: 20px; padding: 0 0 20px; letter-spacing: 2px; }
.online_shop .textbox p { font-size: 11px; line-height: 20px; letter-spacing: normal; }
.online_shop .textbox p strong { font-size: 16px; line-height: 27px; padding: 8px 0; }
.online_shop .textbox::before { width: 250px; height: 175px; background-size: 100%; top: -20px; left: 0; }
/* ------------------------------------------------------------ emulab_sns */
.emulab_sns { background: url(../images/index/sns_bg_sp.png) no-repeat center center; padding: 38px 0; margin: 0 auto 100px; }
.emulab_sns h3 { font-size: 8px; line-height: 10px; }
.emulab_sns h3 span { font-size: 20px; line-height: 30px; padding: 0 0 5px; }
.emulab_sns ul { padding: 15px 0 25px; }
.emulab_sns ul li { width: 40px; }
.emulab_sns ul li:first-child { margin: 0 20px 0 0; }
.emulab_sns p { font-size: 10px; line-height: 20px; }
.emulab_sns p span { }
/* ------------------------------------------------------------ studio_emu_group */
.studio_emu_group { padding: 0 0 50px; }
.studio_emu_group h3 { font-size: 20px; line-height: 30px; padding: 50px 0 30px; }
.studio_emu_group h3 span { font-size: 12px; line-height: 14px; padding: 8px 0 0; }
.studio_emu_group p { font-size: 11px; line-height: 20px; text-align: left; }

.studio_emu_group .nav { padding: 40px 0 0; }
.studio_emu_group .nav .box { float: none; width: 100%; padding: 4px; margin: 0 auto 10px; }
.studio_emu_group .nav .box p { font-size: 10px; }
.studio_emu_group .nav .box:nth-child(3n+1) { margin: 0 auto 10px; }
.studio_emu_group .nav .box:nth-child(1),
.studio_emu_group .nav .box:nth-child(2),
.studio_emu_group .nav .box:nth-child(3),
.studio_emu_group .nav .box:nth-child(4),
.studio_emu_group .nav .box:nth-child(5),
.studio_emu_group .nav .box:nth-child(6) { margin: 0 auto; }
.studio_emu_group .nav .box a { background: url(../images/common/arrow_02.gif) no-repeat 94% center #fff;}
.studio_emu_group .nav .box a img { width: 100%; height: auto; padding: 0; }
.studio_emu_group .nav .box a h4 { width: 75%; font-size: 10px; line-height: 15px; padding: 0 0 0 15px; }
.studio_emu_group .nav .box a h4 span { font-size: 18px; line-height: 18px; padding: 0 0 6px; }

.studio_emu_group .btn { display: block; width: 90%; margin: 30px auto 0; background: url(../images/common/arrow_02.gif) no-repeat 94% center #fff; font-size: 11px; line-height: 12px; text-align: left; padding: 20px 15px; letter-spacing: normal; }
.studio_emu_group .btn span { font-size: 12px; line-height: 12px; padding: 14px 0 6px; }
.studio_emu_group .btn small { display: block; font-size: 10px; line-height: 12px; }
}