@charset "UTF-8";

/* html {
  font-size: 62.5%;
} */

#MagazineDetailAll ul,
#MagazineDetailAll ul li,
#MagazineDetailAll ol,
#MagazineDetailAll ol li,
#MagazineTableAll ul,
#MagazineTableAll ul li,
#MagazineTableAll ol,
#MagazineTableAll ol li,
#MagazineListAll ul,
#MagazineListAll ul li,
#MagazineListAll ol,
#MagazineListAll ol li{
  list-style-type: none;
}
#MagazineTableAll .MagazineTableTittleNo{
  max-width: 100px;
  margin-bottom: 0;
}
#MagazineTableAll .MagazineTableTittle{
  max-width: calc(100% - 100px);
}

.fs-c-heading.fs-c-heading--page{
  display: none;
}

.breadCrumbTrail {
  font-family: 'proxima-nova', 'Noto Sans JP', sans-serif !important;
  font-weight: 400;
  font-style: normal;
}

a {
  outline: none;
}

#MagazineListAll img {
  width: 100%;
  height: auto;
}
#MagazineDetailAll img {
  width: 100%;
  height: auto;
}
#MagazineTableAll img {
  width: 100%;
  height: auto;
}

.ContentsAll .flexBlock {
  display: flex;
  align-items: center;
}

.ContentsAll .tittleTxt {
  font-family: sofia-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
}
.ContentsAll .tittleTxtSub {
  letter-spacing: .4rem;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
}

.relativeArea {
  position: relative;
}

#MagazineTableAll .MagazineTableList .detailCurrent .flexBlock{
  pointer-events: auto !important;
}

#MagazineDetailAll .detailCurrent{
  background-color: #F2F2F2 !important;
}

  .toTopPageBtn{
    font-size: 11.67px;
    line-height: 1.6!important;

  }

  .toTopPageBtn a{
    color: #fff !important;
    font-size: 11.67px;
  }

/*==========================
MagazineList
==========================*/
#MagazineListAll .MagazineBlock p {
  font-family: 'Poppins', sans-serif;
  text-align: center;
}
#MagazineListAll .magazineList {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

/*==========================
MagazineTable
==========================*/
#MagazineTableAll .tittleTxt {
  display: none;
}
#MagazineTableAll .MagazineTableList li {
  background-color: #F2F2F2;
}
#MagazineTableAll .MagazineTableList li a {
  position: relative;
}
#MagazineTableAll .MagazineTableTittle {
  letter-spacing: .15rem;
}
#MagazineTableAll  .MagazineTableTittle span {
  display: block;
}
#MagazineTableAll .MagazineTableTittle span:first-of-type {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
}
#MagazineTableAll .MagazineTableTittle span:nth-of-type(2) {
  font-weight: bold;
}

/*==========================
MagazineDetail
==========================*/
.MagazineDetail_PageBackLink {
  font-family: 'Poppins', sans-serif;
}
#MagazineDetailAll .M_imageBlock {
  position: relative;
}
#MagazineTableAll .MagazineTableList li.detailCurrent {
  background-color: #fff;
  border: 2px solid #F2F2F2;
  pointer-events: none;
}
#MagazineDetailAll .M_imageBlock2 a{
  display: block;
}

@media screen and (max-width: 767px) {
  .header__inner,
  .header__logo,
  .footer__bottom-inner,
  .footer__official-link {
      max-width: none !important;
  }
  .footer__official-link {
      justify-content: center !important;
  }
  .footer__sns--officialSite {
      margin: 0 calc(20*(100vw/750));
  }
}

