/* PC：仮で設定しておりますので、調整の際は削除してください。 */

#breadcrumb{
  display: none;
}
#Contents,
#Wrap{
  padding: 0;
  margin: 0;
}

.header-nav.header-nav_fixed,
.newsticker {
  display: none;
}

header{
  text-align: left;
  position: fixed;
  top: 0;
  z-index: 99;
  transition: transform 0.3s 0.3s;
}

header.hidden {
  display: none;
}

.btn-menu {
  margin-top: 0;
}

@media screen and (max-width: 750px) {
  .btn-menu__icon.btn-search,
  .btn-menu__icon.btn-cart {
    display: none;
  }
}

.header-nav.header-nav_fixed,
.newsticker {
  display: none;
}
header{
  text-align: left;
  position: fixed;
  top: 0;
  z-index: 99;
  transition: transform 0.3s 0.3s;
}
header.hidden {
  display: none;
}
.btn-menu {
  margin-top: 0;
}
@media screen and (max-width: 750px) {
  .header .header-inner{
    padding: 0;
  }
  .btn-menu__icon.btn-search,
  .btn-menu__icon.btn-cart {
    display: none;
  }
  .main-area {
    padding-top: 0!important;
  }
  .header .header-logo{
    display: none;
  }
  .header .btn-menu .border-t,
  .header .btn-menu .border-m,
  .header .btn-menu .border-b{
    background: #000;
  }
  .header .btn-menu.open .border-t,
  .header .btn-menu.open .border-m,
  .header .btn-menu.open .border-b{
    background: #000;
  }
}

#issue109 {
  --font-en: 'Times-New-Roman', Times, serif;
  --font-en02: 'Times-New-Roman-Bold', Times, serif;
  --color-black: #231815;
  --color-fv_bg: #bbd9ef;
  --color-lblue: #b6d3e9;
  --color-red: #932f3e;
  --color-beige: #aca091;
  --color-graige: #e0dfda;
  --color-white: #fff;
  --color-gray: #b9bcb3;
  background: var(--color-white);
  overflow: clip;
}

#issue109 a{
  display: inline-block;
}

#issue109 img,
#issue109 picture,
#issue109 video{
  display: inline-block;
  width: 100%;
  height: auto;
}
/* #issue109 a:hover{
  transition: .5s;
  opacity: .7;
} */
#issue109 span{
  display: inline-block;
}
#issue109 li{
  list-style: none;
}
#issue109 .flexArea{
  display: flex;
  width: 100%;
}
#issue109 .gridArea{
  display: grid;
  width: 100%;
}


@media only screen and (min-width: 768px) {
  #issue109 .spOnly {
    display: none!important;
  }
  #issue109 .pcOnly {
    display: block;
  }
  #issue109 .flexAreaPc{
    display: flex;
    /* justify-content: space-between; */
  }

}

@media screen and (max-width: 767px) {
  #issue109 .spOnly {
    display: block;
  }
  #issue109 .pcOnly {
    display: none!important;
  }
  #issue109 .flexAreaSp{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }

}


/*================================
  共通スタイル
=================================*/


/*--------------------------------
  font
--------------------------------*/
#issue109 .font-en{
  font-family: var(--font-en);
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  color: var(--color-black);
  letter-spacing: 0.025em;
}
#issue109 .font-en02{
  font-family: var(--font-en02);
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  color: var(--color-black);
  letter-spacing: 0.025em;
}
/* #issue109 .font-en03{
  font-family: var(--font-en03);
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  color: var(--color-black);
} */

@font-face {
  font-family: 'Times-New-Roman';
  src: url('../font/Times-New-Roman.woff') format('woff'),
}
@font-face {
  font-family: 'Times-New-Roman-Bold';
  src: url('../font/Times-New-Roman-Bold.woff') format('woff'),
}
/* @font-face {
  font-family: 'UniversLTStd-Light';
  src: url('../font/UniversLTStd-Light.woff') format('woff'),
} */

@media screen and (max-width: 767px) {
  #issue109 .font-en01{
    font-size: calc(22* (100vw / 750));
  }
}


.footer {
  padding-top: 0;
}

