@charset "utf-8";

/* - - - - - - - - - - - - - - - - - - - -
  #fv
- - - - - - - - - - - - - - - - - - - - */

#rwd-content #fv {
  background: #000; /* ファーストビューの背景色 */
}
#rwd-content #fv::before {
  /* ファーストビューの背景色を隠す白。画像の高さの半分。 */
  height: min( 225px , calc(225 / 1260 * 100vw ) );
}
#rwd-content #fv .lead p {
  color: #fff;
}

@media print, screen and (max-width: 767px){
  #rwd-content #fv::before {
    /* ファーストビューの背景色を隠す白。画像とテキストの切り替え境界線の位置。。 */
    height: calc(196 / 375 * 100vw );
  }
}

/* - - - - - - - - - - - - - - - - - - - -
  fv直下太字テキスト
- - - - - - - - - - - - - - - - - - - - */

@media print, screen and (max-width: 767px){
  #rwd-content #collaboration .text1 {
    /* spビューで、文字数がぎりぎりで改行してしまうので、改行しないようにする */
    white-space: nowrap;
  }
}

/* - - - - - - - - - - - - - - - - - - - -
  #points
- - - - - - - - - - - - - - - - - - - - */

#rwd-content #points .bg-box {
  background: #F0F0F0;
}

@media print, screen and (min-width: 768px){
  /* 左端の背景（PC） */
  #rwd-content #points .left-bg {
    background: url("/jp/showroom/yeb/events/zenless-collab/img/bg_001.png") no-repeat left top / 182px 100%;
  }
}

@media print, screen and (max-width: 767px){
  /* 左端の背景（SP） */
  #rwd-content #points .left-bg {
    background: url("/jp/showroom/yeb/events/zenless-collab/img/bg_001_sp.png") no-repeat left top / calc(65 / 375 * 100%) calc(100% - 41px);
  }
  
  /* ポイント「1」のタイトルが実機で折り返すので、改行しないように調整。 */
  #rwd-content #points .point.p1 .title {
    white-space: nowrap;
  }
}

/* - - - - - - - - - - - - - - - - - - - -
  #cp (タイトル周り)
- - - - - - - - - - - - - - - - - - - - */

#rwd-content #cp .cp-title {
  background: #C01E19;
  box-shadow: 12px 12px 0 0 #000;
  color: #fff;
}

/* .cp-sub-title */

#rwd-content #cp .cp-sub-title {
  background: #000;
}
#rwd-content #cp .cp-sub-title .group1 {
  color: #E2FA4F;
}
#rwd-content #cp .cp-sub-title .group2 {
  color: #fff;
}
#rwd-content #cp .cp-sub-title .group2 .small {
  color: #fff;
}
#rwd-content #cp .cp-sub-title .group3 {
  color: #E2FA4F;
}
#rwd-content #cp .cp-sub-title .group3 .small {
  color: #E2FA4F;
}

@media print, screen and (min-width: 768px){
  #rwd-content #cp .cp-sub-title .group1 {
    border: solid 1px #fff;
  }
}

/* - - - - - - - - - - - - - - - - - - - -
  #cp (各cp内コンテンツ・第1弾)
- - - - - - - - - - - - - - - - - - - - */

@media print, screen and (min-width: 768px){
  #rwd-content #cp .cp1 .cp-cont {
    margin-top: 30px;
  }
  #rwd-content #cp .cp1 .cp-cont .items {
    margin-left: calc(96 / 808 * 100%);
    display: flex;
    gap: 0 calc(16 / 712 * 100%);
  }
  #rwd-content #cp .cp1 .cp-cont .items li {
    width: calc(159 / 712 * 100%);
  }
  #rwd-content #cp .cp1 .cp-cont .notes {
    margin: 38px 0 0 calc((96 / 808 * 100%) + 8px);
  }
  #rwd-content #cp .cp1 .cp-cont .notes li {
    font-size: 1.6rem;
    line-height: calc(28 / 16);
    text-indent: -1em;
    margin-left: 1em;
  }
}

