@charset "UTF-8";

/* 基本設定 */
:root {
  --primary-color: #E67E45;
  --accent-color: #d33131;
  --sub-accent-color: #80B1C5;
  --bg-color: #F7F7F7;
  --bark-bg-color: #E8E6E3;
  --text-color: #2D2926;
  --bottom-color: #534c49;
  --gradation-color: linear-gradient(-225deg, #e74253 0%, #eec579 48%, #17a4ce);
}

.j_main {
  color: var(--text-color);
}

.j-main #introduction {
  margin-top: 80px;
}

.main-banner {
  width: 100%;
  aspect-ratio: 1232;
}

.main-banner img {
  width: 100%;
  max-width: 100%;
}

.j-information {
  margin: 2em 0;
  display: flex;
  justify-content: space-between;
  padding: 0 0 20px 0;
  border-bottom: #ccc 1px solid;
}

.j-information__data {
  display: flex;
}

.j-information__data__name {
  margin: 20px;
}

.j-information__data__image {
  width: 120px;
  height: 120px;
}

.j-information__data__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.j-information__data h1 {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.j-information__data h1 span {
  font-size: 1rem;
}

.j-information__chara {
  display: flex;
}

.j-information__chara__image {
  width: 200px;
  height: 200px;
  background-color: var(--bark-bg-color);
}

.j-information__chara__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.j-information__chara__data {
  max-width: 350px;
  margin: 10px 20px 0 0;
}

.j-information__chara__name {
  font-size: 1.4rem;
  font-weight: bold;
  position: relative;
  padding-top: 1.2rem;
  margin-bottom: 10px;

}

.j-information__chara__name::before {
  content: "ご当地キャラクター";
  font-size: 1rem;
  position: absolute;
  top: 0;
}

@media screen and (max-width: 950px) {

    .j-information {
    flex-direction: column;
  }


  .j-information__data {
    margin-bottom: 20px;

  }

  .j-information__chara {
    justify-content: space-between;
    align-items: flex-end;
  }

  .j-information__chara__data {
    width: 60%;
    max-width: calc(100% - 220px);
    min-width: 200px;
  }

}

@media screen and (max-width: 500px) {
.j-information__chara {
  flex-direction: column-reverse;
    align-items: baseline;
}
    .j-information__chara__data {
              width: 100%;
        max-width: 100%;
                margin: 20px 0;
    }
}

.j_main .l_top__sec {
  margin-top: 3em;
}

.j_main .j-message {
    margin: 5em 0;
    padding: 0;
}

.j_main #git_return {
  padding: 0;
}

.j-image-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;

}


.j-data {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  align-items: flex-end;
  padding: 0;
}

.j-data__text {
  width: 68%;
}

.j-data__image {
  max-width: 350px;
  width: 30%;
}

.j-data__list {
  font-size: 1.1rem;
  display: flex;
  padding: 10px 5px;
  border-bottom: 1px solid #ccc;
}

.j-data__list:first-child {
  border-top: 1px solid #ccc;
}

.j-data__list dt {
  width: 100px;
  font-weight: bold;
}

.j-data__list dd {
  width: calc(100% - 120px);
}

.j-report {
  margin-top: 80px;
}

.j-report__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}

.j-report__list img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.j-report__data {
  padding: 5px 0;
}

.j-report__title {
  font-weight: bold;
  font-size: 1.2rem;
}

.j-usage li,
.j-achievement li {
  display: flex;
  border-bottom: solid #ccc 1px;
  padding: 10px 0;
}

.j-usage li:first-child,
.j-achievement li:first-child {
  border-top: solid 1px #ccc;
}

.j-usage,
.j-achievement {
  margin-top: 80px;
}

.j-usage img,
.j-achievement img {
  width: 250px;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.j-usage__data,
.j-achievement__data {
  width: 100%;
  padding: 10px 5px;
      box-sizing: border-box;
}

.j-usage__title {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
  .j-data {
    flex-direction: column;
            align-items: baseline;
  }

  .j-data__text {
    width: 100%;
  }

  .j-data__image {
    width: 100%;
    padding: 20px 0;
  }

  .j-data__list {
    display: block;
  }

  .j-data__list dd {
    width: 100%;
  }

  .j-data__table_01 {
    width: 100%;
    overflow: auto;
  }
  .j-report__list {
    grid-template-columns: 1fr 1fr;
  }
  .j-usage li, .j-achievement li {
    display: block;
  }
  .j-usage img, .j-achievement img {
    width: 100%;
  }
  .j-usage__data, .j-achievement__data {
    width: 100%;
    padding: 20px 0;
  }
}

.j_main .breadcrumbs {
  top: -20px;
}