@charset "UTF-8";


#section0{overflow: hidden; background-size: cover; background-position: center center; background-image: url("../../images/top/img_hero.webp"); padding: 0 0 0 0;}
@media screen and (max-width: 768px) {
#section0{overflow: hidden; background-size: cover; background-position: center center; background-image: url("../../images/top/img_hero_sp.webp"); padding: 0 0 0 0;}
}

/*
#section1{overflow: hidden; background-size: cover; background-position: center center; background-image: url(../../images/top/topback.jpg); padding: 0 0 0 0;}
@media screen and (max-width: 768px) {
#section1{overflow: hidden; background-size: cover; background-position: center center; background-image: url(../../images/top/topback.jpg); padding: 0 0 0 0;}
}
*/

/*トピックタイトル*/
.topic_tittle {
  width: 100%;
  margin: 100px auto 40px;
}
.topic_tittle h2.ttl_c,
.topic_tittle h2.ttl_w{
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin: 0 auto 10px;
  letter-spacing: 2px;
  line-height: 1.5;
}
.topic_tittle h2.ttl_c {color: #C93535;}
.topic_tittle h2.ttl_w {color: white;}

.topic_tittle .sub_jp {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 1px;
  color: #5F432F;
}
@media screen and (max-width:768px) {
  .topic_tittle {
    width: 100%;
    margin: 80px auto 20px;
  }
  .topic_tittle h2 {
    font-size: 25px;
  }
}

.ytube {
overflow: hidden;
padding-bottom: 56.24%;
position: relative;
margin: 0 auto;
	width: 100%;
}
.ytube iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
}

@media screen and (max-width: 767px) {
	.ytube {width: 100%;padding-bottom: 60%;}
}

.tag_ye,
.tag_gr{
	padding:6px 0px;
	margin:3px 0;
    border-radius: 8px;        /* CSS3草案 */  
    -webkit-border-radius: 8px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 8px; 
	font-size:11px;
	text-align:center;
	width: 30%;
  color: #ECEAE3;
}

.tag_ye{background: #D7AE37;}
.tag_gr{border-color: #64864F;}




.horizontal-list {
  vertical-align: top;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.horizontal-list ul {
  margin: 0 auto 20px;
}

.horizontal-list::-webkit-scrollbar{
  width: 10px;
}
.horizontal-list::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
/*
  box-shadow: inset 0 0 2px #777; 
*/
}
.horizontal-list::-webkit-scrollbar-thumb{
  background: #433A34;
  border-radius: 10px;
  box-shadow: none;
}

li.item { 
  vertical-align: top;
  /* 横スクロール用 */
  display: inline-block;
  width: 35%;
  height: auto;
  margin: 16px 20px 16px 20px;
}
li.item:first-child { 
  vertical-align: top;
  /* 横スクロール用 */
  display: inline-block;
  width: 35%;
  height: auto;
  margin: 16px 40px 16px 0px;
}
li.item:last-child { 
  vertical-align: top;
  /* 横スクロール用 */
  display: inline-block;
  width: 35%;
  height: auto;
  margin: 16px 0px 16px 40px;
}

.item .datebox{
  font-size: 15px;
  font-weight: bold;
  display: block;
  white-space: pre-wrap;
  padding:5px 5px 0 5px;
}
.item .textbox{
  font-size: 14px;
  display: block;
  white-space: pre-wrap;
  padding:5px;
}

.item img {
  height: auto;
  object-fit: cover;
}

@media screen and (max-width: 769px) {
    .horizontal-list  {
      margin-bottom: 20px;
        }
     li.item {
      /* 横スクロール用 */
      display: inline-block;
      width: 70%;
      height: auto;
      margin: 12px 15px 12px 15px;
    }
     li.item:first-child {
      /* 横スクロール用 */
      display: inline-block;
      width: 70%;
      height: auto;
      margin: 12px 30px 12px 0px;
    }
     li.item:last-child {
      /* 横スクロール用 */
      display: inline-block;
      width: 70%;
      height: auto;
      margin: 12px 0px 12px 30px;
    }

    li.item img {
    height: auto;
    object-fit: cover;
}


.tag_ye{
 width: 40%;}
 
.tag_gr{
 width: 40%;}
}