/*
------------------------------------- */
.wrapper {
  position: relative;
  min-height: 100%;
  background-color: #fff;
  line-height: 1.0;
  letter-spacing: 0.0rem;
  color:#000;
  text-align:left;
}

/★未使用
----------------------------------------- */
.to-works-back {
  position: absolute;
  width:30px;
  height: 30px;
  top:50%;
  left:15px;
  transform: translate(0%, -50%);
  z-index: 999;
  background-color: #111;
  border-radius: 50%; 
}
.to-works-back:after {
  position: absolute;
  content: "";
  width: 23%;
  height: 23%;
  top:50%;
  left: 12px;
  pointer-events: none;
  transform: translate(0%, -50%) rotate(-45deg);
  border-top:2px solid #eee;
  border-left:2px solid #eee;
}

/*
----------------------------------------- */
.contaner {
  position: relative;
  max-width: 800px;
  max-width: none;
  margin: 0 auto;
  padding: 30px 5vw 80px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
.contaner {
  padding: 30px 30px 80px;
}
}


/* header ロゴ・ブランド
----------------------------------------- */
.header {
  position: relative;
  width: 100%;
  text-align:left;
  margin-bottom:25px;
}
/*ロゴ縦
----------------------------------------- */
.logo {
  position: relative;
  width: 40%;
  max-width: 200px;
  margin-bottom:20px;
}
/*ロゴ横
----------------------------------------- */
.logo.logo-yoko {
  position: relative;
  width: 55%;
  max-width: 250px;
}
/*
----------------------------------------- */
.logo img.img-inner{
  position: relative;
  width: 100%;
  height: auto;
}

/*ブランド・シーズン・クライアント 無ければ非表示
----------------------------------------- */
.bland-box {
  position: relative;
  width: 100%;
  padding:10px 20px;
  font-size:0rem;
  letter-spacing: -10em;
  text-align:left;
  border:1px solid#999;
}
.bland-box > span.left,.bland-box > span.right {
  position: relative;
  display:inline-block;
  vertical-align: top;
  width:65px;
  letter-spacing: 0em;
  font-size: 1.3rem;
  margin:10px 0 ;
}
.bland-box > span.right {
  width:calc(100% - 68px);
}
/*タイトル写真・ワークカテゴリー・説明文
---------------------------------------------------------------*/
.disc-box {
  position: relative;
  display:block;
  width: 100%;
  font-size:0rem;
  letter-spacing: -10em;
  text-align:left;
  margin-bottom: 55px;
}
@media screen and (min-width: 769px) {
.disc-box {
  margin-bottom: 45px;
}
}
/*
---------------------------------------------------------------*/
.disc-image,.disc-text {
  position: relative;
  display:inline-block;
  vertical-align: top;
  width: 100%;
}
.disc-image {
  background-repeat: no-repeat;
  background-position:center center;
  background-position:top 0px left 0px;
  background-size:contain;
}
/*タイトル写真 縦
---------------------------------------------------------------*/
.disc-image {
  width:60%;
  max-width: 220px;
}
/*タイトル写真 横
---------------------------------------------------------------*/
.disc-image.disc-yoko {
  width: 100%;
  max-width: 350px;
}
/*説明文
---------------------------------------------------------------*/
.disc-text {
  padding-top:20px;
  width: 100%;
  max-width: 600px;
  letter-spacing: 0em;
  font-size:1.3rem;
  line-height: 2.0;
}
@media screen and (min-width: 769px) {
.disc-text {
  padding-top:0px;
  padding-left:50px;
}
.disc-text.disc-yoko  {
  width:calc(100% - 350px);
}
.disc-text  {
  width:calc(100% - 220px);
}
}

/*タイトル サムネ連動
----------------------------------------- */
.logo-sub-text {
  position: relative;
  margin-bottom:10px;
  font-size: 1.8rem;
}
/*ワークカテゴリー
----------------------------------------- */
.direction-mark-box {
  position: relative;
  margin-bottom: 5px;
  padding:0px;
  font-size:0;
  letter-spacing: -10rem;
}
span.direction-mark {
  position: relative;
  display:inline-block;
  vertical-align: top;
  margin-right: 5px;
  margin-bottom: 5px;
  padding:4px 5px 2px;
  line-height: 1.0;
  font-family: 'Josefin_Sans';
  font-weight: 400;
  font-size:1.1rem;
  letter-spacing: 0rem;
  border:1px solid #aaa; 
  display:none;
}
/* ▽カテゴリーON OFF
----------------------------------------- */
span.direction-mark.checked {
  display:inline-block;
}

