@charset 'utf-8';
/* ======================================================
CSS information

 File Name  : teaching.css
 Style Info : 「教えにふれる」のCSS
====================================================== */

#guide-block .img-box {
  margin-bottom: 1rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #guide-block .img-box {
    margin-bottom: 1.5rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #guide-block .img-box {
    margin-bottom: 2rem;
  }

}

#guide-block .text-box p {
  line-height: 1.8;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #guide-block .text-box p {
    line-height: 1.9;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #guide-block .text-box p {
    line-height: 2;
  }

}

#chatch-block h3 {
  margin-bottom: 2rem;
  color: var(--basecolor4);
  font-size: 2rem;
  font-weight: 700;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #chatch-block h3 {
    margin-bottom: 2.5rem;
    font-size: 2.2rem;
    text-align: center;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #chatch-block h3 {
    margin-bottom: 3rem;
    font-size: 2.4rem;
  }

}

#chatch-block .text-box p {
  line-height: 2;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #chatch-block .text-box p {
    line-height: 2.2;
    text-align: center;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #chatch-block .text-box p {
    line-height: 2.4;
  }

}

#nembutsu-block .grid-items {
  gap: 1rem;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #nembutsu-block .grid-items {
    gap: 2rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #nembutsu-block .grid-items {
    grid-template-areas: "img-box chatch-box"
                         "img-box sub-chatch-box"
                         "img-box text-box";
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: auto auto 1fr;
    gap: 1.5rem 4rem;
  }

}

#nembutsu-block .grid-items .chatch-box {
  margin-inline: auto;
  width: fit-content;
  color: var(--basecolor4);
  font-size: 1.6rem;
  font-weight: 700;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #nembutsu-block .grid-items .chatch-box {
    font-size: 1.7rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #nembutsu-block .grid-items .chatch-box {
    grid-area: chatch-box;
    margin-inline: 0;
    font-size: 1.8rem;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #nembutsu-block .img-box {
    grid-area: img-box;
  }

}

#nembutsu-block .grid-items .sub-chatch-box {
  line-height: 1.6;
  margin-inline: auto;
  width: fit-content;
  font-size: 1.5rem;
  font-weight: 600;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media (min-width: 768px) {

  #nembutsu-block .grid-items .sub-chatch-box {
    line-height: 1.8;
    text-align: center;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #nembutsu-block .grid-items .sub-chatch-box {
    line-height: 1.6;
    grid-area: sub-chatch-box;
    margin-inline: 0;
    font-size: 1.6rem;
    text-align: left;
  }

}

/* 960px～（パソコン）
------------------------------------------------------ */
@media (min-width: 960px) {

  #nembutsu-block .text-box {
    grid-area: text-box;
  }

}

#nembutsu-block .text-box p {
  line-height: 1.8;
}