@media only screen and (min-width: 768px) {

}
@media screen and (max-width: 767px) {

}
/*================================
  first view
=================================*/

@media only screen and (min-width: 768px) {
  #issue109 .fv{
    width: 100vw;
    height: 100vh;
    background-color: var(--color-fv_bg);
  }
 #issue109 .fv__cont{
  width: 100%;
  height: 100%;
  flex-direction: column;
  /* margin: 0 auto;
  padding: 11.7rem 0 0 1.8rem; */
 }
 #issue109 .fv-ttl__cont01{
  align-self: flex-start;
  justify-self: flex-start;
  letter-spacing: 0.053em;
  margin-left: 5.2rem;
  margin-top: 5.9%;
 }
 #issue109 .fv-txt__cont02{
  align-self: center;
  margin: auto 1.8rem auto;
  padding-bottom: 6%;
  padding-top: 0.8rem;
  width: 74.6rem;
 }
 #issue109 .fv-ttl01{
  font-size: 1.5rem;
  padding-bottom: 1.1rem;
 }
 #issue109 .fv-ttl02{
  font-size: 1.4rem;
  word-spacing: -0.2rem;
  letter-spacing: 0.052em;
 }
 #issue109 .fv-ttl02:nth-child(2){
    position: relative;
    padding-bottom: 0.7rem;
    word-spacing: -0.1rem;
    letter-spacing: 0.032em;
  }
  #issue109 .fv-ttl02 .line{
    text-decoration: line-through;
  }
  #issue109 .fv-txt{
    font-size: 1.8rem;
    text-align: center;
    line-height: 1.35;
    word-spacing: 0.15rem;
    letter-spacing: 0.023em;
  }
}
@media screen and (max-width: 767px) {
  #issue109 .mvWrap__img{
    width: 100%;
    background-color: #fff;
    padding-bottom: calc(10* (100vw / 750));
  }
  #issue109 .mvWrap__img{
    position: relative;
    width: 100%;
    height: auto;
  }
  #issue109 .logo{
    position: absolute;
    width: calc(352.18*(100vw / 750));
    height: calc(49.02*(100vw / 750));
    top: calc(519.02*(100vw / 750));
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    pointer-events: none;
  }
  #issue109 .mvWrap__img{
    position: relative;
    width: 100%;
    height: auto;
  }
  #issue109 .fv{
    width: 100vw;
    height: calc(1080* (100vw / 750));
    padding-top: calc(24* (100vw / 750));
    margin-bottom: calc(5*(100vw / 750));
    background-color: var(--color-fv_bg);
  }
  #issue109 .fv__cont{
    width: calc(700.21* (100vw / 750));
    justify-content: space-between;
    margin: 0 auto;
  }
  #issue109 .fv-ttl01{
    font-size: calc(24*(100vw / 750));
    padding-top: calc(6*(100vw / 750));
    padding-left: calc(5*(100vw / 750));
   }
   #issue109 .fv-ttl02{
    font-size: calc(30* (100vw / 750));
    letter-spacing: 0.01em;
    padding-right: calc(3*(100vw / 750));
   }
}
/*================================
  panel area
=================================*/
#issue109 .p-area{
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

@media only screen and (min-width: 768px) {
  #issue109 .p-area{
    padding-top: 1rem;
    gap: 1rem;;
  }
  #issue109 .panel{
    position: relative;
    width: 100%;
  }
  #issue109 .p-area .creditWrap{
    position: absolute;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
  }
  #issue109 .p-area .creditWrap__list{
    position: relative;
    opacity: 0;
    transition: 0.5s;
    writing-mode: vertical-rl;
    column-gap: 0.4rem;
    right: 3.1rem;
    margin: auto 0;
    padding-top: 2.7rem;
  }
  #issue109 .panel:hover .creditWrap__list{
    opacity: 1;
    pointer-events: none;
  }
  #issue109 .p-area .credit-item{
    font-size: 1.4rem;
    pointer-events: all;
    letter-spacing: -0.015em;
  }
  #issue109 .p-area .credit-item a{
    display: inline-block;
    margin-bottom: 0.4rem;
  }
  #issue109 .p-area .credit-item:last-child a{
    margin-bottom: 0;
    pointer-events: all;
  }
  #issue109 .p-area .crdt__nmbr{
    font-size: 1.4rem;
    padding: 0 2.2rem 1.5rem 0;
  }
}