/* イメージビジュアル ・動画・プロモーション　各タイトル
---------------------------------------------------------------*/
.contents-desc {
  position: relative;
  width:100%;
  margin-bottom: 10px;
  font-size: 2.0rem;
  letter-spacing: 0rem;
  font-family: 'Josefin_Sans';
  font-weight: 600;
}
@media screen and (min-width: 769px) {
.contents-desc {
  font-size: 2.4rem;
  margin-bottom: 10px;
}
}
.contents-desc.sub {
  margin: 50px auto 5px;
  font-size: 1.4rem;
  letter-spacing: 0rem;
  font-family: 'Roboto';
  font-weight: 500;
  color:#333;
}
/* イメージスライド・プロモーションスライド ボックス
---------------------------------------------------------------*/
.slide-box,.promo-box {
  position: relative;
  padding-bottom:6vw;
  width:100%;
  display: none;
  text-align:center;
}
@media screen and (min-width: 769px) {
.slide-box,.promo-box {
   padding-bottom:30px;
 }
}

/*swiper   heightを動的に変更js
---------------------------------------------------------------*/
.swiper-container.slide {
  position: relative;
  width:100%;
  height:auto;
}

/*
---------------------------------------------------------------*/
.swiper-container.slide .swiper-slide {
  width:100%;
  max-width:500px;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 横画像 js
---------------------------------------------------------------*/
.swiper-container.slide .swiper-slide.swiper-yoko{
  width:100%;
  max-width:none;
}

@media screen and (min-width: 769px) {
.swiper-container.slide .swiper-slide {
  width:calc((100% - 30px) / 2);
  max-width:850px;
}
.swiper-container.slide .swiper-slide.swiper-yoko {
  width:100%;
  width:calc((100% - 30px) / 1.5);
  max-width:1200px;
}
}


/*
---------------------------------------------------------------*/
img.img-inner {
}


/* ビデオ ボックス
---------------------------------------------------------------*/
.video-contaner {
  position: relative;
  width: calc(100% + 5px);
  padding-bottom:6vw;
  overflow: hidden;
  display: none;
  font-size: 0rem;
  letter-spacing: -10rem;
  background-color:#fff;
  text-align:center;
}
@media screen and (min-width: 600px) {
.video-contaner {
  width: calc(100% + 10px);
}
}

@media screen and (min-width: 769px) {
.video-contaner {
   padding-bottom:30px;
 }
}

/*
---------------------------------------------------------------*/
.contents-videoBox {
  position: relative;
  display:inline-block;
  vertical-align: top;
  width: calc(50% - 5px);
  margin: 0px 5px 5px 0;
  overflow: hidden;
  background-color:#fff;
  aspect-ratio:16 / 9;
  max-width:500px;
}
.contents-videoBox::before {
  content: "";
  display:block;
  padding-top:56.25%;
}

@media screen and (min-width: 600px) {
.contents-videoBox {
  width: calc(50% - 10px);
  margin: 0px 10px 10px 0;
}
}
/* 縦長
-----------------------------*/
.contents-videoBox.checked {
  aspect-ratio:9 / 16;
  max-width:480px;
  pointer-events:none;
}
.contents-videoBox.checked::before {
  content: "";
  display:block;
  padding-top:177.7%;
}

@media screen and (min-width: 600px) {
.contents-videoBox.checked {
  max-width:430px;
}
}

/* 動画１つのとき
---------------------------------------------------------------*/
.contents-videoBox.full-size {
  width: calc(80% - 5px);
}
@media screen and (min-width: 600px) {
.contents-videoBox.full-size {
  width: calc(60% - 10px);
}
}

/* 
---------------------------------------------------------------*/
.contents-video-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index:2;
  background-color:#fff;
}
video {
  background-color:#fff;
}

/*共通ローダー
--------------------------------*/
.loading-box {
  position: absolute;
  display:block;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.6, .6);
  width: 74px;
  height: 74px;
  background: none;
  z-index: 99;
  pointer-events:none;
}
.loader-flower, 
.loader-flower-navi,
.loader-flower-bottom-navi,
.loader-flower-category-navi,
.loader-flower-modal{
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateZ(0) scale(0.74);
  backface-visibility: hidden;
  transform-origin: 0 0;
}
.loader-flower div,
.loader-flower-navi div, 
.loader-flower-bottom-navi div, 
.loader-flower-category-navi div,
.loader-flower-modal div { 
  box-sizing: content-box; 
}


.loader-flower.loading div,
.loader-flower-navi.loading div,
.loader-flower-bottom-navi.loading div,
.loader-flower-category-navi.loading div,
.loader-flower-modal.loading div {
  left: 47px;
  top: 24px;
  position: absolute;
  background: #535353;
  width: 6px;
  height: 12px;
  border-radius: 3px / 6px;
  transform-origin: 3px 26px;
  animation: loader-flower linear 1s infinite;
}

