@charset "shift_jis";
/* Updated 2025/11/10.T */
/*-----------------------
common
------------------------*/
@font-face {
  font-family: "noto-sans-black";
  src: url("/kojin/special/fonts/NotoSansJP-Black.woff") format("woff");
}
body {
  min-width: auto;
}
#main-area {
  overflow: hidden;
}
#footer-content {
  position: relative;
  z-index: 1;
  margin-top: 0;
}
.section-main {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0px 0px 80px 0px rgba(20, 29, 29, 1);
  background: #fff;
}
.bg-content01 {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100vh;
  background: url(/kojin/olive/special/campaign/collab/bigstar202511/imgs/index_bg_09.jpg) no-repeat 0 center / cover;
}
._t-orange01{
  color: #F68213!important;
}
#header-wrap{
  z-index: 2;
}
.cpEndTxt{
  z-index: 3;
}
.cpEndMask{
  z-index: 1;
}
.list-circle01>.item::before {
  background: #56635F;
}
.toggle-block01 > [role=tablist] > [role=tab]::after {
  top: calc(50% - 16px) !important;
  right: 5px !important;
  background-position: center center;
  background-size: 26px auto;
}
.card-normal01>.inner>.header {
  padding: 16px;
}
.modal-block01>.inner>.header>.title._t-left{
  padding-left: 2%;
}
#footer-area.footer-fixed:not(.-close) #footer-content .footer-logo {
  padding-bottom: 82px;
}
._mt20{
  margin-top: 20px!important;
}
._mt36{
  margin-top: 36px!important;
}
/*-----------------------
kv-area01
------------------------*/
.kv-area01{
  padding-top: 1.33%;
  background: url(/kojin/olive/special/campaign/collab/bigstar202511/imgs/index_bg_05.jpg) no-repeat 0 0 / cover;
}
.kv-area01>.inner{
  position: relative;
}
.kv-area01>.inner>.img02{
  margin-top: -11%;
}
.kv-area01>.inner>.btn{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.8%;
}
.kv-area01>.inner>.btn>.btn01{
  width: 87.46%;
}
.kv-area01>.inner>.btn>.btn02{
  width: 86.13%;
  margin-top: -2.13%;
}
/*-----------------------
bg-area01
------------------------*/
.bg-area01{
  background: #F3F0FF;
}
.bg-area01>.inner{
  max-width: 500px;
  margin: 0 auto;
  padding: 0 18px 30px;
}
/*-----------------------
bg-area02
------------------------*/
.bg-area02{
  background: #FFF2FE url(/kojin/olive/special/campaign/collab/bigstar202511/imgs/index_bg_04.png) no-repeat center bottom / 100%;
}
.bg-area02>.inner{
  max-width: 500px;
  margin: 0 auto;
  padding: 0 18px 106px;
}
/*-----------------------
bg-area03
------------------------*/
.bg-area03{
  background: #DCE5FD;
}
.bg-area03>.inner{
  max-width: 500px;
  margin: 0 auto;
  padding: 0 18px 30px;
}
/*-----------------------
bg-area04
------------------------*/
.bg-area04{
  padding: 20px 0 146px;
  background: url(/kojin/olive/special/campaign/collab/bigstar202511/imgs/index_bg_06.png) no-repeat center bottom / 100%, #fff url(/kojin/olive/special/campaign/collab/bigstar202511/imgs/index_bg_02.jpg) no-repeat center 0 / 100%;
}
.bg-area04>.inner{
  max-width: 500px;
  margin: 0 auto;
}
/*-----------------------
ttl-img01
------------------------*/
.ttl-img01{
  margin: 40px auto 0;
  text-align: center;
}
section:first-child>.ttl-img01{
  margin-top: 0;
}
.ttl-img01>img{
  display: block;
  margin: 0 auto;
}
/*-----------------------
ttl-img02
------------------------*/
.ttl-img02{
  display: flex;
  align-items: center;
  margin: 12px auto 0;
}
section:first-child>.ttl-img02{
  margin-top: 0;
}
.ttl-img02>.icon{
  width: 22.66%;
  margin-right: 2.66%;
}
.ttl-img02>.ttl{
  flex: 1;
}
/*-----------------------
table-wrap01
------------------------*/
.table-wrap01{
  margin: 30px auto 0;
  overflow: hidden;
  border-radius: 24px;
}
.table-wrap01>table>tbody>tr>th{
  padding: 16px;
  background: #4182FA;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
}
.table-wrap01>table>tbody>tr>td{
  padding: 16px;
  background: #fff;
  font-size: 1.4rem;
}
.table-wrap01>table>tbody>tr:not(:first-child)>th,
.table-wrap01>table>tbody>tr:not(:first-child)>td{
  border-top: 1px solid #F3F0FF;
}
/*-----------------------
icon-num
------------------------*/
.icon-num{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #AFDEF5;
  width: 16px;
  height: 16px;
  line-height: 1;
  font-size: 1rem;
  font-weight: normal;
  vertical-align: 0.1em;
}
/*-----------------------
flex-wrap01
------------------------*/
.flex-wrap01{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.6);
  padding: 10px;
}
.flex-wrap01>.inner{
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 500px;
  margin: 0 auto;
}
.flex-wrap01>.inner>.item01{
  flex: 1;
}
.flex-wrap01>.inner>.item01:not(:first-child){
  margin-left: 8px;
}
/*-----------------------
flex-wrap03
------------------------*/
.flex-wrap03>.img01{
  position: fixed;
  left: 0;
  right: calc(50% + 250px);
  top: 18%;
  z-index: -1;
  text-align: center;
  padding: 0 20px;
}
.flex-wrap03>.img02{
  position: fixed;
  left: 0;
  right: calc(47% + 250px);
  bottom: 0;
  z-index: -1;
}
.flex-wrap03>.img02>img{
  width: 100%;
}
/*-----------------------
img-wrap01
------------------------*/
.img-wrap01{
  margin: 20px -18px 0;
}
/*-----------------------
img-wrap02
------------------------*/
.img-wrap02{
  position: relative;
  margin-top: calc(-18.1% - 30px);
  padding: 21.86% 0 1px;
  background: url(/kojin/olive/special/campaign/collab/bigstar202511/imgs/index_bg_03.png) no-repeat 0 0 / 100%;
}
.img-wrap02>.img02{
  margin: -21% 0 0;
}
.img-wrap02>.img03{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
/*-----------------------
img-wrap03
------------------------*/
.img-wrap03{
  position: relative;
  z-index: 2;
}
/*-----------------------
img-layout01
------------------------*/
.img-layout01{
  margin: 70px -18px 0 auto;
  padding: 15px 35px 38px 45px;
  width: 95.87%;
  border-radius: 40px 0 0 40px;
  background: url(/kojin/olive/special/campaign/collab/bigstar202511/imgs/index_bg_01.png) repeat 0 0 / 30px;
}
.img-layout01>.img01{
  margin: -62px -26px 16px -75px;
}
.img-layout01>.img02{
  margin: -73px -35px 28px -75px;
}
/*-----------------------
img-layout02
------------------------*/
.img-layout02{
  margin: 77px auto 0 -18px;
  padding: 15px 30px 38px 40px;
  width: 95.87%;
  border-radius: 0 40px 40px 0;
  background: url(/kojin/olive/special/campaign/collab/bigstar202511/imgs/index_bg_01.png) repeat 0 0 / 30px;
}
.img-layout02>.img01{
  margin: -80px -60px 28px -34px;
}
/*-----------------------
img-layout03
------------------------*/
.img-layout03{
  position: relative;
  margin: 20px -18px 0;
  padding-top: 229.2%;
  background: url(/kojin/olive/special/campaign/collab/bigstar202511/imgs/index_bg_07.png) repeat 0 0 / 100%;
}
.img-layout03>[class^="img"]{
  position: absolute;
}
.img-layout03>.img01{
  top: 0;
  left: 0;
  width: 50.66%;
}
.img-layout03>.img02{
  top: 10.55%;
  right: 0;
  width: 40.8%;
}
.img-layout03>.img03{
  top: 26.76%;
  left: 28.26%;
  width: 44.53%;
}
.img-layout03>.img04{
  top: 57.14%;
  left: 2.66%;
  width: 44.53%;
}
.img-layout03>.img05{
  top: 59.58%;
  right: 0;
  width: 50.13%;
}
.img-layout03>[class^="img"].fn-view.-show{
  animation: pop01 .5s .4s ease-in-out forwards;
}
@keyframes pop01 {
  0% {
    opacity: 0;
    transform: translate(0 , 30px) scale(0.8);
  }
  50%{
    opacity: 1;
    transform: translate(0 , -20px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(0 , 0) scale(1);
  }
}
/*-----------------------
img-list01
------------------------*/
.img-list01{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.img-list01>li:nth-child(n+3){
  margin-top: 10px;
}
.img-list01>li:nth-child(-n+4){
  width: 48.62%;
}
.img-list01>li:nth-child(5){
  width: 72.54%;
}
/*-----------------------
txt-layout01
------------------------*/
.txt-layout01{
  margin: 32px 0 0 -18px;
  padding: 40px 30px 40px 20px;
  width: 103.24%;
  border-radius: 0 40px 40px 0;
  background: url(/kojin/olive/special/campaign/collab/bigstar202511/imgs/index_bg_01.png) repeat 0 0 / 30px;
}
.txt-layout01>section>.item{
  position: relative;
  margin: 16px 0 0 76px;
  padding-bottom: 24px;
}
.txt-layout01>section:not(:last-child)>.item::before{
  display: block;
  content: '';
  position: absolute;
  left: -44px;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #DCE5FD;
}
/*-----------------------
fn-view-wrap
------------------------*/
.fn-view{
  opacity: 0;
}
.fn-view.-show{
  animation: show01 .5s 0s ease-in-out forwards;
}
/* single*/
.fn-view-single{
  opacity: 0;
}
.fn-view-single.-show{
  animation: show01 .5s 0s ease-in-out forwards;
}
@keyframes show01 {
  0% {
    opacity: 0;
    transform: translate(0 , 30px);
  }
  50%{
    opacity: 1;
    transform: translate(0 , -20px);
  }
  100% {
    opacity: 1;
    transform: translate(0 , 0);
  }
}
@media screen and (min-width: 768px) {
  /*-----------------------
  hover
  ------------------------*/
  .button01:hover{
    box-shadow: 0px 0px 30px 0px rgba(42, 255, 230, 1);
  }
  .button02:hover{
    box-shadow: 0px 0px 30px 0px rgba(42, 255, 230, 1),0px 0px 32px 0px rgba(42, 255, 230, .5) inset;
  }
  .button03:hover{
    box-shadow: 0px 0px 30px 0px rgba(255, 93, 252, 1),0px 0px 32px 0px rgba(255, 93, 252, 1) inset;
  }
  .turbo-hover:hover::before{
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  #footer-area.footer-fixed:not(.-close) #footer-content .footer-logo{
    padding-bottom: 70px;
  }
}
@media screen and (min-width: 500px) {
  /*-----------------------
  common
  ------------------------*/
  .bg-content01{
    display: block;
  }
  /*-----------------------
  kv-area01
  ------------------------*/
  .kv-area01>.inner>h1{
    width: 500px;
  }
  /*-----------------------
  flex-wrap01
  ------------------------*/
  .flex-wrap02{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: calc(50% + 260px);
    right: 0;
    top: 0;
    bottom: 0;
  }
  .flex-wrap02>.inner{
    width: 100%;
    max-width: 398px;
  }
  .flex-wrap02 .cv01{
    margin: 50px 0 0 auto;
    max-width: 352px;
  }
  /*-----------------------
  flex-menu01
  ------------------------*/
  .flex-menu01>li{
    position: relative;
    padding-left: 46px;
  }
  .flex-menu01>li.-active::before{
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 33px;
    background: url(/kojin/olive/special/campaign/collab/bigstar202511/imgs/index_ico_09.png) no-repeat 0 0 / 100%;
  }
  .flex-menu01>li:not(:first-child){
    margin-top: 50px;
  }
}
@media screen and (max-width: 1200px) {
  .flex-wrap02,
  .flex-wrap03{
    display: none!important;
  }
}
@media screen and (min-width: 1680px) {
  .section-main {
    margin: 0 auto 0 46%;
  }
  .flex-wrap02 {
    left: calc(50% + 440px);
  }
  .flex-wrap03>.img01{
    right: 54%;
  }
  .flex-wrap03>.img02{
    right: 50%;
  }
}
@media screen and (min-width: 1680px)  and (max-height: 760px){
  .flex-wrap03>.img01{
    top: 36%;
  }
  .flex-wrap03>.img02{
    display: none;
  }
}
@media screen and (max-height: 760px) {
  .flex-wrap02>.inner>*:not(.cv01){
    display: none;
  }
  .flex-wrap02>.inner>.cv01{
    margin-top: 0;
  }
}