@charset "UTF-8";

/* CSS Document */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media screen and (min-width: 741px) {
  html {
    -webkit-overflow-scrolling: touch;
  }
}

div,
p,
li,
dt,
dd,
span,
h1,
h2,
h3,
h4 {
  font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

body.uff-steiffBody a {
  text-decoration: none;
}

@media screen and (min-width: 741px) {
  body.uff-steiffBody a {
    transition: all .3s;
  }

  body.uff-steiffBody a:hover {
    color: #a7955b;
  }

  body.uff-steiffBody a img {
    transition: all .3s;
  }

  body.uff-steiffBody a img:hover {
    opacity: .5;
  }
}

body.uff-steiffBody .comWrap {
  font-size: 1.8rem;
}

body.uff-steiffBody .comWrap h2 {
  font-size: 2.4rem;
  line-height: 1.4;
}

@media screen and (min-width: 741px) {
  body.uff-steiffBody .comWrap {
    font-size: 2.4rem;
  }

  body.uff-steiffBody .comWrap h2 {
    font-size: 3.2rem;
  }
}

body.uff-steiffBody .comContentsArea {
  min-width: 100vw;
  background: #ebe0bc;
}

body.uff-steiffBody .comContentsWrap {
  max-width: 100vw;
  margin: 0 auto;
  padding-bottom: 20px;
  background: #fff;
}

body.uff-steiffBody {
  padding: 0;
}

body.uff-steiffBody img {
  width: 100%;
}

body.uff-steiffBody .inner {
  max-width: 750px;
  padding: 0 10px;
  margin: 0 auto;
}

body.uff-steiffBody section {
  margin-bottom: 40px;
}

.onlyPc {
  display: none;
}

@media screen and (min-width: 741px) {
  .onlyPc {
    display: block;
  }
}

.onlySp {
  display: block;
}

@media screen and (min-width: 741px) {
  .onlySp {
    display: none;
  }
}

/*メインビジュアル*/
body.uff-steiffBody .mv {
  max-width: 1100px;
  margin-bottom: 60px;
  position: relative;
}

body.uff-steiffBody .mv h1 {
  width: 100%;
  padding: 10px;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 0;
  z-index: 100;
}

@media screen and (min-width:741px) {
  body.uff-steiffBody .mv h1 {
    text-align: left;
    padding: 20px 0 20px 30px;
  }

  body.uff-steiffBody .mv h1 img {
    max-width: 414px;
  }
}

/*スライダー*/
ul.uff-steiffSlider {
  padding-bottom: 10px;
}

.slick-dots li button:before {
  color: #ebe0bc;
}

.slick-dots li.slick-active button:before {
  color: #a7955b;
}

/*商品紹介*/
.introduction h2 {
  line-height: 1.4;
  margin-bottom: 40px;
}

.introduction p {
  margin-bottom: 40px;
}

.introduction figure {
  margin: 0;
}

.introduction figure img {
  margin-bottom: 20px;
}

.parts {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.introduction figure .parts img {
  width: 40%;
}

/*シュタイフについて*/
.about-steiff h2 {
  width: 80%;
  margin: 40px auto;
}

/*商品情報*/
body.uff-steiffBody section.product-info {
  background-color: #f8f2df;
  margin-bottom: 0;
  padding: 40px 0;
}

.product-info h2 {
  color: #877333;
  margin-bottom: 2rem;
}

.detail {
  margin-bottom: 2rem;
}

.detail ul {
  display: flex;
  flex-wrap: wrap;
  font-weight: bold;
}

.detail ul li {
  margin-right: 2rem;
}

.notice li:before {
  content: "＊";
}

.notice li {
  text-indent: -1em;
  padding-left: 1.5em;
}

/*購入*/
.purchase {
  color: #fff;
  background-color: #a7955b;
  padding: 40px 0;
}

.purchase h2 {
  margin-bottom: 10px;
}

.purchase p {
  margin-bottom: 20px;
}

.EC {
  /*border-bottom: solid 2px #fff;*/
  margin-bottom: 40px;
}

.btnWrap {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-around;
}

@media screen and (min-width: 741px) {
  .btnWrap {
    justify-content: space-between;
  }
}

.purchase .btn-gold {
  color: #a7955b;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  line-height: 3em;
  background-color: #FFF;
  width: 45%;
  max-width: 200px;
  height: 3em;
  border: 2px solid #a7955b;
  box-shadow: 0 0 0 4px #fff;
  border-radius: 2em;
  display: inline-block;
}

@media screen and (min-width: 741px) {
  .purchase .btn-gold {
    font-size: 2.4rem;
    max-width: 304px;
  }

  .purchase .btn-gold:hover {
    color: #FFF;
    background-color: #a7955b;
  }
}

.purchase .doublelines {
  line-height: 24px;
}

@media screen and (min-width: 741px) {
  .purchase .doublelines {
    line-height: 34px;
  }
}



  .comments a.txt-cli {
    color: #000;
    /* text-decoration: underline; */
  }

  .comments a.txt-cli:hover {
    color: #fff;
    /* text-decoration: none; */
  }


.comments {
  text-align: center;
  width: 90%;
  margin: 0px auto;
}


@media screen and (min-width: 741px) {
  .comments {
    font-size: 2rem;
  }
}

.purchase .store .btn-gold {
  display: table;
  margin: 0 auto;
}

/*書籍情報*/
.series-nameWrap {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
}

.series .series-nameWrap .grade {
  width: 20%;
  padding: 2%;
  margin-left: -2%;
}

.series-name {
  width: 80%;
}

.series-name h3 {
  margin: 6% 0;
}

.series-name .author {
  font-size: 2rem;
  margin-bottom: 1rem;
}

@media screen and (min-width:741px) {
  .series-name .author {
    font-size: 2.8rem;
  }
}

.book-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.book {
  width: 32%;
  margin-bottom: 20px;
}

.book img {
  margin-bottom: 1rem;
}

.book span {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 2px 5px;
  margin-top: 1rem;
  border: 1px solid #000;
  border-radius: 2em;
  display: inline-block;
}

@media screen and (min-width:741px) {
  .book span {
    font-size: 1.6rem;
    padding: 2px 6px;
  }
}

.ohanashi {
  margin-bottom: 20px;
}

.ohanashi h3 {
  padding-right: 18.4%;
}

.dowa p.set-img {
  width: 50%;
  margin: 0 auto 20px;
}

/*追加情報*/
.more-info h2 {
  margin-bottom: 20px;
}

.more-info p {
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

@media screen and (min-width:741px) {
  .more-info p {
    font-size: 3.2rem;
  }
}

.campaign {
  color: #fff;
  background-color: #609d84;
  padding: 40px 0;
}

.campaign p {
  line-height: 4rem;
  margin-bottom: 20px;
}

.campaign p span {
  font-size: 3rem;
}

@media screen and (min-width:741px) {
  .campaign p span {
    font-size: 4rem;
  }
}

.campaign .btn-green {
  color: #609d84;
  font-size: 4.5vw;
  font-weight: bold;
  text-align: center;
  line-height: 3em;
  background-color: #FFF;
  height: 3em;
  padding: 0 5%;
  margin: 0 auto;
  border: 2px solid #609d84;
  box-shadow: 0 0 0 4px #fff;
  border-radius: 2em;
  display: table;
}

@media screen and (min-width: 741px) {
  .campaign .btn-green {
    font-size: 2.4rem;
  }

  .campaign .btn-green:hover {
    color: #FFF;
    background-color: #609d84;
  }
}

.sns {
  padding: 40px 0 0;
}

.sns a img {
  width: 150px;
  display: block;
  margin: 0 auto;
}

/*フッター*/
footer {
  color: #fffefe;
  font-size: 1.5rem;
  text-align: center;
  background-color: #bf9c47;
  width: 100%;
  /*position: absolute;
  bottom: 0;*/
}

footer p {
  padding: 1rem 0;
}

/****************************************
ティザー
****************************************/

/*.comWrap {
  min-height: 100vh;
  position: relative;
  padding-bottom: 5rem;
  box-sizing: border-box;
}*/

.mv {
  text-align: center;
}

.message {
  max-width: 768px;
  margin: 30px auto;
  padding: 0 10px;
}

.message p {
  font-size: 24px;
  font-weight: bold;
}

@media screen and (min-width: 741px) {
  .message p {
    font-size: 32px;
  }
}



/*# sourceMappingURL=style.css.map */