@media print, screen and (max-width: 767px){
  #rwd-content #cp .cp1 .cp-cont {
    margin-top: 30px;
  }
  #rwd-content #cp .cp1 .cp-cont .items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 0;
  }
  #rwd-content #cp .cp1 .cp-cont .items li {
    width: calc(162 / 338 * 100%);
  }
  #rwd-content #cp .cp1 .cp-cont .notes {
    margin: 48px 0 0 8px;
  }
  #rwd-content #cp .cp1 .cp-cont .notes li {
    font-size: 1.5rem;
    line-height: calc(25 / 15);
    text-indent: -1em;
    margin-left: 1em;
  }
  #rwd-content #cp .cp1 .cp-cont .notes li + li {
    margin-top: 0.5em;
  }
}

/* - - - - - - - - - - - - - - - - - - - -
  #cp (各cp内コンテンツ・第2弾)
- - - - - - - - - - - - - - - - - - - - */

@media print, screen and (min-width: 768px){
  
  #rwd-content #cp .cp2 .cp-sub-title {
    /* 画面を狭めた時、クリアファイルが見出しテキストを隠してしまうので見出し右余白を調整 */
    padding-right: 29%;
  }
  
  #rwd-content #cp .cp2 .cp-cont {
    margin-top: -112px;
  }
  #rwd-content #cp .cp2 .cp-cont .item {
    text-align: right;
    position: relative;
    z-index: 4;
  }
  #rwd-content #cp .cp2 .cp-cont .item img {
    width: calc(268 / 808 * 100%);
  }
  #rwd-content #cp .cp2 .cp-cont .notes {
    width: 100%;
    overflow: hidden;
    margin-top: -137px;
    padding: 55px 32% 35px 25px;
    background: #EBEBEB;
    position: relative;
    box-sizing: border-box;
  }
  #rwd-content #cp .cp2 .cp-cont .notes::before {
    width: 400px;
    height: 46px;
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    left: calc(486 / 808 * 100%);
    top: 0;
    z-index: 2;
    transform-origin: left top;
    transform: skewX(34deg);
  }
  #rwd-content #cp .cp2 .cp-cont .notes ul li {
    font-size: 1.6rem;
    line-height: calc(28 / 16);
    text-indent: -1em;
    margin-left: 1em;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1025px){
  #rwd-content #cp .cp2 .cp-cont .notes {
    margin-top: -80px;
  }
}

@media print, screen and (max-width: 767px){
  
  #rwd-content #cp .cp2 .cp-sub-title {
    /* クリアファイルが見出しに重なる分、出材イン上見出し下部のパディングが拾いので、広くする調整。 */
    padding-bottom: 38px;
  }
  
  #rwd-content #cp .cp2 .cp-cont {
    margin-top: -27px;
  }
  #rwd-content #cp .cp2 .cp-cont .rwd-main-content-group,
  #rwd-content #cp .cp2 .cp-cont .rwd-grid,
  #rwd-content #cp .cp2 .cp-cont .rwd-grid-item {
    display: contents;
  }
  #rwd-content #cp .cp2 .cp-cont .item {
    width: calc(268 / 375 * 100%);
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 4;
  }
  #rwd-content #cp .cp2 .cp-cont .notes {
    width: 100%;
    overflow: hidden;
    margin-top: calc(-63 / 375 * 100vw);
    padding: calc(88 / 375 * 100vw) calc(20 / 375 * 100%) 30px;
    background: #EBEBEB;
    position: relative;
    box-sizing: border-box;
  }
  #rwd-content #cp .cp2 .cp-cont .notes::before {
    width: 200px;
    height: 63px;
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    left: calc(312 / 375 * 100%);
    top: 0;
    z-index: 2;
    transform-origin: left top;
    transform: skewX(26deg);
  }
  #rwd-content #cp .cp2 .cp-cont .notes ul li {
    font-size: 1.5rem;
    line-height: calc(25 / 15);
    text-indent: -1em;
    margin-left: 1em;
  }
  #rwd-content #cp .cp2 .cp-cont .notes ul li + li {
    margin-top: 0.5em;
  }
}