@charset "UTF-8";

/* 和文フォント */
.ryo-gothic-plusn-medium {
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.ryo-gothic-plusn-bold {
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* 欧文フォント */
.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* 調整 */
img {
  width: 100%;
}

/* ----SP---- */
@media only screen and (max-width: 767px) {
.sp {
  display: block;
}
.pc {
  display: none;
}

main {
  background-image: url(/campaign/2024/cap/0808/sp/images/sp-bg-green.jpg);
  background-color: #C1D349;
}

/* --OP-- */
.op__container {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 999;
  background-image: url(/campaign/2024/cap/0808/sp/images/sp-bg-green.jpg);
  background-color: #C1D349;
}
.op_inner {
  width: 82px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.op_inner .logo {
  margin-bottom: 21px;
}
.op_inner #bar_container {
  width: 100%;
  height: 1px;
}

/* --TOP-- */
.top__container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 100;
  background-image: url(/campaign/2024/cap/0808/sp/images/sp-bg-green.jpg);
}

/* 1 */
.top__container .top_inner1 {
  padding: 14px 0 40px;
}
.top__container .top_inner1 .top_header {
  margin: 0 20px 17px;
  display: flex;
  justify-content: space-between;
}
.top__container .top_inner1 .top_header .logo {
  width: 53px;
}
.top__container .top_inner1 .top_header .txt {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
.top__container .top_inner1 .top_header .txt p {
  font-size: 10px;
  line-height: 16px;
  text-transform: uppercase;
}
.top__container .top_inner1 .kv {
  margin-bottom: 17px;
}
.top__container .top_inner1 .top_ttl {
  text-align: center;
}
.top__container .top_inner1 .top_ttl h1 {
  font-size: 19px;
  line-height: 30px;
  margin-bottom: 16px;
}
.top__container .top_inner1 .top_ttl h1 span {
  font-size: 21px;
}
.top__container .top_inner1 .top_ttl h1 span.fs {
  font-size: 23px;
}
.top__container .top_inner1 .scroll_down {
  width: 20px;
  height: 50px;
  margin: 0 auto;
}

/* 2 */
.top__container .top_inner2 {
  padding: 0 28px 53px;
}
.top__container .top_inner2 .txt {
  margin: 0 48px 78px;
}
.top__container .top_inner2 .txt p {
  font-size: 13px;
  line-height: 24px;
}
.top__container .top_inner2 .txt p br {
  display: none;
}
.top__container .top_inner2 h2 {
  margin-bottom: 15px;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
}
.top__container .top_inner2 .top_navi {
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
}
.top__container .top_inner2 .top_navi div {
  width: 33.33%;
  border: 1px solid #C1D349;
}
.top__container .top_inner2 .top_navi a img{ 
  filter: grayscale(100%); 
}
.top__container .top_inner2 .top_navi a img:hover{
	filter: grayscale(0);
	transition: 0.3s;
}
.top__container .top_inner2 .scroll_down {
  width: 20px;
  height: 50px;
  margin: 0 auto;
}

/* SCROLL DOWN */
.scroll_down{
  position: relative;
  animation: arrowmove 1s ease-in-out infinite;
}
.arrow {
  width: 20px;
  height: 2px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}
.arrow:first-child {
  animation: move 3s ease-out 1s infinite;
}
.arrow:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}
.arrow:before,
.arrow:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #000;
}
.arrow:before {
  left: 0;
  transform: skew(0deg, 45deg);
}
.arrow:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -45deg);
}

/* --LOOK-- */
.look__container {
  height: 24300px;
  background-image: url(/campaign/2024/cap/0808/sp/images/sp-bg-green.jpg);
}

#look1, #look2, #look3, #look4, #look5, #look6, #look7, #look8, #look9, #look10, #look11, #look12, #look1 .look__inner, #look5 .look__inner, #look10 .look__inner {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#look1, #look2, #look3, #look4 , #look10, #look11, #look12, #look1 .look__inner, #look10 .look__inner {
  background-image: url(/campaign/2024/cap/0808/sp/images/sp-bg-gray.jpg);
}
#look5, #look6, #look7, #look8, #look9, #look5 .look__inner {
  background-image: url(/campaign/2024/cap/0808/sp/images/sp-bg-black.jpg);
}

/* CREDIT */
.credit .item {
  display: flex;
  align-items: flex-end;
  text-transform: uppercase;
  font-size: 12px;
}
.credit .item:nth-child(n+2) {
  margin-top: 10px;
}
.credit .item p:nth-child(2) {
  margin-left: auto;
}

