@charset "utf-8";

/*==========================================

Layout

==========================================*/
/* contents
------------------------------------------*/
#contents {
  float: left;
  width: 780px;
  margin: 0 auto;
  color: #68341c;
  font-size: 14px;
  font-weight: 400;
  font-family: 'Noto Sans JP', sans-serif;
  background: 0 0 / auto no-repeat url(../images/bg/header.jpg),
              0 bottom / auto no-repeat url(../images/bg/footer.jpg) #f6efd1;
}

#contents a{
  color: #68341c;
  text-decoration: underline;
}
#contents a:hover{
  text-decoration: none;
}
#contents p,
#contents dd,
#contents li{
  line-height: 1.6;
}

.f-10{
  font-size: 10px;
}
.text-yellow{
  color: #fcf410 !important;
}

#contents .sns{
  position: absolute;
  top: 10px;
  right: 5px;
}
#contents .sns li{
  float: left;
  margin-right: 2px;
}
#contents .sns a{
  height: 44px;
  width: 44px;
  display: block;
  text-indent: -9999px;
  background: url(../images/share.png) no-repeat 0 0;
}
#contents .sns a.fb{ background-position: 0 0;}
#contents .sns a.twi{ background-position: -46px 0px;}
/* Button */
#contents .sns a.fb:hover,
#contents .sns a.twi:hover{
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
       -o-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
}

/*==========================================

Layout

==========================================*/
/* header
------------------------------------------*/
#contents .header{
  position: relative;
}
#contents .header h2{
  height: 279px;
  text-indent: -9999px;
  background: 25px 13px / auto no-repeat url(../images/header/main.png);
}
#contents .header .note {
  width: 731px;
  margin: 0 auto 30px;
  padding: 20px 30px;
  color: #fff;
  border-radius: 10px;
  background-color: #68341c;
  box-sizing: border-box;
}

/* section
------------------------------------------*/
#contents h3{
  text-align: center;
  position: relative;
}

#contents .section{
  width: 731px;
  margin: 0 auto 0;
  padding-bottom: 40px;
  position: relative;
  background: 0 0 / auto no-repeat url(../images/bg/box1_top.jpg),
              0 0 / auto repeat url(../images/bg/box1_mid.jpg);
}
#contents .section:after{
  content: "";
  width: 731px;
  height: 148px;
  display: block;
  background: 0 0 / auto no-repeat url(../images/bg/box1_top.jpg);
  position: absolute;
  left: 0;
  bottom: 0;
  transform: rotate(180deg);
}

#contents .section .set{
  position: relative;
  z-index: 1;
}
#contents .section .set .img{
  position: relative;
  top: 7px;
  left: 30px;
  margin-bottom: 32px;
}


#contents .btn-list{
  display: flex;
  justify-content: center;
}
#contents .btn-list a{
  display: block;
  width: 260px;
  height: 68px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 20px;
  text-align: center;
  padding-top: 15px;
  line-height: 1;
  box-sizing: border-box;
  margin: 0 5px;
}
#contents .btn-list a span{
  font-weight: 400;
  font-size: 14px;
  display: block;
  margin-top: 4px; 
}
#contents .btn-list a.switch{
  background: 0 0 / auto no-repeat url(../images/btn/switch.png);
}
#contents .btn-list a.ps4{
  background: 0 0 / auto no-repeat url(../images/btn/ps4.png);
}
#contents .btn-list a.steam{
  width: 398px;
  line-height: 68px;
  padding-top: 0;
  background: 0 0 / auto no-repeat url(../images/btn/steam.png);
}
#contents .btn-list a.steam span{
  display: inline;
  font-weight: 400;
  font-size: 14px;
  margin-left: 18px;
}
#contents .btn-list a:hover,
#contents a.btn-hover:hover{
  transition: all 0.25s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
#contents .detail .btn-list a:hover,
#contents .detail .box dt a:hover img{
  filter: drop-shadow(0 2px 3px rgba(255,255,255,0.4));
}
#contents a:hover img{
  opacity: 100;
}

#contents .bg-gradient{
  padding-top: 40px;
  padding-bottom: 40px;
  background: rgb(246,239,209);
  background: linear-gradient(180deg, rgba(246,239,209,1) 2%, rgba(222,232,181,1) 5%, rgba(222,232,181,1) 95%, rgba(246,239,209,1) 100%);
}
#contents .detail{
  width: 731px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin: 0 auto;
  position: relative;
  background: 0 0 / auto no-repeat url(../images/bg/box2_top.png),
              0 40px / auto repeat url(../images/bg/box2_mid.jpg);
}
#contents .detail::after{
  content: "";
  width: 731px;
  height: 250px;
  display: block;
  background: 0 0 / auto no-repeat url(../images/bg/box2_top.png);
  position: absolute;
  left: 0;
  bottom: 0;
  transform: rotate(180deg);
}

#contents .detail .box{
  margin: 0 40px 25px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  color: #fcf4da;
}
#contents .detail .box dt{
  width: 308px;
  line-height: 0;
  position: relative;
}
#contents .detail .box dt a{
  position: relative;
}
#contents .detail .box dt a:after{
  content: "";
  width: 23px;
  height: 23px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: 0 0 / auto no-repeat url(../images/ico/large.png);
}
#contents .detail .box dt img{
  width: 100%;
}
#contents .detail .box dd{
  width: 325px;
  margin-left: 18px;
  font-size: 12px;
}
#contents .detail .box .title{
  font-size: 18px;
  font-weight: bold;
  color: #f4dc59;
  margin-bottom: 15px;
  margin-top: -5px;
}
#contents .detail .box .title img{
  vertical-align: middle;
  margin-right: 10px;
}

#contents .section.default{
  padding-top: 45px;
  padding-bottom: 68px;
}
#contents .section.default .box{
  margin: 35px 0 40px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
#contents .section.default .box p{
  line-height: 1.8;
}

#contents .product{
  padding-top: 53px;
  background: 0 0 / auto no-repeat url(../images/bg/mid.jpg);
}
#contents .product ul{
    width: 700px;
    margin: 30px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: flex-start;
}
#contents .product ul li{
    width: 160px;
    margin: 0 20px 35px 0;
}
#contents .product ul li:nth-child(4n){
    margin-right: 0;
}
#contents .product ul li dt{
    width: 160px;
    height: 160px;
    background: #fff;
    margin-bottom: 5px;
}
#contents .product ul li dl dt img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#contents .product ul li dd{
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}


/* Copyright */
#contents .copyright{
    text-align: center;
    font-size: 14px;
    padding-top: 30px;
    padding-bottom: 40px;
}