@charset 'utf-8';


#attempt {
  position: relative;
  background: url("/rd/carbon/attempt/images/attempt_bg.jpg") center center no-repeat #111;
  background-size: cover;
  overflow: hidden;
}

.decoration .attempt {
  width: 24.077vw;
}

.title {
  color: #fff;
}

.attempt-description {
  padding: 1.562vw 0 4.15vw;
  line-height: 1.7;
  color: #fff;
  border-bottom: 1px solid #fff;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .decoration .attempt {
    width: 32vw;
  }

  #attempt {
    background-image: url("/rd/carbon/attempt/images/attempt_bg_sp.jpg");
  }

  #attempt .title {
    font-size: 1.875rem;
    color: #fff;
  }

  #attempt.common-block {
    padding-top: 11.6vw;
  }

  .attempt-description {
    font-size: 0.9375rem;
    padding: 1.8vw 0 6vw;
  }
}

/*panel*/
#panel {
  margin-top: 4.615vw;
}

#panel .title img {
  max-width: 87.848vw;
  width: 100%;
  height: auto;
  margin-left: -2vw;
}

#panel h2 {
  color: white;
  margin-bottom: 1vw;
  margin-top: -1vw;
}

#panel p.theme_wrap {
  line-height: 1;
}

#panel p.theme_wrap span {
  color: white;
  border-left: 1px solid white;
  border-right: 1px solid white;
  padding: 0vw 1vw;
}

#panel h4 span {
  display: inline-block;
  background-color: white;
  padding: 0.7vw 1vw;
  font-size: 1.875rem;
  font-family: "Hiragino Kaku Gothic ProN";
  font-weight: 600;
  margin: 0 0 1.562vw;
}

#panel .white {
  margin: 1.562vw 0 3vw;
  color: white;
  font-size: 1.125rem;
  font-weight: 500;
}

#panel .guest_info ul {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  list-style: none;
}

#panel .guest_info ul li:nth-child(1) {
  width: 15%;
}

#panel .guest_info ul li:nth-child(2) {
  width: 85%;
}

#panel .guest_info ul li:nth-child(1) img {
  /* max-width: 10.981vw; */
  width: 100%;
  height: auto;
}

#panel .guest_info ul li:nth-child(2) p.middle {
  margin: 4.562vw 0 1.562vw;
}

#panel .guest_info ul li:nth-child(2) p.middle span {
  display: inline-block;
  background-color: white;
  padding: 0.2vw 0.7vw 0.2vw 1.8vw;
  font-size: 1.125em;
  font-family: "Hiragino Kaku Gothic ProN";
  font-weight: 600;
}

#panel .guest_info ul li:nth-child(2) h3.large {
  margin-top: -0.5vw;
}

#panel .guest_info ul li:nth-child(2) h3.large span.large {
  display: inline-block;
  background-color: white;
  padding: 0.5vw 0.5vw 0.5vw 1.8vw;
  font-size: 1.5rem;
  font-family: "Hiragino Kaku Gothic ProN";
  font-weight: 600;

}

#panel .guest_info ul li:nth-child(2) h3.large span.large span {
  font-size: 70%;
}

#panel .guest_info ul li:nth-child(2) p.copy {
  padding-left: 1.8vw;
  font-size: 0.9375rem;
  color: #fff;
  margin: 1.3vw 0 1.562vw;
  font-weight: 500;
  line-height: 1.7;
}

#panel .container {
  margin: 4vw auto 0;
}

