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

/***
* common_pc.css
*/  

@media only print, only screen and (min-width: 1000px){

.sp,
.tab,
.tab_sp{
	display:none;
}

.pc,
.pc_tab,
.pcw_pc{
	display:block;
}

.jp{
  font-family: 'NeueHaasGroteskText W01', a-otf-gothic-bbb-pr6n, sans-serif;
  font-feature-settings: "palt" 1;
}

body{
  opacity: 0;
}

/***
* layout
*/

/* header */

#header{
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 3333;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
  pointer-events: none;
}

#header.active{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

#logo{
  width: 82px;
  position: absolute;
  top: 42px;
  right: 42px;
  pointer-events: auto;
}

#headerTtl{
  position: absolute;
  top: 63px;
  bottom: auto;
  left: 75px;
  font-size: 20px;
  line-height: 1.45;
}

#headerNav{
  position: absolute;
  top: 134px;
  bottom: auto;
  left: 75px;
  font-size: 12px;
  pointer-events: auto;
}

#headerNav li{
  margin-right: 10px;
  display: inline-block;
}

#headerNav li a{
  position: relative;
}

#headerNav li a .navLine{
  width: 0;
  height: 1px;
  background: #0071bc;
  position: absolute;
  bottom: 2px;
  left: 0;
  transition-duration: 0.5s;
}

#headerNav li a:hover .navLine{
  width: 100%;
  left: 0;
  transition-duration: 0.5s;
}

.pagination{
  color: #0071bc;
  bottom: -30px !important;
  left: -8px !important;
}

#look5 .pagination{
  width: auto;
  bottom: -40px;
  left: -10px !important;
}

.swiper-pagination-bullet{
  margin: 0 10px !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  background: none !important;
  position: relative;
}

.swiper-pagination-bullet::after{
  content: '';
  width: 8px !important;
  height: 1px !important;
  position: absolute;
  top: 50%;
  margin-top: 2px;
  left: 0;
  background: none !important;
  transition-duration: 0.5s;
}

.swiper-pagination-bullet-active::after{
  content: '';
  background: #0071bc !important;
  transition-duration: 0.5s;
}

/* main */

#main{
  padding-bottom: 100vh;
}

#mainVisual{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: 1111;
}

#mainVisual .pagination{
  left: 12px !important;
  bottom: 20px !important;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

#mainVisual.active .pagination{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

#mainVisualImg{
  width: 72.5vw;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}

#mainVisualImg.active{
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

#fixedTtl{
  position: fixed;
  top: 50%;
  left: 50%;
  padding-bottom: 60px;
  transform: translate(-50%, -50%);
  font-size: 11.347vw;
  white-space: nowrap;
  transition-duration: 1s;
  z-index: 1;
  pointer-events: none;
}

#fixedTtl.active{
  filter: blur(30px);
  transition-duration: 1s;
}

#lookList{
  padding-top: 150px;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
  position: relative;
  z-index: 1111;
}

#lookList.active{
  padding-top: 110px;
  opacity: 1;
  visibility: visible;
  transition-duration: 0.5s;
}

#lookList li{
  position: relative;
  margin-bottom: 240px;
  pointer-events: none;
}

#lookList li:last-child{
  margin-bottom: 0;
}

.itemCredit{
  width: 240px;
  margin: 0;
  font-family: Arial, Helvetica, "sans-serif";
  font-size: 11px;
  line-height: 1.727;
  position: absolute;
  z-index: 7777;
  pointer-events: auto;
}

.itemCredit dd{
  width: 110px;
  float: left;
}

.itemCredit dd:first-child{
  width: auto;
  float: none;
}

.itemImg{
  pointer-events: auto;
}

#look1{
  width: 71.59vw;
  margin: 0 auto;
}

#look2 .itemImg{
  width: 25.25vw;
  margin: 0 auto;
  position: relative;
  left: 23.42vw;
}

#look2 .itemCredit{
  top: 0;
  left: 20.49vw;
  margin-top: 0;
}

#look3 .itemImg{
  width: 65.88vw;
  margin: 0 auto;
}

#look3 .itemCredit{
  width: 260px;
  top: 56vw;
  left: 65vw;
}

#look3 .itemCredit dd{
  margin-right: 20px;
}

#look4 .itemImg{
  width: 29.28vw;
  margin: 0 auto;
  position: relative;
  left: -23.42vw;
}

#look5 .itemImg{
  width: 65.88vw;
  margin: 0 auto;
  position: relative;
}

#look5 .itemCredit{
  top: 54vw;
  left: 58.56vw;
  margin-top: 0;
}

#look6 .itemImg{
  width: 19.76vw;
  margin: 0 auto;
  position: relative;
  top: 20vw;
  left: -27.81vw;
}

#look7 .itemImg{
  width: 43.92vw;
  margin: 0 auto;
  position: relative;
  top: 0;
  left: 14.64vw;
}

#look8 .itemImg{
  width: 14.64vw;
  margin: 0 auto;
  position: relative;
  top: 0;
  left: 18.30vw;
}

#look9 .itemImg{
  width: 29.28vw;
  margin: 0 auto;
  position: relative;
  margin-top: 0;
  top: -300px;
  left: -19.03vw;
}

#look9 .itemCredit{
  top: 4vw;
  left:  70vw;
}

#look10 .itemImg{
  width: 65.88vw;
  margin: 0 auto;
}

.itemCredit dd a{
  position: relative;
}

.itemCredit dd a::before{
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 1px;
  left: 0;
  background: url("../img/icon_arrow.svg") left center no-repeat;
  background-size: 10px auto;
  opacity: 0;
  visibility: hidden;
/*  transition-duration: 0.5s;*/
}

.itemCredit dd a:hover::before{
  opacity: 1;
  visibility: visible;
/*  transition-duration: 0.5s;*/
}

.itemCredit dd a:hover{
  padding-left: 16px;
  opacity: 1;
  visibility: visible;
/*  transition-duration: 0.5s;*/
}

.itemCredit dd a::after{
  content: '';
  width: 100%;
  height: 1px;
  background: #0071bc;
  position: absolute;
  right: 0;
  bottom: 0;
/*  transition-duration: 0.5s;*/
}

.itemCredit dd a:hover::after{
  content: '';
  width: 0;
  height: 1px;
  position: absolute;
  right: 0;
  bottom: 0;
/*  transition-duration: 0.5s;*/
}

.pagination{
  position: absolute;
  bottom: -40px;
  left: -40px;
  font-size: 14px;
  z-index: 7777;
}

/* footer */

#footer{
  font-family: Arial, Helvetica, "sans-serif";
  font-size: 11px;
  line-height: 1.727;
  text-align: center;
}

#satffCredit{
  margin-bottom: 0;
}

#satffCredit .sp{
  display: none;
}

#satffCredit .pc{
  display: inline;
}

#copyright{
  padding: 30px 0;
  font-size: 10px;
}

}