/* CSS Document */
@import url(article.css);
@import url(footer.css);

main, .wrap {
  overflow-x: hidden;
}
.page_saction {
  overflow: visible;
}
.useful-hero:before{
  content:"";
  background: url("../img/kv_irrust_useful.png") no-repeat left bottom;
  position:absolute;
  left:var(--outergap);
  bottom:0;
  width:300px;
  height:300px;
  background-size:contain;
}
.useful-hero h1:before {
  content:"";
  background: url(../img/icn_menu07.svg) center no-repeat;
  background-size: 100% auto;
}

@media (max-width: 1024px) {

}
@media (max-width: 768px) {
    .useful-hero:before {
        display: none;
    }
}


/****************

******************/

.useful_list {
    gap:var(--size40) var(--size30);
}
.introduction_area .intro_cont {
     gap:var(--size80);
}
.introduction_area .intro_cont figure {
    width:100%;
    border-radius: 20px;
    overflow: hidden
}
.single_article .cont_area .video_list a.talk-video.list_box {
        padding-bottom: var(--size20);
}
.single_article .cont_area .video_list a h3 {
    margin-top:0.5em;
}
.single_article .cont_area .video_list a .talk-list_title {
     width: 100%; 
     text-align: center; 
     font-size: 1.0em; 
     font-weight: 600; 
}
.single_article .cont_area .video_list a.list_box .slide-content p {
    font-size: 0.85em;
    margin-bottom: 0;
}
.single_article .cont_area .video_list a.list_box .slide-content p span {
    display: block;
}
.single_article .cont_area .comic_list a h3 {
    margin-top:0.5em;
    color:var(--black);
    padding-left:0;    
}
.single_article .cont_area .comic_list a h3:before {
    content:none;
} 

.comic_index_list {
    gap:var(--size60);
}
.comic_index_list + .comic_index_list  {
    margin-top:var(--size80);
}
.comic_index_list figure {
    width:min(30.33%,364px);
    flex-shrink: 0;
    height:auto;
    aspect-ratio:364/260;
    overflow: hidden;
    border:1px solid var(--black);
    border-radius: 16px;
    margin-bottom:0;
}
.comic_index_list figure img {
    width:100%;
    height:100%;
    object-fit: cover;
}
.comic_index_list .index_box {
    flex:1;
}
.comic_index_list .index_box h2 {
    font-size:1.5em;
    margin-bottom:var(--size30);
}
.comic_index_list .index_box ul {
    margin-left:1em;
}

@media (max-width: 1024px) {

}
@media (max-width: 768px) {
    .comic_index_list {
        flex-direction: column;
    }
    .comic_index_list > * {
        width:100% !important;
        flex:auto;
    }
}
@media (min-width: 1441px) {

}