@media screen and (max-width: 767px) {
  #issue109 .p-area{
    gap: calc(5* (100vw / 750));
    margin-bottom: calc(100*(100vw / 750));
  }

}

/*================================
  staff list
=================================*/
@media screen and (min-width: 768px) {
  #issue109 .sec16 .container__inner{
    position: relative;
    height: 100vh;
    width: 100%;
    justify-content: left;
    flex-direction: row-reverse;
    align-items: flex-start;
    margin-left: auto;
  }
  #issue109 .vai_btn{
    width: 17.66689rem;
    height: 1.71406rem;
    padding-left: 0.3rem;
    padding-right: 0.2rem;
  }
  #issue109 .lpcatalog__footer__staff_credit{
    font-size: 1.6rem;
    letter-spacing: 0.035em;
    line-height: 1.54;
    text-align: center;
    padding-bottom: 2.6rem;
  }
  #issue109 .lpcatalog__footer__link{
    font-size: 1.8rem;
    letter-spacing: 0.055em;
    word-spacing: 0.3rem;
    text-align: center;
  }
  #issue109 .staff-list{
    position: absolute;
    bottom: 6.3rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 767px) {
  #issue109 .staff-list{
    position: absolute;
    left: calc(31.5* (100vw / 750));
    bottom: calc(31* (100vw / 750));
  }
  #issue109 .lpcatalog__footer__staff_credit{
    font-size: calc(20* (100vw / 750));
    letter-spacing: 0.035em;
    line-height: 1.66;
    padding-bottom: calc(66*(100vw / 750));
    pointer-events: none;
  }
  #issue109 .lpcatalog__footer__link{
    font-size: calc(23* (100vw / 750));
    padding-left: calc(5.5*(100vw / 750));
    word-spacing: calc(1.8*(100vw / 750));
  }
  #issue109 .vai_btn{
    position: absolute;
    bottom: calc(2*(100vw / 750));
    left: calc(-1*(100vw / 750));
    width: calc(221.1084*(100vw / 750));
    height: calc(17.1406 px*(100vw / 750));
  }
  #issue109 .lpcatalog__footer__link .font-en{
    position: relative;
    bottom: calc(12*(100vw / 750));
    padding-left: calc(20*(100vw / 750));
    letter-spacing: 0.055em;
  }
}

/*================================
  animation
=================================*/
#issue109 .js-scrollIn{
  opacity: 1;
  transform: translateY(0rem);
}
.js-fade_img,
.js-fade {
  opacity: 0;
  transition: opacity 800ms, transform 500ms;
}

.js-fade.active,
.js-fade_img.active {
  opacity: 1;
}

@media screen and (min-width: 768px) {
  #issue109 .delay2s{
    transition-delay: .2s;
  }
  #issue109 .delay4s{
    transition-delay: .4s;
  }
}
@media screen and (max-width: 767px) {
  #issue109 .delay2s_sp{
    transition-delay: .2s;
  }
}
/*--------------------------------
  swiper
--------------------------------*/

/*===================== pagination */
#issue109 .swiper-pagination{
  display: flex;
  justify-content: left;
  bottom: 0;
}
@media screen and (max-width: 767px) {
  #issue109 .swiper-pagination span:not(:first-child){
    margin-left: calc(15* (100vw / 750))!important;
  }
  #issue109 .img02WrapImg-pagination{
    left: 50%;
    bottom: calc(-69.2*(100vw / 750));
  }
}
#issue109 .swiper-pagination-clickable .swiper-pagination-bullet{
  background: #B5B5B6;
  /* border: solid calc(1* (100vw / 750)) #000; */
  border-radius: 100%;
  box-sizing: border-box;
  opacity: 1;
  margin: 0!important;
  width: calc(10* (100vw / 750));
  height: calc(10* (100vw / 750));
}
#issue109 span.swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: #000;
}
#issue109 span.swiper-notification{
  display: none!important;
}
#issue109 .swiper{
  overflow: visible;
}
/* //pagination */


