/* LP CSS */
#container {
  margin: 0 auto;
  width: 100%;
}
.column2R #main {
  float: none;
  width: auto;
}
#lp_page {
  margin-top: 0 !important;
}
@media screen and (max-width: 479px) {
	#container {
		margin-bottom: 0 !important;
	}
	#lp_page {
		width: 100% !important;
		margin-bottom: 0 !important;
	}
}
/*ヘッダー非表示*/
#Header, #Globalnavi, .leadSection {
  display: none !important;
}
/*フッター非表示*/
.footerTagline, .footerTagline, #footer, #footerLinks, #footerCopy, .pagetop {
  display: none;
}
.p-registered,.l-pagetop.p-pagetop,.l-footer.p-footer {
	display: none!important;
}


html {
  overflow: scroll;
  color: #333;
  font-size: 62.5%;
  background-color: #fcfcfc; }

body {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  letter-spacing: .04em;
  background-color: #ffffff; }
  @media only screen and (max-width: 479px) {
    body {
      letter-spacing: 0.08rem; } }

#top {
  overflow: hidden; }

.inner {
  width: 100%;
  max-width: calc(1024px + 3.2rem);
  padding-right: 1.6rem;
  padding-left: 1.6rem;
  margin: 0 auto; }

.inner.-wide {
  max-width: calc(1200px + 3.2rem); }

.inner.-tight {
  max-width: calc(960px + 3.2rem); }

@media only screen and (max-width: 767px) {
  .-pc-only {
    display: none; } }

.-sp-only {
  display: none; }
  @media only screen and (max-width: 767px) {
    .-sp-only {
      display: inline-block; } }

.br1 {
  display: none; }
  @media only screen and (max-width: 767px) {
    .br1 {
      display: inline-block; } }

@media only screen and (max-width: 767px) {
  .br2 {
    display: none; } }


#s_footer {
  padding: 20px 0;
  background-color: #000;
}

@media screen and (max-width: 479px) {
  #s_footer {
    padding: 3.33333vw 0;
  }
}


/* footeradd */
#s_footer .copyright {
  font-family: 'Roboto';
  letter-spacing: 0.07em;
  color: #fff;
  font-size: 16px;
  text-align: center;
}

@media screen and (max-width: 479px) {
  #s_footer .copyright {
    font-size: 2.4vw;
  }
}

/* saleEnd add */
.sort__listBox .sort__content .sort__item.saleEnd {
	position: relative;
	pointer-events: none;
}
.sort__listBox .sort__content .sort__item.saleEnd::after {
	content: "販売終了致しました";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(255,255,255,.7);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 35px;
	font-weight: 600;
}
@media screen and (max-width: 479px) {
	.sort__listBox .sort__content .sort__item.saleEnd::after {
		font-size: 7.5vw;
	}
}


/* SQUADメンバー調整 20211026 */

/*.switching .switching__box .tabs label.tab_item {
	width: calc(100%/2);
}
@media screen and (max-width: 479px) {
	.switching .switching__box .tabs label.tab_item {
		width: 200px;
	}
}*/


/* wintercamp add */

.bnrWrap {
	background: url("../../5info/img/galleria_collaboration/background-pic2.png?$staticlink$") no-repeat;
	background-size: cover;
	padding: 8rem 5rem;
}
.bnrWrap figure {
	max-width: 900px;
	margin: 0 auto;
}
.bnrWrap figure img{
	margin: 0 auto;
}
.bnrWrap figure a {
	position: relative;
	bottom: 0;
	box-shadow: 0px 3px 6px 0px rgb(0,0,0,.15);
	transition: all .3s ease-in-out;
}
.bnrWrap figure a:hover {
	bottom: -3px;
	box-shadow: 0px 0px 6px 0px rgb(0,0,0,.15);
	opacity: .7;
}
@media screen and (max-width: 479px) {
	.bnrWrap {
		padding: 3rem;
	}
}


/* 202201 add */
.sp {
	display: none;
}
.chartWrap {
	margin-top: 100px;
	margin-bottom: 70px;
	padding: 0 1.6rem;
	text-align: center;
}

