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

html {
	padding: 0;
	margin: 0;
}
body {
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	font-style: normal;
  font-optical-sizing: auto;
  font-size: 12px;
  line-height: 170%;
  letter-spacing: 0.016em;
	padding: 0;
	margin: 0;
}

.anim,.anim_slow,.anim_fadein {
  opacity: 0;
}
.anim_fadein {
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}
.anim.active {
  animation: poyoyon .5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
.anim_slow.active {
  animation: poyoyon .5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
	animation-delay: .4s;
}
.anim_fadein.active {
  opacity: 1;
}
@media (max-width: 767px) {
	.anim.active {
	  animation: poyoyon_sp .5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
	}
	.anim_slow.active {
	  animation: poyoyon_sp .5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
		animation-delay: .4s;
	}
}
 
@keyframes poyoyon {
  0% {
    transform: translateY(70px);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
  20%,100% {
    opacity: 1;
  }
}
@keyframes poyoyon_sp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
  20%,100% {
    opacity: 1;
  }
}

@media (max-width: 767px) {
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
}
@media (min-width: 768px) {
	.sp {
		display: none;
	}
	.pc {
		display: block;
	}
}


/*ローディング*/
#loadingWrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
	flex-flow: wrap;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease;
}
#loadingWrap.fadeout {
  opacity: 0;
  pointer-events: none;
}
.loadingBox {
	width: 100px;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.loadingImg {
	width: 50px;
	margin: 3% auto;
}
.loadingImg img {
	width: 100%;
	max-width: 100%;
}
.loadingText {
	flex: 0 0 100%;
	width: 100%;
	text-align: center;
	font-size: 10px;
	color: #999;
}
/*=====================================================================================================
全体
=====================================================================================================*/

#sapporoWrap {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	line-height: 170%;
	background-color: #FFF;
	color: #000;
}
#sapporoWrap img {
	vertical-align: bottom;
	width:100%;
	max-width:100%;
	padding:0;
	margin:0;
}
#sapporoWrap a,
#sapporoWrap a img {
  text-decoration: none;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
#sapporoWrap a:after, a:before {
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
#sapporoWrap a:hover img {
	transform: translateY(-5px);
}

/* トップへ戻るボタンの基本スタイル */
#CupStarWrap .back-to-top {
    position: fixed;/* 追従する設定 */
    bottom: 20px;
    right: 20px;
    display: none;/* スクロールするまでは非表示 */
    transition: background-color 0.3s ease, opacity 0.3s ease;/* ふわっと表示するためのアニメーション設定 */
    z-index: 10;
    width: 64px;
    height: 64px;
}
/* スムーズな表示/非表示のためのスタイル */
#CupStarWrap .back-to-top.show {
    display: block;
    opacity: 1;
}


/*=====================================================================================================
#kv
=====================================================================================================*/
#sapporoWrap #kv,
#sapporoWrap #kv h1 {
	width: 100%;
}


/*=====================================================================================================
#lineupWrap
=====================================================================================================*/
#sapporoWrap #lineupWrap {
	background-image: url("../images/bg_01.svg");
    background-position: top center;
    background-size: 9%;
    background-repeat: repeat;
	padding: 2% 0 0;
}
#sapporoWrap #lineupWrap h2 {
	width: 90%;
	max-width: 950px;
	margin: 5% auto 1%;
}
#sapporoWrap h3 {
	width: 68%;
	max-width: 777px;
	margin: 5% auto 1%;
}
#sapporoWrap #lineupWrap .lineupArea {
	width: 90%;
	max-width: 1200px;
	/*margin: 5% auto 12%;*/
	margin: 0 auto 12%;
	border: solid 10px #01A87F;
	/*border-radius: 20px;*/
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	background-color: #fff;
	padding-bottom: 3%;
}
#sapporoWrap #lineupWrap .lineupHeader {
	width: 90%;
	max-width: 1200px;
	padding: 20px 0;
	margin: 5% auto 0;
	background-color: #01A87F;
	text-align: center;
	position: relative;
	border: solid 10px #01A87F;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