/*================================
  pc
=================================*/
@media screen and (min-width: 768px) {
/* アクティブな画像の枠線を変更 */
/* .sub-img li.current img {
  border: 2px solid red;
  transition: border .5s;
} */
/* レイアウトのためのスタイル */
  #issue109 .sec__wrapper{
    position: relative;
    top: 0;
    width: 100vw;
  }
  #issue109 .sec__inner{
    position: sticky;
    height: 100vh;
    top: 0;
    z-index: 2;
  }
  #issue109 .sec{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
  }

  #issue109 .sec{
    opacity: 0;
    pointer-events: none;
    transform: 0.8s;
  }
  #issue109 .sec.is_view{
    opacity: 1;
    pointer-events: all;
  }
  #issue108 [data-look-target],
  #issue108 .sec01{
    opacity: 0;
    transition: 0.5s;
    visibility: hidden;
  }
  #issue108 [data-look-target].is_view,
  #issue108 .sec01.is_view {
    opacity: 1;
    visibility: visible;
  }
  #issue109 .trigger__wrapper{
    position: relative;
    visibility: hidden;
    height: 1575vh;
    top: -100vh;
    z-index: 1;
  }
  #issue109 .trigger{
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    margin-bottom: 5vh;
    pointer-events: none;
  }
  #issue109 .trigger:first-child{
    background-color: var(--color-lblue);
  }
  #issue109 .trigger:nth-child(2){
    background-color: var(--color-red);
  }
  #issue109 .trigger:nth-child(3){
    background-color: var(--color-gray);
  }
  #issue109 .trigger:nth-child(4){
    background-color: var(--color-graige);
  }
  #issue109 .container__inner{
    position: relative;
    width: 100%;
    height: 100vh;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: flex-end;
    margin-left: auto;
  }
  #issue109#issue109 .main-img {
    width: 50%;
    margin-left: 1.3rem;
    background-color: #fff;
    cursor: pointer;
  }
  #issue109 .main-img img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }
  #issue109 .left-cont__wrap{
    width: 50%;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 5.2rem;
    height: 100vh;
    /* height: 81.7vh; */
  }
  #issue109 .contents-ttl__cont{
    padding-left: 0.1rem;
    margin-top: 9.8%;
  }
  #issue109 .sec16 .contents-ttl__cont{
    margin-left: 5.2rem;
    margin-top: 4.78%;
  }
  #issue109 .sub-img__wrap{
    margin-bottom: 10%;
  }
  #issue109 .sec02 .sub-img__wrap,
  #issue109 .sec04 .sub-img__wrap,
  #issue109 .sec05 .sub-img__wrap,
  #issue109 .sec11 .sub-img__wrap,
  #issue109 .sec13 .sub-img__wrap,
  #issue109 .sec14 .sub-img__wrap,
  #issue109 .sec15 .sub-img__wrap {
    margin-bottom: 7.7%;
  }
  #issue109 .contents-ttl01{
    font-size: 1.5rem;
    padding-bottom: 1rem;
  }
  #issue109 .contents-ttl02{
    font-size: 1.4rem;
  }
  #issue109 .contents-ttl02:nth-child(2){
    position: relative;
    padding-bottom: 0.7rem;
  }
  #issue109 .contents-ttl02 .line{
    text-decoration: line-through;
  }
  #issue109 .sec .crdt__nmbr{
    font-size: 1.953rem;
  }
  /* ========== credit ========= */
  #issue109 .sec .creditWrap{
    width: 42rem;
  }
  #issue109 .sec07 .creditWrap,
  #issue109 .sec08 .creditWrap,
  #issue109 .sec12 .creditWrap {
    width: 100%;
  }
  #issue109 .sec14 .creditWrap {
    width: 55rem;
  }
  #issue109 .sec .creditWrap__list{
    flex-wrap: wrap;
    row-gap: 1.1rem;
  }
  #issue109 .sec .credit-item{
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    padding-right: 0.3rem;
  }
  #issue109 .sec .credit-item a{
    padding-right: 0.2rem;
  }
  /* ========== img ========= */
  #issue109 .sub-img {
    margin: 0.9rem 0 2.3rem 0.2rem;
    column-gap: 1rem;
  }
  #issue109 .main-img a {
    width: 100%;
  }
  #issue109 .sub-img li {
    width: 19.691rem;
    cursor: pointer;
  }
  #issue109 .sec01{
    background-color: var(--color-lblue);
  }
  #issue109 .sec02{
    background-color: var(--color-red);
  }
  #issue109 .sec03{
    background-color: var(--color-beige);
  }
  #issue109 .sec04{
    background-color: var(--color-graige);
  }
  #issue109 .sec05{
    background-color: var(--color-lblue);
  }
  #issue109 .sec06{
    background-color: var(--color-white);
  }
  #issue109 .sec07{
    background-color: var(--color-beige);
  }
  #issue109 .sec08{
    background-color: var(--color-gray);
  }
  #issue109 .sec09{
    background-color: var(--color-white);
  }
  #issue109 .sec10{
    background-color: var(--color-graige);
  }
  #issue109 .sec11{
    background-color: var(--color-gray);
  }
  #issue109 .sec12{
    background-color: var(--color-lblue);
  }
  #issue109 .sec13{
    background-color: var(--color-red);
  }
  #issue109 .sec14{
    background-color: var(--color-beige);
  }
  #issue109 .sec15{
    background-color: var(--color-white);
  }
  #issue109 .sec16{
    background-color: var(--color-lblue);
  }
}

