#loader {
  width: 160px;
  height: 108px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -80px;
  margin-top: -54px;
  z-index: 10001;
  opacity: 0;
}
#fade {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10000;
}
.effect {
  opacity: 0;
  transform: translate3d(0px, 10px, 0px);
  -webkit-transform: translate3d(0px, 10px, 0px);
  transition: transform 800ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0ms, opacity 800ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0ms;
  -webkit-transition: -webkit-transform 800ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0ms, opacity 800ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0ms;
}
.effect.scrollin {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.effect-1 {
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}
.effect-2 {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
.effect-3 {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
.effect-4 {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}
.effect-5 {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}
.effect-6 {
  -webkit-transition-delay: .6s;
  transition-delay: .6s;
}
.link-birthstone h2 {
  border-color: #9d21a7;
  text-shadow: 0px 0px 12px black;
}


@media only screen and (min-width: 768px) {
.main .top {
  width: 100%;
  max-width: 1158px;
  padding-top: 60px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
}
.visual {
  position: relative;
  margin-bottom: 1%;
}
.visual:before {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 100;
  box-sizing: border-box;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  border: 14px solid transparent;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) inset;
}
.box-heigtline {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.box-square {
  display: inline-block;
  width: 49.5%;
  margin-bottom: 10px;
}

.box-square:nth-child(odd) {
  margin-right: 1%;
}
.box-fit {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
}

/*--2018.11.01--*/
.box-square .movie {
  width: 100%;
  height: 100%;
  padding: 0;
      margin:0;
  box-sizing: border-box;
}
.box-square .movie video {
  width: 100%;
  height: auto;
  padding:0;
  margin:0;
  display:block;
}

/*--------------*/
.box-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  box-align: stretch;
  align-items: stretch;
  width: 100%;
  height: 100%;
}
.box-info li {
  width: 49%;
  height: 49%;
  margin-bottom: 2%;
  overflow: hidden;
  background-color: #e4746f;
  color: #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.box-info li:hover {
  background-color: #ec9e9a;
}
.box-info li:nth-child(odd) {
  margin-right: 2%;
}
.box-info li:nth-child(1), .box-info li:nth-child(4) {
  background-color: #a4130d;
}
.box-info li:nth-child(1):hover, .box-info li:nth-child(4):hover {
  background-color: #bf5a56;
}
.box-info a {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  color: #fff;
}
.box-info a:hover {
  text-decoration: none;
}
.box-info a:hover:after {
  border-width: 0 0 8px 8px;
  -webkit-transition: all 0;
  transition: all 0;
}
.box-info .whats-new h2 {
  border-top: none;
  font-size: 32px;
  opacity: 1;
  left: 0;
  padding-right: 25px;
}
.box-info time {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
}
.box-info p {
  position: static;
  opacity: 1 !important;
  padding-right: 0 !important;
  font-size: 14px;
  -webkit-transition: all 0;
  transition: all 0;
}
.link-special_assort{
  background: url(../img/banner/special_assort_pc_on.jpg) no-repeat 0 0;
  background-size: 100%;
  }
.link-brand {
  background: url(../img/banner/brand_pc_on.jpg) no-repeat 0 0;
  background-size: 100%;
}
.link-interview {
  background: url(../img/banner/interview_pc_on.jpg) no-repeat 0 0;
  background-size: 100%;
}
.link-recruting {
  background: url(../img/banner/recruting_pc_on.jpg) no-repeat 0 0;
  background-size: 100%;
}
.link-specialty {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: inline-block;
  background: url(../img/banner/specialty_pc_on.jpg) no-repeat 0 0;
  background-size: 100% 100%;
}



.link-type {
  background: url(../img/banner/type_pc_on.png) no-repeat 0 0;
  background-size: 100%;
}
.link-type.titleCenter h2:before {
  background: #49a66f;
}
.link-origin {
  background: url(../img/banner/origin_pc_on.png) no-repeat 0 0;
  background-size: 100%;
}
.link-origin.titleCenter h2:before {
  background: #e0d1b3;
}
.link-process {
  background: url(../img/banner/process_pc_on.png) no-repeat 0 0;
  background-size: 100%;
}
.link-process.titleCenter h2:before {
  background: #e5cc3e;
}
.link-combination {
  background: url(../img/banner/combination_pc_on.png) no-repeat 0 0;
  background-size: 100%;
}
.link-combination.titleCenter h2:before {
  background: #3e7dc2;
}
.link-gift {
  background: url(../img/banner/gift_pc_on.png) no-repeat 0 0;
  background-size: 100%;
}
.link-gift.titleCenter h2:before {
  background: #c757d5;
}


.link-store_info {
  background: url(../img/banner/store_info_pc_on.png) no-repeat 0 0;
  background-size: 100%;
}
.link-onlineshop {
  background: url(../img/banner/onlineshop_pc_on.png) no-repeat 0 0;
  background-size: 100%;
}
.link-instagram {
  background: url(../img/banner/instagram_pc_on.png) no-repeat 0 0;
  background-size: 100%;
}
.link-Recruiting2 {
  background: url(../img/banner/recruiting_pc_on.png) no-repeat 0 0;
  background-size: 100%;
}
.outlink ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.outlink li {
  width: 33.3333%;
  padding-right: 10px;
  box-sizing: border-box;
}
.outlink li:last-child {
  padding-right: 0;
}
.outlink a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #ffffff;
  text-align: center;
  min-height: 240px;
}
.outlink span {
  position: absolute;
  bottom: 12px;
  display: block;
  width: 100%;
  font-size: 16px;
  letter-spacing: 1px;
}
.outlink__kitkat {
  background: url(../img/top/outlink_kitkat.png) no-repeat 50%;
  background-color: #d32c25;
}
.outlink__facebook {
  background: url(../img/top/outlink_facebook.png) no-repeat 50%;
  background-color: #4168b3;
}
.outlink__twitter {
  background: url(../img/top/outlink_twitter.png) no-repeat 50%;
  background-color: #269df9;
}

/*--2019.12.24--*/
.sp {
  display: none;
}
/*--------------*/
}



@media only screen and (min-width: 1024px) {
.header {
  -webkit-transform: translate(-200px, 0);
  -ms-transform: translate(-200px, 0);
  transform: translate(-200px, 0);
}
.header.slidein {
  -webkit-transition: all .5s ease-out;
  transition: all .5s ease-out;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

.outlink a {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.outlink a:hover {
  opacity: 0.7;
}

}



@media only screen and (min-width: 768px) and (max-width: 1023px) {
.main .top {
  padding: 0 16px;
}

.box-info a {
  padding: 20px;
  line-height: 1.3;
}

.link-onlineshop h2 {
  font-size: 26px;
}
.link-onlineshop:hover h2 {
  left: 50%;
}

}



@media only screen and (max-width: 767px) {
.header {
  opacity: 0;
}
.header.slidein {
  opacity: 1;
  -webkit-transition: all .5s ease-out;
  transition: all .5s ease-out;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}
.main .top {
  padding: 0 10px;
}
.visual {
  position: relative;
  margin-bottom: 10px;
}
.visual:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: 6px solid transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
.box-square {
  margin-bottom: 10px;
}
.box-square.clear{
  clear:both;
}
.box-square.empty {
    display:none;
}
.box-square::after{
  content:"";
  display:block;
  clear:both;
}
.box-fit {
  width: 49%;
}
.box-fit:nth-child(odd) {
  margin-right: 2%;
}
.box-fit-sp {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 10px;
}
.box-fit-50 {
  width: 49%;
  margin-bottom: 10px;
  float: left;
  position: relative;
  z-index: 1;
}
.box-fit-50:nth-of-type(even) {
  margin-right: 2%;
  float: left;
}
.box-fit-50:nth-of-type(even):after {
  content: "";
  clear: both;
  display: block;
}
.box-fit-100 {
  width: 100%;
  margin-bottom: 10px;
}

/*--2018.11.01--*/
.box-fit-row2 {
  width: 49%;
  margin-bottom: 10px;
  float: left;
  margin-right: 2%;
  position: relative;
  z-index: 1;
}

/*
.box-fit-row2:nth-of-type(even) {
  margin-right: 0;
  float: right;
}
.box-fit-row2:nth-of-type(even)::after {
  content: "";
  clear: both;
  display: block;
}
*/

.box-heigtline {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.box01 {
  -webkit-box-ordinal-group:6;
  -ms-flex-order:6;
  -webkit-order:6;
  order:6;
}
.box02 {
  -webkit-box-ordinal-group:7;
  -ms-flex-order:7;
  -webkit-order:7;
  order:7;
}
.box03 {
  -webkit-box-ordinal-group:8;
  -ms-flex-order:8;
  -webkit-order:8;
  order:8;
}
.box04 {
  -webkit-box-ordinal-group:9;
  -ms-flex-order:9;
  -webkit-order:9;
  order:9;
}
.box05 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order:1;
}
.box06 {
  -webkit-box-ordinal-group:2;
  -ms-flex-order:2;
  -webkit-order:2;
  order:2;
}
.box07 {
  -webkit-box-ordinal-group:3;
  -ms-flex-order:3;
  -webkit-order:3;
  order:3;
}
.box08 {
  -webkit-box-ordinal-group:4;
  -ms-flex-order:4;
  -webkit-order:4;
  order:4;
}
.box09 {
  -webkit-box-ordinal-group:5;
  -ms-flex-order:5;
  -webkit-order:5;
  order:5;
}
.box10 {
  -webkit-box-ordinal-group:10;
  -ms-flex-order:10;
  -webkit-order:10;
  order:10;
}
.box11 {
  -webkit-box-ordinal-group:11;
  -ms-flex-order:11;
  -webkit-order:11;
  order:11;
}
.box12 {
  -webkit-box-ordinal-group:12;
  -ms-flex-order:12;
  -webkit-order:12;
  order:12;
}
.box13 {
  -webkit-box-ordinal-group:13;
  -ms-flex-order:13;
  -webkit-order:13;
  order:13;
}
.box14 {
  display: none;
}

.w100p {
  width: 100%;
} 







.box-fit-row2.fR {
  margin-right: 0;
  float: right;
}
.box-fit-row2.fR::after {
  content: "";
  clear: both;
  display: block;
}
.box-square .movie {
  width: 100%;
  height: 100%;
  padding: 0;
  margin:0;
  box-sizing: border-box;
}
.box-square .movie video {
  width: 100%;
  height: auto;
  padding:0;
  margin:0;
  display:block;
}
.link-brand {
  background-color:#F00;
  clear:both;
}

/*--------------*/
.box-info {
  width: 100%;
  height: 100%;
  margin-bottom: -2%;
}
.box-info:after {
  content: "";
  clear: both;
  display: block;
}
.box-info li {
  float: left;
  width: 49%;
  margin-bottom: 2%;
  background-color: #e4746f;
  color: #fff;
}
.box-info li:nth-child(odd) {
  margin-right: 2%;
}
.box-info li:nth-child(1),
.box-info li:nth-child(4) {
  background-color: #a4130d;
}
.box-info a,
.box-info .whats-new {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  font-size: 12px;
  color: #fff;
}
.box-info a:hover,
.box-info .whats-new:hover {
  text-decoration: none;
}
.box-info .whats-new {
  width: 100%;
}
.box-info .whats-new h2 {
  border-top: none;
  font-size: 21px;
  top: 10px;
}
.box-info time {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
}
.box-info p {
  position: static;
  padding-right: 0 !important;
  font-size: 12px;
}
.link-sublime h2 {
  border-color: #49a66e;
}
.link-moleson h2 {
  border-color: #a18857;
}
.link-birthstone h2 {
  border-color: #9d21a7;
  text-shadow: 0px 0px 12px black;
}
.link-fruits h2 {
  border-color: #e5cb3e;
}
.link-gift h2 {
  border-color: #3f7dc2;
}
.link-special h2 {
  border-color: #c857d5;
}
.link-instagram h2 {
  border-color: #ffffff;
}
.link-instagram p {
  font-size: 12px;
}
.outlink ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.outlink li {
  width: 33.3333%;
  padding-right: 10px;
  box-sizing: border-box;
}
.outlink li:last-child {
  padding-right: 0;
}
.outlink a {
  position: relative;
  display: block;
  width: 100%;
  min-height: 80px;
  padding: 20px 0;
  box-sizing: border-box;
  color: #ffffff;
  text-align: center;
}
.outlink span {
  position: absolute;
  bottom: 6px;
  display: block;
  width: 100%;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 1px;
}
.outlink__kitkat {
  background: url(../img/top/outlink_kitkat.png) no-repeat 50% 40%;
  background-size: 46px auto;
  background-color: #d32c25;
}
.outlink__facebook {
  background: url(../img/top/outlink_facebook.png) no-repeat 50% 40%;
  background-size: 12px auto;
  background-color: #4168b3;
}
.outlink__twitter {
  background: url(../img/top/outlink_twitter.png) no-repeat 50% 40%;
  background-size: 21px auto;
  background-color: #269df9;
}

}


.sublimeruby{
	display:block;
	margin-bottom: 10px;
	position:relative;
}
.sublimeruby .bg{
	display:block;
	padding:0;
	margin:0;
	position:relative;
	z-index:0;
}
.sublimeruby .countdown{
	display:block;
	box-sizing:border-box;
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#F00;
	top:0;
	left:0;
	position:absolute;
}
.sublimeruby .countdown li{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
	display:none;
}
.sublimeruby .countdown li .box{
	display:block;
	width:100%;
	height:100%;
}
.sublimeruby .countdown li.scene1{
	z-index:3;
	display:block;
}
.sublimeruby .countdown li.scene2{
	z-index:2;
}
.sublimeruby .countdown li.scene3{
	z-index:1;
}
.sublimeruby .countdown li.scene3 .count{
	display:block;
	width:27.65%;
	height:auto;
	position:absolute;
	top:61%;
	left:48.3%;
	transform:translate(-50%,-50%);
	text-align:center;
}
.sublimeruby .countdown li.scene3 .count .txt01{
	display:block;
	width:11.72%;
	margin:0;
	position:absolute;
	bottom:0;
	left:0;
}
.sublimeruby .countdown li.scene3 .count .txt02{
	display:block;
	width:4.56%;
	margin:0;
	position:absolute;
	bottom:0;
	right:0;
}
.sublimeruby .countdown li.scene3 .count .num{
	display:inline-block;
	width:74%;
	margin:0 0 0 5%;
}
.sublimeruby .countdown li.scene3 .count .num img{
	width:50%;
}



@media only screen and (max-width: 767px) {
.sublimeruby .countdown li.scene3 .count{
	width:68.75%;
	top:70.5%;
	left:47%;
}
.sublimeruby .countdown li.scene3 .count .num{
	width:73%;
	margin:0 0 0 6.5%;
}

}


h1.effect a:hover{
  opacity: 0.8 !important;
}

/* 2020.01.20 */
.banner {
  position: relative;
  margin-bottom: 1%;
}
.banner img {
  transition: all 0.2s linear;
  opacity: 1;
}
.banner img:hover {
  opacity: 0.8;
}