@media screen and (max-width: 479px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.chartWrap {
		margin-top: 10vw;
		margin-bottom: 7vw;
	}
}

@media screen and (max-width: 767px) {
	.switching .switching__box .tabs .switching__button .switching__buttonItem {
		width: 100% !important;
	}
	.switching .switching__box .tabs .tab_item {
		margin-right: 0 !important;
		margin-bottom: 0 !important;
	}
}



/* SQUADメンバー調整 202205　1名の場合 */

/*.switching .switching__box .tabs label.tab_item {
	width: 100%;
}*/

/* SQUADメンバー調整 20230911　3名の場合 */

.switching .switching__box .tabs label.tab_item {
	width: calc(100%/3);
}
/*@media screen and (max-width: 479px) {
	.switching .switching__box .tabs label.tab_item {
		width: 200px;
	}
}*/

/*# sourceMappingURL=style.css.map */

  .p-products-all-item {
	  color: #484848;
	  font-family: "Roboto", "Noto Sans JP", YuGothic Medium, 游ゴシック Medium, Yu Gothic Medium, 游ゴシック, 游ゴシック体, YuGothic, メイリオ, Meiryo, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Sans-Serif;
	  line-height: 1.15;
	  letter-spacing: 0;
  }


  /*240209追加*/
  .CollaborationModel .table-title {
    font-weight: bold;
    color: #103582;
  }
  .CollaborationModel .table-title h3 {
    font-size: 24px;
  }
  .CollaborationModel .table-title p {
    font-size: 16px;
  }
  #container .CollaborationModel .u-mt-ss {
    font-size: 16px;
  }
  .CollaborationModel .index_vertical {
    background-color: #00a2e6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-top: 1px solid #ececec;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center !important;
    vertical-align: middle;
    height: auto;
    width: 150px;
    padding: 1rem;
  }
  .CollaborationModel table td {
    border: 1px solid gray;
    text-align: left;
    min-width: 150px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-right: 1px solid #c8c8c8;
    font-size: 18px;
    border-bottom: 1px solid #d8d8d8;
    line-height: 1.4;
    vertical-align: middle;
    padding: 2.5rem 2.0rem;
    border-top: none;
  }
  .widthbar {
    position: relative;
    margin-top: 40px;
    margin-bottom: 16px;
    margin-right: 20px;
    margin-left: 190px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    font-size: 14px;
    padding: 8px 0;
    background: linear-gradient(to right,#7dc2d8,#da6799);
  }
  .widthbar::before {
    display: block;
    z-index: 2;
    position: absolute;
    top: 15px;
    left: -4px;
    width: 28px;
    height: 27px;
    -webkit-transform: rotate(45deg) translateX(-50%);
    transform: rotate(45deg) translateX(-50%);
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    background-color: #7dc2d8;
    content: "";
  }
  .widthbar::after {
    display: block;
    z-index: 2;
    position: absolute;
    top: 15px;
    right: -25px;
    width: 28px;
    height: 27px;
    -webkit-transform: rotate(45deg) translateX(-50%);
    transform: rotate(45deg) translateX(-50%);
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #da6799;
    content: "";
  }
  .widthbar-text {
    display: flex;
    padding: 0 2.0rem;
    justify-content: space-between;
    color: #fff;
    font-weight: bold;
  }
  .CollaborationModel thead {
    background: #114A9E;
    background-attachment: fixed;
    background-image: -webkit-gradient(linear, left top, right top, from(#004da1), to(#00277b));
    background-image: linear-gradient(to right, #004da1 0%, #00277b 100%);
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
  }
  .CollaborationModel thead td {
    text-align: center;
  }
  .CollaborationModel .slant_low4 {
    background-image: linear-gradient(30deg, #00a2e6 50%, #004da1 50%, #004da1);
    box-sizing: border-box;
    position: relative;
    height: 100px;
    border-top: solid #ececec 1px;
    border-right: solid #c8c8c8 1px;
  }
  .CollaborationModel .slant_low4::before {
    position: absolute;
    top: 10px;
    right: 8px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    content: "グラフィック";
    transform: rotate(0deg);
  }
  .CollaborationModel .slant_low4::after {
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-align: center;
    content: "CPU";
    transform: rotate(0);
  }
  .heightbar {
    position: relative;
    width: 40px;
    height: 80%;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    font-size: 12px;
    margin-bottom: 20px;
    padding: 8px 0;
    background: linear-gradient(to bottom,#da6799,#7dc2d8);
  }
  .heightbar::before {
    display: block;
    z-index: 2;
    position: absolute;
    bottom: -25px;
    left: 15px;
    width: 28px;
    height: 27px;
    -webkit-transform: rotate(45deg) translateX(-50%);
    transform: rotate(45deg) translateX(-50%);
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #7dc2d8;
    content: "";
  }
  .heightbar::after {
    display: block;
    z-index: 2;
    position: absolute;
    top: -3px;
    right: -5px;
    width: 28px;
    height: 27px;
    -webkit-transform: rotate(45deg) translateX(-50%);
    transform: rotate(45deg) translateX(-50%);
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    background-color: #da6799;
    content: "";
  }
  .heightbar-text {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    margin: 0 auto;
    padding: 2.0rem 0;
    gap: 48px;
    justify-content: center;
    align-content: space-between;
  }
  .heightbar-text span {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #fff;
    font-weight: bold;
  }
  .table-wrap{
    display: grid;
    grid-template-columns: 0.05fr 1fr;
    gap: 0.5rem;
    align-items: end;
  }
  .level-conts {
    display: flex;
    gap: 24px;
    justify-content: right;
    margin-top: 16px;
  }
  .level-list {
    display: flex;
    font-size: 16px;
    font-weight: bold;
    align-items: center;
    gap: 0.5rem;
  }
  .level-list img {
    width: 30px;
  }
  .medal {
    position: relative;
  }
  .medal img {
    position: absolute;
    top: -30px;
    left: -24px;
    width: 30px;
  }
.CollaborationModel .tooltip {
  position: relative;
  cursor: pointer;
  text-decoration: underline;
}

.CollaborationModel .tooltip-text {
  -webkit-box-sizing: border-box;
    box-sizing: border-box;
    visibility: hidden;
    z-index: 2;
    position: absolute;
    bottom: 120%;
    left: 50%;
    width: 200px;
    margin-top: 10px;
    padding: 12px 10px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 6px;
    background-color: #fff;
    -webkit-box-shadow: 8px 9px 8px -6px rgba(0,0,0,.6);
    box-shadow: 8px 9px 8px -6px rgba(0,0,0,.6);
    font-size: 12px;
    text-align: center;
    color: #00a2e6;
}
.CollaborationModel .tooltip-text::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  -webkit-box-shadow: 8px 9px 8px -6px rgba(0,0,0,.6);
  box-shadow: 8px 9px 8px -6px rgba(0,0,0,.6);
  content: " ";
}

.tooltip:hover .tooltip-text {
  bottom: 100%; /* Y軸の位置 */
  visibility: visible; /* ツールチップを表示 */
  opacity: 1; /* 不透明度を100％に */
}

@media screen and (max-width: 767px){
  .CollaborationModel {
    padding: 8rem 0 6rem;
}
  .table-area {
  overflow: scroll;
}
.table-area-wrap {
  width: 500px;
}
  .widthbar {
    width: 100%;
    margin-bottom: 8px;
  }
  .level-conts {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: left;
    margin-bottom: 30px;
  }
  .level-list,
  .CollaborationModel .index_vertical {
    font-size: 14px;
  }
  .CollaborationModel table td {
    font-size: 14px;
    padding: 1.5rem 1.0rem;
  }
  .level-list img {
    width: 20px;
  }
  .CollaborationModel .slant_low4::before,
  .CollaborationModel .slant_low4::after {
    font-size: 12px;
  }
  .medal img {
    top: -30px;
    left: -16px;
  }
}