.loader-flower div:nth-child(1),
.loader-flower-navi div:nth-child(1),
.loader-flower-bottom-navi div:nth-child(1),
.loader-flower-category-navi div:nth-child(1),
.loader-flower-modal div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -0.9166666666666666s;
  background: #535353;
}
.loader-flower div:nth-child(2),
.loader-flower-navi div:nth-child(2),
.loader-flower-bottom-navi div:nth-child(2),
.loader-flower-category-navi div:nth-child(2),
.loader-flower-modal div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -0.8333333333333334s;
  background: #535353;
}
.loader-flower div:nth-child(3),
.loader-flower-navi div:nth-child(3),
.loader-flower-bottom-navi div:nth-child(3),
.loader-flower-category-navi div:nth-child(3),
.loader-flower-modal div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.75s;
  background: #535353;
}
.loader-flower div:nth-child(4),
.loader-flower-navi div:nth-child(4),
.loader-flower-bottom-navi div:nth-child(4),
.loader-flower-category-navi div:nth-child(4),
.loader-flower-modal div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.6666666666666666s;
  background: #535353;
}
.loader-flower div:nth-child(5),
.loader-flower-navi div:nth-child(5),
.loader-flower-bottom-navi div:nth-child(5),
.loader-flower-category-navi div:nth-child(5),
.loader-flower-modal div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.5833333333333334s;
  background: #535353;
}
.loader-flower div:nth-child(6),
.loader-flower-navi div:nth-child(6),
.loader-flower-bottom-navi div:nth-child(6),
.loader-flower-category-navi div:nth-child(6),
.loader-flower-modal div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.5s;
  background: #535353;
}
.loader-flower div:nth-child(7),
.loader-flower-navi div:nth-child(7),
.loader-flower-bottom-navi div:nth-child(7),
.loader-flower-category-navi div:nth-child(7),
.loader-flower-modal div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.4166666666666667s;
  background: #535353;
}
.loader-flower div:nth-child(8),
.loader-flower-navi div:nth-child(8),
.loader-flower-bottom-navi div:nth-child(8),
.loader-flower-category-navi div:nth-child(8),
.loader-flower-modal div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.3333333333333333s;
  background: #535353;
}
.loader-flower div:nth-child(9),
.loader-flower-navi div:nth-child(9),
.loader-flower-bottom-navi div:nth-child(9),
.loader-flower-category-navi div:nth-child(9),
.loader-flower-modal div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.25s;
  background: #535353;
}
.loader-flower div:nth-child(10),
.loader-flower-navi div:nth-child(10),
.loader-flower-bottom-navi div:nth-child(10),
.loader-flower-category-navi div:nth-child(10),
.loader-flower-modal div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.16666666666666666s;
  background: #535353;
}
.loader-flower div:nth-child(11),
.loader-flower-navi div:nth-child(11),
.loader-flower-bottom-navi div:nth-child(11),
.loader-flower-category-navi div:nth-child(11),
.loader-flower-modal div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.08333333333333333s;
  background: #535353;
}
.loader-flower div:nth-child(12),
.loader-flower-navi div:nth-child(12),
.loader-flower-bottom-navi div:nth-child(12),
.loader-flower-category-navi div:nth-child(12),
.loader-flower-modal div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
  background: #535353;
}

@keyframes loader-flower {
  0% {
   opacity: 1 
  }
  100%
  { 
    opacity: 0
  }
}
/* swiper
------------------------------------------------*/
:root {
  --swiper-navigation-size: 0;
}
.swiper-pagination-bullet {
  width: 5px !important;
  height: 5px !important;
  background: #999 !important;
  opacity: 0.6;
}
.swiper-pagination-bullet-active {
  background: #999 !important;
  opacity: 1;
}
.swiper-button-prev,
.swiper-button-next {
  color: #fff !important;
  background: #000 !important;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  opacity: 0.35;
  margin-top:-25px;
}
.swiper-button-next {
  right: 5px !important;
}
.swiper-button-prev {
 left: 5px !important;
}
/* 左右カスタム*/
.swiper-button-next:after, .swiper-button-prev:after {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  top:6.5px;
  right:8px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  pointer-events: none;
  transform: rotate(45deg);
}
.swiper-button-prev:after {
  transform: rotate(-135deg);
  right:auto;
  left:8px;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.15;
  cursor: auto;
  pointer-events: none;
}


/* ★★★ワークリスト
---------------------------------------------------------------*/
.works-wrapper {
  position: relative;
  padding: 0 5vw 60px;
  transition: opacity .8s ;
  opacity:0;
  text-align:center;
}
@media screen and (min-width: 768px) {
.works-wrapper{
  padding: 0 30px 60px;
}
}
.works-wrapper.show{
  opacity: 1;
}

