@charset "utf-8";

.card {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  margin-left: 1rem;
  margin-right: 1rem;
  flex-basis: 48%;
  padding: 1rem;
  word-wrap: break-word;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 0.25rem;
  --x-gradient: linear-gradient(
    90deg,
    #353535 0 4px,
    transparent 0 calc(100% - 4px),
    #353535 calc(100% - 4px)
  );
  --y-gradient: linear-gradient(
    #353535 0 4px,
    transparent 0 calc(100% - 4px),
    #353535 calc(100% - 4px)
  );
  background-image: var(--x-gradient), var(--y-gradient), var(--x-gradient),
    var(--y-gradient);
  background-repeat: no-repeat;
  background-size: 100% 20px, 20px 100%, 100% 20px, 20px 100%;
  background-position: top, right, bottom, left;
  color: #333;
  text-decoration: none;
  transition: 0.5s;
}

.card-image {
  width: 100%;
  object-fit: contain;
}

.card-box {
  padding: 1rem;
}

.card-title {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: bold;
}

.card-description {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.card:hover {
  background-size: 100% 50%, 50% 100%, 100% 50%, 50% 100%;
}

.label01 {
  background: #ffd700;
  margin-bottom: 1rem;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  display: inline-block;
}

.label02 {
  background: #df691a;
  margin-bottom: 1rem;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  color: #fff;
  display: inline-block;
}

.label {
  margin-bottom: 1rem;
  line-height: 2.5;
}

.text {
  color: #ccc;
  padding-left: 2rem;
}

h2 {
  font-size: 2rem;
}

.name {
  font-size: 1.5rem;
  margin-bottom: 3rem;
}

.main-text {
  width: 100%;

  box-sizing: border-box;
  font-size: 1.05rem;
  line-height: 2.3rem;
  color: #353535;
  text-align: justify;
  margin: 0 auto;
}

section {
  padding: 3rem;
}

.dtl {
  margin-top: 3rem;
}

#content {
  font-family: YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, "Source Han Sans",
    "Source Han Sans JP", "Noto Sans CJK JP", "Avenir Next", Avenir,
    "Source Sans", "Noto Sans", Roboto, Verdana, "Pingfang TC", "Pingfang HK",
    "Hiragino Sans CNS", "Lantinghei TC", "Source Han Sans TW",
    "Source Han Sans HK", "Noto Sans CJK TC", "Microsoft JhengHei",
    "Pingfang SC", "Hiragino Sans GB", "Lantinghei SC", "Source Han Sans CN",
    "Noto Sans CJK SC", "Microsoft Yahei", DengXian, "Apple SD Gothic Neo",
    "Source Han Sans K", "Source Han Sans KR", "Noto Sans CJK KR",
    "Malgun Gothic", sans-serif;
}

.next {
  text-align: center;
  font-size: 2.5rem;
  letter-spacing: 1rem;
}

@media screen and (max-width: 480px) {
  section {
    padding: 0.5rem;
  }
}