/* NUMBER */
.look__number {
  font-size: 38px;
  position: fixed;
  right: 20px;
}
.look__number svg {
  vertical-align: middle !important;
  width: 12px;
  height: 22px;
}
.activeTop {
  top: 20px;
}
.activeBottom {
  bottom: 15px;
}
.activeBottom p {
  color: #C1D349;
}
.activeTop .slash {
  stroke: #000000;
}
.activeBottom .slash {
  stroke: #C1D349;
}

/* --LEFT MENU-- */
/* MOVIE */
.movie {
  position: fixed;
  top: 10px;
  left: 10px;
}
.movie .movie_icon {
  width: 73px;
  height: 73px;
  position: relative;
}
.movie.black svg {
  fill: #000;
  /*filter: brightness(0) saturate(100%);*/
}
.movie.green svg {
  fill: #C1D349;
  /*filter: brightness(0) saturate(100%) invert(96%) sepia(91%) saturate(751%) hue-rotate(8deg) brightness(86%) contrast(90%);*/
}
.movie .movie_circle {
  width: 100%;
  height: auto;
  animation: rotate 15s linear infinite;
}
.movie .movie_arrow {
  width: 18.35%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* NAVI */
.look_navi {
  position: fixed;
  bottom: 0;
  left: 0;
}
.look_navi .scroll-container {
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.look_navi .navi {
  width: 960px;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}
.look_navi .navi > div {
  border: 1px solid #000000;
  margin-top: -1px;
  margin-left: -1px;
  width: calc(33.33% + 1px);
}
.look_navi .navi img {
  filter: grayscale(100%); 
}
.look_navi .navi img:hover {
  filter: grayscale(0);
	transition: 0.3s;
}
.look_navi .navi .active img {
  filter: grayscale(0); 
}

.toggle_switch  {
  position: relative;
}
.toggle_switch.black::after  {
  content: "";
  position: absolute;
  top: 13px;
  left: 100px;
  width: 6px;
  height: 6px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(-135deg);
}
.toggle_switch.black.open::after  {
  content: "";
  position: absolute;
  top: 10px;
  left: 100px;
  width: 6px;
  height: 6px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
}
.toggle_switch.green::after  {
  content: "";
  position: absolute;
  top: 13px;
  left: 100px;
  width: 6px;
  height: 6px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(-135deg);
}
.toggle_switch.green.open::after  {
  content: "";
  position: absolute;
  top: 10px;
  left: 100px;
  width: 6px;
  height: 6px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: rotate(45deg);
}
.toggle_switch.black p {
  font-size: 13px;
  line-height: 29px;
  color: #fff;
}
.toggle_switch.green p {
  font-size: 13px;
  line-height: 29px;
  color: #000;
}
.toggle_switch.black p span {
  padding: 5px 40px 5px 10px;
  background-color: #000;
}
.toggle_switch.green p span {
  padding: 5px 40px 5px 10px;
  background-color: #C1D349;
}
.toggle_contents.black {
  display: none;
  border-top: 3px solid #000;
}
.toggle_contents.green {
  display: none;
  border-top: 3px solid #C1D349;
}

/* TITLE */
.title {
  display: none;
}

/* LOOK1 */
#look1 .img1 {
  width: 89.87%;
  min-width: 337px;
  position: absolute;
  bottom: 8.10%;
  left: 0;
  z-index: 3;
}
#look1 .img2 {
  width: 78.13%;
  min-width: 293px;
  position: absolute;
  top: 11.99%;
  right: 0;
  z-index: 2;
}
#look1 .img3 {
  width: 91.2%;
  min-width: 342px;
  position: absolute;
  top: 0;
  right: 3.47%;
  z-index: 1;
}
#look1 .credit {
  width: 165px;
  position: absolute;
  bottom: 3.30%;
  right: 5.33%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK2 */
#look2 .img1 {
  width: 76.27%;
  min-width: 286px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}
#look2 .img2 {
  width: 85.06%;
  min-width: 319px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#look2 .credit {
  width: 183px;
  position: absolute;
  bottom: 7.05%;
  left: 5.33%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK3 */
#look3 .img1 {
  width: 78.13%;
  min-width: 293px;
  position: absolute;
  bottom: 2.84%;
  left: 0;
  z-index: 3;
}
#look3 .img2 {
  width: 69.6%;
  min-width:261px;
  position: absolute;
  top: 19.64%;
  right: 0;
  z-index: 2;
}
#look3 .img3 {
  width: 89.33%;
  min-width: 335px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#look3 .credit {
  width: 174px;
  position: absolute;
  bottom: 4.04%;
  right: 5.33%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK4 */
#look4 .img1 {
  width: 84.27%;
  min-width: 316px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
#look4 .img2 {
  width: 91.73%;
  min-width: 344px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
#look4 .credit {
  width: 166px;
  position: absolute;
  bottom: 7.05%;
  left: 5.33%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK5 */