/*================================
  sp
=================================*/

@media screen and (max-width: 767px) {
  #issue109 .sec{
    position: relative;
    font-size: calc(19.53* (100vw / 750));
    /* width: 69.29rem; */
    z-index: 1;
    width: 100%;
    height: auto;
    margin-bottom: calc(10* (100vw / 750));
  }
  /* ========== credit ========= */
  #issue109 .crdt__nmbr{
    position: absolute;
    font-size: calc(19.53* (100vw / 750));
    top: calc(30* (100vw / 750));
    left: calc(33* (100vw / 750));
    line-height: 1;
    z-index: 10;
  }
  #issue109 .creditWrap{
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
  }
  #issue109 .creditWrap__list{
    position: relative;
    writing-mode: vertical-rl;
    right: calc(21.2* (100vw / 750));
    column-gap: calc(4* (100vw / 750));
    transition: 0.5s;
    margin: auto 0;
    /* padding-top: 2.7rem; */
    pointer-events: none;
  }
  #issue109 .credit-item{
    font-size: calc(17* (100vw / 750));
    letter-spacing: -0.015em;
    pointer-events: none;
  }
  #issue109 .credit-item a{
    display: inline;
    margin-bottom: calc(1* (100vw / 750));
    padding-right: calc(20*(100vw / 750));
    padding-left: calc(20*(100vw / 750));
    pointer-events: all;
  }
  #issue109 .credit-item:last-child a{
    margin-bottom: 0;
  }
  /* ========== img ========= */
  #issue109 .sec__img{
    position: relative;
    z-index: 1;
  }
  /* ========== black section ========= */
  #issue109 .sec09,
  #issue109 .sec13,
  #issue109 .sec25,
  #issue109 .sec34 {
    position: relative;
    width: 100%;
    height: calc(1080* (100vw / 750));
  }
  #issue109 .sec-ttl__cont{
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: calc(697* (100vw / 750));
    top: calc(25* (100vw / 750));
    left: 50%;
    transform: translateX(-50%);
  }
  #issue109 .sec-ttl01{
    font-size: calc(24*(100vw / 750));
    padding-left: calc(3*(100vw / 750));
    padding-top: calc(5*(100vw / 750));
  }
  #issue109 .sec-ttl02{
    font-size: calc(30* (100vw / 750));
  }
  #issue109 .sec09{
    background-color: var(--color-red);
  }
  #issue109 .sec13{
    background-color: var(--color-gray);
  }
  #issue109 .sec25{
    background-color: var(--color-beige);
  }
  #issue109 .sec34{
    background-color: var(--color-lblue);
    margin-bottom: 0;
  }
}