@charset "utf-8";

.cc-main_wrap{
    font-family: 'Baloo 2', 'Zen Maru Gothic',sans-serif;
    color: #5D3334;
    letter-spacing: .1em;
    overflow: hidden;
    background-color: #F2EEE8;
}
.cc-mv__wrap{
    position: relative;
}
.cc-mv__bk{
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    margin-bottom: 125px;
}
.cc-mv__logo{
    max-width: 768px;
    width: 100%;
    margin: 0 auto;
    display: block;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
.cc-mv__date{
    margin: 30px 0;
}
.cc-mv__date h3{
    text-align: center;
    letter-spacing: .18em;
    font-size: 59px;
    text-shadow:0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff,0 0 8px #fff;
}
.cc-mv__date span{
    font-size: 33px;
}
.cc-bk{
    background-color: #E4B080;
}
.cc-content,.cc-artist{
    
    padding: 70px 0;
    position: relative;
}

.cc-content__box{
    max-width: 860px;
    margin: 0 auto;
    background-color: #FBEFE3;
    border-radius: 30px;
    filter: drop-shadow(9px 9px 16px rgba(0,0,0,0.16));
    padding: 25px 40px;
}
.cc-content__inner{
    position: relative;
    padding: 20px;
}
.cc-content__ttl{
    position: relative;
    margin-bottom: 30px;
}

.cc-content__ttl h2{
    font-size: 45px;
    padding-left: 45px;
}
.consept h2::before{
    content: "";
    width: 48px;
    height: 41px;
    display: block;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/ttlimg01.svg);
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat;
}
.creator::before{
    content: "";
    width: 48px;
    height: 41px;
    display: block;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/ttlimg02.svg);
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat;
}
.sns::before{
    content: "";
    width: 32px;
    height: 52px;
    display: block;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/ttlimg03.svg);
    position: absolute;
    top: 40%;
    left: 20px;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat;
}
.cc-content__inner p{
    letter-spacing: .05em;
    line-height: 1.8;
    margin-bottom: 90px;
    font-size: 18px;
}
.cc-content__csp-img{
    position: absolute;
    top: 55%;
    right: -6%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}

.cc-content__artist_wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.artist_prof h3{
    font-size: 30px;
    margin-bottom: 25px;
}
.artist_prof p{
    margin-bottom: 16px;
}
.cc-link_btn{
    background-color: #A56251;
    border-radius: 10px;
    width: 100%;
    height: auto;
    border: 1px solid #fff;
    margin: 0 auto;
    text-align: center;
    margin-top: 0px;
}
.cc-link_btn a{
    color: #fff;
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    transition: .4s;
    padding: 13px 0;
    font-size: 18px;
}
.cc-link_btn a::after{
    content: "";
    width: 8px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../../../../img/osaka/lp/collab/red2/02/arrow.svg);
    transition: .4s;
    position: absolute;
    top: 50%;
    right: 27%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}
.cc-link_btn a:hover::after{
    transition: .4s;
    right: 25%;
}

.sharelinks{
    max-width: 400px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 30px auto;
}
.cc-inner{
    max-width: 860px;
    margin: 50px auto;
    padding: 25px 40px;
}

.cc-sns__wrap{
    width: 773px;
    height: 341px;
    margin: 30px auto;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/share_bk-pc.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}