#look5 .img1 {
  width: 73.87%;
  min-width: 277px;
  position: absolute;
  bottom: 7.05%;
  left: 0;
  z-index: 4;
}
#look5 .img2 {
  width: 88%;
  min-width: 330px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
#look5 .img3 {
  width: 54.13%;
  min-width: 203px;
  position: absolute;
  bottom: 6.15%;
  right: 0;
  z-index: 2;
}
#look5 .img4 {
  width: 90.93%;
  min-width: 341px;
  position: absolute;
  top: 10.64%;
  right: 4.53%;
  z-index: 1;
}
#look5 .credit {
  width: 139px;
  position: absolute;
  top: 1.80%;
  right: 5.33%;
  z-index: 5;
}

/* LOOK6 */
#look6 .img1 {
  width: 89.87%;
  min-width: 337px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 3;
}
#look6 .img2 {
  width: 69.6%;
  min-width: 261px;
  position: absolute;
  top: 0;
  right: 2.93%;
  z-index: 2;
}
#look6 .img3 {
  width: 88.27%;
  min-width: 331px;
  position: absolute;
  bottom: 13.04%;
  left: 0;
  z-index: 1;
}
#look6 .credit {
  width: 173px;
  position: absolute;
  bottom: 6.65%;
  left: 5.33%;
  z-index: 5;
}

/* LOOK7 */
#look7 .img1 {
  width: 69.87%;
  min-width: 262px;
  position: absolute;
  top: 3%;
  left: 0;
  z-index: 2;
}
#look7 .img2 {
  width: 91.2%;
  min-width: 342px;
  position: absolute;
  bottom: 5.70%;
  right: 0;
  z-index: 1;
}
#look7 .credit {
  width: 201px;
  position: absolute;
  top: 1.80%;
  right: 5.33%;
  z-index: 5;
}

/* LOOK8 */
#look8 .img1 {
  width: 90.4%;
  min-width: 339px;
  position: absolute;
  top: 8.10%;
  right: 0;
  z-index: 3;
}
#look8 .img2 {
  width: 71.73%;
  min-width: 269px;
  position: absolute;
  top: 0;
  left: 5.33%;
  z-index: 2;
}
#look8 .img3 {
  width: 92%;
  min-width: 345px;
  position: absolute;
  bottom: 9.75%;
  left: 0;
  z-index: 1;
}
#look8 .credit {
  width: 231px;
  position: absolute;
  bottom: 7.05%;
  left: 5.33%;
  z-index: 5;
}

/* LOOK9 */
#look9 .img1 {
  width: 76.8%;
  min-width: 288px;
  position: absolute;
  bottom: 5.55%;
  left: 0;
  z-index: 3;
}
#look9 .img2 {
  width: 57.6%;
  min-width: 216px;
  position: absolute;
  top: 15.30%;
  right: 0;
  z-index: 2;
}
#look9 .img3 {
  width: 100%;
  min-width: 375px;
  position: absolute;
  top: 9.75%;
  left: 0;
  z-index: 1;
}
#look9 .credit {
  width: 166px;
  position: absolute;
  top: 1.80%;
  right: 3%;
  z-index: 5;
}

/* LOOK10 */
#look10 .img1 {
  width: 68.8%;
  min-width: 258px;
  position: absolute;
  top: 6%;
  left: 0;
  z-index: 2;
}
#look10 .img2 {
  width: 94.13%;
  min-width: 353px;
  position: absolute;
  bottom: 10.19%;
  right: 0;
  z-index: 1;
}
#look10 .credit {
  width: 174px;
  position: absolute;
  bottom: 6.30%;
  left: 5.33%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK11 */
#look11 .img1 {
  width: 85.6%;
  min-width: 321px;
  position: absolute;
  top: 11.24%;
  right: 5.33%;
  z-index: 4;
}
#look11 .img2 {
  width: 77.87%;
  min-width: 292px;
  position: absolute;
  bottom: 3.45%;
  right: 0;
  z-index: 3;
}
#look11 .img3 {
  width: 53.33%;
  min-width: 200px;
  position: absolute;
  top: 2.25%;
  left: 0;
  z-index: 2;
}
#look11 .img4 {
  width: 100%;
  min-width: 375px;
  position: absolute;
  top: 7.95%;
  left: 30;
  z-index: 1;
}
#look11 .credit {
  width: 145px;
  position: absolute;
  bottom: 3.9%;
  right: 5.33%;
  z-index: 5;
}

/* LOOK12 */
#look12 .img1 {
  width: 33.54%;
  min-width: 310px;
  position: absolute;
  bottom: 3.15%;
  left: 8.8%;
  z-index: 3;
}
#look12 .img2 {
  width: 76%;
  min-width: 285px;
  position: absolute;
  bottom: 18.14%;
  right: 0;
  z-index: 2;
}
#look12 .img3 {
  width: 96%;
  min-width: 360px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#look12 .credit {
  width: 231px;
  position: absolute;
  bottom: 7.35%;
  left: 5.33%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK BG */
