@charset "UTF-8";
/* ----------------------------

トップページ

-----------------------------*/
h1 {
  max-width: 1280px;
  margin: 0 auto; }

main .back-image {
  padding-bottom: 200px; }
  @media screen and (max-width: 940px) {
    main .back-image {
      padding-bottom: 1px; } }

.scroll {
  position: absolute;
  right: 30px;
  top: 500px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color: #FFF500;
  font-family: "Dela Gothic One", cursive;
  text-transform: uppercase;
  font-size: 1.2em; }
  .scroll::after {
    position: absolute;
    content: url("/special2023/campuslife/assets/image/top/arrow-v.png");
    bottom: -1.5em;
    left: -0.1em; }

.top-wrapper {
  max-width: 845px;
  margin: 0 auto;
  padding: 0 40px; }

.white-text {
  margin: -80px 0 100px; }

@media screen and (max-width: 940px) {
  .white-text {
    text-align: left;
    margin: 0 0 100px; } }
@media screen and (max-width: 700px) {
  .scroll {
    top: 600px;
    right: 20px; }

  .top-wrapper {
    padding: 0 25px; }

  .white-text {
    margin: 0 auto 100px;
    max-width: 250px; } }
.kakumaru {
  margin-bottom: 80px;
  box-shadow: 4px 4px 0 #FFF500; }
  .kakumaru .life-icon {
    position: absolute;
    max-width: 85px;
    right: 20px;
    top: -35px; }
  .kakumaru h2 {
    font-family: "Dela Gothic One", cursive;
    font-size: 2em;
    letter-spacing: 0.4em;
    line-height: 0.9;
    margin-bottom: 35px; }
    .kakumaru h2 bold {
      font-size: 2em; }
    .kakumaru h2 span {
      color: #49B45A;
      font-size: 0.4em;
      letter-spacing: 0.05em;
      text-transform: uppercase; }
  .kakumaru p {
    line-height: 1.8;
    font-size: 0.9em; }
  .kakumaru .img-wrapper {
    padding-top: 25px; }
  .kakumaru .more-btn {
    position: absolute;
    background: #FFF500;
    bottom: -15px;
    right: -4px;
    text-transform: uppercase;
    font-family: "Dela Gothic One", cursive;
    padding: 0.6em 3em 0.6em 2em;
    border: solid 2px #FFF500; }
    .kakumaru .more-btn::after {
      position: absolute;
      content: url("/special2023/campuslife/assets/image/top/arrow.png");
      top: 50%;
      right: 0.6em;
      transform: translate(0, -40%); }
    .kakumaru .more-btn:hover {
      opacity: 1;
      background: #fff;
      border: 2px #000 solid; }
  @media screen and (max-width: 940px) {
    .kakumaru .flex {
      display: block; }
      .kakumaru .flex .flex50 {
        width: 100%; } }
  @media screen and (max-width: 700px) {
    .kakumaru h2 {
      font-size: 1.6em;
      letter-spacing: 0.2em; } }

.life4 h2 {
  position: relative;
  letter-spacing: 0.1em;
  font-size: 1.8em; }
  .life4 h2::after {
    position: absolute;
    white-space: pre;
    content: 'スタ\Aイル';
    top: 0.1em;
    right: 0.3em; }
  @media screen and (max-width: 940px) {
    .life4 h2 {
      font-size: 1.6em; }
      .life4 h2::after {
        right: auto;
        left: 9.5em; } }

.parts {
  position: absolute;
  display: inline-block; }

.life1 .parts01 {
  left: 120px;
  top: -92px; }
.life1 .parts02 {
  left: 40%;
  top: 10px; }
.life1 .parts03 {
  left: 45%;
  bottom: -26%; }

.life2 .parts01 {
  left: 130px;
  top: -40px; }
.life2 .parts02 {
  left: -17%;
  bottom: 10px; }

.life3 .parts01 {
  left: 150px;
  top: -136px; }
.life3 .parts02 {
  right: -17%;
  top: -22%; }

.life4 .parts01 {
  left: 230px;
  top: -144px; }
.life4 .parts02 {
  left: -17%;
  top: -30%; }
.life4 .parts03 {
  right: -11%;
  bottom: 25%; }
.life4 .parts04 {
  left: -40px;
  bottom: -63%; }

@media screen and (max-width: 940px) {
  .life1 .parts01 {
    left: 40px; }
  .life1 .parts02 {
    left: auto;
    right: 12%; }
  .life1 .parts03 {
    left: -80px;
    bottom: -15%; }

  .life2 .life-icon {
    z-index: 2; }
  .life2 .parts01 {
    z-index: 1;
    left: auto;
    right: 5%;
    top: -40px; }
  .life2 .parts02 {
    display: none; } }
@media screen and (max-width: 940px) and (max-width: 500px) {
  .life2 .parts01 {
    right: -18%;
    top: -40px; } }

@media screen and (max-width: 940px) {
  .life3 .parts01 {
    left: 10px; }
  .life3 .parts02 {
    right: -100px;
    top: 5%;
    transform: rotate(-20deg); }

  .life4 .parts01 {
    left: 30px; }
  .life4 .parts02, .life4 .parts03, .life4 .parts04 {
    display: none; }

  footer .parts04 {
    display: block;
    max-width: 250px;
    top: -17%;
    left: -30px; } }