@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&display=swap');

.mincho {
  font-family: 'Noto Serif JP', serif;
  font-feature-settings: normal !important;
  letter-spacing: 0;
}

.fw-500 {
  font-weight: 500;
}

h2.h1 {
  font-size: 2.318em;
  line-height: 1.25;
  margin: 0 0 0.5em;
}

small, .small {
  font-size: .682em;
}

.ttlBox {
  margin-bottom: 1.5em;
}
.ttlBox span {
  display: block;
}

.img_ttl {
  margin: .4em 0 .5em;
}

.block-container-section {
    padding: 0!important;
}

#magazine {
  font-feature-settings: "palt";
  color: #222;
}


.inBlock_S {
  max-width: 32.681818em;
}
@media (max-width: 960px){
  .sp-full {
    width: auto;
    max-width: inherit;
    margin-right: -5.5vw !important;
    margin-left: -5.5vw !important;
    border-radius: 0 !important;
  }
}
@media (max-width: 768px){
  .sp-full {
    width: 100vw;
  }
}
@media (max-width: 768px){
  .sp-px-0 {
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
}

.mb {
  margin-bottom: 1.5em;
}

.copy {
  letter-spacing: .08em;
}


.bg-blue {
  color: #FFF;
  background: #0B0B32;
  padding: 1.25em;
}
.bg-green {
  color: #FFF;
  background: #283A46;
  padding: 1.25em 1.25em .75em;
}
.bg-gray {
  background: #8F8C80;
  padding: 1.25em;
}
.bg-beige {
  background: #D2C0A6;
  padding: 1.25em;
}
.bg-l-beige {
  background: #F3EEE8;
  padding: 1.25em;
}
.bg-grad {
  color: #FFF;
  background: #0B0B32;
  background: linear-gradient(180deg, #283A46 0%, #0B0B32 100%);
  padding: 1.25em;
}

.bg-white {
  color: #222;
  background: #FFF;
  padding: 1.25em;
}

[class^="bg-"] .bg-white {
  padding: 1em;
}


.txt-gold {
  color: #816A0E;
}
.txt-blue {
  color: #0087CA;
}
.txt-orive {
  color: #8D8025;
}
.txt-beige {
  color: #D0BC9E;
}
.txt-white {
  color: #FFF;
}

.bg-grad > div >  * {
  margin-bottom: 1.25rem;
}
.bg-grad span {
  position: relative;
}
.bg-grad span sup {
  position: absolute;
  right: 0;
  font-size: .4em;
}

.bg-beige > *:last-child {
  margin-bottom: 0 !important;
}

/* --------------------
   Header
-------------------- */
.articleHeader {
    margin-bottom: 0;
}
/* --------------------
   .limited
-------------------- */
.limited {
  overflow: hidden;
}

/* --------------------
   cont-block
-------------------- */
.cont-block1 .read {
  line-height: 2;
  margin-bottom: 1em;
}

/* --------------------
   .ing-list
-------------------- */
.ing-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ing-list li {
  flex: 0 0 50%;
  padding: .5em .5em 0;
  text-align: center;
  font-size: .955em;
  line-height: 1.25;
  position: relative;
}
.ing-list li:nth-child(n + 3) {
  margin-top: 1em;
}
.ing-list li img {
  margin: .5em 0;
}


/* --------------------
   #cont1
-------------------- */
#cont1 {
  position: relative;
}
#cont1 .btnBox {
  position: absolute;
  top: 2%;
  right: 0;
  left: 0;
}
/* --------------------
   #cont4
-------------------- */
.nuance li {
  margin-bottom: 1.25em;
  text-align: left;
  line-height: 1.5;
  position: relative;
}
.nuance li .txtBox {
  position: absolute;
  top: 50%;
  transform: translateY(-52.5%);
}
.nuance li:nth-of-type(odd) .txtBox {
  right: 0;
}
.nuance li .ttl {
  display: block;
  line-height: 1;
  margin-bottom: .25em;
}

/* --------------------
   #cont5
-------------------- */
#cont5 .cont-block3 .ttl {
  margin-bottom: -2em;
}
#cont5 .cont-block3 .bg-blue {
  padding-top: 3em;
  margin-bottom: 1em;
}
#cont5 .cont-block3 .bg-blue + small {
  padding: 0 2em;
}