#sapporoWrap #lineupWrap .lineupHeader h4 {
	width: 67%;
	max-width: 540px;
	margin: 0 auto;
}
#sapporoWrap #lineupWrap .lineupArea .lineupBox {
	width: 90%;
	margin: 3% auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#sapporoWrap #lineupWrap .lineupArea .lineupBox .lineupItem {
	flex: 0 0 44%;
	margin: 3% 3%;
	text-align: center;
}
#sapporoWrap #lineupWrap .lineupArea .lineupItem p {
	font-size: 16px;
	padding-top: 5%;
	white-space: pre-wrap;     /* スペースや改行を保持しつつ折り返し */
	word-break: keep-all;      /* 単語途中での改行を防ぐ */
}
#sapporoWrap #lineupWrap .lineupArea .lineupBoxB {
	width: 90%;
	margin: 6% auto 0;
}
#sapporoWrap #lineupWrap .lineupArea .lineupBoxB .lineupItem {
	width: 80%;
	margin: 3% auto 5%;
	text-align: center;
}
#sapporoWrap #lineupWrap .lineupArea .lineupBoxB .lineupItem p {
	padding-top: 2%;
}
#sapporoWrap #lineupWrap .lineupAreaB {
	border: solid 10px #0198D9!important;
	margin: 0 auto 5%;
}
#sapporoWrap #lineupWrap .lineupHeaderB {
	background-color: #0198D9!important;
	border: solid 10px #0198D9!important;
}
#sapporoWrap #lineupWrap .lineupAreaB .lineupBox {
	width: 90%;
	margin: 3% auto 0;
}
#sapporoWrap .sapporoBtn {
	width: 43.8%;
	max-width: 500px;
	margin: 3% auto;
	padding: 0;
}
#sapporoWrap #lineupWrap .lineup01_Chara01 {
	position: absolute;
	bottom: 0;
	left: 2%;
	width: 10.4%;
}
#sapporoWrap #lineupWrap .lineup01_Chara02 {
	position: absolute;
	bottom: 0;
	right: -5%;
	width: 20%;
}
#sapporoWrap #lineupWrap .lineup01_Chara01 img {
	transform: translateY(10%);
}
#sapporoWrap #lineupWrap .lineup01_Chara02 img {
	transform: translateY(10%);
}
#sapporoWrap #lineupWrap .lineup02_Chara01 {
	position: absolute;
	bottom: 0;
	left: -2%;
	width: 19.4%;
}
#sapporoWrap #lineupWrap .lineup02_Chara02 {
	position: absolute;
	bottom: 0;
	right: -5%;
	width: 25.7%;
}
#sapporoWrap #lineupWrap .lineup02_Chara01 img {
	transform: translateY(-2%);
}
#sapporoWrap #lineupWrap .lineup02_Chara02 img {
	transform: translateY(-2%);
}
#sapporoWrap #lineupWrap .lineup03_Chara01 {
	position: absolute;
	bottom: 0;
	left: -2%;
	width: 26.7%;
}
#sapporoWrap #lineupWrap .lineup03_Chara02 {
	position: absolute;
	bottom: 0;
	right: -5%;
	width: 28.3%;
}
#sapporoWrap #lineupWrap .lineup03_Chara01 img {
	transform: translateY(30%);
}
#sapporoWrap #lineupWrap .lineup03_Chara02 img {
	transform: translateY(15%);
}
#sapporoWrap #lineupWrap .lineup04_Chara01 {
	position: absolute;
	bottom: 0;
	left: -2%;
	width: 21.9%;
}
#sapporoWrap #lineupWrap .lineup04_Chara02 {
	position: absolute;
	bottom: 0;
	right: -5%;
	width: 27%;
}
#sapporoWrap #lineupWrap .lineup04_Chara01 img {
	transform: translateY(-2%);
}
#sapporoWrap #lineupWrap .lineup04_Chara02 img {
	transform: translateY(15%);
}


