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


/* 2020.0625-sakuma */
@import url(basic-style.css);
@import url(google-fonts-style.css);


:root {
  --hoge: #235ad1;
  --normal-title: clamp(1.6rem, 1.309rem + 1.45vw, 2.4rem);
  --min-title: clamp(1.15rem, 0.914rem + 1.18vw, 1.8rem);
  --normal-text: clamp(0.95rem, 0.859rem + 0.45vw, 1.2rem);
  --2columBox: 49%;
  --3columBox: 32.33%;
  --4columBox: 24%;
  --5columBox: 20%;
  --download-color: #3f687c;
  --download-color-hover: #5e9bb9;
}


/* contents Area
==================================================*/

.contents-wrap {
  color: #333;
  width: 80%;
  margin: 0 10%;
}
.title-headingH1 {
  max-width: 100%;
  width: 100%;
  margin: 1rem 0;
}
.title-headingH1__text {
  color: #3c4c50;
  font-size: var(--normal-title);
  letter-spacing: 0.2rem;
  padding: 0 0 1rem;
}
.material-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-flow: wrap;
  gap: 1%;
  width: 100%;
}
.material-list__box {
  max-width: var(--2columBox);
  width: 100%;
}
.material-list__box__title {
  max-width: 100%;
  width: 100%;
  border-bottom: dashed 1px #ccc;
  margin: 0 0 1rem;
  padding: 0 0 0.5rem;
}
.material-list__box__title__text {
  font-size: var(--min-title);
  letter-spacing: 0.1rem;
}
.material-list__box__sentence {
  max-width: 100%;
  width: 100%;
  margin: 0 0 2rem;
}
.material-list__box__sentence__text {
  font-size: var(--normal-text);
  letter-spacing: 0.05rem;
  text-align: justify;
}
.material-list__box__bottanBox {
  max-width: 80%;
  width: 100%;
  margin: 0 10%;
}
a.material-list__box__bottanBox__bottan {
  display: block;
  width: 100%;
  color: #fff;
  font-size: var(--normal-text);
  letter-spacing: 0.05rem;
  text-align: center;
  text-decoration: none;
  background: var(--download-color);
  border-radius: 3px;
  padding: 0.5rem 1rem;
}
a:hover.material-list__box__bottanBox__bottan {
  background: var(--download-color-hover);
  transition: .8s;
}

/* メディアクエリ各種
==================================================*/
@media screen and (max-width: 1100px) {
.contents-wrap {
  width: 90%;
  margin: 0 5%;
}
}
@media screen and (max-width: 840px) {
}
@media screen and (max-width: 660px) {
.material-list {
  display: block;
}
.material-list__box {
  max-width: 100%;
  margin: 0 0 2rem;
}
}