@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900');

body{
  background: #ffffff;
  font:16px/1.4 'Noto Sans JP',"游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
  overflow: hidden;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

a,
a::before,
a::after{
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

a,
a:hover {
	text-decoration: none;
}

#sweet_index_page{background: #e4007f;}
#sweet_list_page{
    background: #ffffff url(../img/sweet/bg12-02.jpg) center center no-repeat;
    background-size: cover;
}

#spice_index_page{  background: #0099ff;}
#spice_list_page{
    background: #ffffff url(../img/spice/bg.jpg) center center no-repeat;
    background-size: cover;
}

#international_index_page{  background: #f39801;}
#international_list_page{
    background: #ffffff url(../img/international/bg.jpg) center center no-repeat;
    background-size: cover;
}

@media (max-width: 1300px) {
  body{
    overflow: visible;
  }
}

/* ------------------------------------
 * index_page
 * ------------------------------------ */

.index_page article,
.list_page article{
  height: 100vh;
}

@media (max-width: 1300px) {
  .index_page article,
  .list_page article{
    height: auto;
  }
}

.index_page a{
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
  opacity: 0.8;
}

.index_page a:hover{
  opacity: 1;
}

.index_page a img{
  position: absolute;
  bottom:6vh;
  left:calc(50% - 150px);
  width: 300px;
  height: 200px;
  animation-name: opacity01;
  animation-duration: 4s;
}

@media (max-width: 768px) {
  #sweet_index_page article,
  #spice_index_page article,
  #international_index_page article{
    background-size: 100%;
    background-position: top 40% center;
  }

  #sweet_index_page article{  background-color: #e4007f;}
  #spice_index_page article{  background-color: #0099ff;}
  #international_index_page article{  background-color: #f39801;}

  .index_page a{
    opacity: 1;
  }

  .index_page a img {
    bottom:20%;
    left: calc(50% - 105px);
    width: 210px;
    height: 140px;
  }
}


/* ------------------------------------
 * LIST BOX
 * ------------------------------------ */

.listBox {
	margin: 0;
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-justify-content: flex-start; /* Safari */
  justify-content:         flex-start;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}

.listBox li {
	width: 20%;
  height:30vh;
  position: absolute;
  background:url(../img/list/500x400_01.jpg);
  background-size: 100%;
  background-position: center center;
}

.listBox li:nth-child(even) {
  background:url(../img/list/500x400_02.jpg);
  background-size: 100%;
  background-position: center center;
}

.listBox li > a{
  position: relative;
}

.listBox li > a::before{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height:100%;
  background: rgba(212,20,131,0.3);
  opacity:0;
  z-index: 1;
}

.listBox li.spicepower > a::before{
  background: rgba(0,161,233,0.45);
}

.listBox li.international > a::before{
  background: rgba(243,152,36,0.45);
}

.listBox li > a:hover::before{
  opacity: 1;
}

.listBox li > a {
	display: block;
	width: 100%;
  height: 100%;
	margin: 0 auto;
}

.listBox li a object{
	position: absolute;
  bottom:4%;
  right: 5%;
  z-index: 101;
}

.listBox li:not(.international):not(.spicepower) p{
  //animation-name: RightToLeft;
  animation-duration: 0.5s;
  position: absolute;
  bottom:4%;
  left:5%;
  z-index: 100;
}

.listBox li.international p,
.listBox li.spicepower p{
  position: absolute;
  bottom:0;
  left: 50%;
  font-size: 18px;
  text-align: center;
  transform: translateY(-14%) translateX(-50%);
  -webkit- transform: translateY(-14%) translateX(-50%);
  animation-name: opacity01;
  animation-duration: 1s;
  z-index: 100;
  max-width: 260px;
}

.listBox li p span{
  font-size:110%;
  color: #ffffff ;
  text-shadow:1px 1px 2px #000000;
  letter-spacing: 0.2px;
  display: block;
}

.listBox li p span.jp_name{
  font-weight: bold;
  margin-right: 0.4em;
}