/*
----------------------------------------- */
.work-list-title {
  position: relative;
  width:calc(100% - 10px);
  margin: 0 auto 10px;
  font-size: 2.0rem;
  letter-spacing: 0rem;
  font-family: 'Josefin_Sans';
  font-weight: 600;
  line-height:1;
  display: flex;
  flex-direction: row;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border:1px solid #333;
  padding:12px 0 10px;
}
@media screen and (min-width: 769px) {
.work-list-title  {
  font-size: 2.4rem;
}
}
/*waterfall.js
----------------------------------------- */
.works-box-inner {
  position: relative;
  overflow: hidden;
}
/* 
----------------------------------------- */
.direction-contents-box {
  position: absolute;
  display: block;
  width:calc((100% / 2) - 0px);
  overflow: hidden;
  border:1px solid white;
  padding: 2px;
}
@media screen and (min-width: 768px) {
.direction-contents-box {
  width:calc((100% / 3) - 0px);
  padding: 5px;
}
}
@media screen and (min-width: 1025px) {
.direction-contents-box {
  width:calc((100% / 4) - 0px);
}
}
/*
-------------------------------- */
.direction-contents {
  position: relative;
  opacity: 0;
  transform: scale(.0);
  visibility: hidden;
  cursor: pointer;
  padding-bottom:20px;

  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.direction-contents.ua-pc {
  padding-bottom:0;
}

/*
.direction-contents.open-fixed {
  position: relative;
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
*/

/*
-------------------------------- */
/*
.direction-contents.open {
  animation: animwaterfall .8s ease-in-out both;
  visibility: visible;
}

@keyframes animwaterfall {
  0% {
    opacity: 0;
    transform: scale(.0);

    opacity: 1;
    transform: scale(1);

  }
  30% {
    opacity: .5;
    transform: scale(.0);

  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
*/

/*画像
----------------------------------------- */
.direction-contents-image {
  position: relative;
  display:block;
  width:100%;
}
.checked .direction-contents-image {
  display:none;
}

/*
----------------------------------------- */
.direction-contents-image img.img-inner{
  position: relative;
  display:block;
}
/* 
---------------------------------------------------------------*/
.videoBox {
  position: relative;
  overflow: hidden;
  background-color:#fff;
  z-index:1;
  aspect-ratio:1.5 / 1;
}
.videoBox::before {
  content: "";
  display:block;
  padding-top:56.25%;
}

.videoBox.checked {
  aspect-ratio:9 / 16;
}
.videoBox.checked::before {
  content: "";
  display:block;
  padding-top:177.7%;
}

/* 
---------------------------------------------------------------*/
.video-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  background-color:#fff;
}
video {
  background-color:#fff;
}

/*タイトル
----------------------------------------- */
.direction-contents-title {
  position: absolute;
  display: block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity: 1;
 z-index:2;
}
.direction-contents-title.ua-pc {
  opacity: 0;
  transition: opacity .4s ;
  background-color:rgba(0,0,0,.35);
}
.direction-contents:hover .direction-contents-title.ua-pc{
  opacity: 1;
}
/*
----------------------------------------- */
a.direction-contents-title-link {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  width:100%;
  height:100%;
  top:0;
  left:0;
  padding:0 5px;
  line-height: 1.4;
  letter-spacing:0rem;
  font-size:1.0rem;
  font-family: 'Roboto';
  font-weight: 500;
  color:#333;
}
.ua-pc a.direction-contents-title-link {
  justify-content: center;
  font-size:1.3rem;
  color:#fff;
}

/* page
---------------------------------------------------------------------- */
.page {
  position: relative;
  width: 100%;
  text-align:center;
  margin: 30px auto;
  line-height: 1;
  letter-spacing:0rem;
  display:none;
}
.page-info {
  position: relative;
  width: 100%;
  font-size:1.2rem;
  margin-bottom: 10px;
  font-weight:normal;
}
span.all-item {
  font-weight:normal;
  padding-right: 5px;
}
.page-navi {
  position: relative;
  width: 100%;
  font-size:0rem;
  letter-spacing: -10rem;
  color:#111;
}
a.kai-page,.ima-page{
  position: relative;
  display:inline-block; 
  vertical-align: top;
  letter-spacing: 0rem;
  font-size:1.2rem;
  line-height: 1;
  margin:0 5px;
  padding: 10px;
  border:1px solid #ccc;
}
.ima-page{
  background-color:#eee;
  border:1px solid #ddd;
}
#box_kensaku {
  position: relative;
  width: 100%;
  font-size: 1.4rem;
  margin: 15px auto 0;
  color:#333;
}