@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-color: #e0ede3;  
}
.bg_keirin {background-color: #e0eaed;}
.bg_auto {background-color: #ede0e7;}

/* .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-bottom: 60px;
  padding: 42px 42px;
  border-radius: 15px;
  background-color: #009b63;
  color:#f0efef;
}
.keirin_point {background-color: #0099d9;}
.auto_point {background-color: #e85298;}
.kotsu {background-color: #eadd37; color: #000;}

.l_race_title{
  margin-bottom: 35px;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.l_race_img {
  text-align: center;
}

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

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




/*-------------------------------------------------------*/
/* 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;
}
  

  }

  

/*-------------------------------------------------------*/
/* sub_point */
/*-------------------------------------------------------*/
.sub_point {
  border: 2px dashed #62a383;
  padding: 15px 15px;
}

img.i_sub_point {
  width: 36px;
  padding-right: 15px;
}

/*-------------------------------------------------------*/
/* map */
/*-------------------------------------------------------*/

.map {
  max-width: 280px;
  margin: 0 auto;
}

img.map_img {
  width: 90%;
}

.l_map {
  display: flex;
  /* flex-direction: row-reverse; */
  /* border: 2px dashed  #84a888;
  padding:20px 20px;
  border-width:1px; */
  background-color: #c7d5c5;
  padding:15px 15px;
  margin-top: 100px;
}

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

  .l_map {
    display: block;
    flex-direction: row-reverse;
    margin-top: 80px;
  }

  .map {
    max-width: 280px;
    margin: 0 auto;
    padding-bottom: 15px;
  }

  img.map_img {
    width: 100%;
  }
  

}