.listBox li p span.roman{
  font-style: italic;
  font-size:90%;
}

.listBox li.spicepower p span,
.listBox li.international p span{
  //position: relative;
  font-weight: bold;
  margin-right: 0;
}



@keyframes RightToLeft {
  0% {
      opacity: 0.2;
      transform: translateX(30px);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes opacity01 {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@media (max-width: 1300px) {
	.listBox li {
    position: static;
		width: 33.33%;
    height:20vh;
	}
}

@media (max-width: 768px) {

	.listBox li:last-child::before {
		content:"";
	}

	.listBox li > a,
	.listBox li > div {
		width: 100%;
		margin: 0;
		padding: 0;
	}

  .listBox li p span{
    display: block;
    font-size: 12px;
  }

  .listBox li p span.roman{
    font-size:80%;
  }

  .listBox li.spicepower p span::before,
  .listBox li.international p span::before{
    top: 22%;
    right: -8px;
    width: 6px;
    height: 6px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
  }
}

 /* SNS ------------------------------------ */

.fa-instagram::before {
    font-size: 250%;
    color: #fff;
    text-shadow:1px 1px 2px #000000;
}

@media (max-width: 768px) {
  .fa-instagram::before {
      font-size: 200%;
  }
}

/* ------------------------------------
 * LIST LINE
 * ------------------------------------ */

.listLine {
	margin: 0;
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-justify-content: flex-start; /* Safari */
  justify-content:         flex-start;
}

.listLine li{
  width: 20%;
  height:90vh;
  position: relative;
  background:url(../img/list/500x400_01.jpg);
  background-size: cover;
  background-position: center center;
}

.listLine li:nth-child(even){
  background:url(../img/list/500x400_02.jpg);
  background-size: cover;
  background-position: center center;
}

.listLine li > a{
  position: relative;
  text-shadow:0px 0px 4px #666666;
}

.listLine li > a::before{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height:100%;
  background: rgba(0,161,233,0.45);
  opacity:0;
  z-index: 1;
}

.listLine li > a:hover::before{
  opacity: 1;
}

.listLine li > a,
.listLine li > div {
	display: block;
	width: 100%;
  height:90vh;
  margin: 0 auto;
}

.listLine li p {
  animation-name: RightToLeft;
  animation-duration: 0.5s;
  position: absolute;
  bottom:1%;
  left:3%;
  font-size:140%;
  z-index: 100;
}

@keyframes RightToLeft {
  0% {
      opacity: 0.2;
      transform: translateX(30px);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}

.listLine li p span{
  color: #ffffff ;
  margin-right: 0.5em;
  letter-spacing: 0.4px;
}

.listLine li p span.jp_name{
  font-weight: bold;
  font-size: 90%;
}

.listLine li p span.roman{
  font-style: italic;
  font-size: 105%;
}

.listLine li p span.cn{
  font-size: 90%;
}

.listLine li a object{
	position: absolute;
  bottom:1%;
  right: 3%;
  z-index: 101;
}

@media (max-width: 1300px) {
  .listLine li{
    width: 100%;
    height:20vh;
  }
  .listLine li > a,
  .listLine li > div {
    height:20vh;
  }
  .listLine {
      -webkit-flex-wrap: wrap; /* Safari */
      flex-wrap:         wrap;
  }

  .listLine li p {
    position: absolute;
    bottom:2%;
    left:3%;
    font-size: 120%;
  }
  .listLine li p span.roman{
    font-size: 70%;
  }
  .listLine li a object{
    bottom:4%;
    right: 3%;
  }
}

.listLine li p span{
  display: block;
}

/* ------------------------------------
 * spicelistBox
 * ------------------------------------ */

 .spicelistBox {
 	margin: 0;
 	display: -webkit-flex; /* Safari */
 	display: flex;
 	-webkit-justify-content: flex-start; /* Safari */
   justify-content:         flex-start;
   -webkit-flex-wrap: wrap; /* Safari */
   flex-wrap:         wrap;
 }

 .spicelistBox li {
   /* position: static; */
   width: 33.33%;
   height:45vh;
   position: absolute;
   background:url(../img/list/500x400_01.jpg);
   background-size: 100%;
   background-position: center center;
 }

 .spicelistBox li:nth-child(even) {
   background:url(../img/list/500x400_02.jpg);
   background-size: 100%;
   background-position: center center;
 }

 .spicelistBox li > a{
   position: relative;
 }

 .spicelistBox li > a::before{
   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height:100%;
   background: rgba(0,161,233,0.45);
   opacity:0;
   z-index: 1;
 }

 .spicelistBox li > a:hover::before{
   opacity: 1;
 }

 .spicelistBox li > a {
 	display: block;
 	width: 100%;
   height: 100%;
 	margin: 0 auto;
 }

 .spicelistBox li a object{
 	position: absolute;
   bottom:4%;
   right: 5%;
   z-index: 101;
 }

 .spicelistBox li:not(.international):not(.spicepower) p{
   //animation-name: RightToLeft;
   animation-duration: 0.5s;
   position: absolute;
   bottom:4%;
   left:5%;
   z-index: 100;
 }

 .spicelistBox li.international p,
 .spicelistBox li.spicepower p{
   position: absolute;
   bottom:0;
   left: 50%;
   font-size: 18px;
   text-align: center;
   transform: translateY(-14%) translateX(-50%);
   -webkit- transform: translateY(-14%) translateX(-50%);
   animation-name: opacity01;
   animation-duration: 1s;
   z-index: 100;
   max-width: 260px;
 }

 .spicelistBox li p span{
   font-size:110%;
   color: #ffffff ;
   text-shadow:1px 1px 2px #000000;
   letter-spacing: 0.2px;
   display: block;
 }

 .spicelistBox li p span.jp_name{
   font-weight: bold;
   margin-right: 0.4em;
 }

 .spicelistBox li p span.roman{
   font-style: italic;
   font-size:90%;
 }

 .spicelistBox li.spicepower p span,
 .spicelistBox li.international p span{
   //position: relative;
   font-weight: bold;
   margin-right: 0;
 }



 @keyframes RightToLeft {
   0% {
       opacity: 0.2;
       transform: translateX(30px);
   }
   100% {
       opacity: 1;
       transform: translateX(0);
   }
 }

 @keyframes opacity01 {
   0% {
       opacity: 0;
   }
   100% {
       opacity: 1;
   }
 }

 @media (max-width: 1300px) {
 	.spicelistBox li {
     position: static;
 		width: 33.33%;
     height:45vh;
 	}
 }

 @media (max-width: 768px) {
   .spicelistBox li {
     position: static;
     width: 50%;
     height:30vh;
   }

 	.spicelistBox li:last-child::before {
 		content:"";
 	}

 	.spicelistBox li > a,
 	.spicelistBox li > div {
 		width: 100%;
 		margin: 0;
 		padding: 0;
 	}

   .spicelistBox li p span{
     display: block;
     font-size: 12px;
   }

   .spicelistBox li p span.roman{
     display: none;
   }

   .spicelistBox li.spicepower p span::before,
   .spicelistBox li.international p span::before{
     top: 22%;
     right: -8px;
     width: 6px;
     height: 6px;
     border-top: solid 2px #ffffff;
     border-right: solid 2px #ffffff;
   }
 }


/* ------------------------------------
 * slideIN
 * ------------------------------------ */

.listLine li:nth-child(odd){
  top:-100vh;
  -webkit-transition: opacity 1s .2s,top 1s .2s;
	transition: opacity 1s .2s,top 1s .2s;
}

.listLine li:nth-child(odd).on{
  top:0;
}

.listLine li:nth-child(even){
  bottom:-100vh;
  -webkit-transition: opacity 1s .2s,bottom 1s .2s;
	transition: opacity 1s .2s,bottom 1s .2s;
}

.listLine li:nth-child(even).on{
  bottom:0;
}

/* ------------------------------------------------------------------------ */


.spicelistBox li:nth-child(odd){
  top:-100vh;
  -webkit-transition: opacity 1s .2s,top 1s .2s;
 transition: opacity 1s .2s,top 1s .2s;
}

.spicelistBox li:nth-child(odd).on{
  top:0;
}

.spicelistBox li:nth-child(even){
  bottom:-100vh;
  -webkit-transition: opacity 1s .2s,bottom 1s .2s;
 transition: opacity 1s .2s,bottom 1s .2s;
}

.spicelistBox li:nth-child(even).on{
  bottom:0;
}
/* ------------------------------------
 * SITE LINK
 * ------------------------------------ */

.site_link{
  //padding:1% 0;
  height: 10vh;
  bottom:0;
  width: 100%;
  background:#000000;
  z-index: 10;
  position: absolute;
}

.link_list {
  width: 60%;
  max-width:1200px;
	margin: 0 auto;
  text-align: center;
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-justify-content: flex-start; /* Safari */
  justify-content:         flex-start;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}

.link_list li{
	width: 25%;
  padding:2% 0;
}

.link_list li a{
	display: block;
  width: 70%;
  margin:0 auto;
  border:2px solid #ffffff;
  color:#ffffff;
  padding:2%;
  min-height:30px;
  text-decoration: none;
  border-radius: 8px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.link_list li a div{
  position: relative;
  font-weight: bold;
  text-indent: 24px;
}

.link_list li a div::before{
  content: "";
  position: absolute;
  top:calc(50% - 12px);
  left:0;
  width:20px;
  height:25px;
  background: url(../img/common/iconMini_sweet.svg) no-repeat center center;
  background-size: contain;
}

.link_list li.site_spice a div::before{
  background: url(../img/common/iconMini_spice.svg) no-repeat center center;
  background-size: contain;
}

.link_list li.site_international a div::before{
  background: url(../img/common/iconMini_international.svg) no-repeat center center;
  background-size: contain;
}


.link_list li.site_korea a div::before{
  background: url(../img/common/iconMini_korea.svg) no-repeat center center;
  background-size: contain;
}

.link_list li.site_international a div,
.link_list li.site_korea a div{
  font-size: 12px;
}

.link_list li a div span{
  display: block;
  font-size: 80%;
}


.link_list li a:hover{ border:2px solid #e4007f; background:#e4007f;}
.link_list li.site_spice a:hover{ border:2px solid #0099ff; background:#0099ff;}
.link_list li.site_international a:hover{ border:2px solid #ff8003;  background:#ff8003;}
.link_list li.site_korea a:hover{ border:2px solid #97c61f; background:#97c61f;}


@media (max-width: 1300px) {
  .site_link{
    position: static;
  }

  .link_list {
  	width: 80%;
  }

  .link_list li{
  	width: 50%;
    margin:5px 0;
  }
  .link_list li:first-child,
  .link_list li:nth-child(2){
    padding:2% 0 0;
  }
  .link_list li a{
    width: 90%;
  }
}

@media (max-width: 768px) {
  .site_link{
    padding:0;
  }
  .link_list {
    width: 100%;
  }
  .link_list li{
    margin:0;
    padding:0;
  }

  .link_list li:first-child,
  .link_list li:nth-child(2){
    padding:0;
  }
  .link_list li a,
  .link_list li a:hover{
    width: 100%;
    font-size: 12px;
    min-height:40px;
    margin:0 auto;
    padding:4% 0;
    border:none;
    border-radius: 0;
    background:#e4007f;
  }

  .link_list li a::before{
    left:6%;
    width:24px;
    height:30px;
  }

  .link_list li.site_spice a,
  .link_list li.site_spice a:hover {
     border:none; background:#0099ff;
   }

  .link_list li.site_international a,
  .link_list li.site_international a:hover{
     border:none; background:#ff8003;
   }

  .link_list li.site_korea a,
  .link_list li.site_korea a:hover{
    border:none; background:#97c61f;
  }
}


@media (max-width: 1300px) {
  .talent_list,
  .site_link{
    height:auto;
  }
}