.bg-look1-4 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(/campaign/2024/cap/0808/sp/images/sp-bg-gray.jpg);
  opacity: 0;
  z-index: 0;
}
.bg-look5-9 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(/campaign/2024/cap/0808/sp/images/sp-bg-black.jpg);
  opacity: 0;
  z-index: 0;
}
.bg-look10-12 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(/campaign/2024/cap/0808/sp/images/sp-bg-gray.jpg);
  opacity: 0;
  z-index: 0;
}

/* --FOOTER-- */
.fot__container {
  width: 100%;
  height: 100%;
  padding: 50px 42px 10px;
  position: relative;
  z-index: 300;
  background-image: url(/campaign/2024/cap/0808/sp/images/sp-bg-green.jpg);
}

/* MOVIE */
.fot__container .movie_inner {
  width: 100%;
  border-bottom: 1px solid #000;
}
.fot__container .movie_inner .movie_wrap {
  width: 100%;
  margin-bottom: 30px;
}
.fot__container .movie_inner .movie_container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: calc( 640 / 360 * 100%) 0 0 0;
  overflow: hidden;
}
.fot__container .movie_inner .movie_container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320%;
  height: 100%;
}
.fot__container .movie_inner .movie_container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fot__container .movie_inner .text_wrap {
  width: 100%;
  margin-bottom: 70px;
}
.fot__container .movie_inner h4 {
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
}
.fot__container .movie_inner .text_wrap p {
  font-size: 13px;
  line-height: 24px;
}

/* STAFF */
.fot__container .staff_inner {
  width: 100%;
  padding: 35px 0 40px;
  border-bottom: 1px solid #000;
}
.fot__container .staff_inner .title_wrap {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
.fot__container .staff_inner .title_wrap h4 {
  font-size: 20px;
  text-transform: uppercase;
}
.fot__container .staff_inner .text_wrap {
  width: 100%;
  text-align: center;
}
.fot__container .staff_inner .text_wrap p {
  font-size: 14px;
  line-height: 25px;
  text-transform: uppercase;
}

/* INSTAGRAM */
.fot__container .insta_inner {
  width: 100%;
  padding: 35px 0 40px;
  border-bottom: 1px solid #000;
}
.fot__container .insta_inner .title_wrap {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
.fot__container .insta_inner .title_wrap h4 {
  font-size: 20px;
  text-transform: uppercase;
}
.fot__container .insta_inner .icon_wrap {
  width: 100%;
  text-align: center;
}
.fot__container .insta_inner .icon_wrap img {
  width: 44px;
  height: 44px;
}

/* LOGO and COPYRIGHT */
.fot__container .fot_inner {
  width: 100%;
  padding: 68px 0 10px;
  text-align: center;
}
.fot__container .fot_inner .logo {
  margin-bottom: 30px;
}
.fot__container .fot_inner .logo img {
  width: 197px;
}
.fot__container .fot_inner .backtotop {
  margin-bottom: 15px;
}
.fot__container .fot_inner .backtotop a {
  font-size: 14px;
  text-transform: uppercase;
}
.fot__container .fot_inner .backtotop img {
  width: 13px;
  line-height: 18px;
  vertical-align: middle;
  margin-left: 10px;
}
.fot__container .fot_inner .copyright p {
  font-size: 12px;
  text-transform: uppercase;
}

/* MODAL */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}
/* モーダルの内容 */
.modal-content {
  width: 80%;
  max-width: 325px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
#vimeo-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: calc( 640 / 360 * 100%) 0 0 0;
  overflow: hidden;
}
#vimeo-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320%;
  height: 100%;
}
/* 閉じるボタン */
.close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #C1D349;
  text-decoration: none;
  cursor: pointer;
}

}


/* ----PC----*/
@media only screen and (min-width: 768px) {
.sp {
  display: none;
}
.pc {
  display: block;
}

main {
  background-image: url(/campaign/2024/cap/0808/sp/images/pc-bg-green.jpg);
  background-color: #C1D349;
}

/* --OP-- */
.op__container {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 999;
  background-image: url(/campaign/2024/cap/0808/sp/images/pc-bg-green.jpg);
  background-color: #C1D349;
}
.op_inner {
  width: 276px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.op_inner .logo {
  margin-bottom: 38px;
}
.op_inner #bar_container {
  width: 100%;
  height: 1px;
}

/* --TOP-- */
.top__container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 100;
  background-image: url(/campaign/2024/cap/0808/sp/images/pc-bg-green.jpg);
}