/* SP */
@media only screen and (max-width: 768px) {
  #panel {
    background: url("../images/bg_02_sp.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    padding: 0;
  }

  #panel .title img {
    max-width: 87.848vw;
    width: 100%;
    height: auto;
    margin-left: -2vw;
  }

  #panel h2 {
    color: white;
    margin-bottom: 3vw;
    margin-top: -1vw;
    font-size: 1.5rem;
    line-height: 1.6;
  }

  #panel p.theme_wrap {
    margin: 6vw 0 5.562vw;
  }

  #panel p.theme_wrap span {
    color: white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    padding: 0.3vw 3vw;
    font-size: 0.875rem;
  }

  #panel h4 {
    background-color: white;
    text-align: center;
    padding: 0;
  }

  #panel h4 span {
    background-color: none;
    padding: 1vw;
    line-height: 1.4;
    font-size: 1.125rem;
    font-family: "Hiragino Kaku Gothic ProN";
    font-weight: 600;
  }

  #panel .white {
    color: white;
    font-size: 0.9375rem;
  }

  #panel .guest_info {
    margin-top: 8vw;
  }

  #panel .guest_info ul {
    display: flex;
    flex-direction: row;
  }

  #panel .guest_info ul li:nth-child(1) {
    width: 50%;
    z-index: 20;
  }

  #panel .guest_info ul li:nth-child(2) {
    width: 50%;
    z-index: 10;
  }

  #panel .guest_info ul li:nth-child(1) img {
    max-width: 42.133vw;
    width: 100%;
    height: auto;
  }

  #panel .guest_info ul li:nth-child(2) p.middle {
    margin-top: 10vw;

  }

  #panel .guest_info ul li:nth-child(2) p.middle span {
    background-color: white;
    padding: 1vw 5vw 0vw 4vw;
    font-size: 0.9375rem;
    margin-left: -3vw;

  }

  #panel .guest_info ul li:nth-child(2) h3.large {
    margin-top: 4vw;
  }

  #panel .guest_info ul li:nth-child(2) h3.large span.large {
    background-color: white;
    padding: 2vw 4vw 2vw 4vw;
    font-size: 1.5rem;
    margin-left: -3vw;
    display: block;
    line-height: 1;

  }

  #panel .guest_info ul li:nth-child(2) h3.large span.large span {
    font-size: 14px;
  }

  #panel .guest_info ul li:nth-child(2) p.copy {
    padding-left: 0;

  }

  #panel p.copy {
    margin-top: 5vw;
    margin-bottom: 10vw;
    font-size: 0.9375rem;
    color: #fff;
    font-weight: 500;
    line-height: 1.7;
  }

  #panel .container {
    margin: 10vw auto 0;
    padding-bottom: 14vw;
  }
}


.link {
  text-align: center;
  padding: 35px 0 43px;
  margin-top: 3.4615vw;
}

#attempt .link a {
  width: 315px;
  height: 57px;
  line-height: 57px;
  font-size: 1.125rem !important;
}

#grid {
  margin-top: 7.6923vw;
}

@media screen and (max-width: 768px) {
  .link {
    padding: 32px 0;
  }

  #attempt .link a {
    display: inline-block;
    width: 300px;
    margin: 0;
    font-size: 0.9375rem;
  }

  #attempt .link a+a {
    margin-top: 4.8vw;
  }

  #grid {
    overflow: hidden;
    margin: 13.6923vw 0 16vw;
  }

  #grid .grid-content {
    position: relative;
    display: flex;
    justify-content: space-between;
  }

  #grid .grid-content:last-of-type {
    margin-top: 6vw;
  }

  #grid .grid-content>.grid-right {
    display: flex;
    flex-direction: column;
  }

  #grid .grid-content img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }

  #grid .grid-content .img01 {}

  #grid .grid-content .img02 {}

  #grid .grid-content .img03 {}

  #grid .grid-content .img04 {}

  #grid .grid-content .img05 {}

  #grid .grid-content .img06 {}

  #grid .grid-content .img07 {}

  .Item-Box-ImgBox.first {
    width: 39.2vw;
    height: 25.866666666666667vw;
    margin-top: 18vw;
    margin-right: 6vw;
  }

  .Item-Box-ImgBox.second {
    width: 23.466666666666665vw;
    height: 34.66666666666667vw;
    margin: -2vw 0 0 5vw;
  }

  .Item-Box-ImgBox.third {
    width: 82.39999999999999vw;
    height: 50.13333333333333vw;
  }

  .Item-Box-ImgBox.fourth {
    width: 51.46666666666667vw;
    height: 66.4vw;
    margin: 0 0 0 -10vw;
  }

  .Item-Box-ImgBox.fifth {
    width: 48.266666666666666vw;
    height: 33.3vw;
    margin: 6vw 16vw 0 0;
  }

  .Item-Box-ImgBox.sixth {
    width: 47.46666666666667vw;
    height: 27.200000000000003vw;
    margin: 0;
  }

  .Item-Box-ImgBox.seventh {
    width: 27.2vw;
    height: 17.07vw;
    margin: 6vw 0 0;
  }

}

/* ************************

  画像アニメーション

 **************************/

.Item-Box {
  overflow: hidden;
}

.Item-Box-ImgBox {
  overflow: hidden;
  position: relative;
  width: 100%;
  -webkit-transform: translate3d(-100.5%, 0, 0);
  transform: translate3d(-100.5%, 0, 0);
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: cubic-bezier(.075, .82, .165, 1);
  transition-timing-function: cubic-bezier(.075, .82, .165, 1);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.Item-Box-ImgBox:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: #000;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: right;
  transform-origin: right;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: cubic-bezier(.075, .82, .165, 1);
  transition-timing-function: cubic-bezier(.075, .82, .165, 1);
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}

.Item-Box.isShow .Item-Box-ImgBox {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.Item-Box.isShow .Item-Box-ImgBox:before {
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}

@media screen and (max-width: 768px) {
  .Item-Box {
    overflow: initial;
  }

  .Item-Box-ImgBox {
    display: inline-block;
  }
}