/*----------------------------------------------------------------------------------------

フォントサイズ等の計算は　
https://websemantics.uk/tools/responsive-font-calculator/　にて行っています。
コメントで可変幅を併記していますので、修正の際はご参考ください。

----------------------------------------------------------------------------------------*/
@charset "utf-8";

/* 1rem = 10px に設定 */
html {
  font-size: 67.5%;
}

body {
  font-size: 1.6rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 700;
}

.wrapper {
  width: 100vw;
  max-width: 960px;
  margin: 0 auto;
}

h1 {
  width: 100%;
  margin-bottom: 5rem;
}

h1 img {
  display: block;
  vertical-align: baseline;
  width: 100%;
  margin-bottom: 2rem;
}

/* section.sct_1st (「家で眠っている本や…」　～)
----------------------------------------------------------------------------------*/

.sct_1st {
  width: 80%;
  margin: 5rem auto 8rem;
  font-size: calc(1.6rem + ((1vw - 0.32rem) * 1.25));
  /*16px～24px*/
  line-height: calc(2.4rem + ((1vw - 0.32rem) * 1.875));
  /*24px～36px*/
  letter-spacing: 0.1rem;
  /*font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;*/
}

.sct_1st p.sct_1st_hdr {
  margin-bottom: 5rem;
}