@media (max-width: 767px) {
	#sapporoWrap #lineupWrap {
		background-image: url("../images/bg_01.jpg");
	}
	#sapporoWrap #lineupWrap .lineupArea {
		border: solid 5px #01A87F;
	}
	#sapporoWrap #lineupWrap .lineupAreaB {
		border: solid 5px #0198D9!important;
	}
	#sapporoWrap #lineupWrap .lineupHeader {
		padding: 3% 0 2%;
		border: solid 5px #01A87F;
	}
	#sapporoWrap #lineupWrap .lineupHeaderB {
		border: solid 5px #0198D9!important;
	}
	#sapporoWrap #lineupWrap .lineupArea .lineupItem p {
		font-size: 12px;
		line-height: 135%;
	}
	#sapporoWrap .sapporoBtn {
		width: 70%;
		margin: 6% auto;
	}
}

/*=====================================================================================================
#collaboCPWrap
=====================================================================================================*/
#sapporoWrap .wave {
	width: 100%;
	padding: 0;
	margin-top: 10%;
	margin-bottom: 0;
	display: block;
}
#sapporoWrap .wave img {
	padding: 0;
	display: block;
	vertical-align: bottom;
}
#sapporoWrap #collaboCPWrap {
	background-image: url("../images/bg_02.svg");
    background-position: top center;
    background-size: 100%;
    background-repeat: repeat;
	margin-top: 0;
	padding: 2% 0 5%;
}
#sapporoWrap #collaboCPWrap h2 {
	width: 90%;
	max-width: 1140px;
	margin: -9% auto 0;
}
#sapporoWrap #collaboCPWrap .facilityBox {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto 1%;
	border: solid 10px #01A87F;
	border-radius: 20px;
	background-color: #fff;
	padding-bottom: 3%;
}
#sapporoWrap #collaboCPWrap .facilityBox .facilityTitle {
	width: 90%;
	margin: 7% auto 3%;
}
#sapporoWrap #collaboCPWrap .facilityBox .facilityMap {
	width: 90%;
	margin: 3% auto;
	position: relative;
}
#sapporoWrap .facilityBox a img {
  text-decoration: none;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
#sapporoWrap .facilityBox a:hover img {
	transform: translateY(0);
	transform: scale(1.05);
	opacity: 0.8;
}
#sapporoWrap #collaboCPWrap .facilityBox .facilityMap .facilityItem01 {
	position: absolute;
	top: 10%;
	left: 0;
	width: 21.2%;
}
#sapporoWrap #collaboCPWrap .facilityBox .facilityMap .facilityItem02 {
	position: absolute;
	top: 10%;
	left: 25%;
	width: 31%;
}
#sapporoWrap #collaboCPWrap .facilityBox .facilityMap .facilityItem03 {
	position: absolute;
	top: 45%;
	left: 0;
	width: 26%;
}
#sapporoWrap #collaboCPWrap .facilityBox .facilityMap .facilityItem04 {
	position: absolute;
	top: 0;
	right: 0;
	width: 28.5%;
}
#sapporoWrap #collaboCPWrap .facilityBox .facilityMap .facilityItem05 {
	position: absolute;
	top: 28%;
	right: 0;
	width: 33.7%;
}
#sapporoWrap #collaboCPWrap .facilityBox .facilityMap .facilityItem06 {
	position: absolute;
	top: 55%;
	right: 0;
	width: 31.9%;
}
#sapporoWrap #collaboCPWrap .facilityBox .facilityMap .facilityItem07 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 29.6%;
}
#sapporoWrap #collaboCPWrap .facilityBox .facilityMap .facilityItem08 {
	position: absolute;
	bottom: 0;
	left: 35%;
	width: 29.8%;
}
#sapporoWrap #collaboCPWrap .facilityBox .facilityMap .facilityItem09 {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 28.3%;
}

