@charset "utf-8";
/* contents------------------------------------------------------------------------------------------------------------ */
body {font-family: "Noto Serif JP", "Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝","ryo-text-plusn",serif;color:#333;}
html,body {height: 100%;margin:0;padding:0;}
.maincontents {margin:0;padding:0;margin-top:10px;padding-bottom:100px;}
/*.wrap {height: 100%;margin:0;padding:0;}  右にできる余白を消すためのタグ */
.wrap{
min-height: 100vh;
position: relative;/*←相対位置*/
padding-bottom:0px;/*←footerの高さその都度変更が必要*/
box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

/* topimgPC----------------------------------------------- */
#visual {
    padding-top:35.3%;margin-top:-30px;
    width: 100%;
    background:url("images/pc_top.jpg") no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    background-position: center top;
    position: relative;
    background-size:100%;filter:drop-shadow(0px 0px 10px rgba(160, 160, 160, 0.7));
}
/* backimg----------------------------------------------- */
#wrapper{background:url('images/back.jpg') no-repeat;
		background-position:center top;
		background-attachment:fixed; background-size: cover;
		}/* PC */
#wrapper::before {
  content: "";
  background: url('images/back.jpg')no-repeat center center;
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;}

.clearfix{clear: both;}
div.bg2{background:rgba(255,255,255,0.9)}

/* commonimg----------------------------------------------- */
.img-responsive,img {display: block;max-width: 100%;height: auto;}
.center-block {display: block;margin-right: auto; margin-left: auto;}
@media screen and (min-width: 768px){
.sp-br {display: none; }
}