/* --------------------
   #cont6
-------------------- */
#cont6 .ing-list li > div {
  padding-top: 100%;
  background: url(../img/6__ing-bg.jpg) no-repeat center center / contain;
}
#cont6 .ing-list li span {
  display: block;
  font-size: 1.182em;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
}
/* --------------------
   #cont7
-------------------- */
#cont7 .bg-blue {
  padding: 1.25em 0 0 0;
}

.youTube iframe {
  vertical-align: bottom;
}

/* --------------------
   .recommend
-------------------- */
.recommend {
  padding: 1em 0;
}
.recommend-cont {
  display: flex;
  justify-content: center;
}
.recommend-cont ul {
  margin: 0;
}
.recommend-cont li {
  margin-top: .5em;
  padding: .125em 0 0 1.25em;
  position: relative;
  background: url(../img/check.png) no-repeat left .1em / .8em;
}

/* --------------------
   #voice
-------------------- */
#voice .ttl {
  margin: .25em 0 -1em;
}
#voice .ttl .huge {
  font-size: 3em;
  line-height: 1.25;
  margin: 0 -.35em;
}
#voice dl {
  margin-bottom: 0;
  letter-spacing: 0;
}
#voice dl dt {
  font-weight: 600;
  padding: 0 0 .5em;
  margin-bottom: .75em;
  border-bottom: 1px solid currentColor;
  position: relative;
}
#voice dl dt img {
  display: block;
  width: 3em;
  position: absolute;
  right: 0;
  bottom: .5em;
}
#voice dl dt:not(:first-of-type) img {
  width: 2.5em;
}
#voice dl dd {
  font-size: .818em;
  margin-bottom: 2em;
}
#voice dl dd:last-child {
  margin-bottom: 0;
}



/* --------------------
   #bnr
-------------------- */
.bnr2 {
  background: #C7C1C1;
  padding: 2em 1.25em 1.5em;
  margin-top: 6.5em;
  position: relative;
}
.bnr2 .img_ttl {
  max-width: 108%;
  position: absolute;
  top: -5em;
  right: -4%;
  left: -4%;
}
.bnr2 .btnBox .cartBtn {
  width: 100%;
  background: rgba(207,0,100,1);
  background: linear-gradient(90deg, rgba(207,0,100,1) 0%, rgba(227,100,147,1) 50%, rgba(207,0,100,1) 100%);
}

/* --------------------
   #float-bnr
-------------------- */
#float-bnr {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 99990;
  padding: 0 83px 0 185px;
}
#float-bnr a {
  display: block;
  box-shadow: 0 7.5px 3.75px rgba(0,0,0,0.5);
}
@media(max-width: 768px){
  #float-bnr {
    padding: 0 3%;
  }

  #footer_pagetop {
    bottom: 20vw !important;
  }
}





/* --------------------
   .buyBox
-------------------- */
.buyBox {
  overflow: hidden;
}
.buyBox .imgBox_S {
  display: block;
  width: 47.5%;
  margin: 1em 6% -12.5% auto;
}
.buyBox .txtBox {
  padding: 0 1.25em;
}
.buyBox .txtBox small {
  margin-bottom: 2em;
}
.buyBox .txtBox .ttl {
  font-weight: 500;
}
.btnBox {
  text-align: center;
}
.btnBox .cartBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.75em;
  font-weight: 500;
  line-height: 1;
  width: 11em;
  max-width: 100%;
  padding: .45em 0 .6em 0;
  margin: 0 auto;
  border-radius: 0;
  text-align: center;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: .2s;

  color: #FFF;
  background: rgb(140,110,50);
  background: linear-gradient(90deg, rgba(140,110,50,1) 0%, rgba(180,154,110,1) 50%, rgba(140,110,50,1) 100%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(255,255,255,.2) rgba(0,0,0,.2) rgba(0,0,0,.3) rgba(255,255,255,.3);
}
.btnBox .cartBtn:hover {
  transform: translateY(-2px);
}

.cartBtn i.cart {
  display: block;
  width: 1em;
  height: 1em;
  margin-left: .25em;
  background: url(../img/cart.png) no-repeat center center / contain;
}