/************************************* SP ****************************************/
@media screen and ( max-width:560px ) {

  .pcOnly {
    display: none;
  }

  .ContentsAll .tittleTxt {
    margin: 0 auto calc(40*(100vw/750));
    font-size: calc(56*(100vw/750));
    letter-spacing: -.05em;
  }

  .toTopPageBtn {
    width: calc(228*(100vw/750));
    margin: calc(48*(100vw/750)) auto calc(70*(100vw/750));
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: calc(28*(100vw/750));
    line-height: 1.75;
    letter-spacing: .13rem;
    background-color: #333;
    text-align: center;
    border-radius: 20px;
  }

  /*==========================
  パンくず
  ==========================*/
  .breadCrumbTrail p {
    display: flex;
    padding: calc(24*(100vw/750)) calc(20*(100vw/750)) calc(40*(100vw/750));
  }
  .breadCrumbTrail p span:nth-of-type(2n) {
    margin: 0 calc(10*(100vw/750));
  }

  /*==========================
  MagazineList
  ==========================*/
  #MagazineListAll {
    padding-bottom: calc(58*(100vw/750));
  }
  #MagazineListAll .magazineList {
    width: 100%;
    justify-content: space-between;
  }
  #MagazineListAll .MagazineBlock:nth-of-type(n+3) {
    margin-top: calc(20*(100vw/750));
  }
  #MagazineListAll .MagazineBlock img {
    width: calc(346*(100vw/750) - 10px);
  }
  #MagazineListAll .MagazineBlock p {
    margin-top: calc(14*(100vw/750));
    font-size: calc(26*(100vw/750));
  }

  /*==========================
  MagazineTable
  ==========================*/
  #MagazineTableAll {
    /* width: calc(686*(100vw/750)); */
    margin: calc(20*(100vw/750)) auto 0;
    padding-bottom: calc(58*(100vw/750));
  }
  #MagazineTableAll .MagazineTableList li {
    padding: calc(40*(100vw/750)) calc(30*(100vw/750)) 0 calc(30*(100vw/750));
  }
  #MagazineTableAll .MagazineTableList li:last-of-type {
    padding-bottom: calc(50*(100vw/750));
  }
  #MagazineTableAll .MagazineTableImg img {
    width: 100%;
  }
  #MagazineTableAll .MagazineTableTittle {
    width: calc(100% - 70px);
    padding-left: calc(25*(100vw/750));
    font-size: 15px;
    font-weight: bold;
  }
  #MagazineTableAll .MagazineTableTittle span:first-of-type {
    margin-bottom: calc(10*(100vw/750));
  }
  #MagazineTableAll .titleFlexBlock {
    display: flex;
    align-items: center;
    position: relative;
    padding: calc(20*(100vw/750)) 0 0 calc(10*(100vw/750));
  }
  #MagazineTableAll .titleFlexBlock::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    background-image: url(https://candystripper.itembox.design/item/src/Page/magazine/img/magazineTable/arrow.png);
    background-size: contain;
  ;;display: none;;;
  }
  #MagazineTableAll .MagazineTableTittleNo {
    padding-right: 10px;
    font-family: 'Catamaran', sans-serif;
    font-size: 12px;
    text-align: center;
    border-right: 1px solid #333;
    max-width: 70px;
  }
  #MagazineTableAll .MagazineTableTittleNo span {
    display: block;
  }
  #MagazineTableAll .MagazineTableTittleNo span:nth-of-type(2) {
    font-size: calc(44*(100vw/750));
    line-height: 1;
    letter-spacing: .12em;
  }

  /*==========================
  MagazineDetail
  ==========================*/
  #MagazineDetailAll {
    width: calc(686*(100vw/750));
    margin: calc(46*(100vw/750)) auto 0;
    padding-bottom: calc(54*(100vw/750));
  }
  #MagazineDetailAll .tittleTxt {
    margin: 0 !important;
    font-size: calc(24*(100vw/750)) !important;
  }
  #MagazineDetailAll .tittleTxtSub {
    margin: calc(10*(100vw/750)) 0 calc(40*(100vw/750));
    font-size: calc(30*(100vw/750));
    letter-spacing: .2rem;
  }
  #MagazineDetailAll .mainImg {
    display: block;
    width: calc(686*(100vw/750));
    margin: 0 auto calc(60*(100vw/750));
  }
  #MagazineDetailAll .magazineText {
    margin: calc(40*(100vw/750)) auto;
    padding: 0 calc(40*(100vw/750));
    font-family: '"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif' !important;
    font-size: calc(24*(100vw/750));
    line-height: 23px;
  }
  #MagazineDetailAll video {
    display: block;
    width: calc(686*(100vw/750));
    margin: calc(30*(100vw/750)) auto;
  }
  #MagazineDetailAll .magazineDetailFlexBlock {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: calc(560*(100vw/750));
    margin: calc(40*(100vw/750)) auto;
  }
  #MagazineDetailAll .magazineDetailFlexBlock li {
    width: calc(240*(100vw/750)) !important;
    margin: 0 calc(5*(100vw/750));
  }
  #MagazineDetailAll .magazineDetailFlexBlock li img {
    width: calc(240*(100vw/750)) !important;
  }
  #MagazineDetailAll .magazineDetailFlexBlock .magazineCredit {
    margin: calc(20*(100vw/750)) auto 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: calc(22*(100vw/750));
    line-height: 15px;
    text-align: center;
    word-break: break-all;
  }
  #MagazineDetailAll .MagazineDetailImageList {
    width: calc(686*(100vw/750));
    margin: 0 auto;
    padding-bottom: calc(20*(100vw/750));
    border-bottom: 2px solid #333;
  }
  #MagazineDetailAll .M_imageBlock img {
    display: block;
    width: calc(686*(100vw/750));
    height: auto;
    margin: 0 auto;
  }

  #MagazineDetailAll #MagazineTableAll {
    margin: calc(54*(100vw/750)) auto 0 !important;
    padding-bottom: 0 !important;
  }
  #MagazineDetailAll #MagazineTableAll {
    width: calc(686*(100vw/750));
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableList li {
    padding: 30px 20px;
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableList li:nth-of-type(n+2) {
    margin-top: calc(20*(100vw/750));
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableList li a::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: calc(18*(100vw/750));
    height: calc(18*(100vw/750));
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableImg img {
    width: calc(200*(100vw/750));
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableTittle {
    width: calc(386*(100vw/750));
    padding-left: calc(16*(100vw/750));
    font-size: calc(32*(100vw/750));
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableTittle span:first-of-type {
    margin-bottom: calc(10*(100vw/750));
  }

  #MagazineDetailAll .staffCreditText {
    width: calc(686*(100vw/750));
    margin: 0 auto;
    padding: calc(40*(100vw/750)) calc(30*(100vw/750)) 0 calc(30*(100vw/750));
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
    font-size: calc(24*(100vw/750));
    line-height: 1.8;
    letter-spacing: .2rem;
  }

  #MagazineDetailAll .M_imageBlock2{
    margin-top: calc(70* (100vw / 750 ));
  }

}

/*************************************PC****************************************/
@media screen and (max-width: 1400px) and (min-width: 561px) {
  html {
    font-size: calc(10* (100vw / 1400)) !important;
  }
}
@media only screen and (min-width: 561px) {

  .spOnly {
    display: none;
  }

  .ContentsAll .tittleTxt {
    margin: 0 auto 4.5rem;
    font-size: 3.5rem;
  }

  .toTopPageBtn {
    width: 15rem;
    margin: 4rem auto 1.5rem;
    color: #fff!important;
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    line-height: 2.2;
    letter-spacing: .13rem;
    background-color: #333;
    text-align: center;
    border-radius: 20px;
  }

  /*==========================
  パンくず
  ==========================*/
  .breadCrumbTrail {
    width: 100%;
    max-width: 116rem;
    margin: 0 auto;
    padding: 1.3rem 0 3.4rem;
  }
  .breadCrumbTrail p {
    display: flex;
  }
  .breadCrumbTrail p span:nth-of-type(2n) {
    margin: 0 .5rem;
  }
  /*==========================
  MagazineList
  ==========================*/
  #MagazineListAll {
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
    padding-bottom: 8.6rem;
  }
  /*#MagazineListAll .magazineList {
    width: 100%;
    max-width: 98rem;
  }*/
  #MagazineListAll .MagazineBlock {
    margin: 0 1rem;
  }
  #MagazineListAll .MagazineBlock:nth-of-type(n+5) {
    margin-top: 2rem;
  }
  #MagazineListAll .MagazineBlock img {
    width: 100%;
    max-width: 28rem;
  }
  #MagazineListAll .MagazineBlock p {
    margin-top: 1.3rem;
    font-size: 1.8rem;
  }

  /*==========================
  MagazineTable
  ==========================*/
  #MagazineTableAll {
    width: 100%;
    max-width: 120rem;
    margin: 3rem auto 0;
    padding-bottom: 8.6rem;
  }
  #MagazineTableAll .MagazineTableList li {
    width: 100%;
    max-width: 590px;
    margin: 0 auto;
    padding: 30px 20px;
  }
  #MagazineTableAll .MagazineTableList li:last-of-type {
    padding-bottom: 3.3rem;
  }
  #MagazineTableAll .MagazineTableImg img {
    width: 100%;
  }
  #MagazineTableAll .MagazineTableTittle {
    width: 100%;
    max-width: calc(100% - 70px);
    padding-left: 10px;
    padding-right: 30px;
    font-size: 20px;
    font-weight: bold;
  }
  #MagazineTableAll .MagazineTableTittle span:first-of-type {
    margin-bottom: .5rem;
  }
  #MagazineTableAll .titleFlexBlock {
    display: flex;
    align-items: center;
    position: relative;
    padding: 1.5rem 0 0 1.5rem;
  }
  #MagazineTableAll .titleFlexBlock::before {
    content: '';
    position: absolute;
    top: 30px;
    right: 20px;
    width: 28px;
    height: 28px;
    background-image: url(https://candystripper.itembox.design/item/src/Page/magazine/img/magazineTable/arrow.png);
    background-size: contain;
  }
  #MagazineTableAll .MagazineTableTittleNo {
    padding-right: 10px;
    font-family: 'Catamaran', sans-serif;
    font-size: 2.4rem;
    text-align: center;
    border-right: 1px solid #333;
  }
  #MagazineTableAll .MagazineTableTittleNo span {
    display: block;
    font-size: 18px;
    font-family: 'Catamaran', sans-serif;
  }
  #MagazineTableAll .MagazineTableTittleNo span:nth-of-type(2) {font-size: 37px;line-height: 0.8;}

  /*==========================
  MagazineDetail
  ==========================*/
  #MagazineDetailAll {
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
    padding-bottom: 8.6rem;
  }
  #MagazineDetailAll .tittleTxt {
    margin: 0 !important;
    font-size: 20px;
  }
  #MagazineDetailAll .tittleTxtSub {
    margin: 1rem 0 4rem;
    font-size: 23.5px;
    letter-spacing: 1.6px;
  }
  #MagazineDetailAll .MagazineDetailImageList {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: 5rem;
    border-bottom: 2px solid #333;
  }
  #MagazineDetailAll .mainImg {
    display: block;
    width: 100%;
    max-width: 750px;
    margin: 0 auto 5rem;
  }
  #MagazineDetailAll .magazineText {
    width: 100%;
    max-width: 75rem;
    margin: 3rem auto;
    padding: 0 2rem;
    font-family: '"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif' !important;
    font-size: 1.3rem;
    line-height: 25px;
  }
  #MagazineDetailAll video {
    display: block;
    margin: 5rem auto;
  }
  #MagazineDetailAll .magazineDetailFlexBlock {
    display: flex;
    justify-content: center;
    margin: 4rem auto;
  }
  #MagazineDetailAll .magazineDetailFlexBlock li {
    margin: 2rem 3rem 0 3rem;
  }
  #MagazineDetailAll .magazineDetailFlexBlock li img {
    width: 14rem !important;
  }
  #MagazineDetailAll .magazineDetailFlexBlock .magazineCredit {
    margin: 1rem auto 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.1rem;
    line-height: 15px;
    text-align: center;
    word-break: break-all;
  }
  #MagazineDetailAll .M_imageBlock img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 75rem;
    margin: 0 auto;
  }

  #MagazineDetailAll #MagazineTableAll {
    margin: 5rem auto 0 !important;
    padding-bottom: 0 !important;
  }
  #MagazineDetailAll #MagazineTableAll {
    width: 100%;
    max-width: 120rem;
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableList li {
    width: 100%;
    max-width: 590px;
    margin: 0 auto;
    padding: 1.6rem 2.6rem 1.6rem 1.6rem;
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableList li:nth-of-type(n+2) {
    margin-top: .3rem;
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableList li a::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.3rem;
    height: 1.3rem;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableImg img {
    width: 100%;
    max-width: 13rem;
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableTittle {
    width: 100%;
    max-width: 48rem;
    padding-left: 2rem;
    font-size: 20px;
  }
  #MagazineDetailAll #MagazineTableAll .MagazineTableTittle span:first-of-type {
    margin-bottom: .5rem;
  }

  #MagazineDetailAll .staffCreditText {
    width: 100%;
    max-width: 75rem;
    margin: 5rem auto 0;
    padding: 2rem 2rem 0;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: .2rem;
  }

  #MagazineDetailAll .M_imageBlock2{
    margin-top: 12rem;
  }

}