@charset "utf-8";

@font-face {
	font-family: 'FUJI-新まろゴシックE';
	src: url(https://cbnm.fccl-homecomputing.com:8443/font/FUJI-ShinMaroGothic-E.otf) format('opentype');
}

* { box-sizing: border-box; }
html{font-size: calc(10px + 14 * (100vw - 768px)/1152);/* 768px - 14px | 1920px - 24px */ font-family: 'FUJI-新まろゴシックE', "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif;}
@media screen and (min-width: 1920px){
  html{font-size:24px;}
}

ul, ol{ margin:0; padding:0;}
li{ list-style: none;}

a{ text-decoration: none;color:#000;}
a:hover{ text-decoration: underline;}
.btn-link a{ color: #D21E00; font-size: 1.66rem; display: block; position: relative;}
.btn-link a:hover{ text-decoration: none;}
.btn-link a img{ width:100%; height: auto;}
.btn-link a span{ display: block; width: 100%; text-align: center; position: absolute; top: 30%;}
.btn-link a:hover img{ visibility: hidden;}

.displayPC{ display: block;}
.displaySP{ display: none!important;}
img.displayPC{ display: inline-block;}

@media screen and (max-width: 769px) and (orientation: portrait) {
  a:hover{ opacity: 1;}
  img{ width: 100%;}
  .displayPC{ display: none!important;}
  .displaySP{ display: block!important;}
}

/*-- 1920px基準 --*/
header{ background: #F4E100; padding:16px 8px; position: -webkit-sticky; position: sticky; top: 0; z-index: 999;}
header .header-inner{ max-width:1920px; margin: 0 auto; display: flex; justify-content: space-between;}
header p, header ul{ margin: 0;}
header .header-col{ align-self:center;}
header .fukumaro-gameland-id{ margin: 0 1.8rem; font-size:32px;}
header .header-col ul{ display: flex;}
header .header-col ul li{ margin: 0 2vw 0 0; list-style: none; font-size:24px;}
@media screen and (max-width: 1281px) {
  header .header-col ul{ display:none;}
}
@media screen and (max-width: 769px) and (orientation: portrait) {
  header .fukumaro-gameland-id{ font-size:3.5rem;;}
}


.news-col{ background: #F4E100; padding-bottom: 34px;}
.news-col .sliderArea{ width: 100%; margin-left:auto; margin-right:auto;}
.news-col .sliderArea img{ width: 100%; height: auto;}
.howtoplay-btn a{ color: #fff; display: block; width: 29.2vw; max-width: 540px; margin-left: auto; margin-right:3rem; }
.howtoplay-btn a:hover{ background: url(/itsumo/fukumaro/game/images/gl_btn_howtoplay_hover.png) no-repeat; background-size: 100% auto;}
@media screen and (max-width: 769px) and (orientation: portrait) {
  .howtoplay-btn a{ width: 50vw; margin-right:auto;}
}

.sliderArea .slick-prev, .sliderArea .slick-next{ top: 45%; width: 2vw; max-width: 60px; height: 5vw; max-height: 150px;}
.slick-prev::before, .slick-next::before{ content:"";}
.slick-prev:hover, .slick-prev:focus{ background: url(/itsumo/fukumaro/game/images/gl_top_prevBtn_hover.png) no-repeat; background-size: 100% auto;}
.slick-next:hover, .slick-next:focus{ background: url(/itsumo/fukumaro/game/images/gl_top_nextBtn_hover.png) no-repeat; background-size: 100% auto;}
.sliderArea .slick-prev{ left:50px; z-index: 10; background: url(/itsumo/fukumaro/game/images/gl_top_prevBtn_normal.png) no-repeat; background-size: 100% auto;}
.sliderArea .slick-next{ right:50px; z-index: 10; background: url(/itsumo/fukumaro/game/images/gl_top_nextBtn_normal.png) no-repeat; background-size: 100% auto;}
.slick-dots{ position: static; margin-top:10px;}
.slick-dots li{ width: 40px; height: 16px; margin:0 10px;}
.slick-dots li button::before{ content:"";}
.slick-dots li button{ width: 40px; height: 16px; background: url(/itsumo/fukumaro/game/images/gl_top_pagerOff.png) no-repeat; background-size: 100% auto;}
.slick-dots .slick-active button{ background: url(/itsumo/fukumaro/game/images/gl_top_pagerOn.png) no-repeat; background-size: 100% auto;}

@media screen and (max-width: 1280px) {
  .sliderArea .slick-prev, .sliderArea .slick-next{ width: 30px; height: 75px;}
  .sliderArea .slick-prev{ left:20px;}
  .sliderArea .slick-next{ right:20px;}
}
@media screen and (max-width: 769px) and (orientation: portrait) {
  .sliderArea .slick-prev, .sliderArea .slick-next{ width: 5vw; height: 11vw;}
  .sliderArea .slick-prev{ left:10px;}
  .sliderArea .slick-next{ right:10px;}
  .slick-dots li{ width: 20px; height: 8px;}
  .slick-dots li button{ width: 20px; height: 8px;}
}

.game-land-col{ background: rgb(244,225,0); background: linear-gradient(180deg, rgba(244,225,0,1) 0%, rgba(244,225,0,1) 70%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%);}
.movie-col{ max-width: 1696px; margin:0 auto; padding: 2vw 48px 6vw; display: flex; flex-direction: row-reverse;}
.fukumaro-point01{ width: 25%; max-width:400px; margin-left: -5%; margin-top: 7%;}
.fukumaro-point01 h2{ display: flex; justify-content: center; width: 100%; height: 47%; background: url(/itsumo/fukumaro/game/images/balloon_rectB582x388.png) no-repeat; background-size: 100% auto; margin: 0;}
.fukumaro-point01 h2 span{ align-items: center; text-align: center; display: block; padding-top: 12%; font-size: 1.66rem;}
.fukumaro-point01 img{ width: 100%; height: auto; margin-top:-20%;}
.movie{ position: relative; width: 80%; max-width: 1200px;}
.movie a{ position: absolute; top: 4%; left: 13.1%;/*top: 1.9vw; left: 10.2vw;*/ width: 73.1%;}
.movie img{ width:100%; height: auto;}
@media screen and (min-width: 1920px) {
  .fukumaro-point01{ margin-top: 5%;}
}
@media screen and (max-width: 769px) and (orientation: portrait) {
  .fukumaro-point01{ display: none;}
  .movie-col{padding: 2vw 48px 6vw;}
  .movie{ width:100%;}
}

.mini-game-col{ position: relative; background: url(/itsumo/fukumaro/game/images/gl_games_bg.png); background-size: 100%;}
.mini-game-col h2{ font-size:2.1rem; color: #fff; width: 15em; margin:0;  position: absolute; top:-1.7rem; display: flex; align-items: center; background: url(/itsumo/fukumaro/game/images/gl_title_bg.png) no-repeat right; background-size: auto 100%;}
.mini-game-col h2 span{ padding: 2% 1rem 2.9%;}
.mini-game-box{ max-width:1546px; margin:0 auto; padding:5rem 48px 10rem;}
.mini-game-list{ display: flex; flex-wrap: wrap;}
.mini-game-list li{ list-style:none; width:23%; position: relative; margin: 0 1% 1.5vw;}
.mini-game-list li .mini-game-thumbnail { width:100%; display: flex; align-items: center; justify-content: center; }
.mini-game-list li .mini-game-thumbnail-back{ width:100%; height: auto; }
.mini-game-list li .mini-game-thumbnail-front
{ 
  width:calc(100% * 400 / 440); 
  height: auto; 
  position: absolute; 
}
.mini-game-list li a
{
  display: none;
  width:calc(100% * 400 / 440); 
  height: auto; 
  position: absolute;
  display: flex;
}
.mini-game-list li .mini-game-gif
{ 
  display: none; 
  width: 100%;
  height: auto; 
  -webkit-border-radius:13px;
  -moz-border-radius:13px;
  border-radius:13px;  
}

.mini-game-list li span{ display: block; bottom: 1vw; position: absolute; width: 100%; text-align: center; font-size: 1.2rem;}
.mini-game-list li .mini-game-title { width:100%; }

.mini-game-new::before{ content: ""; display: block; width: 10vw; max-width: 126px; height: 5vw; max-height: 62px; background: url(/itsumo/fukumaro/game/images/gl_games_new.png) no-repeat; background-size: 100%; position: absolute; top:-5px;}
.mini-game-link{ display: flex;}
.fukumaro-point02{ display: flex; flex-flow: row-reverse; width: 22vw; max-width: 422px; margin-right:38px;}
.fukumaro-point02 p{ position: relative; margin-top:0; width: 13.4vw; max-width:260px; background: url(/itsumo/fukumaro/game/images/balloon_rectL260x112.png) no-repeat; background-size: 100% auto;}
.fukumaro-point02 p span{ display: block; width:95%; text-align: center; position: absolute; top: 20%; left: 5%;}
.fukumaro-point02 img{ width:8.6vw; max-width: 162px; height: auto;}
.playmovie-link a{ display: block; width: 29.2vw; max-width: 560px; }
.playmovie-link a:hover{ background: url(/itsumo/fukumaro/game/images/gl_btn_playmovie_hover.png) no-repeat; background-size: 100% auto;}
@media screen and (max-width: 1600px) {
  .fukumaro-point02{ margin-right:10vw;}
}
@media screen and (max-width: 769px) and (orientation: portrait) {
  .mini-game-col h2{ width:100%;}
  .mini-game-col h2 span{ text-align: center; width: 100%; top:-2.5rem;}
  .mini-game-box{ padding:10vw 48px 3vw;}
  .mini-game-list li{ width:48%;}
  .mini-game-list li span{ font-size: 0.8rem;}
  .mini-game-link{ display: block;}
  .fukumaro-point02{ width: 50vw; max-width:422px; margin:2vw auto;}
  .fukumaro-point02 p{ width:30vw; max-width:260px; font-size: 2rem;}
  .fukumaro-point02 img{ width:20vw; max-width: 162px;}
  .playmovie-link a { margin: 2vw auto; width: 50vw;}
}
@media screen and (max-width : 312px ) and ( orientation : portrait ){
  .fukumaro-point02 p{ width:30vw; max-width:260px; font-size: 1.6rem;}
}

.goods-col{ position: relative; margin:0 auto; padding: 60px 0 0; background: url(/itsumo/fukumaro/game/images/gl_goods_bg.png) repeat-x bottom; background-size:13vw;}
.goods-title{ display:flex; position: absolute; top:-12.2%;}
.goods-col h2{ font-size:2.1rem; color: #fff; width: 25em; display: flex; align-items: center; background: url(/itsumo/fukumaro/game/images/gl_title_bg.png) no-repeat right; background-size: 100%;}
.goods-col h2 span{ padding: 2% 1rem 2.9%; font-feature-settings: "palt";}
.fukumaro-point03{ display: flex; position: absolute; top: -72.5%; right: -2vw;}
.fukumaro-point03 p{ position: relative; margin-top: 1.8rem; width: 14.8vw; max-width:300px; height: 8vw; max-height: 148px; background: url(/itsumo/fukumaro/game/images/balloon_rectB300x148.png) no-repeat; background-size: 100% auto;}
.fukumaro-point03 p span{ display: block; text-align: center; position: absolute; top: 20%; left: 12%;}
.fukumaro-point03 img{ width: 22.2vw; max-width: 400px; height: auto; position: absolute; left: 10vw; z-index: 10;}
.goods-list{ max-width:1636px; margin:0 auto; padding:5rem 38px 0;}
.goods-list ul{ display: flex; flex-wrap: wrap; padding-bottom:2vw;}
.goods-list ul li{ list-style:none; width:calc(100% / 4); position: relative;}
.goods-list ul li img{ width:100%; height: auto;}
.goods-list ul li span{ display: block; bottom: 3vw; position: absolute; width: 100%; text-align: center; font-size: 1.33rem;}
@media screen and (min-width: 1920px) {
  .goods-col{ background-size: 248px auto;}
}
@media screen and (max-width: 769px) and (orientation: portrait) {
  .goods-col{ padding-top: 0;}
  .goods-title{ display: block; background: #faeebb; position: relative; height: 46vw;}
  .goods-col h2{ margin-top:0; width:100%;}
  .goods-col h2 span{ text-align: center; width: 100%;}
  .goods-list ul li{ width:calc(100% / 2);}
  .goods-list ul li span{ bottom: 5vw; font-size: 1.8rem;}
  .fukumaro-point03{ width: 77.6vw; max-width: 620px; margin: 0 auto; padding-top: 12vw; position: static;}
  .fukumaro-point03 p{ width: 33vw; max-width: 260px; height: 20vw; font-size: 2rem;}
  .fukumaro-point03 p span{ width: 100%; left: 0;}
  .fukumaro-point03 img{ position: static; width: 40vw; max-width: 320px; height: auto;}
}
@media screen and (max-width : 312px ) and ( orientation : portrait ){
  .goods-list ul li span{ bottom: 6vw; font-size: 1.2rem;}
  .fukumaro-point03 p{ width:30vw; max-width:260px; font-size: 1.6rem;}
}

.special-col{ padding-top:60px; background: rgba(255,255,255,1);}
.special-col h2{ text-align: center; font-size: 2.24rem; margin-top:0;}
.special-col div.slider-box{ max-width: 1490px; margin:0 auto; padding:0 20px; text-align: center;}
.special-col div.slider-box a,
.special-col div.slider-box img{ position: relative; display: block; width: 100%; max-width: 1200px; margin-left:auto; margin-right:auto;}
.special-col div.slider-box a img{ width: 100%; height: auto;}
.special-col div.slider-box a:hover{ background: url(/itsumo/fukumaro/game/images/gl_btn_material_hover.png) no-repeat; background-size: 100% auto;}
.special-col div.slider-box a span{ font-size:1.6rem; color: #C92B00; display: block; width: 37%; text-align: center; position: absolute; top: 44%;}
.special-col div.slider-box a span.two_lines{top: 39%;}
.special-col div.slider-box a + a,
.special-col div.slider-box a + img{ margin-top:1.8rem;}
@media screen and (max-width: 769px) and (orientation: portrait) {
  .special-col{ padding-top:10vw;}
  .special-col div.slider-box{ padding:0 84px;}
}

/* ------------------------------------- */
/*            ランキング用CSS             */
/* ------------------------------------- */
.ranking-slider .slick-prev, .ranking-slider .slick-next{ width: calc(100vw*60/1920); height: calc(100vw*150/1920); }
.ranking-slider .slick-prev{ left:calc(-100vw*131/1920); z-index: 10; background: url(/itsumo/fukumaro/game/images/gl_top_prevBtn_normal.png) no-repeat; background-size: 100% auto;} /* 71+60=131 */
.ranking-slider .slick-next{ right:calc(-100vw*131/1920); z-index: 10; background: url(/itsumo/fukumaro/game/images/gl_top_nextBtn_normal.png) no-repeat; background-size: 100% auto;}
@media screen and (max-width: 769px) and (orientation: portrait) {
  .ranking-slider .slick-prev, .ranking-slider .slick-next{ width: calc(100vw*39.2/768); height: calc(100vw*98/768);}
  .ranking-slider .slick-prev{ left:calc(-100vw*66/768); } /* 39.2+26.8=66 */
  .ranking-slider .slick-next{ right:calc(-100vw*66/768); }
}

.ranking-col{ padding-top:0px; }
.ranking-col h2{ text-align: center; font-size: 2.24rem; margin-top:0;}
.ranking-col .contents-box{ margin:0 0px 8px 0px; text-align: center; background: #ffb800; border: 8px solid #d21e00; border-radius: 30px; box-shadow: 0 8px #a70000; box-sizing: border-box; }

@media screen and (min-width: 769px) {
  .ranking-col .ranking-slider-sp{ display: none; box-sizing: border-box; }
  .ranking-col .ranking-slider{ max-width: calc(100vw*1300/1920); margin:0 auto; padding-bottom: calc(100vw*30/1920); } /* 30px : slick_dotにあるmargin分を親要素paddingで追加 */
  .ranking-col .contents-box{ height: calc(100vw*400/1920); margin-left: calc(100vw*20/1920); margin-right: calc(100vw*20/1920); }
  .ranking-col .ranking-area{ background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 44.0%, rgba(244,225,0,1) 44.0%, rgba(244,225,0,1) 100%); }
}
@media screen and (max-width: 769px) and (orientation: portrait) {
  .ranking-col .ranking-slider-pc{ display:none; box-sizing: border-box; }
  .ranking-col .ranking-slider{ max-width: calc(100vw*600/768); margin: 0 auto; padding-bottom: 0px; }
  .ranking-col .contents-box{ height: calc(100vw*397/768); margin-left: calc(100vw*20/1920); margin-right: calc(100vw*20/1920); }
  .ranking-col .ranking-area{ background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50.0%, rgba(244,225,0,1) 50.0%, rgba(244,225,0,1) 100%); }
}

.contents-box {
  position: relative;
}

.contents-games-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.contents-game {
  width: calc(100vw*575.29/1920);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.contents-game:nth-child(n+2)::before {
  content: "";
  display: block;
  width: calc(100vw*5/1920);
  height: calc(100vw*240/1920);
  background-color: #ff9900;
  border-radius: calc(100vw*5/1920);
  position: absolute;
  left: 50%;
  top: calc(100vw*119/1920); /* 127px - 8px */
}

.game-score .item {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  font-size: calc(100vw*24/1920);
  color: white;
  position: relative;
  top: calc(100vw*10/1920);
}

.game-scoreboard::after {
  content: "";
  display: block;
  width: calc(100vw*575.29/1920);
  height: calc(100vw*300/1920);
  position: absolute;
  pointer-events: none;
}

.calculation.game-scoreboard::after{
  background: url(/itsumo/fukumaro/game/images/gl_rank_01_frame.png);
  background-size: calc(100vw*575.29/1920) calc(100vw*300/1920);
  background-repeat: no-repeat;
  background-position: center;  
}

.memory.game-scoreboard::after{
  background: url(/itsumo/fukumaro/game/images/gl_rank_02_frame.png);
  background-size: calc(100vw*536/1920) calc(100vw*280.87/1920);
  background-repeat: no-repeat;
  background-position: center;  
}

.trivia.game-scoreboard::after{
  background: url(/itsumo/fukumaro/game/images/gl_rank_03_frame.png);
  background-size: calc(100vw*565/1920) calc(100vw*287.25/1920);
  background-repeat: no-repeat;
  background-position: center;
}

.slide2048.game-scoreboard::after{
  background: url(/itsumo/fukumaro/game/images/gl_rank_04_frame.png);
  background-size: calc(100vw*557.5/1920) calc(100vw*290.75/1920);
  background-repeat: no-repeat;
  background-position: center;
}

.puzzle.game-scoreboard::after{
  background: url(/itsumo/fukumaro/game/images/gl_rank_05_frame.png);
  background-size: calc(100vw*575.29/1920) calc(100vw*300/1920);
  background-repeat: no-repeat;
  background-position: center;
}

.reflexes.game-scoreboard::after{
  background: url(/itsumo/fukumaro/game/images/gl_rank_06_frame.png);
  background-size: calc(100vw*575.29/1920) calc(100vw*300/1920);
  background-repeat: no-repeat;
  background-position: center;
}

.spin.game-scoreboard::after{
  background: url(/itsumo/fukumaro/game/images/gl_rank_07_frame.png);
  background-size: calc(100vw*556/1920) calc(100vw*290.37/1920);
  background-repeat: no-repeat;
  background-position: center;  
}

.bird.game-scoreboard::after{
  background: url(/itsumo/fukumaro/game/images/gl_rank_08_frame.png);
  background-size: calc(100vw*541/1920) calc(100vw*272.5/1920);
  background-repeat: no-repeat;
  background-position: center;
}

.game-title {
  width: calc(100vw*498/1920);
  height: calc(100vw*50/1920);
  font-size: calc(100vw*32/1920);
  display: block;
  margin-top: calc(100vw*23/1920); /* 31px-8px */
  z-index: 0;
}
.game-title::after {
  position: relative;
  background-color: #f4e100; /* 線色 */
  border-radius: calc(100vw*12.5/1920); /* 線幅の半分 */
  content: "";
  display: block;
  width: 100%;
  height: calc(100vw*25/1920);
  top: calc(-100vw*12.5/1920);
  z-index: -1;
}

.game-scoreboard {
  width: calc(100vw*600/1920);
  height: calc(100vw*320/1920);
  margin-top: calc(-100vw*1/1920);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(/itsumo/fukumaro/game/images/gl_rank_whiteboard.svg);
  background-size: calc(100vw*500.013/1920) calc(100vw*237.003/1920);
  background-repeat: no-repeat;
  background-position: center;
  position:relative;
}

.game-scoreboard .item {
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  width: 100%;
  font-size: calc(100vw*24/1920);
  color: white;
  position: relative;
  top: calc(100vw*10/1920);
}
.game-scoreboard .item li:nth-child(1) { margin-left: calc(100vw*78/1920); }
.game-scoreboard .item li:nth-child(2) { margin-left: calc(100vw*120/1920); }
.game-scoreboard .item-center { justify-content: center; }

.rank-data-area {
  overflow-y: scroll;
  width: 100%;
  height: calc(100vw*235/1920);
  display: block;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: calc(100vw*15/1920);
  z-index: 1;
}

.rank-data-area::-webkit-scrollbar {
  display:none;
}

.game-scoreboard .rank-data {
  display: flex;
  align-items: center;
  justify-content: start;
  height: calc(100vw*57.5/1920);
}

.rank-data .rank {
  font-size: calc(100vw*48/1920);
  width: calc(100vw*48/1920);
  margin-left: calc(100vw*0/1920);
  text-align: center;
}

.rank-data .rank, .rank-data .score { color: #c92b00; }
.rank-data:nth-child(1) .rank, .rank-data:nth-child(1) .score { color: #ff3513; }
.rank-data:nth-child(2) .rank, .rank-data:nth-child(2) .score { color: #1681df; }
.rank-data:nth-child(3) .rank, .rank-data:nth-child(3) .score { color: #008a4e; }
.rank-data:nth-child(n+10) .rank { font-size: calc(100vw*36/1920); }
.rank-data:last-child { margin-bottom: calc(100vw*50/1920); }

.rank-data .name {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: calc(100vw*205/1920);
  margin-left: calc(100vw*10/1920);
}

.rank-data .nickname {
  font-size: calc(100vw*24/1920);
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  text-align: start;
  line-height: 1.3;
}

.rank-data .gamelandid {
  font-size: calc(100vw*16/1920);
}

.rank-data .score {
  font-size: calc(100vw*36/1920);
  width: calc(100vw*121/1920);
  text-align: end;
  margin-left: calc(100vw*-10/1920);
}

@media screen and (max-width: 769px) and (orientation: portrait) {
  .contents-games-list {
    height: 100%;
  }

  .contents-game:nth-child(n+2)::before { display: none;}

  .contents-game {
    width: calc(100vw*586/768);
    height: 100%;
  }

  .game-title {
    width: calc(100vw*498/768);
    height: calc(100vw*50/768);
    font-size: calc(100vw*32/768); /* 1rem = 10px(view port) */
    display: block;
    margin-top: calc(100vw*13/768); /* 21px-8px */
   }

   .game-title::after {
    border-radius: calc(100vw*12.5/768); /* 線幅の半分 */
    height: calc(100vw*25/768);
    top: calc(-100vw*12.5/768);
  }

  .game-scoreboard::after {
    content: "";
    display: block;
    width: calc(100vw*575.29/768);
    height: calc(100vw*300/768);
    position: absolute;
    pointer-events: none;
  }

  .calculation.game-scoreboard::after{
    background: url(/itsumo/fukumaro/game/images/gl_rank_01_frame.png);
    background-size: calc(100vw*575.29/768) calc(100vw*300/768);
    background-repeat: no-repeat;
    background-position: center;  
  }
  
  .memory.game-scoreboard::after{
    background: url(/itsumo/fukumaro/game/images/gl_rank_02_frame.png);
    background-size: calc(100vw*536/768) calc(100vw*280.87/768);
    background-repeat: no-repeat;
    background-position: center;  
  }
  
  .trivia.game-scoreboard::after{
    background: url(/itsumo/fukumaro/game/images/gl_rank_03_frame.png);
    background-size: calc(100vw*565/768) calc(100vw*287.25/768);
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .slide2048.game-scoreboard::after{
    background: url(/itsumo/fukumaro/game/images/gl_rank_04_frame.png);
    background-size: calc(100vw*557.5/768) calc(100vw*290.75/768);
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .puzzle.game-scoreboard::after{
    background: url(/itsumo/fukumaro/game/images/gl_rank_05_frame.png);
    background-size: calc(100vw*575.29/768) calc(100vw*300/768);
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .reflexes.game-scoreboard::after{
    background: url(/itsumo/fukumaro/game/images/gl_rank_06_frame.png);
    background-size: calc(100vw*575.29/768) calc(100vw*300/768);
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .spin.game-scoreboard::after{
    background: url(/itsumo/fukumaro/game/images/gl_rank_07_frame.png);
    background-size: calc(100vw*556/768) calc(100vw*290.37/768);
    background-repeat: no-repeat;
    background-position: center;  
  }
  
  .bird.game-scoreboard::after{
    background: url(/itsumo/fukumaro/game/images/gl_rank_08_frame.png);
    background-size: calc(100vw*541/768) calc(100vw*272.5/768);
    background-repeat: no-repeat;
    background-position: center;
  }

  .game-scoreboard {
    width: 100%;
    height: calc(100vw*311/768);
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(/itsumo/fukumaro/game/images/gl_rank_whiteboard.svg);
    background-size: calc(100vw*500.013/768) calc(100vw*237.003/768);
    background-repeat: no-repeat;
    background-position: center;
    position:relative;
  }
  
  .game-scoreboard .item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    font-size: calc(100vw*24/768);
    color: white;
    position: relative;
  } 
  .game-scoreboard .item li:nth-child(1) { margin-left: calc(100vw*78/768); }
  .game-scoreboard .item li:nth-child(2) { margin-left: calc(100vw*120/768); }  
  .game-scoreboard .item-center { justify-content: center; }

  .rank-data-area {
    margin-top: calc(100vw*10/768);
    height: calc(100vw*235/768);
  }

  .game-scoreboard .rank-data {
    height: calc(100vw*57.5/768);
  }
  
  .rank-data .rank {
    font-size: calc(100vw*48/768);
    width: calc(100vw*48/768);
  }

  .rank-data:nth-child(n+10) .rank { font-size: calc(100vw*36/768); }
  .rank-data:last-child { margin-bottom: calc(100vw*50/768); }

  .rank-data .name {
    width: calc(100vw*205/768);
    margin-left: calc(100vw*18/768);
  }

  .rank-data .nickname {
    font-size: calc(100vw*24/768);
    line-height: 1.3;
  }

  .rank-data .gamelandid {
    font-size: calc(100vw*16/768);
  }

  .rank-data .score {
    font-size: calc(100vw*36/768);
    width: calc(100vw*121/768);
    margin-left: calc(-100vw*10/768);
  }
}

/* ランキングとスコアを表示しないタイプのゲームに関してのレイアウト */
.name-only .rank, .name-only .score { display: none; }
.name-only .rank-data {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: calc(100vw*47.16/1920);
}
.name-only .name {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-left: 0px;
  width: calc(100vw*353.07/1920);
}
.name-only .nickname, .name-only .gamelandid {
  transform: rotate(-5deg);
  text-align: start;
}
.name-only .nickname::before { content:" "; white-space: pre-wrap; }
.name-only .nickname::after, .name-only .gamelandid::after {
  position: relative;
  content: "";
  display: block;
  z-index: -1;
}
.name-only .nickname::after {
  border-radius: 5px; /* 線幅の半分 */
  width: calc(100vw*220/1920);
  height: calc(100vw*8/1920);
  top: calc(-100vw*8/1920);
}
.name-only .gamelandid::after {
  border-radius: 3px; /* 線幅の半分 */
  width: 100%;
  height: calc(100vw*5/1920);
  top: calc(-100vw*5/1920);
}

.name-only .rank-data:nth-of-type(5n+1) .nickname::after, .name-only .rank-data:nth-of-type(5n+1) .gamelandid::after { background-color: #f4e100; }
.name-only .rank-data:nth-of-type(5n+2) .nickname::after, .name-only .rank-data:nth-of-type(5n+2) .gamelandid::after { background-color: #ffb800; }
.name-only .rank-data:nth-of-type(5n+3) .nickname::after, .name-only .rank-data:nth-of-type(5n+3) .gamelandid::after { background-color: #ff5557; }
.name-only .rank-data:nth-of-type(5n+4) .nickname::after, .name-only .rank-data:nth-of-type(5n+4) .gamelandid::after { background-color: #008a4e; }
.name-only .rank-data:nth-of-type(5n+5) .nickname::after, .name-only .rank-data:nth-of-type(5n+5) .gamelandid::after { background-color: #1681df; }

@media screen and (max-width: 769px) and (orientation: portrait) {
  .name-only.rank-data-area .rank-data {
    height: calc(100vw*35/768);
    margin: calc(100vw*15/768) 0;
  }
  .name-only.rank-data-area .name {
    width: calc(100vw*411.04/768);
  }
  .name-only.rank-data-area .nickname, .name-only.rank-data-area .gamelandid {
    transform: rotate(-5deg);
    text-align: start;
  }
  .name-only.rank-data-area .nickname::after {
    border-radius: calc(100vw*5/768); /* 線幅の半分 */
    width: calc(100vw*220/768);
    height: calc(100vw*8/768);
    top: calc(-100vw*8/768);
  }
  .name-only.rank-data-area .gamelandid::after {
    border-radius: calc(100vw*3/768); /* 線幅の半分 */
    width: 100%;
    height: calc(100vw*5/768);
    top: calc(-100vw*5/768);
  }
}

/* ------------------------------------- */

.dl-col{ background: #F4E100; padding:calc(100vw*13/768) 0 calc(100vw*13/768);}
.dl-inner{ max-width:1386px; margin:0 auto; padding:0 68px; display: flex;}
.fukumaro-point04 img{ width:22.6vw; max-width:446px; margin-right:40px;}
.dl-btn-box{ display:flex; flex-flow: column; align-items: center;}
.dl-link a{ color: #fff; display: block; font-size:2.25rem; max-width:760px; max-height: 258px;}
.dl-link a:hover{ background: url(/itsumo/fukumaro/game/images/gl_btn_dl_hover.png) no-repeat; background-size: 100% auto;}
.dl-description{ font-size:0.95rem; line-height: 2; margin-top: 0; white-space: nowrap;}
@media screen and (max-width: 1919px) {
  .dl-description{ font-size:1rem;}
}
@media screen and (max-width: 1599px) {
  .dl-description{ font-size:1.2rem;}
}
@media screen and (max-width: 1281px) {
  .dl-inner{ max-width:1000px;}
}
@media screen and (max-width: 1061px) {
  .dl-description{ font-size:1.3rem;}
}
@media screen and (max-width: 769px) and (orientation: portrait) {
  .dl-col{ padding-top:12%;}
  .dl-inner{ display:block;}
  .fukumaro-point04{ text-align: center;}
  .fukumaro-point04 img{ width: 37vw; max-width: 285px;}
  .btn-link.dl-link a{ max-width:608px; margin:2.8vw auto 0; font-size: 3.57rem;}
  .dl-description{ font-size:1.8rem; white-space: normal;}
}

.related-link-col{ padding-top:60px;}
.related-link-col h2{ text-align: center; font-size: 2.24rem; margin-top:0;}
.related-link{ max-width: 1700px; margin: 48px auto 68px; padding:0 120px; display: flex; justify-content: center;}
.related-link li:first-of-type{ margin-right: 58px;}
.related-link a{ width:32.7vw; max-width: 660px; max-height: 148px;}
.related-link a:hover{ background: url(/itsumo/fukumaro/game/images/gl_btn_link_hover.png) no-repeat; background-size: 100% auto;}
@media screen and (max-width: 769px) and (orientation: portrait) {
  .related-link-col{ padding-top:10vw;}
  .related-link{ margin: 3vw 0; padding: 0; flex-flow: column;}
  .related-link li{ margin:2vw auto;}
  .related-link li:first-of-type{ margin-right: auto;}
  .related-link a{ width: 69vw; max-width: 528px;}
}

.special-col h2::before,
.ranking-col h2::before,
.related-link-col h2::before,
.special-col h2::after,
.ranking-col h2::after,
.related-link-col h2::after{ content:""; margin-right: 1rem; display: inline-block; width: 11.5vw; max-width: 220px; height: 3.5vw; max-height: 47px; background: url(/itsumo/fukumaro/game/images/game_howto_title.png) no-repeat bottom; background-size: 100% auto;}
.special-col h2::after,
.ranking-col h2::after,
.related-link-col h2::after{ margin-left:1rem; margin-right:0;}



footer{ position: relative; background: #F4E100;}
footer::after{ content:""; display: block; width: 100%; height: 25px; background: #F4E100; position: absolute; bottom: -25px;}
.twitter-btn{ padding-top:3.1vw;}
.twitter-btn a{ display: block; margin: 0 auto; width: 34.4vw; max-width: 660px;}
.twitter-btn a:hover{ background: url(/itsumo/fukumaro/game/images/gl_btn_X_hover.png) no-repeat; background-size: 100% auto;}
.sns-btn{ list-style: none; margin: 45px 0 66px; padding: 0; display: flex; justify-content: center;}
.copyright{ position: relative; text-align: center; margin: 0 auto; padding: 43px 0 0; color: #5a5a5a;}

.page-top a{ position: absolute; top: 2vw; right: 2vw; transition: 0.3s;}
.page-top a:hover { -webkit-transform: translate(0px,-10px); -moz-transform: translate(0px,-10px); -ms-transform: translate(0px,-10px); -o-transform: translate(0px,-10px); transform: translate(0px,-10px); opacity: 1;}
.page-top img{ width: 23vw; max-width: 308px;}
@media screen and (min-width: 1921px) {
  footer::after{ height: 45px; bottom: -45px;}
}
@media screen and (max-width: 769px) and (orientation: portrait) {
  footer{ width: 100%; padding-bottom: 60px; padding-top: 40px; height: auto;}
  footer::after{ height: 20px; bottom: -20px;}
  .twitter-btn a{ width: 70vw;}
  .sns-btn{ position: relative; margin-bottom: 30px; margin-top: 0; padding: 0; top: 0; }
  .copyright{ margin: 0px auto; position: absolute; bottom:0; left:0; right: 0px; font-size:1rem;}
  .page-top a{ position: relative; left:0; right: 0px; width: 86px; display: block; margin: 0px auto; transition:none;}
  .page-top a:hover{ transform: none;}
  .page-top img{ max-width:86px;}
}

@media screen and (max-width: 769px) and (orientation: portrait) {
  .btn-link a{ font-size: 2.66rem;}
  .mini-game-col h2,
  .goods-col h2{ font-size:2.8rem; display: flex; height: 8.2vw; position: absolute; margin-top: -5px}
  .special-col h2,
  .ranking-col h2,
  .related-link-col h2 { font-size: 3rem;}
}
@media screen and (max-width: 431px){
  .news-col{ padding-bottom:2%;}
  .mini-game-new::before{ top: -2px;}
  .goods-list,
  .mini-game-box,
  .special-col div.slider-box,
  .dl-inner{ padding-left: 24px; padding-right: 24px;}
}