@charset "UTF-8";
/* OVER THE SUN × Drive Onコラボ */
@media only screen and (min-width: 768px) {
  main .over-the-sun_driveon .--sp {
    display: none !important;
  }
  main .over-the-sun_driveon .--wrapper {
    margin: 0 auto;
    max-width: 1440px;
    position: relative;
  }
  main .over-the-sun_driveon .--inner {
    position: relative;
  }
  main .over-the-sun_driveon #kv .title,
  main .over-the-sun_driveon #kv .mv,
  main .over-the-sun_driveon #kv .logo,
  main .over-the-sun_driveon #kv .subtitle,
  main .over-the-sun_driveon #kv .lead,
  main .over-the-sun_driveon #kv .date,
  main .over-the-sun_driveon #kv .note {
    position: absolute;
  }
  main .over-the-sun_driveon #kv .title {
    width: 44.861%;
    top: 3.464%;
    left: 27.361%;
  }
  main .over-the-sun_driveon #kv .mv {
    width: 68.472%;
    top: 9.052%;
    left: 15.694%;
  }
  main .over-the-sun_driveon #kv .logo {
    width: 18.888%;
    top: 45.032%;
    left: 40.555%;
  }
  main .over-the-sun_driveon #kv .subtitle {
    width: 51.77%;
    top: 53.202%;
    left: 24.097%;
  }
  main .over-the-sun_driveon #kv .lead {
    width: 100%;
    top: 63.039%;
    left: 0%;
    text-align: center;
    font-size: clamp(13px, 1.2857vw, 18px);
    font-weight: bold;
    line-height: 1.8;
  }
  main .over-the-sun_driveon #kv .date {
    width: 38.09%;
    top: 91.241%;
    left: 31.25%;
  }
  main .over-the-sun_driveon #kv .note {
    width: 100%;
    top: 95.13%;
    left: 0%;
    text-align: center;
    font-size: clamp(10px, 0.8571vw, 12px);
  }
  main .over-the-sun_driveon #personality .--wrapper {
    background: #fff; /*background: #fffcd6;*/
    aspect-ratio: 1440/360;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  main .over-the-sun_driveon #personality ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    list-style: none;
    padding: 40px 0;
    margin: 0 auto;
    gap: calc(5.482% - 30px);
    max-width: 912px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  main .over-the-sun_driveon #personality ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: calc(50% - 25px);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 15px;
  }
  main .over-the-sun_driveon #personality ul li .img {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    margin-right: 20px;
    width: 106px;
  }
  main .over-the-sun_driveon #personality ul li .img img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  main .over-the-sun_driveon #personality ul li .text {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  main .over-the-sun_driveon #personality ul li .text h3 {
    font-size: clamp(14px, 1.2857vw, 18px);
    font-weight: bold;
    margin-bottom: 0.7em;
  }
  main .over-the-sun_driveon #personality ul li .text p {
    font-size: clamp(12px, 1.07145vw, 14px);
    line-height: 1.6;
  }
  main .over-the-sun_driveon #watch h2 {
    max-width: 940px;
    margin: 0 auto;
    padding: 50px 20px 40px 20px;
  }
  main .over-the-sun_driveon #watch ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style: none;
    padding: 0 0 70px 0;
    margin: 0 auto;
    max-width: 1000px;
    gap: 9%;
    background: url(../img/watch_line.webp) 0 1%/100% auto no-repeat;
  }
  main .over-the-sun_driveon #watch ul li {
    width: 27.3333333333%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
    padding: 0 15px;
  }
  main .over-the-sun_driveon #watch ul li h3 img {
    width: 87.6%;
    height: auto;
  }
  main .over-the-sun_driveon #watch ul li h3 span {
    padding: 1em 0 0.5em 0;
    display: block;
    font-size: clamp(14px, 1.4286vw, 20px);
    font-weight: bold;
  }
  main .over-the-sun_driveon #intro .--wrapper {
    background: #fffcd6;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  main .over-the-sun_driveon #intro .--wrapper:before {
    background: #da0915;
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 50%;
    height: 100%;
  }
  main .over-the-sun_driveon #intro ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    list-style: none;
    padding: 20px 0;
    margin: 0 auto;
    gap: calc(5.482% - 30px);
    max-width: 1000px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    z-index: 1;
  }
  main .over-the-sun_driveon #intro ul li {
    width: calc(50% - 25px);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  main .over-the-sun_driveon #intro ul li h3 {
    width: 100%;
    font-size: clamp(13px, 1.2857vw, 18px);
    margin-top: 0;
    margin-bottom: 15px;
    padding: 0 5px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  main .over-the-sun_driveon #intro ul li h3 strong {
    font-size: clamp(22px, 1.8571vw, 26px);
    display: block;
  }
  main .over-the-sun_driveon #intro ul li .box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 100%;
  }
  main .over-the-sun_driveon #intro ul li .box .img {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    margin-right: 20px;
    width: 35%;
    margin-top: 0;
    margin-bottom: 0;
  }
  main .over-the-sun_driveon #intro ul li .box .img img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  main .over-the-sun_driveon #intro ul li .box .text {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  main .over-the-sun_driveon #intro ul li .box .text p {
    font-size: clamp(12px, 1.07145vw, 14px);
    line-height: 1.6;
    font-weight: bold;
  }
  main .over-the-sun_driveon #intro ul li .box .text p.note {
    color: #717171;
    padding-top: 1em;
  }
  /*main .over-the-sun_driveon #intro ul li:nth-child(1) h3{color:#da0915;}*/
  main .over-the-sun_driveon #intro ul li:nth-last-child(1) h3,
  main .over-the-sun_driveon #intro ul li:nth-last-child(1) p {
    color: #fff;
  }
  main .over-the-sun_driveon .driveonTopCampaign {
    padding: 80px 0;
  }
  main .over-the-sun_driveon .driveonTopCampaign::before {
    display: none;
  }
  main .over-the-sun_driveon .driveonTopCampaign__button {
    margin-top: 8px;
  }
}
@media only screen and (max-width: 767px) {
  main .over-the-sun_driveon .--pc {
    display: none !important;
  }
  main .over-the-sun_driveon .--wrapper {
    position: relative;
  }
  main .over-the-sun_driveon .--inner {
    position: relative;
  }
  main .over-the-sun_driveon #kv img {
    width: 100%;
  }
  main .over-the-sun_driveon #kv .title,
  main .over-the-sun_driveon #kv .mv,
  main .over-the-sun_driveon #kv .logo,
  main .over-the-sun_driveon #kv .subtitle,
  main .over-the-sun_driveon #kv .lead,
  main .over-the-sun_driveon #kv .date,
  main .over-the-sun_driveon #kv .note {
    position: absolute;
  }
  main .over-the-sun_driveon #kv .title {
    width: 90.966%;
    top: 4.117%;
    left: 4.834%;
  }
  main .over-the-sun_driveon #kv .mv {
    width: 100%;
    top: 9.117%;
    left: 0%;
  }
  main .over-the-sun_driveon #kv .logo {
    width: 50.636%;
    top: 36.176%;
    left: 24.936%;
  }
  main .over-the-sun_driveon #kv .subtitle {
    width: 87.786%;
    top: 45.588%;
    left: 6.106%;
  }
  main .over-the-sun_driveon #kv .lead {
    width: 100%;
    top: 53.921%;
    left: 0%;
    text-align: center;
    font-size: clamp(14px, 3.7333vw, 18px);
    font-weight: bold;
    line-height: 1.8;
  }
  main .over-the-sun_driveon #kv .date {
    width: 86.979%;
    top: 90.588%;
    left: 7.379%;
  }
  main .over-the-sun_driveon #kv .note {
    width: 100%;
    top: 94.803%;
    left: 0%;
    text-align: center;
    font-size: clamp(10px, 2.6667vw, 14px);
  }
  main .over-the-sun_driveon #personality .--wrapper {
    background: #fff; /*background: #fffcd6;*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  main .over-the-sun_driveon #personality ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    list-style: none;
    padding: 20px 0 30px 0;
    margin: 0;
  }
  main .over-the-sun_driveon #personality ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 20px 5%;
  }
  main .over-the-sun_driveon #personality ul li .img {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    margin-right: 20px;
    width: 106px;
  }
  main .over-the-sun_driveon #personality ul li .img img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  main .over-the-sun_driveon #personality ul li .text {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  main .over-the-sun_driveon #personality ul li .text h3 {
    font-size: clamp(14px, 4.2667vw, 16px);
    font-weight: bold;
    margin-bottom: 0.7em;
  }
  main .over-the-sun_driveon #personality ul li .text p {
    font-size: clamp(10px, 3.2vw, 12px);
    line-height: 1.6;
  }
  main .over-the-sun_driveon #watch h2 {
    margin: 0 auto;
    padding: 20px 20px 40px 20px;
  }
  main .over-the-sun_driveon #watch ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style: none;
    padding: 0 0 60px 0;
    margin: 0 auto;
  }
  main .over-the-sun_driveon #watch ul li {
    width: 73%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
    background: url(../img/watch_allow.webp) 50% calc(100% - 30px)/25% auto no-repeat;
    padding-bottom: calc(60px + 4%);
  }
  main .over-the-sun_driveon #watch ul li:nth-last-child(1) {
    background: none;
    padding-bottom: 0;
  }
  main .over-the-sun_driveon #watch ul li h3 img {
    width: 53.333%;
    height: auto;
    margin: 0 auto;
  }
  main .over-the-sun_driveon #watch ul li h3 span {
    padding: 1em 0 0 0;
    display: block;
    font-size: clamp(16px, 5.3333vw, 20px);
    font-weight: bold;
  }
  main .over-the-sun_driveon #intro .--wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  main .over-the-sun_driveon #intro ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    gap: calc(5.482% - 30px);
    max-width: 1000px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    z-index: 1;
  }
  main .over-the-sun_driveon #intro ul li {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 25px 5%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  main .over-the-sun_driveon #intro ul li h3 {
    width: 100%;
    font-size: clamp(13px, 4.2667vw, 16px);
    margin-top: 0;
    margin-bottom: 15px;
    padding: 0 5px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  main .over-the-sun_driveon #intro ul li h3 strong {
    font-size: clamp(20px, 6.4vw, 24px);
    display: block;
  }
  main .over-the-sun_driveon #intro ul li .box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 100%;
  }
  main .over-the-sun_driveon #intro ul li .box .img {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    margin-right: 20px;
    width: 35%;
    max-width: 160px;
    margin-top: 0;
    margin-bottom: 0;
  }
  main .over-the-sun_driveon #intro ul li .box .img img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  main .over-the-sun_driveon #intro ul li .box .text {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  main .over-the-sun_driveon #intro ul li .box .text p {
    font-size: clamp(10px, 3.2vw, 12px);
    line-height: 1.6;
    font-weight: bold;
  }
  main .over-the-sun_driveon #intro ul li .box .text p.note {
    color: #717171;
    padding-top: 1em;
  }
  main .over-the-sun_driveon #intro ul li:nth-last-child(1) h3,
  main .over-the-sun_driveon #intro ul li:nth-last-child(1) p {
    color: #fff;
  }
  main .over-the-sun_driveon #intro ul li:nth-child(1) h3 {
    color: #da0915;
  }
  main .over-the-sun_driveon #intro ul li:nth-child(1) {
    background: #fffcd6;
  }
  main .over-the-sun_driveon #intro ul li:nth-child(2) {
    background: #da0915;
  }
  main .over-the-sun_driveon .driveonTopCampaign::before {
    display: none;
  }
  main .over-the-sun_driveon .driveonTopCampaign__button {
    margin-top: 8px;
  }
}
.notice {
  padding: 0 15px;
}
.notice .notice__inner {
  max-width: 1024px;
  margin: 60px auto 40px;
  padding: 12px;
  border-radius: 10px;
  background: #F5F5F5;
}
@media print, screen and (min-width: 767px) {
  .notice .notice__inner {
    margin: 60px auto;
    padding: 20px;
  }
}
.notice .notice__text {
  padding: 0;
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
@media print, screen and (min-width: 767px) {
  .notice .notice__text {
    line-height: 1.3;
    gap: 16px;
  }
}
.notice .notice__text .notice__icon {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
  display: inline-block;
  background-image: url(/jp/apollostation/app/campaign/images/ico-notice.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 20px;
  aspect-ratio: 1/1;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
@media print, screen and (min-width: 767px) {
  .notice .notice__text .notice__icon {
    width: 24px;
  }
}
.notice .notice__link {
  display: inline-block;
  color: #000;
}
.notice .notice__link:hover {
  text-decoration: none;
}