/* box1----------------------------------------------- */
.cont-box1 {width:97%; max-width:1080px;margin: 0 auto;padding:5px;}
/* box2----------------------------------------------- */
.cont-box2{width:97%; max-width:1080px;margin: 0 auto;padding:5px;}
.cont-box2 .inner{width:90.5%; max-width:1080px;margin: 0 auto;padding: 10px 15px 20px 15px;border-adius:5px;background:rgba(255,255,255,0.7); border-radius:10px;border: solid 1px #c4c4c4;}
.cont-box2 h2{padding:2px;position: relative;margin-bottom:1.8em;text-align: center;color:#972828;font-size:2.0rem;font-weight:800;}
.cont-box2 h2:before {
  content: '';
  position: absolute;display:  block;
  bottom: -15px;
  width:300px;
  height: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background:linear-gradient(to right, #972828, #000);
  border-radius:5px;
}
.cont-box2 h2 +p{font-size:1.2rem;text-align: center;color:#000;}
.cont-box2 h2 +span{font-size:1.8rem;font-weight:800;color:#972828;display: flex;justify-content: center;}
.cont-box2 p:nth-child(2n) {font-size:1.0rem;text-align: center;color:#000;}
.cont-box2 h2 span{font-size:90%;color:#32a0b0;}
.cont-box2 h2 span:after{content:' \A';white-space: pre;}
/* box3----------------------------------------------- */
.cont-box3{max-width:100%;margin:0 auto;position: relative;padding: 2% 0 5%;justify-content: center;}
.cont-box3 h2 {background:#320000;color: #fff;font-size:100%;font-weight:800;text-align: center;padding: 5px 0 5px;margin-bottom:16px;border-radius: 30px;}
.cont-box3 h2 +div {font-size:120%;font-weight:800;color: #333;padding: 10px 0 10px;}
.cont-box3 .game-box {
  width: 100%;
  margin: 0 auto;
  border-radius:15px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.cont-box3 .game-box_txt {padding:12px 15px;vertical-align: middle;}
.cont-box3 .item-name{line-height:1.3;margin-bottom:30px;}
.cont-box3 .item-name2{height:250px;line-height:1.3;}
.cont-box3 .item1{font-size:120%;font-weight:800;}
.cont-box3 .day{font-size:85%;font-weight:800;}
.cont-box3 .day:before{content:' \A 発売日:';white-space: pre;color:#8c92a0;}
.cont-box3 .ex1{font-size:85%;font-weight:800;color:#ea0048;}
.cont-box3 .ex1:before{content:' \A 価格:';white-space: pre;color:#8c92a0;}
.cont-box3 .age{font-size:85%;font-weight:800;}
.cont-box3 .age:before{content:' \A 推奨年齢:';white-space: pre;color:#8c92a0;}
.cont-box3 .brand{font-size:85%;font-weight:800;}
.cont-box3 .brand:before{content:' \A ブランド:';white-space: pre;color:#8c92a0;}
.cont-box3 .play{font-size:85%;font-weight:800;}
.cont-box3 .play:before{content:' \A プレイ人数:';white-space: pre;color:#8c92a0;}
.cont-box3 .info{font-size:85%;font-weight:800;}
.cont-box3 .info:before{content:' \A ';white-space: pre;}
.game-box_image  {width:100%;overflow:hidden;position: relative;}
.game-box_image img {height: auto;width: 100%;transition:1s all;}
.game-box_image img:hover{transform:scale(1.2,1.2);transition:1s all;}


/* txt----------------------------------------------- */
.txt1{font-weight:600;font-size:100%;}
.txt2{font-weight:600;font-size:120%;}
.txt3{font-weight:600;font-size:130%;}
.txt4{font-weight:600;font-size:140%;}
.txt5{font-weight:600;font-size:150%;}
.txt6{font-weight:600;font-size:200%;}
.txt7{font-weight:600;font-size:80%;}
.txt8{font-size:95%;}
.txtsp{font-weight:600;font-size:1.5rem;}
.txtw{color:aliceblue;}
.txty{color:#f4ff95;}
.txtr{color:#b40808;}
.txtp{color:#b24949;}
.txtg{color:#9E9E9E;}
.txtg2{color:#303340;}
.tg2{color:#605864;}
.item-ex{font-size:120%;color:#9c121d;font-weight:700;}
.item-ex:after{content:' (税込)';color:#9c121d;font-size:0.7rem;font-weight:800;}
.item-ex:before{content:'￥';color:#9c121d;font-size:1.0rem;}

/* 高さ調整 */
.inbox-1{margin-top:10px;}
.inbox-2{margin-top:20px;}
.inbox-3{margin-top:30px;}
.inbox-4{margin-bottom:20px;}
.inbox-5{margin-top:30px;margin-bottom:20px;}
.inbox-6{margin-bottom:30px;}
.boxdown{margin-bottom:10px;}
.boxdown2{margin-bottom:-20px;}


/* list */
.inList,.inList2 {padding-left:0.1em;}
.inList > li {list-style:none;
list-style-type:none;
line-height:1.2;margin-left:1.2em;text-indent:-1.2em;padding: 5px;
}
.inList2 > li {line-height:1.6;margin-left:1.2em;text-indent:-0.1em;}
.inList > li::before {
content: '※';
margin-right:5px;
}

/* flexbox------------------------------------------------------------- */
.flexbox{display:flex;flex-wrap: wrap;justify-content: center;align-content:flex-start;width:100%;max-width:1080px;margin: 0 auto;padding:0px;}
.flexbox2{display:flex;flex-wrap: wrap;justify-content: center;align-content:flex-start;width:100%;margin: 0 auto;padding:0px;}
.fb_item1{flex-basis:44.5%;max-width:44.5%;margin:2px;padding:5px 5px;border:0px solid #a9b3bb;}
.fb_item1 img{width: 100%;}
.fb_item2{flex-basis:100%;max-width:100%;margin:2px;padding:5px;}
.fb_item3{flex-basis:22%;max-width:22%;margin:2px;padding:5px;}
.fb_item4{flex-basis:30.5%;max-width:30.5%;margin:2px;padding:5px;}
.fb_item5{flex-basis:50%;max-width:50%;margin:2px;padding:5px;}

.banner{display: flex;flex-wrap: wrap;justify-content: center;lign-content:flex-start;}
.column { width: calc((100% / 5) - 8px);padding:5px;}
.kago {display: grid;margin:20px 0 0 0;padding:5px;
grid-template-columns: 30%; /*コンテナ幅を指定*/
grid-template-columns: 1fr 1fr 1fr;/*横3列指定-自動的に分割して列トラックを表示*/
gap:5px; /*グリッド間の余白*/
}
.kago >.kago-item,.kago3 >.kago-item{text-align: center;}
.kago >.kago-item span,.kago3 >.kago-item span{font-size:0.9rem;font-weight:600;}
.kago >.kago-item span:after,.kago3 >.kago-item span:after{content:' \A ';white-space: pre;}
.kago2{margin:10px 0 0 0;text-align: center;}
.kago3 {display: grid;margin:20px 0 0 0;padding:5px;
grid-template-columns: 50%; /*コンテナ幅を指定*/
grid-template-columns: 1fr 1fr;/*横2列指定-自動的に分割して列トラックを表示*/
gap:5px; /*グリッド間の余白*/
}


@media screen and (max-width: 639px) {
.column {width: calc((130% / 4) - 8px);}
}

/* dltable--------------------------------------------------------- */
.list_table,.list_table > dt,.list_table > dd {box-sizing: border-box;}
.list_table > dt,.list_table > dd {padding:0.5em;margin: 0px;}
.list_table > dt {background-color:rgba(4,95,138,0.0);font-weight:700;}
.list_table > dd {background-color: rgba(250,250,250,0.0);font-size:85%;}
@media screen and (max-width: 639px) {
    .list_table > dd {border: 0px solid #a9b3bb;border-top: none;border-bottom: none;}
    .list_table > dt {border-bottom:1px solid #a9b3bb;}
    .list_table > dd > ul {text-align: left;}
	.list_table > dd:last-of-type { border-bottom: 0px solid #a9b3bb;}
}
@media print, (min-width: 639px) {
    .list_table {display: flex;flex-wrap: wrap;border-bottom:0px solid #a9b3bb;}
    .list_table > dt,.list_table > dd {display: flex;flex-direction: column;justify-content: center;border-top: 0px solid #a9b3bb4;}
    .list_table > dt {width: 20%;border-left: 0px solid #a9b3bb;border-right:none;border-bottom:1px solid #a9b3bb;}
    .list_table > dd {width: 80%;border-right: 0px solid #a9b3bb;border-left:none;border-bottom:1px solid #a9b3bb;}
}

/* button--------------------------------------------------------- */
.button1{
display: inline-block;position: relative;color: #fff;
padding: 10px 50px;
border-radius:30px;
text-decoration: none;
outline: none;
background:linear-gradient(to right, #e3073b, #c4163f);
background: -moz-linear-gradient(left, #e3073b, #c4163f);
background: -webkit-linear-gradient(left, #e3073b, #c4163f);
box-shadow: 0 5px 5px rgba(55,55,55,0.2);
transition: all 0.3s ease-out;
}
.button1::after {content: '';
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); 
}
.button1:hover{transform: scale(0.95);}
.button2{font-size:80%;
display: inline-block;position: relative;color: #fff;
padding: 10px 50px;
border-radius:30px;
text-decoration: none;
outline: none;
background:linear-gradient(to right, #e3073b, #c4163f);
background: -moz-linear-gradient(left, #e3073b, #c4163f);
background: -webkit-linear-gradient(left, #e3073b, #c4163f);
box-shadow: 0 5px 5px rgba(55,55,55,0.2);
transition: all 0.3s ease-out;
}
.button22{font-size:80%;
display: inline-block;position: relative;color: #fff;
padding: 5px 20px;
border-radius:30px;
text-decoration: none;
outline: none;
background:linear-gradient(to right, #e3073b, #c4163f);
background: -moz-linear-gradient(left, #e3073b, #c4163f);
background: -webkit-linear-gradient(left, #e3073b, #c4163f);
box-shadow: 0 5px 5px rgba(55,55,55,0.2);
transition: all 0.3s ease-out;
}
.button2::after,.button2::after {content: '';
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    display: inline-block;
    width: 6px;
    height: 6px;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%) rotate(45deg); 
}
.button2:hover,.button22:hover{transform: scale(0.95);}
.buttonfin{
display: inline-block;position: relative;color:#494949;text-align: center;
padding: 15px 60px;
border-radius:30px;
text-decoration: none;
outline: none;
background-color:#9F9D9D;
box-shadow: 0 5px 5px rgba(55,55,55,0.2);
transition: all 0.3s ease-out;
}
.buttonfin::after {content: '';
    border: 0;
    border-top: solid 2px #494949;
    border-right: solid 2px #494949;
    display: inline-block;
    width: 10px;
    height: 10px;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); 
}

.button3{margin-top:0px;
display: inline-block;position: relative;color: #fff;
padding:5px 30px;
border-radius:5px;
text-decoration: none;
outline: none;
background:linear-gradient(to right, #7b7b7b, #4b4b4b);
background: -moz-linear-gradient(left, #7b7b7b, #4b4b4b);
background: -webkit-linear-gradient(left, #7b7b7b, #4b4b4b);
box-shadow: 0 5px 5px rgba(55,55,55,0.2);
transition: all 0.3s ease-out;
}
.button3::after { }
.button3:hover{transform: scale(0.95);}



.button4{margin-top:20px;
display: inline-block;position: relative;color: #fff;
padding: 15px 80px;
border-radius:30px;
text-decoration: none;
outline: none;
background:linear-gradient(to right, #f25a0f, #3b1800);
background: -moz-linear-gradient(left, #f25a0f, #3b1800);
background: -webkit-linear-gradient(left, #f25a0f, #3b1800);
box-shadow: 0 5px 5px rgba(55,55,55,0.2);
transition: all 0.3s ease-out;
}
.button4::after {content: '';
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); 
}
.button4:hover{transform: scale(0.95);}
.button5{display: inline-block; padding: 0.2em 2.5em;text-decoration:none;color:#67c5ff;border: solid 2px #67c5ff;border-radius:3px; transition: .4s;margin:10px 0 0 0;width:5.0em;text-indent:0.1em;text-align: center;}
.button5:hover {background: #67c5ff;color: white;}

/*改行------------------------------------------------------------- */
@media screen and (min-width: 768px){
.sp-br {display: none; }
}


/* 下部コピーライト */
.copy:after{content:' \A ';white-space: pre;}
.copytxt{font-size:100%;}


.new{position: relative;}
.new p {position: absolute;top:5px;left: 15px;background:#ff0000;color: white;z-index:9;padding:5px;}
/* ▼表示領域が639px以上の場合 */
@media screen and (min-width:639px) {
img.grp1simage { display: none; }  /* miniを非表示 */
img.grp1image { display: block; } /* bigを表示 */
.txtsp2 {font-size:10px;display: none;}
.txtsp {font-size:14px;display: block;}
}
/* ▼表示領域が640px未満の場合 */
@media screen and (max-width:640px) {
img.grp1simage { display: block; } /* miniを表示 */
img.grp1image { display: none; }  /* bigを非表示 */
#visual {
    padding-top:70.5%;margin-top:-20px;
    width: 100%;
    background:url(images/sp_top.jpg) no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    background-position: center top;
    position: relative;
    background-size: 100%;
}
.slick-arrow{border: solid 0px #413603!important;left:92%;}
.fb_item3,.fb_item4{flex-basis:100%;max-width:100%;}
.fb_item1,.fb_item5{flex-basis:90%;max-width:90%;margin:2px;padding:5px;}
.flexbox2{width:100%;margin: 0 auto;padding:0px;}
.cont-box3 .item-name{height:130px;line-height:1.1;}
.kago {margin:50px 0 0 0;
grid-template-columns:50%; /*コンテナ幅を指定*/
grid-template-columns: 1fr 1fr;/*横2列指定-自動的に分割して列トラックを表示*/
gap:10px; /*グリッド間の余白*/
}
.button2,.button22{font-size:80%;padding: 8px 42px;}

}

@media screen and (max-width: 768px) and (min-width: 640px) {
.slick-prev:before{top:50%;left:200%;}
.flexbox2{width:100%;margin: 0 auto;padding:0px;}
.fb_item1{flex-basis:90%;max-width:90%;margin:2px;padding:5px;}
.fb_item2{flex-basis:90%;max-width:90%;margin:2px;padding:5px;}
.fb_item3,.fb_item4{flex-basis:45%;max-width:45%;margin:2px;padding:5px;}
.fb_item5{flex-basis:90%;max-width:90%;margin:2px;padding:5px;}

.cont-box3 .info_name {width:51%;}
.cont-box3 .info_btn-wrap {width:40%;}
.kago,.kago3 {margin:50px 0 0 0;
grid-template-columns:50%; /*コンテナ幅を指定*/
grid-template-columns: 1fr 1fr;/*横2列指定-自動的に分割して列トラックを表示*/
gap:10px; /*グリッド間の余白*/
}


.button2,.button22{font-size:80%;padding: 8px 34px;}
}
@media screen and (max-width: 1099px) and (min-width: 769px) {
.flexbox2{width:100%;margin: 0 auto;padding:0px;}
.fb_item1{flex-basis:44%;max-width:44%;}
.fb_item2{flex-basis:80%;max-width:80%;margin:2px;padding:5px;}
.fb_item3{flex-basis:30%;max-width:30%;margin:2px;padding:5px;}
.fb_item4{flex-basis:45%;max-width:45%;margin:2px;padding:5px;}
.fb_item5{flex-basis:90%;max-width:90%;margin:2px;padding:5px;}
.button1{padding: 10px 60px;margin:20px 0px 0px 0px;font-size:105%;font-weight:600;}
.kago,.kago3 {margin:50px 0 0 0;
grid-template-columns:50%; /*コンテナ幅を指定*/
grid-template-columns: 1fr 1fr;/*横2列指定-自動的に分割して列トラックを表示*/
gap:10px; /*グリッド間の余白*/
}
.button2,.button22{font-size:80%;padding: 10px 47px;}
}