@charset "utf-8";

/* =========================
  変数
========================= */
:root {
  --bg: #48efe733;
  --red: rgba(214, 226, 218, 0.5);
  --title-height: clamp(96px, 14vw, 160px);
}



/* =========================
  全体
========================= */
body {
  margin: 0;
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;

  background: var(--bg);
  transition: background-color 0.8s ease;
  overflow-x: hidden;
}

p {
  text-align: center;
}

.sp_only{
  display: none;
}
@media (max-width: 500px){
  .sp_only {
    display: block;
  }
}

/* =========================
  main
========================= */
.oc-main {
  /* max-width: 1000px; */
  width: 100%;
  margin: 0 auto;
  /* padding-top: 20px; */
}
@media (max-width: 900px){
  .oc-main {
    padding-top: 80px;
  }
}

section {
  max-width: 1000px;
  width: 100%;
  text-align: center;
  margin: 0 auto 80px;
}
@media (max-width: 999px){
  section{
    width: 95%;
  }
}


/* =========================
  Intro Layer
========================= */
.intro-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

/* =========================
  タイトル
========================= */
.oc-title {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.4);
  transform-origin: center center;
  min-height: var(--title-height);
  z-index: 5;
  font-size: clamp(26px, 6vw, 44px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  white-space: nowrap;;

  color: #3e3a39;

  transition:
    top 0.8s ease,
    transform 0.8s ease,
    opacity 0.4s ease;
    opacity: 0;
}
/* 999〜500：自然に2行になりやすい幅にする */
@media (max-width: 999px){
  .oc-title{
    white-space: normal;
    width:  11.5em;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(26px, 4vw, 36px);
  }
}

/* 499以下：小さくして改行をなるべく回避 */
@media (max-width: 499px){
  .oc-title{
    font-size: clamp(20px, 6vw, 26px);
    letter-spacing: 0.04em;
  }
}
@media (max-width: 375px) {
  .oc-title {
    max-width: 14em;
  }
}

/* 上部にセットされた状態 */
.oc-title.is-set {
  top: 14%;
  transform: translate(-50%, 0);
  font-size: clamp(26px, 6vw, 44px);

}

/* =========================
  マスク
========================= */
.intro-mask {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 4;

  transition: opacity 0.8s ease;
}

.intro-mask.is-hidden {
  opacity: 0;
}


/* =========================
  connect logo
========================= */
/* .oc-connectLogo{
  width: 100%;
  height: auto;
  position: fixed;
  padding: 15px 30px;
  top: 0;
  left: 0;
  z-index: 3;
}
.logoBg{
  background: rgba(255, 255, 255, .8);
  transition: all 0.3s;
}
.oc-connectLogo figure{
  width: 300px;
}
.oc-connectLogo img{
  width: 100%;
}
@media (max-width: 900px){
  .oc-connectLogo{
    padding: 15px 7.5px;
  }
  .oc-connectLogo img{
    width: 72%;
  }
} */
/* =========================
  チュー王子
========================= */
.oc-character {
  /* max-width: 900px; */
  margin: 0 auto 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* aspect-ratio: 180 / 79; */
  padding-top: 6%;
}

.character-img {
  max-width: clamp(170px, 45vw, 360px);
  width: 100%;
  height: auto;
}
@media (min-width: 900px) and (max-width: 999px){
  .oc-character {
    padding-top: 14%;
  }
}
@media (max-width: 599px){
  .oc-character {
    padding-top: 14%;
    margin: 0 auto 20px;
  }
}

/* =========================
  lastyear
========================= */
.lastyear {
  width: 100%;
  max-width: 100%;
}

.lastyear_title {}

.swiper {}

.swiper-wrapper {
  transition-timing-function: linear;
}

.swiper-slide {
  width: 220px;
  margin: 0 !important;
}

.swiper_figure {}

.swiper_img {
  width: 100%;
  display: block;
}

.swiper_figcaption {}


/* =========================
  OPENCAMPUS
========================= */
.oc-opencampus {
  font-weight: 600;
  /* Demi相当 */
  font-size: clamp(26px, 6vw, 48px);
  margin: 0 auto 36px;
}
.oc-opencampus_h2 {
  animation: bounce-loop 1.8s ease-in-out infinite;
  font-weight: 900;
  font-size: 2em;/* 1.4em */
  margin:-20px 0 45px;
  color: #fff309;
  text-shadow: 1px 1px 0 #3e3a39, -1px 1px 0 #3e3a39, 1px -1px 0 #3e3a39, -1px -1px 0 #3e3a39, 6px 6px 0 #3e3a39;
  height: auto;
	line-height: 1;
}
.oc-opencampus_h3 {
  font-weight: bold;
	font-size: 0.8em;
  margin-bottom: 26px;
  line-height: 1.6;
}
.oc-opencampus_text{
  font-size: 0.4em;
  margin-bottom: 8px;
}