/* 1 */
.top__container .top_inner1 {
  padding: 70px 8.6% 145px;
}
.top__container .top_inner1 .top_header {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
}
.top__container .top_inner1 .top_header .logo {
  width: 245px;
}
.top__container .top_inner1 .top_header .txt {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
.top__container .top_inner1 .top_header .txt p {
  font-size: 16px;
  line-height: 25px;
  text-transform: uppercase;
}
.top__container .top_inner1 .kv {
  margin-bottom: 70px;
}
.top__container .top_inner1 .top_ttl {
  margin-bottom: 140px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top__container .top_inner1 .top_ttl h1 {
  font-size: 40px;
  line-height: 70px;
}
.top__container .top_inner1 .top_ttl h1 span {
  font-size: 47px;
}
.top__container .top_inner1 .top_ttl h1 span.fs {
  font-size: 49px;
}

/* 2 */
.top__container .top_inner2 {
  padding: 0 14.79%;
  text-align: center;
}
.top__container .top_inner2 .txt {
  margin-bottom: 140px;
}
.top__container .top_inner2 .txt p {
  font-size: 14px;
  line-height: 24px;
}
.top__container .top_inner2 h2 {
  margin-bottom: 35px;
  font-size: 34px;
  text-transform: uppercase;
}
.top__container .top_inner2 .top_navi {
  margin-bottom: 48px;
  display: flex;
  flex-wrap: wrap;
}
.top__container .top_inner2 .top_navi div {
  width: 16.66%;
  border: 2px solid #C1D349;
}
.top__container .top_inner2 .top_navi a img{ 
  filter: grayscale(100%); 
}
.top__container .top_inner2 .top_navi a img:hover{
	filter: grayscale(0);
	transition: 0.3s;
}
.top__container .top_inner2 .scroll_down {
  width: 40px;
  height: 100px;
  margin: 0 auto;
}

/* SCROLL DOWN */
.scroll_down{
  position: relative;
  animation: arrowmove 1s ease-in-out infinite;
}
.arrow {
  width: 40px;
  height: 2px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}
.arrow:first-child {
  animation: move 3s ease-out 1s infinite;
}
.arrow:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}
.arrow:before,
.arrow:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #000;
}
.arrow:before {
  left: 0;
  transform: skew(0deg, 45deg);
}
.arrow:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -45deg);
}

/* --LOOK-- */
.look__container {
  height: 32400px;
  background-image: url(/campaign/2024/cap/0808/sp/images/pc-bg-green.jpg);
}

#look1, #look2, #look3, #look4, #look5, #look6, #look7, #look8, #look9, #look10, #look11, #look12, #look1 .look__inner, #look5 .look__inner, #look10 .look__inner {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#look1, #look2, #look3, #look4 , #look10, #look11, #look12, #look1 .look__inner, #look10 .look__inner {
  background-image: url(/campaign/2024/cap/0808/sp/images/pc-bg-gray.jpg);
}
#look5, #look6, #look7, #look8, #look9, #look5 .look__inner {
  background-image: url(/campaign/2024/cap/0808/sp/images/pc-bg-black.jpg);
}

/* CREDIT */
.credit .item {
  display: flex;
  align-items: flex-end;
  text-transform: uppercase;
  font-size: 14px;
}
.credit .item:nth-child(n+2) {
  margin-top: 10px;
}
.credit .item p:nth-child(2) {
  margin-left: auto;
}

/* NUMBER */
.look__number {
  font-size: 49px;
  position: fixed;
  right: 77px;
}
.look__number svg {
  vertical-align: middle !important;
}
.activeTop {
  top: 47px;
}
.activeBottom {
  bottom: 38px;
}
.activeBottom p {
  color: #C1D349;
}
.activeTop .slash {
  stroke: #000000;
}
.activeBottom .slash {
  stroke: #C1D349;
}

