/*iframe 共通*/
.iframe-container{
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: calc(100% *(2850 / 1080));
  display: block;
}

.iframe-container iframe{
  display: block;
  position: absolute;
  top: 0;
  width: 100%; 
  height: 100%;
  margin: 0 auto 20px;
  padding: 0;
  border: none;
  overflow: hidden;
}

@media only screen and (max-width:860px)
{
.iframe-container{padding-top: calc(100% *(2300 / 860));}
}
@media only screen and (max-width:760px)
{
.iframe-container{padding-top: calc(100% *(2400 / 860));}
}
@media only screen and (max-width:660px)
{
.iframe-container{padding-top: calc(100% *(2500 / 860));}
}
@media only screen and (max-width:560px)
{
.iframe-container{padding-top: calc(100% *(2600 / 860));margin: 0 auto;}
}

/*全体*/
.all{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}
/*バナー*/
.top-bnr{
  width: 100%;
  margin: 0 0 25px;
  padding: 0;
}
.top-bnr img{
  width: 100%;
  margin: 0 0 5px;
  padding: 0;
}

/*カテゴリー*/
.cat{
  width: 100%;
  margin: 0 0 15px;
  padding: 0 0 15px;
}
.cat h2{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #333;
  margin: 0 auto;
  padding: 0;
}
.cat-con{
  display: flex;
  justify-content: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0 0 10px;
}
.cat-box{
  width: 19.5%;
  text-align: center;
  color: #333;
  margin: 0;
  padding: 0;
}
.cat-box img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
.cat-box .name{
  font-size: 1.75vw;
  font-weight: 600;
  margin: 0;
  padding: 0;
  line-height: 1;
}
.cat-box .exa{
  font-size: 10px;
  font-weight:600;
  margin: 0;
  padding: 0;
  line-height: 0;
}

/*スライド*/
.slide{
  width: 100%;
  margin: 0 0 30px;
  padding: 0;
}
.swiper {
  width: 100%;
}
.swiper-slide img {
  width: 100%;
}

/*おすすめ*/
.rec{
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
}
.rec h2{
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  color: #e75252ff;
  margin: 0 auto 30px;
  padding: 0;
}
.rec-con{
  display: flex;
  justify-content: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
}
.rec-box{
  width: 24%;
  margin: 0;
  padding: 0;
}
.rec-box img{
  width: 100%;
  margin: 0;
  padding: 0;
}

/*追従バナー*/
.float-bnr1 {position: fixed; z-index: 99999; top: 70px; right: 0px; }
.pc {width: 300px;}
.sp {display: none; }
@media screen and (max-width: 560px) { .pc { display: none;}
.sp {vertical-align: bottom;display: inline-block;width: 100vw; }
 .float-bnr1  {top: unset; right: 0; bottom: 100px; }
}
.float-bnr2 {position: fixed; z-index: 99999; top: 305px; right: 0px; }
.pc {width: 300px;}
.sp {display: none; }
@media screen and (max-width: 560px) { .pc { display: none;}
.sp {vertical-align: bottom;display: inline-block;width: 100vw; }
 .float-bnr2  {top: unset; right: 0; bottom: 0; }
}

/*レスポンシブ*/
@media only screen and (max-width:560px)
{
.top-bnr {margin: 0 0 15px;}
.cat {margin: 0 0 10px;padding: 0 0 10px;}
.cat-box .name{font-size: 2.5vw;}
.slide {margin: 0 0 20px;}
.rec h2 {margin: 0 auto 20px;}
}