.cc-sns__hashtag{
    max-width: 430px;
    width: 100%;
    position: absolute;
    background-color: #fff;
    border: 6px solid #8C5238;
    padding: 15px;
    bottom: 0%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
.cc-sns__hashtag p{
    font-size: 35px;
    text-align: center;
    padding: 10px 30px;
    background-color: #E4B080;
    color: #5D3334;
}

.content_bk-a::before{
    content: "";
    width: 40px;
    height: 40px;
    display: block;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/ob-item_01.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 1vw;
    left: -6vw;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}

.content_bk-a::after{
    content: "";
    width: 30px;
    height: 34px;
    display: block;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/ob-item_02.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 2vw;
    right: -7vw;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
.cc-content__inner::before{
    content: "";
    width: 32px;
    height: 43px;
    display: block;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/ob-item_04.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 25%;
    left:  -12%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}


.bkobject_a::before{
    content: "";
    width: 30px;
    height: 34px;
    display: block;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/ob-item_03.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 61%;
    left:  -10%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    filter: none;
}

.bkobject_a::after{
    content: "";
    width: 30px;
    height: 34px;
    display: block;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/ob-item_01.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 66%;
    right:  -16%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    filter: none;
}
.bkobject_b::before{
    content: "";
    width: 30px;
    height: 34px;
    display: block;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/ob-item_02.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 91%;
    left:  -13%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    filter: none;
}

.bkobject_b::after{
    content: "";
    width: 30px;
    height: 34px;
    display: block;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/ob-item_04.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 88%;
    right:  -12%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    filter: none;
}

.cc-content__inner::after{
    content: "";
    width: 36px;
    height: 39px;
    display: block;
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/ob-item_03.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 28%;
    right:  -12%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
.content_bk-a::before,.content_bk-a::after,.bkobject_a::before,.bkobject_a::after,.bkobject_b::before,.bkobject_b::after,.bkobject_b::after,.cc-content__inner::before,.cc-content__inner::after {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
    -webkit-animation-name: objectanim;
	animation-name: objectanim;
	-webkit-transform-origin: center center;
	transform-origin: center center;

}

@-webkit-keyframes objectanim {
	from {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	} to {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1;
	} 50% {
		-webkit-animation-timing-function: linear;
		-webkit-transform: translate(0px,0px) scale(1,1) rotate(30deg) skew(0deg,0deg);
		opacity: 1.0;
	} 
}

@keyframes objectanim {
	from {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1.0;
	} to {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1,1) rotate(0deg) skew(0deg,0deg);
		opacity: 1;
	} 50% {
		animation-timing-function: linear;
		transform: translate(0px,0px) scale(1,1) rotate(30deg) skew(0deg,0deg);
		opacity: 1.0;
	} 
}


.fadeup_anm {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  
  @keyframes fadeUpAnime {
    from {
      opacity: 0;
      transform: translateY(80px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
  
  .fadeup {
    opacity: 0;
  }


  @media screen and (max-width: 768px){
    .sp-width{
        width: 263px;
    }
    .sp-width_b{}
    .cc-mv__logo img{
        margin-top: 115px;
    }
    .cc-mv__date h3{
        font-size: 34px;
    }
    .cc-content__box{
        padding: 15px 10px;
    }
    .cc-content, .cc-artist{
        padding: 50px 10px;
    }
    .cc-artist{
        padding-top: 20px;
    }
    .cc-content__csp-img{
        right: -25%;
        z-index: -1;
        opacity: .6;
    }
    .cc-content__inner p{
        margin-bottom: 0;
    }
    .cc-content__artist_wrap{
        grid-template-columns: 1fr;
    }
    .cc-sns__wrap{
        width: 100%;
        background-image: url(../../../../img/osaka/lp/collab/cubecafe/share_bk-sp.png);
        height: 250px;
    }
    .cc-sns__hashtag{
        padding: 8px;
    }
    .cc-sns__hashtag p{
        font-size: 26px;
        padding: 10px 20px;
    }
    .cc-inner{
        padding: 25px 20px;
    }
    .cc-content__inner::after{
        top: -60px;
        right: -2%;
    }
    .cc-content__inner::before{
        top: -10%;
        left: 35%;
    }
    .content_bk-a::before{
        top: -17vw;
        left: -2vw;
    }
    .content_bk-a::after{
        top: -11vw;
        right: 23vw;
    }
    .bkobject_a::before,.bkobject_a::after,.bkobject_b::before,.bkobject_b::after{
        display: none;
    }
    .hidesp{
        display: none;
    }
  }

  /*本番環境用*/
  .cc-mv{
    max-width: 100%;
    width: 100%;
    position: relative;
  }
.cc-mv__slide{
    max-width: 55%;
    padding: 30px 0;
    width: 100vw;
}
.cc-mv__slide img{
    border-radius: 0 30px 30px 0;
}
.cc-mv__newlogo{
    max-width: 45%;
    width: 100%;
    position: absolute;
    top: 50%;
    right: -17vw;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    background-image: url(../../../../img/osaka/lp/collab/cubecafe/mv_bk01.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.cc-mv__newbk img,.cc-mv__newlogo-img img{
    display: block;
    margin: 0 auto;
}
.cc-gallery{
    background-color: #FBEFE3;
    padding: 40px 0;
}
.cc-gallery .cc-content__box{
    background-color: #E4B080;
    padding: 25px 34px;
}
.cc-gallery .cc-content__ttl h2{
    color: #fff;
}
.cc-gallery__flex{
    display: grid;
    grid-template-columns: 537px 1fr;
    column-gap: 15px;
    margin-bottom: 10px;
}
.cc-gallery__minblock-g{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}
.cc-gallery__singleblock img{
    width: 100%;
    object-fit: cover;
}
.cc-gallery__grid{
    display: grid;
    grid-template-columns: 404px 1fr;
    column-gap: 5px;
    margin-bottom: 10px;
}
.cc-gallery__mwrap{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.cc-gallery__mitem .thmb img{
    width: 290px;
    height: 260px;
    object-fit: cover;
}
.thmbstyle{
    object-position: 0 -20px;
}
@media screen and (min-width: 769px){
    .showsp{
        display: none;
    }
}

@media screen and (max-width: 768px){
    .showpc{
        display: none;
    }
    .cc-mv__slide{
        max-width: 100%;
        width: 100vw;
    }
    .cc-mv__slide img{
        border-radius: 0;
    }
    .cc-mv__newlogo{
        max-width: 100%;
        transform: unset;
        -webkit-transform: unset;
        position: unset;
        background-image: none;
    }
    .cc-mv__newbk{
        display: none;
    }
    .cc-mv__newlogo-img{
        width: 95%;
        margin-left: 20px;
        margin-top: -60px;
        position: relative;
        margin-bottom: 20px;
    }
    .take{
        transform: unset;
        -webkit-transform: unset;
        position: unset;
        opacity: 1;
    }
    .cc_sp-flex{
        display: flex;
        flex-direction: column-reverse;
    }
    .cc-gallery{
        padding: 20px 10px;
    }
    .cc-gallery__flex,.cc-gallery__grid{
        grid-template-columns: 1fr;
    }
    .cc-gallery__mwrap{
        grid-template-columns: 1fr 1fr;
    }
    .cc-gallery__mitem .thmb img{
        width: 200px;
        height: 170px;
    }
    .cc-gallery .cc-content__box{
        padding: 25px 14px;
    }
    .cc-gallery .creator::before{
        left: 30px;
    }
}