/* --LEFT MENU-- */
/* MOVIE */
.movie {
  position: fixed;
  top: 5.67%;
  /*top: 58px;*/
  left: 5.56%;
  /*left: 80px;*/
}
.movie .movie_icon {
  width: 6.57vw;
  max-width: 109px;
  /*width: 109px;*/
  position: relative;
}
.movie.black svg {
  fill: #000;
  /*filter: brightness(0) saturate(100%);*/
}
.movie.green svg {
  fill: #C1D349;
  /*filter: brightness(0) saturate(100%) invert(96%) sepia(91%) saturate(751%) hue-rotate(8deg) brightness(86%) contrast(90%);*/
}
.movie .movie_circle {
  width: 100%;
  height: auto;
  animation: rotate 15s linear infinite;
}
.movie .movie_arrow {
  width: 18.35%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* NAVI */
.look_navi {
  position: fixed;
  top: 22.29%;
  /*top: 220px;*/
  left: 5.56%;
  /*left: 80px;*/
}
.look_navi .navi {
  width: 19.29vw;
  max-width: 321px;
  /*width: 321px;*/
  display: flex;
  flex-wrap: wrap;
}
.look_navi .navi > div {
  border: 1px solid #000000;
  margin-top: -1px;
  margin-left: -1px;
  width: calc(33.33% + 1px);
}
.look_navi .navi img {
  filter: grayscale(100%); 
}
.look_navi .navi img:hover {
  filter: grayscale(0);
	transition: 0.3s;
}
.look_navi .navi .active img {
  filter: grayscale(0); 
}

/* TITLE */
.title {
  position: fixed;
  top: 79.89%;
  /*top: 695px;*/
  left: 5.56%;
  /*left: 80px;*/
}
.title .logo {
  width: 12.51vw;
  max-width: 209px;
  /*width: 209px;*/
  margin-bottom: 16px;
}
.title h3 {
  font-size: 1.875vw;
  /*font-size: 27px;*/
  line-height: 1.2;
}
.title h3 span {
  font-size: 2.013vw;
  /*font-size: 29px;*/
}
.title.black .logo {
  filter: brightness(0) saturate(100%);
}
.title.green .logo {
  filter: brightness(0) saturate(100%) invert(96%) sepia(91%) saturate(751%) hue-rotate(8deg) brightness(86%) contrast(90%);
}
.title.black h3 {
  color: #000;
}
.title.green h3 {
  color: #C1D349;
}

/* LOOK1 */
#look1 .img1 {
  width: 35.46%;
  max-width: 525px;
  position: absolute;
  bottom: 0;
  right: 27.64%;
  z-index: 3;
}
#look1 .img2 {
  width: 30.67%;
  max-width: 456px;
  position: absolute;
  top: 14.94%;
  right: 7.15%;
  z-index: 2;
}
#look1 .img3 {
  width: 35.88%;
  max-width: 531px;
  position: absolute;
  top: 0;
  right: 18.33%;
  z-index: 1;
}
#look1 .credit {
  width: 193px;
  position: absolute;
  bottom: 6.90%;
  right: 5.56%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK2 */
#look2 .img1 {
  width: 32.75%;
  max-width: 486px;
  position: absolute;
  bottom: 0;
  right: 3.96%;
  z-index: 2;
}
#look2 .img2 {
  width: 36.64%;
  max-width: 542px;
  position: absolute;
  top: 0;
  right: 25.35%;
  z-index: 1;
}
#look2 .credit {
  width: 216px;
  position: absolute;
  bottom: 6.44%;
  right: 47.99%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK3 */
#look3 .img1 {
  width: 31.57%;
  max-width: 469px;
  position: absolute;
  bottom: 0;
  right: 17.43%;
  z-index: 3;
}
#look3 .img2 {
  width: 28.03%;
  max-width: 418px;
  position: absolute;
  top: 12.99%;
  right: 7.15%;
  z-index: 2;
}
#look3 .img3 {
  width: 36.22%;
  max-width: 536px;
  position: absolute;
  top: 0;
  right: 25.76%;
  z-index: 1;
}
#look3 .credit {
  width: 204px;
  position: absolute;
  bottom: 6.32%;
  right: 5.56%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK4 */
#look4 .img1 {
  width: 31.68%;
  max-width: 485px;
  position: absolute;
  top: 0;
  right: 31.94%;
  z-index: 2;
}
#look4 .img2 {
  width: 35.81%;
  max-width: 530px;
  position: absolute;
  bottom: 0;
  right: 7.08%;
  z-index: 1;
}
#look4 .credit {
  width: 195px;
  position: absolute;
  bottom: 5.63%;
  right: 50.08%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK5 */
#look5 .img1 {
  width: 29.76%;
  max-width: 443px;
  position: absolute;
  bottom: 0;
  right: 37.15%;
  z-index: 4;
}
#look5 .img2 {
  width: 39.65%;
  max-width: 571px;
  position: absolute;
  top: 0;
  right: 21.32%;
  z-index: 3;
}
#look5 .img3 {
  width: 21.57%;
  max-width: 325px;
  position: absolute;
  bottom: 4.37%;
  right: 9.93%;
  z-index: 2;
}
#look5 .img4 {
  width: 35.94%;
  max-width: 532px;
  position: absolute;
  top: 11.84%;
  right: 6.88%;
  z-index: 1;
}
#look5 .credit {
  width: 163px;
  position: absolute;
  top: 5.40%;
  right: 5.56%;
  z-index: 5;
}

