@font-face {
  font-family: MyriadPro-Bold;
  src: url("/css/MYRIADPRO-BOLD.OTF");
}
@font-face {
  font-family: MyriadPro-Regular;
  src: url("/css/MYRIADPRO-REGULAR.OTF");
}
:root {
  /* --main-width-p: calc(100vw - 18.75vw * 2); */
  /* --main-width-p: calc(100vw - 19.18vw * 2); */
  --main-width-a: calc(100vw - 2.78vw * 2);
  --main-text-color: #000000;
  --container-bg:#ffffff;
  --p-base-font-size:0.73vw;
  --p-title-font-size:0.94vw;
  --p-mini-font-size:0.63vw;
}
html{
  
  font-family: MyriadPro-Regular;
  /* cursor: pointer; */
}
a {
  color: inherit;
  text-decoration: none;
}
h2 {
  font-size: 2.08vw;
}

.breadcrumb {
  margin: -1.67vw -18.75vw 1.51vw -18.75vw;
  display: flex;
  line-height: 1.93vw;
  padding-left: 18.75vw;
  font-size: var(--p-base-font-size);
  height: 1.93vw;
  background-color: #eeeeee;
}
.breadcrumb li {
  list-style: none;
}
.breadcrumb li a {
  text-decoration: none;
  color: #999999;
  cursor: default;
}
.breadcrumb li:not(:last-child) a {
  color: #5b0a1f;
  font-family: MyriadPro-Bold;
  cursor: pointer;
}
.breadcrumb .bread_icon {
  margin: 0 8px;
}
.breadcrumb li:not(:last-child):after {
  content: ">";
  margin: 0 5px;
}
.main-content {
  width: var(--main-width-p);
  padding: 1.67vw 18.75vw 4.11vw 18.75vw;
  height: auto;
  /* overflow: auto; */
  text-align: center;
}
 .page-h2{
  display: none;  
}
.main-content-t{
  font-size: var(--p-title-font-size);
  font-family: MyriadPro-Bold;
  line-height: 1.33vw;
  letter-spacing: 0vw;
  color: #333333;
}
.main-content-c{
  font-size: var(--p-base-font-size);
  text-align: left;
  font-weight: normal;
  font-stretch: normal;
  line-height: 1.56vw;
  letter-spacing: 0vw;
  color: #333333;
}

.ga_i_bg{
  background: url(https://d2k4z7x2ql166o.cloudfront.net/HappyaceWebSite/view/static/localImg/gameIcon/locaImg_game_bg.png);
  background-size: cover;
  width: 9.95vw;
	height: 8.85vw;
  position: relative;
}
 .ga_i_tbg{
  background: url(https://d2k4z7x2ql166o.cloudfront.net/HappyaceWebSite/view/static/localImg/gameIcon/locaImg_game_name_bg.png);
  background-size: cover;
  width: 100%;
  height: 2.29vw;
  color: #fff;
  line-height: 2.44vw;
  position: absolute;
  bottom: 1px;
  font-family: MyriadPro-Bold;
  font-size: 1.18vw;
}
.ga_i_t{
  background: linear-gradient(to bottom, #fffcc2 0%, #f0d897 35%, #e0b46b 70%, #ffe39e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}




#contentId .about{
  display: flex;
  gap: 2.3vw;
  align-items: center;
  margin-bottom: 1.82vw;
}
.about-pc{
  display: flex;
  gap: 2.3vw;
  align-items: center;
  margin-bottom: 1.82vw;
}


.page-box {
  width: 100%;
  margin-bottom: 1.88vw;
  display: block;
  list-style: none;    
  text-align: center;
}
button {
  color: #696969;
  font-size: 0.63vw;
  background-color: #ffffff;
  margin-right: 1.3vw;
  width: 1.56vw;
  height: 1.56vw;
  border-radius: 0.21vw;
  border: solid 0.05vw #ebebee;
  font-family: MyriadPro-Regular;
  padding: 0;
  cursor: pointer;
}
button:disabled {
  background-color: #720304;
  color: #fff;
}
b.big-title {
  font-size: 1.37vw;
  line-height: 2.37vw;
}
.pict {
  width: 100%;
  height: auto;
}

table {
  border-collapse: collapse;
  margin: 1.22vw 0;
  font-size: var(--p-base-font-size);
}
th,
td {
  border: 1px solid #e1e1e1;
  padding: 0.78vw;
}

.dg_li li,
.xx_li li{
  list-style-type: none;
  position: relative;
}
.dg_li li::before {
  border-top: 0.2vw solid;
  border-right: 0.2vw solid;
  border-color: #48cd00;
  content: "";
  position: absolute;
  left: -0.54vw;
  transform: translate(-50%, -50%) rotate(120deg);
  height: 0.2vw;
  width: 0.47vw;
  top: 0.52vw;
}

.xx_li li::before, .xx_li li::after {
  content: '';
  position: absolute;
  top: 0.52vw;
  left: -0.54vw;
  width: 0.62vw;
  height: 0.15vw; 
  background-color: #2e2d2d; 
}
 
.xx_li li::before {
  transform: translate(-50%, -50%) rotate(45deg); 
}
 
.xx_li li::after {
  transform: translate(-50%, -50%) rotate(-45deg); 
}
.s-pc{
  display: block;
}
.s-mb{
  display: none;
}
@media screen and (max-width: 767px) {  
  .s-pc{
    display: none;
  }
  .s-mb{
    display: block;
  }

  h2{
    font-size: 5.56vw;
  }
  .breadcrumb {
    display: none;
  }
  .main-content {
    width: var(--main-width-a);
    padding: 3.56vw 2.78vw;
    margin-top: 14.44vw;
  }

  .main-content-t{
    font-size: 4.17vw;
    line-height: 3.33vw;
  }
  .main-content-c{    
    font-size: 3.06vw;  
    line-height: 4.26vw;  
  }
  .ga_i_bg{
    width: 30.78vw;
    height: 27.08vw;
  }
  .ga_i_tbg{
    width: 96%;
    height: 9.18vw;
    color: #fff;
    line-height: 9.68vw;
    position: absolute;
    bottom: 0;
    font-size: 3.88vw;
  }
  .product-container{
    margin-top: 12.44vw;
  }
  .page-h2{
    display: block;
    padding-bottom: 1.82vw;
    font-size: 6.67vw;
    margin-top: 0;
    border-bottom: 0.28vw solid #a91b21;
    color: #a91b21;
    text-align: left;
    font-family: MyriadPro-Bold;
    margin-bottom: 3.39vw;
  }
  #contentId .about{
    display: flex;
  }
  #contentId .about-pc{
    display: none;
  }
  .page-box{
    display: none;
  }
  b.big-title {
    font-size: 3.37vw;
    line-height: 7.37vw;
}
table {
  font-size: 3.06vw;
}
}