.oc-opencampus_span{
  background: linear-gradient(transparent 50%, #ff2b3560 50%);
  display: inline-flex;
  padding: 0 3px 0 5px;
  margin-right: 3px;
	position: relative;
}

@media (max-width: 900px){
    .oc-opencampus_h2 {
    margin:0 0 35px -1%;
  }
}

@media (max-width: 380px){
    .oc-opencampus_h2 {
    font-size: 1.4em;/* 1.4em */
  }
}
/* =========================
  バインバイン
========================= */
@keyframes bounce-loop {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.12);
  }

  20% {
    transform: scale(0.96);
  }

  40% {
    transform: scale(1.04);
  }

  50% {
    transform: scale(0.99);
  }

  100% {
    transform: scale(1);
  }
}


/* =========================
  キャンパスレイアウト
========================= */
.campus {
  position: relative;
  overflow: hidden;
  padding: 50px 0;
}
/*.campus::before,*/.oc-main::before    {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  width: 100vw;
  left: 50%;
  transform: translateX(-50%);

  background:
    radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1.6px);
  background-size: 18px 18px;

  opacity: 0.3;
  pointer-events: none;

  z-index: -5;
}

.heading{
  font-size: 2em;
	margin-bottom: 8px;
	line-height: 1.4;
	display: inline;
	padding: 11px 23px;
	border-top: 4px solid #0e0d0d;
	border-bottom: 4px solid #0e0d0d;
  font-weight: bold;
}
@media (max-width: 425px) {
  .heading {
      font-size: 1.2em;
  }
}


.attention{
  margin-bottom: 70px;
}

.attention_h2 .sp_only{
  display: none;
}

.attention_h2 span:nth-of-type(1){
  margin-left: 5px;
  display: inline-block;
  animation: arrowBlink 1.8s ease-in-out infinite;
  animation-delay: 0s;
}
.attention_h2 span:nth-of-type(2){
  display: inline-block;
  animation: arrowBlink 1.8s ease-in-out infinite;
  animation-delay: 0.2s;
}
.attention_h2 span:nth-of-type(3){
  display: inline-block;
  animation: arrowBlink 1.8s ease-in-out infinite;
  animation-delay: 0.4s;
}
@keyframes arrowBlink {
  0%   { opacity: .3;}
  50%  { opacity: 1;}
  100% { opacity: .3;}
}

@media (max-width: 500px) {
  .attention_h2 .sp_only{
    display: block;
  }
}


.other_campus{
  display: flex;
	gap: 40px;
	max-width: 1000px;
}
/* 900px 以下：その他キャンパスを横スワイプに */
@media (max-width: 900px) {


  /* スライダーの「レール」側 */
  .other_campus {
    /* センター寄せの共通 section スタイルを上書き */
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 24px 40px;

    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    
    padding-inline: 24px;
    scroll-padding-inline: 24px;

    -webkit-overflow-scrolling: touch;/* iOSでスムーズに */
  }

  /* 「スライド」1枚ぶん（＝各キャンパスセクション） */
  .other_campus .campus {
    flex: 0 0 82%;
    max-width: 82vw;
    scroll-snap-align: center;
    margin: 0;
  }
}


.campus_text {
  text-align: left;
  margin-bottom: 16px;
}

.campus_text span.date {
  margin-left: 8px;
	font-size: clamp(1.0em, 0.2vw + 0.8em, 1.6em);
	font-weight: 900;
	font-size: 2em;
	margin-bottom: 15px;
	color: #fff309;
  display: block;
	text-shadow: 1px 1px 0 #3e3a39, -1px 1px 0 #3e3a39, 1px -1px 0 #3e3a39, -1px -1px 0 #3e3a39, 5px 3px 0 #3e3a39
}
.tama .campus_text span.date{
  display: inline;
  font-size: 3em;
}
@media (max-width: 900px){
  .tama .campus_title,.campus_title {
    writing-mode: horizontal-tb;
    position: relative;
    text-align: left;
    margin-bottom: 8px;
  }
  .tama .campus_text span.date{
    display: block;
  }
}
@media (max-width: 400px){
  .tama .campus_text span.date{
    font-size: 2.4em;
  }
}
.campus_text span.time {
  margin-left: 8px;
}

.campus_figure {
  max-width: 815px;
  margin: 0 auto;
  position: relative;
}
.tama .campus_figure {
  margin: 70px auto 0;
}

.campus_img {
  max-width: 800px;
  width: 100%;
  /* border-radius: 9999px; */
  margin-left: -15px;
  margin-bottom: 30px;
  box-shadow: 15px 14px 0px 0px rgba(255, 255, 255, 1);
}
.campus_imgHeld {
	position: absolute;
	width: clamp(40px, 16.87vw + 32.53px, 70px);
	height: auto;
	top: -16px;
	right: 5px;
}
.tama .campus_imgHeld {
	position: absolute;
	width: clamp(100px, 16.87vw + 32.53px, 170px);
	height: auto;
	top: -16px;
	right: 5px;
}
.campus_figcaption {}