/* LOOK6 */
#look6 .img1 {
  width: 33.10%;
  max-width: 491px;
  position: absolute;
  bottom: 0;
  right: 6.88%;
  z-index: 3;
}
#look6 .img2 {
  width: 27.13%;
  max-width: 405px;
  position: absolute;
  top: 0;
  right: 21.88%;
  z-index: 2;
}
#look6 .img3 {
  width: 34.76%;
  max-width: 515px;
  position: absolute;
  bottom: 6.67%;
  right: 30.90%;
  z-index: 1;
}
#look6 .credit {
  width: 202px;
  position: absolute;
  top: 6.32%;
  right: 52.64%;
  z-index: 5;
}

/* LOOK7 */
#look7 .img1 {
  width: 31.43%;
  max-width: 467px;
  position: absolute;
  bottom: 7.70%;
  right: 33.75%;
  z-index: 2;
}
#look7 .img2 {
  width: 40.53%;
  max-width: 598px;
  position: absolute;
  top: 0;
  right: 13.13%;
  z-index: 1;
}
#look7 .credit {
  width: 233px;
  position: absolute;
  top: 5.40%;
  right: 5.56%;
  z-index: 5;
}

/* LOOK8 */
#look8 .img1 {
  width: 34.14%;
  max-width: 506px;
  position: absolute;
  bottom: 13.33%;
  right: 0;
  z-index: 3;
}
#look8 .img2 {
  width: 28.38%;
  max-width: 423px;
  position: absolute;
  top: 0;
  right: 16.39%;
  z-index: 2;
}
#look8 .img3 {
  width: 38.79%;
  max-width: 573px;
  position: absolute;
  bottom: 0;
  right: 27.22%;
  z-index: 1;
}
#look8 .credit {
  width: 269px;
  position: absolute;
  top: 6.32%;
  right: 47.92%;
  z-index: 5;
}

/* LOOK9 */
#look9 .img1 {
  width: 34.07%;
  max-width: 505px;
  position: absolute;
  bottom: 0;
  right: 26.67%;
  z-index: 3;
}
#look9 .img2 {
  width: 25.25%;
  max-width: 378px;
  position: absolute;
  top: 20.57%;
  right: 5.35%;
  z-index: 2;
}
#look9 .img3 {
  width: 41.5%;
  max-width: 612px;
  position: absolute;
  top: 0;
  right: 12.64%;
  z-index: 1;
}
#look9 .credit {
  width: 195px;
  position: absolute;
  top: 5.40%;
  right: 5.35%;
  z-index: 5;
}

/* LOOK10 */
#look10 .img1 {
  width: 27.33%;
  max-width: 408px;
  position: absolute;
  top: 0;
  right: 11.88%;
  z-index: 2;
}
#look10 .img2 {
  width: 38.51%;
  max-width: 569px;
  position: absolute;
  bottom: 0;
  right: 25.07%;
  z-index: 1;
}
#look10 .credit {
  width: 204px;
  position: absolute;
  bottom: 6.32%;
  right: 5.56%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK11 */
#look11 .img1 {
  width: 35.60%;
  max-width: 527px;
  position: absolute;
  bottom: 10.11%;
  right: 12.71%;
  z-index: 4;
}
#look11 .img2 {
  width: 32.33%;
  max-width: 480px;
  position: absolute;
  bottom: 0;
  right: 26.53%;
  z-index: 3;
}
#look11 .img3 {
  width: 21.92%;
  max-width: 330px;
  position: absolute;
  top: 0;
  right: 41.67%;
  z-index: 2;
}
#look11 .img4 {
  width: 40.74%;
  max-width: 601px;
  position: absolute;
  bottom: 5.40%;
  right: 3.96%;
  z-index: 1;
}
#look11 .credit {
  width: 170px;
  position: absolute;
  bottom: 5.63%;
  right: 53.75%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK12 */
#look12 .img1 {
  width: 32.54%;
  max-width: 483px;
  position: absolute;
  bottom: 0;
  right: 24.79%;
  z-index: 3;
}
#look12 .img2 {
  width: 29.83%;
  max-width: 444px;
  position: absolute;
  top: 9.31%;
  right: 8.54%;
  z-index: 2;
}
#look12 .img3 {
  width: 37.19%;
  max-width: 550px;
  position: absolute;
  top: 0;
  right: 26.39%;
  z-index: 1;
}
#look12 .credit {
  width: 269px;
  position: absolute;
  bottom: 6.32%;
  right: 4.72%;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

/* LOOK BG */
.bg-look1-4 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(/campaign/2024/cap/0808/sp/images/pc-bg-gray.jpg);
  opacity: 0;
  z-index: 0;
}
.bg-look5-9 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(/campaign/2024/cap/0808/sp/images/pc-bg-black.jpg);
  opacity: 0;
  z-index: 0;
}
.bg-look10-12 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(/campaign/2024/cap/0808/sp/images/pc-bg-gray.jpg);
  opacity: 0;
  z-index: 0;
}