.sct_1st span.heart {
  display: inline-block;
  color: #b5081f;
  font-size: calc(2rem + ((1vw - 0.32rem) * 1.5625));
  /*20px～30px*/
  font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.sct_1st h3 {
  font-size: calc(1.8rem + ((1vw - 0.32rem) * 2.8125));
  /*18px～36px*/
  font-weight: 700;
  color: #b5081f;
  text-align: center;
  letter-spacing: 0.5rem;
  margin: 5rem 0;
}

.sct_1st .flow_chart {
  text-align: center;
}

.sct_1st .flow_chart figure {
  margin: 2rem auto;
}

.sct_1st .flow_chart figure img {
  width: 50vw;
  max-width: 300px;
  height: auto;
}

/*「家で眠っている本や…」：最大サイズ指定*/
@media screen and (min-width:960px) {
  .sct_1st {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }

  .sct_1st span.heart {
    font-size: 3rem;
  }

  .sct_1st h3 {
    font-size: 3.6rem;
  }
}

/* section.sct_2nd (「ご不要になった…」　～)
----------------------------------------------------------------------------------*/
.sct_2nd {
  width: 80%;
  margin: 0 auto;
}

/*画面幅480px以下のみ、コンテンツ幅を画面比90%に*/
@media screen and (max-width:480px) {
  .sct_2nd {
    width: 90%;
  }
}

.sct_2nd h2 {
  margin: 3rem auto;
}

.sct_2nd h2 img {
  width: 100%;
}

.sct_2nd p.sct_2nd_hdr {
  margin: 0 2rem 3rem;
  font-size: calc(1.4rem + ((1vw - 0.32rem) * 1.5625));
  /*14px～24px*/
  font-weight: 700;
  line-height: font-size: calc(2.4rem + ((1vw - 0.32rem) * 1.875));
  /*24px～36px*/
  letter-spacing: 0.1rem;
}

@media screen and (min-width:960px) {
  .sct_2nd p.sct_2nd_hdr {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}

/* div.container(枠線付きボックス全体の設定)
---------------------------------------------------------------------------------------*/
.sct_2nd .container {
  position: relative;
  width: 100%;
  border: 3px solid #b5081f;
  border-radius: 1.5rem;
  padding: 1rem 2rem;
}

/*画面サイズ640px以下のみ枠線内左右幅を縮小*/
@media screen and (max-width:640px) {
  .sct_2nd .container {
    padding: 1rem 1rem;
  }
}

.sct_2nd .container h3 {
  color: #b5081f;
  font-size: calc(1.8rem + ((1vw - 0.48rem) * 2.9167));
  /* 18px～32px*/
  font-weight: 700;
  line-height: calc(2.4rem + ((1vw - 0.48rem) * 5));
  /* 24px～48px */
  letter-spacing: 0.2rem;
  margin-bottom: 2rem;
}

@media screen and (min-width:960px) {

  .sct_2nd .container h3 {
    font-size: 3.2rem;
    line-height: 4.8rem;
  }
}

/*.sct_2nd 内コンテンツ個別設定
----------------------------------------------------------------------------------------*/

/* div.container.nb-1 (こんなものが眠っていませんか？) */
.sct_2nd .container.nb-1 p {
  font-size: calc(1.2rem + ((1vw - 0.32rem) * 1.875));
  /*12px～24px*/
  font-weight: 700;
  line-height: calc(2rem + ((1vw - 0.32rem) * 3.125));
  /*24px～40px*/
  letter-spacing: 0.08rem;
}

@media screen and (min-width:960px) {
  .sct_2nd .container.nb-1 p {
    font-size: 2.4rem;
    line-height: 4rem;
  }
}

.sct_2nd .container.nb-1 .img_books {
  position: absolute;
  bottom: 0;
  right: 0;
}

/*こんなものが眠っていませんか？：画像位置微調整*/
@media screen and (max-width:479px) {
  .sct_2nd .container.nb-1 .img_books {
    padding: 0 0 1rem 1rem;
    width: 40%;
  }

  .sct_2nd .container.nb-1 p {
    width: 60%;
  }
}

@media screen and (min-width:480px) {
  .sct_2nd .container.nb-1 .img_books {
    padding: 1rem 1.5rem;
    width: 30%;
    max-width: 200px;
  }

  .sct_2nd .container.nb-1 p {
    width: 65%;
  }
}

/* article.goods (受け付けているお品物／お取扱いできないお品物) */
.sct_2nd .goods {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-size: calc(1rem + ((1vw - 0.32rem) * 1.5625));
  /*10px～20px*/
}

.sct_2nd .goods h4 {
  font-weight: 700;
  margin: 3rem 0;
  font-size: calc(1.6rem + ((1vw - 0.32rem) * 1.25));
  /*16px～24px*/
}

.sct_2nd .goods h4:nth-of-type(1) {
  color: #b5081f;
}

.sct_2nd .goods h4:nth-of-type(2) {
  color: #1d2088;
}

.sct_2nd .goods .container_img {
  margin-bottom: 3rem;
}

.sct_2nd .goods .container_img img {
  width: 40%;
}

.sct_2nd .goods ul {
  margin: 3rem auto;
}

.sct_2nd .goods ul li::before {
  content: "・";
}

/* スマホ対応：コンテンツ幅をsection全体と同じ幅に */
@media screen and (max-width:480px) {
  .sct_2nd .goods {
    width: 100%;
  }
}

/*　受け付けているお品物／お取扱いできないお品物：最大サイズ指定　*/
@media screen and (min-width:960px) {
  .sct_2nd .goods {
    font-size: 2rem;
  }

  .sct_2nd .goods h4 {
    font-size: 2.4rem;
  }
}

/* div.container.small (本は下記のISBNが～) */
.sct_2nd .goods .container.small {
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.sct_2nd .goods .container.small h5 {
  font-weight: 700;
  color: #b5081f;
  letter-spacing: 0.2rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  font-size: calc(1.4rem + ((1vw - 0.32rem) * 0.9375));
}

.sct_2nd .goods .container.small p:nth-of-type(1) {
  display: table;
  width: 100%;
  padding: 0 calc(5rem + ((1vw - 0.32rem) * 7.8125));
  /*左右幅：50px~100px*/
  margin: 1rem auto;
}

.sct_2nd .goods .container.small p:nth-of-type(1) img {
  display: table-cell;
  width: 80%;
}

.sct_2nd .goods .container.small p:nth-of-type(1) span {
  display: table-cell;
  vertical-align: middle;
}

.sct_2nd .goods .container.small p:nth-of-type(2) {
  text-align: left;
  letter-spacing: 0.1rem;
  margin-left: 1rem;
}

/*本は下記のISBNが～：最大サイズ指定*/
@media screen and (min-width:960px) {
  .sct_2nd .goods .container.small h5 {
    font-size: 2rem;
  }

  .sct_2nd .goods .container.small p:nth-of-type(1) {
    padding: 0 10rem;
  }

  /*※本文フォントサイズはarticle全体と同値*/
}

/* div.container.nb-2 (いただけるものがありましたら…) */
.sct_2nd .container.nb-2 table {
  width: 100%;
  font-size: calc(1.2rem + ((1vw - 0.32rem) * 2.8125));
  /*12px～30px*/
  font-weight: 700;
  text-align: left;
  margin: 0.8rem auto 0;
}

.sct_2nd .container.nb-2 tr {
  line-height: calc(2rem + ((1vw - 0.32rem) * 4.6875));
  /*12px～50px*/
}

.sct_2nd .container.nb-2 td span {
  color: #b5081f;
  font-size: calc(1.2rem + ((1vw - 0.32rem) * 3.75));
  /*16px～36px*/
  font-weight: 700;
}

.sct_2nd .container.nb-2 td img {
  width: auto;
  height: calc(2rem + ((1vw - 0.32rem) * 4.6875));
  /*行の高さに合わせる*/
  max-height: 50px;
  vertical-align: middle;
}

/* いただけるものがありましたら…：最大サイズ指定 */
@media screen and (min-width:960px) {
  .sct_2nd .container.nb-2 table {
    font-size: 3rem;
  }

  .sct_2nd .container.nb-2 tr {
    line-height: 5rem;
  }

  .sct_2nd .container.nb-2 td span {
    font-size: 3.6rem;
  }
}

/* div.container.nb-3 (ご寄付方法は、以下から…) */
.sct_2nd .container.nb-3 {
  margin-bottom: 8rem;
}

.sct_2nd .container.nb-3 ul {
  text-align: center;
}

.sct_2nd .container.nb-3 ul li {
  font-size: calc(1.2rem + ((1vw - 0.32rem) * 1.875));
  /*12px～24px*/
  font-weight: 700;
  line-height: calc(3rem + ((1vw - 0.32rem) * 4.6875));
  text-align: left;
}

.sct_2nd .container.nb-3 ul li span {
  color: #b5081f;
  font-size: calc(1.4rem + ((1vw - 0.32rem) * 2.1875));
  /*14px～28px*/
}

.sct_2nd .container.nb-3 ul li::before {
  color: #b5081f;
  font-size: calc(1.4rem + ((1vw - 0.32rem) * 2.1875));
  /*14px～28px*/
  margin-right: 0.3rem;
}

.sct_2nd .container.nb-3 ul li:nth-of-type(1)::before {
  content: "\02460";
  /*文字コード「①」*/
}

.sct_2nd .container.nb-3 ul li:nth-of-type(2)::before {
  content: "\02461";
  /*文字コード「②」*/
}

.sct_2nd .container.nb-3 ul li:nth-of-type(3)::before {
  content: "\02462";
  /*文字コード「③」*/
}

.sct_2nd .container.nb-3 ul img {
  width: 45%;
  margin-bottom: 2rem;
}

/* ※ハート画像削除のためコメントアウト　------------------------------------------

.sct_2nd .container.nb-3 .img_heart {
  position: absolute;
  bottom: 0;
  right: 0;
  height: auto;
  padding: 1.5rem;
} 　
-----------------------------------------------------------------------------*/

/* ご寄付方法は、以下から…：最大サイズ指定 */
@media screen and (min-width:960px) {
  .sct_2nd .container.nb-3 ul li {
    font-size: 2.4rem;
    line-height: 6rem;
  }

  .sct_2nd .container.nb-3 ul li span,
  .sct_2nd .container.nb-3 ul li::before {
    font-size: 2.8rem;
  }
}

/* ご寄付方法は、以下から…：画像位置微調整 */

/* ※ハート画像削除のためコメントアウト　-------------------------------------------- 

@media screen and (max-width:480px) {
  .sct_2nd .container.nb-3 .img_heart {
    width: 20%;
  }

  .sct_2nd .container.nb-3 p:nth-of-type(2),
  .sct_2nd .container.nb-3 p:nth-of-type(3) {
    width: 75%;
  }
}

@media screen and (min-width:481px) and (max-width:959px) {
  .sct_2nd .container.nb-3 .img_heart {
    width: 15%;
  }

  .sct_2nd .container.nb-3 p:nth-of-type(2),
  .sct_2nd .container.nb-3 p:nth-of-type(3) {
    width: 80%;
  }
}

@media screen and (min-width:960px) {
  .sct_2nd .container.nb-3 .img_heart {
    width: 12.5%;
  }

  .sct_2nd .container.nb-3 p:nth-of-type(2),
  .sct_2nd .container.nb-3 p:nth-of-type(3) {
    width: 100%;
  }
}　
------------------------------------------------------------------*/

/* article.tips (配送のコツ) */
.sct_2nd .tips {
  margin: 3rem auto;
}

.sct_2nd .tips h3 {
  color: #fff;
  font-size: calc(2rem + ((1vw - 0.32rem) * 1.875));
  /*20px~32px*/
  font-weight: 700;
  line-height: 7.5rem;
  text-align: center;
  width: 90%;
  background: url(../images/tips_h3_bg.png) no-repeat center/100%;
  margin: 0 auto 3rem;
}

/*----------------------- IE用／レイアウトずれの為、代替画像を使用 ----------------------------*/
.sct_2nd .tips img.alternative {
  display: none;
}

_:-ms-lang(x)::-ms-backdrop,
.sct_2nd .tips h3 {
  display: none;
}

_:-ms-lang(x)::-ms-backdrop,
.sct_2nd .tips img.alternative {
  display: block;
  width: 85%;
  text-align: center;
  margin: 0 auto 2rem;
}
/*-------------------------------------------------------------------------------------*/

.sct_2nd .tips table {
  width: 90%;
  margin: 0 auto;
  vertical-align: middle;
}

.sct_2nd .tips th,
.sct_2nd .tips td {
  padding: calc(0.5rem + ((1vw - 0.32rem) * 0.7813)) 0;
  /*上下幅：5px~10px*/
}

.sct_2nd .tips th {
  width: 20%;
  text-align: center;
}

.sct_2nd .tips td:nth-of-type(1) {
  font-size: calc(1.2rem + ((1vw - 0.32rem) * 1.875));
  /*12px~24px*/
  color: #b5081f;
  width: 55%;
  padding-left: calc(1rem + ((1vw - 0.32rem) * 3.125));
  /*10px~30px*/
}

.sct_2nd .tips td:nth-of-type(2) {
  width: 25%;
}

.sct_2nd .tips th img,
.sct_2nd .tips td.box_img > img {
  width: 100%;
  height: auto;
}

.sct_2nd .tips td.book_img > img {
  width: 80%;
  height: auto;
  padding: 1rem calc(0.75rem + ((1vw - 0.32rem) * 1.1719)) 0;
  /* 元画像サイズ違い補正／左右幅：7.5px~15px */
}

/*配送のコツ：480px以下でコンテンツ幅をsectionと同値に*/
@media screen and (max-width:480px) {

  .sct_2nd .tips h3,
  .sct_2nd .tips table {
    width: 100%;
  }
}

/*配送のコツ：最大サイズ指定*/
@media screen and (min-width:960px) {
  .sct_2nd .tips h3 {
    font-size: 3.2rem;
  }

  .sct_2nd .tips th,
  .sct_2nd .tips td {
    padding: 1rem 0;
  }

  .sct_2nd .tips td:nth-of-type(1) {
    font-size: 2.4rem;
    padding-left: 3rem;
  }

  .sct_2nd .tips td.book_img > img {
    padding: 1rem 1.5rem 0;
  }
}

/* 矢印 */
.arrow {
  display: block;
  text-align: center;
  height: 5rem;
  margin: 4rem auto;
}

.arrow_triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.33rem 2.5rem 2.5rem;
  border-color: #b5081f transparent transparent transparent;
}

/* 問い合わせボタン */
.button {
  text-align: center;
  margin: 8rem auto 5rem;
}

.button img {
  width: 80%;
  max-width: 500px;
}

img.ftr_img {
  display: block;
  width: 100%;
}

div.caution {
  text-align: center;
  margin: 5rem auto;
  font-size: calc(0.9rem + ((1vw - 0.32rem) * 1.0938));
}

.caution p:nth-of-type(2) {
  text-indent: calc((0.9rem + ((1vw - 0.32rem) * 1.0938)) * -8);
  /* ※行頭揃え：フォントサイズ × -8文字分　*/
}

@media screen and (min-width:960px) {
  div.caution {
    font-size: 1.6rem;
  }

  .caution p:nth-of-type(2) {
    text-indent: calc(1.6rem * -8);
  }
}