#sapporoWrap #collaboCPWrap .CPArea {
	width: 90%;
	max-width: 1200px;
	margin: 3% auto 1%;
	border: solid 10px #fff;
	border-radius: 20px;
	padding-bottom: 3%;
	position: relative;
	background-image: url("../images/bg_03.svg");
    background-position: top center;
    background-size: 15%;
    background-repeat: repeat;
}
#sapporoWrap #collaboCPWrap .CPArea .CPChara01 {
	position: absolute;
	top: 0;
	left: -4%;
	width: 17.5%;
}
#sapporoWrap #collaboCPWrap .CPArea .CPChara02 {
	position: absolute;
	top: 0;
	right: -5%;
	width: 19%;
}
#sapporoWrap #collaboCPWrap .CPArea .CPChara01 img {
	transform: translateY(-30%);
}
#sapporoWrap #collaboCPWrap .CPArea .CPChara02 img {
	transform: translateY(-45%);
}
#sapporoWrap #collaboCPWrap h3 {
	width: 78.4%;
	max-width: 894px;
	margin: 10% auto 1%;
}
#sapporoWrap #collaboCPWrap .CPArea h4 {
	width: 80%;
	margin: 4% auto 5%;
}
#sapporoWrap #collaboCPWrap .CPArea .CPtxt01 {
	width: 60%;
	margin: 3% auto 1%;
}
#sapporoWrap #collaboCPWrap .CPArea .designBox {
	width: 90%;
	margin: 3% auto 1%;
	display: flex;
	justify-content: space-between;
}
#sapporoWrap #collaboCPWrap .CPArea .designBox .designItem {
	flex: 0 0 49%;
}
#sapporoWrap #collaboCPWrap .CPArea .kome {
	width: 90%;
	margin: 1% auto 1%;
	text-align: center;
	font-size: 12px;
	color: #fff;
}
#sapporoWrap #collaboCPWrap .CPArea .CPtxt02 {
	width: 80%;
	margin: 5% auto 5%;
}

#sapporoWrap #collaboCPWrap .CPArea .yellowBox {
	width: 90%;
	margin: 3% auto 1%;
	border-radius: 40px;
	background-color: #FFFF35;
	padding: 3% 0;
}
#sapporoWrap #collaboCPWrap .CPArea .yellowBox .taishou {
	width: 30%;
	max-width: 200px;
	margin: 0 auto 3%;
}
#sapporoWrap #collaboCPWrap .CPArea .yellowBox .komeB {
	width: 90%;
	margin: 3% auto 1%;
	text-align: center;
	font-size: 20px;
	color: #000;
}
#sapporoWrap #collaboCPWrap .CPArea .yellowBox .taishouImg {
	width: 90%;
	margin: 3% auto 1%;
}
#sapporoWrap #collaboCPWrap .CPArea .yellowBox .kome {
	color: #000;
}

@media (max-width: 767px) {
	#sapporoWrap #collaboCPWrap {
		background-image: url("../images/bg_02.jpg");
	}
	#sapporoWrap #collaboCPWrap .facilityBox {
		border: solid 5px #01A87F;
		border-radius: 20px;
	}
	#sapporoWrap #collaboCPWrap .CPArea {
		background-image: url("../images/bg_03.jpg");
		border: solid 5px #fff;
		border-radius: 20px;
	}
	#sapporoWrap #collaboCPWrap .CPArea .CPtxt01 {
		width: 80%;
	}
	#sapporoWrap #collaboCPWrap .CPArea .kome,
	#sapporoWrap #collaboCPWrap .CPArea .yellowBox .komeB {
		font-size: 10px;
		line-height: 135%;
	}
	#sapporoWrap #collaboCPWrap .CPArea .yellowBox {
		border-radius: 20px;
	}
}