/* 学部リスト（共通） */
.campus_list{
}

.campus_item{
	display: inline-flex;
	padding: 3px;
	position: relative;
	margin-right: 30px;
}

.campus_item span{
  margin-right: 8px;
  font-size: 0.8em;
}
.kome{
  font-size: 0.8em;
  margin-top: 1.5em;
}
.kome span{
  margin-right: 8px;
}
.kome span:nth-of-type(2){
  margin-left: 20px;
}
@media (max-width:500px){
  
}

.campus_item::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 60%;
  bottom: 0;
  /* background: var(--red); */
  z-index: -1;
}

a.campus_link{
  color: #0e0d0d;
  transition: all 0.5s;
}
a.campus_link:hover{
  opacity: 0.3;
}




  /*法学部*/
  .law{background: linear-gradient(transparent 60%, #6355a140 50%);}
  /*経済学部*/
  .economics{background: linear-gradient(transparent 60%,  #008bd540 50%);}
  /*商学部*/
  .commerce{background: linear-gradient(transparent 60%,  #009e4140 50%);}
  /*基幹理工学部*/
  .fundamental{background: linear-gradient(transparent 60%,  #e9b31040 50%);}
  /*社会理工学部*/
  .society{background: linear-gradient(transparent 60%,  #ef820040 50%);}
  /*先進理工学部*/
  .advanced{background: linear-gradient(transparent 60%,  #e9552040 50%);}
  /*文学部*/
  .letters{background: linear-gradient(transparent 60%,  #e3007740 50%);}
  /*総合政策学部*/
  .policy{background: linear-gradient(transparent 60%,  #009d9540 50%);}
  /*国際経営学部*/
  .management{background: linear-gradient(transparent 60%,  #00206340 50%);}
  /*国際情報学部*/
  .informatics{background: linear-gradient(transparent 60%,  #1e121440 50%);}
  /*スポーツ情報学部*/
  .sports{background: linear-gradient(transparent 60%,  #00005540 50%);}
  /*情報農学部*/
  .agriculture{background: linear-gradient(transparent 60%,  #2dae3f40 50%);}

/* =========================
  confetti 範囲制御
========================= */
.confetti-area {
  position: relative;
  overflow: hidden;
}

#confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  top: 0;
}


/* =========================
  パーツ
========================= */
.geo-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  height: 100vh;
}
.campus .geo-layer {
  height: 100%;
}

/* 共通 */
.geo {
  position: absolute;
  opacity: 0.85;
}

/* サイズバリエーション */
.geo-lg {
  width: 24px;
}

.geo-md {
  width: 23px;
}

.geo-sm {
  width: 50px;
}

/* 王子 */
.geo-face {
  width: 110px;
  opacity: 1;
}

/* 配置 */
.geo-lg {
  top: 0;
  left: 2.5%;
}
.geo-md {
  top: 40%;
  right: 5%;
}

.geo-sm:nth-of-type(3) {
  top: 0;
  right: 0;
}

.geo-sm:nth-of-type(4) {
  bottom: 0;
  left: 25%;
}

.geo-face {
  bottom: 0;
  right: 0;
}

.oc-main{
  & .geo01 {
    width: 37px;
    top: 17%;
    left: 14%;
    transform: rotate(45deg);
  }

  & .geo02 {
    width: 35px;
    top: 40%;
    right: 7%;
    transform: rotate(-16deg);
  }

  & .geo03 {
    width: 70px;
		top: 12%;
		right: 260px;
  }
  & .geo04 {
    width: 95px;
		bottom: 21%;
		left: 18%;
  }
  & .geo05 {
    width: 48px;
    bottom: 14%;
    right: 26%;
    transform: rotate(-16deg);
  }
}


@media (max-width: 900px){
  .geo-lg {
    top: -50px;
    left: 75px;
    transform: rotate(-90deg);
  }
  .geo-md {
    top: 57%;
    right: 15%;
    transform: rotate(32deg);
  }
  .geo-face {
    bottom: 0%;
    right: 0;
  }
  .oc-main{
    & .geo01 {
      width: 27px;
      top: 17%;
      left: 14%;
      transform: rotate(19deg);
    }

    & .geo02 {
      width: 20px;
      top: 40%;
      right: 7%;
      transform: rotate(-16deg);
    }

    & .geo03 {
      width: 70px;
      top: 15%;
      right: 20px;
    }
    & .geo04 {
      width: 95px;
      bottom: 30%;
      left: 3%;
    }
    & .geo05 {
      width: 48px;
      top: 40%;
      right: 26%;
      transform: rotate(-16deg);
    }
  }
}