/* --FOOTER-- */
.fot__container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 300;
  background-image: url(/campaign/2024/cap/0808/sp/images/pc-bg-green.jpg);
}

/* MOVIE */
.fot__container .movie_inner {
  width: 100%;
  max-width: 825px;
  margin: 0 auto;
  padding: 100px 0 120px;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fot__container .movie_inner .movie_wrap {
  width: 50%;
  max-width: 318px;
  margin: 0 0 0 20px;
}
.fot__container .movie_inner .movie_container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: calc( 640 / 360 * 100%) 0 0 0;
  overflow: hidden;
}
.fot__container .movie_inner .movie_container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320%;
  height: 100%;
}
.fot__container .movie_inner .movie_container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fot__container .movie_inner .text_wrap {
  width: 50%;
  max-width: 246px;
  margin: 0 0 0 80px;
}
.fot__container .movie_inner .text_wrap h4 {
  font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.fot__container .movie_inner .text_wrap p {
  font-size: 14px;
  line-height: 26px;
}

/* STAFF */
.fot__container .staff_inner {
  width: 100%;
  max-width: 825px;
  margin: 0 auto;
  padding: 35px 0 40px;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: top;
}
.fot__container .staff_inner .title_wrap {
  width: 50%;
  padding: 0 0 0 120px;
}
.fot__container .staff_inner .title_wrap h4 {
  font-size: 28px;
  text-transform: uppercase;
}
.fot__container .staff_inner .text_wrap {
  width: 50%;
  padding: 0 0 0 60px;
}
.fot__container .staff_inner .text_wrap p {
  font-size: 14px;
  line-height: 28px;
  text-transform: uppercase;
}

/* INSTAGRAM */
.fot__container .insta_inner {
  width: 100%;
  max-width: 825px;
  margin: 0 auto;
  padding: 35px 0 40px;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: top;
}
.fot__container .insta_inner .title_wrap {
  width: 50%;
  padding: 0 0 0 120px;
}
.fot__container .insta_inner .title_wrap h4 {
  font-size: 28px;
  text-transform: uppercase;
}
.fot__container .insta_inner .icon_wrap {
  width: 50%;
  padding: 0 0 0 60px;
}
.fot__container .insta_inner .icon_wrap img {
  width: 36px;
  height: 36px;
}

/* LOGO and COPYRIGHT */
.fot__container .fot_inner {
  width: 100%;
  max-width: 825px;
  margin: 0 auto;
  padding: 105px 0 50px;
  text-align: center;
}
.fot__container .fot_inner .logo {
  margin-bottom: 30px;
}
.fot__container .fot_inner .logo img {
  width: 371px;
}
.fot__container .fot_inner .backtotop {
  margin-bottom: 15px;
}
.fot__container .fot_inner .backtotop a {
  font-size: 18px;
  text-transform: uppercase;
}
.fot__container .fot_inner .backtotop img {
  width: 13px;
  line-height: 18px;
  vertical-align: middle;
  margin-left: 10px;
}
.fot__container .fot_inner .copyright p {
  font-size: 14px;
  text-transform: uppercase;
}

/* MODAL */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}
/* モーダルの内容 */
.modal-content {
  width: 100%;
  max-width: 360px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
#vimeo-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: calc( 640 / 360 * 100%) 0 0 0;
  overflow: hidden;
}
#vimeo-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320%;
  height: 100%;
}
/* 閉じるボタン */
.close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #C1D349;
  text-decoration: none;
  cursor: pointer;
}

}


/* --ANIME-- */
.fadeInAnime03s {
  animation-name: fadeIn03s;
}
.fadeIn03s {
  animation-delay: 0.3s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeIn03s {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeInAnime05s {
  animation-name: fadeIn05s;
}
.fadeIn05s {
  animation-delay: 0.5s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeIn05s {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeInAnime1s {
  animation-name: fadeIn1s;
}
.fadeIn1s {
  animation-delay: 1s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeIn1s {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeInAnime2s {
  animation-name: fadeIn2s;
}
.fadeIn2s {
  animation-delay: 2s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeIn2s {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeInAnime3s {
  animation-name: fadeIn3s;
}
.fadeIn3s {
  animation-delay: 3s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeIn3s {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.slideUpAnime {
  animation-name: slideUp;
  animation-duration:1s;
  animation-fill-mode:forwards;
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
    z-index: 250;
  }
  99% {
    transform: translateY(0);
    opacity: 1;
    z-index: 250;
  }
  100% {
    opacity: 1;
    z-index: 150;
  }
}

@keyframes move {
  33% { opacity: 1; }
  66% { opacity: 1; transform: translateY(30px); }
  100% { opacity: 0; transform: translateY(60px) scale3d(0.5, 0.5, 0.5); }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-1turn);
  }
}