@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP&display=swap');
@import url('https://fonts.googleapis.com/css2? family= Zen+Maru+Gothic:wght@300;400;500 & display=swap');

.bg_opacity {
  background-image: url(../img/background.png);

}

/* .content_font {

} */

.main_txt {
  color: #FFF;
  padding-bottom: 0px;
  font-size: 24px;
  font-weight: bold;
  line-height: 45px;
}

span.pink {
  color: #ff3535;
}

.article {
  margin: 60px 0px 60px 0px;
  /* font-size: 24px; */
  font-weight: bold;
  color: #ffffff;
  padding: 2px 15px;
  background: transparent;
  border-left: solid 4px #89c5b2;
  background: linear-gradient(to right, #007f5abf, #95bd98);
  padding: 10px 15px 10px 15px;
}

.interviewer {
  color: #d03c3c;
}

.l_interviewer {
  padding: 30px 30px;
  border: 2px solid pink;
  border-radius: 10px;
  margin-top: 50px;
}

img.interviewer_img {
  width: 100px;
  padding-top: 50px;
}

img.point {
  width: 70%;
  padding-bottom: 20px;
}

.interviewer_name {
  padding-bottom: 0px;
}

.main_column {
  padding: 60px 0px 0px 0px;
  text-align: center;
}

.sub_title {
  /* border:1px solid #00401a; */
  /* padding:20px 20px; */
  font-size: 20px;
  margin-bottom: 80px;
  text-align: left;
  color: #494949;
}

@media screen and (max-width: 520px) {
  .l_interviewer {
    padding: 20px 10px;
    border: 2px solid pink;
    border-radius: 10px;
    margin-top: 50px;
  }

  img.interviewer_img {
    width: 100px;
    padding-top: 50px;
  }


  img.point {
    width: 100%;
    padding-bottom: 10px;
  }

  .interviewer_name {
    padding-bottom: 0px;
  }

  .sub_title {
    font-size: 16px;
  }

  .article {
    margin: 60px 0px 30px 0px;
  }

}


.l_race {
  position: relative;
  /* width: 100%; */
  margin: 0 auto;
  margin: 10px 0px 60px;
  padding: 20px 40px;
  /* border-radius: 15px; */
  background-color: #ffffff;
  color: #000000;
}

.l_race_title {
  margin: 40px 0px 60px;
  color: #000000;
  text-align: center;
  font-weight: bold;
}

.l_race_img {
  text-align: center;
}

img.race_img {
  width: 80%;
  padding-top: 50px;
}

.ja_bottom {
  padding: 18px 1px;
  margin-bottom: 0.2rem;
  background-image: linear-gradient(90deg, #e73828 0 0%, #fff000 100%);
  background-repeat: no-repeat;
  background-size: 100% 5%;
  background-position: bottom;
  color: #323232;
  font-weight: bold;
  font-size: 26px;
  width: 80%;
  text-align: center;
  margin: 0 auto;
}

.ja_bottom_blue {
  padding: 18px 1px;
  margin-bottom: 0.2rem;
  background-image: linear-gradient(90deg, #0097e0 0 0%, #fff000 100%);
  background-repeat: no-repeat;
  background-size: 100% 5%;
  background-position: bottom;
  color: #323232;
  font-weight: bold;
  font-size: 26px;
  width: 85%;
  text-align: center;
  margin: 0 auto;
}

.winner {
  border: 2px dashed rgb(250, 166, 166);
  padding: 15px 15px;
  margin: 60px 0px 60px 0px;
}

ul.winner_name {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

li.t_name {
  padding: 0px 39px 0px 0px;
}

.winner_title {
  padding-bottom: 7px;
  font-size: 20px;
}

span.win {
  font-size: 14px;
  padding-left: 5px;

}

.l_race_sub_title {
  text-align: center;
  font-size: 20px;
  padding-bottom: 40px;
}

p.sub_txt {
  letter-spacing: 3px;
}



@media screen and (max-width: 520px) {
  .l_race {
    padding: 1px 20px;
  }

  .ja_bottom {
    font-size: 24px;

  }

  .ja_bottom_blue {
    font-size: 24px;

  }

  .l_race_sub_title {
    padding-bottom: 60px;
  }

}


/*-------------------------------------------------------*/
/* gridレイアウト */
/*-------------------------------------------------------*/

* {
  margin: 0;
  padding: 0;
}

:root {
  --container-w: 1100px;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.c-container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 32px;
  box-sizing: content-box;
}

.c-image-text {
  display: grid;
  align-items: center;
  grid-template:
    "image gutter text margin" auto / calc(600/1440 * 100%) 16px 1fr max(calc((100% - var(--container-w))/2), 32px);
}

.c-image-text--reverse {
  grid-template:
    "margin text gutter image" auto / max(calc((100% - var(--container-w))/2), 32px) 1fr 16px calc(600/1440 * 100%);
}

.c-image-text__image {
  grid-area: image;
}

.c-image-text__image img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.c-image-text__text {
  grid-area: text;
}

.c-image-text02 {
  display: grid;
  align-items: center;
  grid-template:
    "image text margin" auto / calc(600/1440 * 100%) 1fr max((100% - var(--container-w))/2, 0px);
  padding-bottom: 80px;
}

.c-image-text02--reverse {
  grid-template:
    "margin text image" auto / max((100% - var(--container-w))/2, 0px) 1fr calc(600/1440 * 100%);
}

.c-image-text02__image {
  grid-area: image;
}

.c-image-text02__image img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.c-image-text02_no_grid {
  display: block;
  align-items: center;
  grid-template:
    "image text margin" auto / calc(600/1440 * 100%) 1fr max((100% - var(--container-w))/2, 0px);
  padding-bottom: 80px;
}

.c-image-text02__image_no_grid img {
  width: 70%;
  object-fit: cover;
}

.c-image-text02__image_no_grid {
  grid-area: image;
  text-align: center;
  padding-top: 20px;
}

.c-image-text02__text {
  grid-area: text;
  padding: 20px 20px;
  /* margin-left:-100px; */
  /* background:#ffffffc7; */
}

.c-image-text02--reverse .c-image-text02__text {
  padding: 20px 20px;
  margin-left: auto;
  /* margin-right:-100px; */
}

@media screen and (max-width: 790px) {
  .c-image-text02 {
    display: block;
    align-items: center;
    grid-template: "image text margin" auto / calc(600/1440 * 100%) 1fr max((100% - var(--container-w))/2, 0px);
    padding-bottom: 40px;
  }

  .c-image-text02__image img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    object-position: 50% 20%;
  }

  .c-image-text02__image_no_grid img {
    width: 100%;
    object-fit: cover;
  }

  .c-image-text02__text {
    grid-area: text;
    padding: 20px 0px;
    /* margin-left:-100px; */
    /* background:#ffffffc7; */
  }

  .c-image-text02--reverse .c-image-text02__text {
    padding: 20px 0px;
    margin-left: auto;
    /* margin-right:-100px; */
  }

  .c-image-text02__image_no_grid {
    grid-area: image;
    text-align: center;
    padding-top: 0px;
  }

}