
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');


.adspecial_type1 h1, .adspecial_type1 h2, .adspecial_type1 h3, .adspecial_type1 h4, .adspecial_type1 h5, .adspecial_type1 h6 {
display:block;
}
.adspecial_type1 {
  margin: 20px auto;
  padding: 0 24px;
}

.article-contents {
    position: relative;
  margin-top: 40px;
  padding: 0 24px 24px;
  background: #fff;
    border-radius: 15px;
}



      .background--custom {
        width: 100%;
        height: 1200px !important;
        position: absolute;
        overflow: hidden;
        z-index: -2;
        top: 0;
        left: 0;
      }
  .background--custom::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 200px;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
      canvas#canvas {
        z-index: -1;
        position: absolute;
        width: 100%;
        height: 1200px !important;
        transform: scale(2);
        --gradient-color-1: #FFC2DE; 
        --gradient-color-2: #B1E3FF; 
        --gradient-color-3: #FFE6FE;  
        --gradient-color-4: #FFDC90;
        --gradient-speed: 0.000006;
      }

      canvas#canvas.canvas2 {
        z-index: -1;
        position: absolute;
        width: 100%;
        height: 1200px !important;
        transform: scale(2);
        --gradient-color-1: #b0d23e; 
        --gradient-color-2: #97d960;
        --gradient-color-3: #90ca5d; 
        --gradient-color-4: #fff073;
        --gradient-speed: 0.000006;
      }





.adspecial_type1 .frame_header {
    position: relative;
  height: 300px;
  margin-bottom: 10px;
}

.adspecial_type1 .frame_header::before {
  content: "";
  position: absolute;
  top: -650px;
  left: -400px;
  display: block;
  width: 1400px;
  height: 1400px;
  background: url(/extra/jnsa_2021/media/bg.png) no-repeat center center;
    opacity: .8;
}

#adspecial_jnsa_2021.adspecial_type1 h1.adspecial {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    margin: 0 auto;
    color: #333;
    font-size: 2rem;
    font-feature-settings: "palt" 1;
}

#adspecial_jnsa_2021.adspecial_type1 h1.adspecial span {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  color: #fff;
}


#adspecial_jnsa_2021.adspecial_type1 h2.adspecial {
    position: relative;
    margin-bottom: 24px;
    padding: 24px 16px 16px;
    color: #333;
    font-feature-settings: "palt" 1;
}
#adspecial_jnsa_2021.adspecial_type1 h2.adspecial::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(45deg, #ddd, #ddd 0.15rem, #efefef 0.15rem, #efefef 0.3rem);
}


#adspecial_jnsa_2021.adspecial_type1 p.lead {
    position: relative;
    margin-top: 0;
    padding: 24px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    background-color: rgba(255,255,255, 0.075);
    box-shadow: rgba(0, 0, 0, 0.1) 2px 4px 8px;
    border: 2px rgba(255,255,255,0.4) solid;
    border-bottom: 2px rgba(40,40,40,0.2) solid;
    border-right: 2px rgba(40,40,40,0.2) solid;
}

.article-contents .person4 {color: #ff7407; border-color: #ff7407;}

#adspecial_jnsa_2021.adspecial_type1 .frame_col_left #block_story p {
  line-height: 1.8em;
  margin: 1em 10px;
  font-size: 16px;
}

#adspecial_jnsa_2021.adspecial_type1 .frame_col_left #block_story p.interviewer {
  position: relative;
  padding: 16px 16px 16px 80px;
  font-weight: bold;
  background: #f5f5f5;
  border-radius: 15px;
}
#adspecial_jnsa_2021.adspecial_type1 .frame_col_left #block_story p.interviewer::before {
  content: "Q :";
  position: absolute;
  top: 16px;
  left: 16px;
  font-weight: normal;
  font-size: 32px;
    color: #ccc;
}

#adspecial_jnsa_2021.adspecial_type1 .article_leaf_paging_word {
  font-size: 12px;
  margin: 20px 0px 30px 0;
  text-align: right;
}

#adspecial_jnsa_2021.adspecial_type1 .frame_col_left #block_story.article_body {
  margin-top: 0;
}



.bnr_btm {
  margin: 40px 0;
  text-align: center;
}
.bnr_btm .bnr {
  margin-bottom: 24px;
}

.info-btm {
  max-width: 800px;
  margin: 0 auto 80px;
  border: 3px double #ccc;
  padding: 24px;
}

.info-btm p:not(:last-child) {margin-bottom: 16px;}



#adspecial_jnsa_2021.adspecial_type1 .block_sponsored {
  clear: both;
  border-top: 1px solid #ccc;
  padding: 5px 10px;
  text-align: center;
}

footer {margin-top: 0;}


@media screen and (max-width: 800px) {
  #adspecial_jnsa_2021.adspecial_type1,
  #adspecial_jnsa_2021.adspecial_type1 .frame_col_right_container,
  #adspecial_jnsa_2021.adspecial_type1 .frame_col_left_container,
  #adspecial_jnsa_2021.adspecial_type1 .frame_col_left,
  #adspecial_jnsa_2021.adspecial_type1 .frame_col_right {
    width: auto !important;
    float: none;
  }
  #adspecial_jnsa_2021.adspecial_type1 .article_body .left,
  #adspecial_jnsa_2021.adspecial_type1 .article_body .right,
  #adspecial_jnsa_2021.adspecial_type1 .article_body .center {
    float: none;
    max-width: 100%;
    text-align: center;
  }
  #adspecial_jnsa_2021.adspecial_type1 img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto;
    margin: 0 auto 10px;
  }

  #adspecial_jnsa_2021.adspecial_type1 .block_right_plink {
    display: none;
  }
}


@media screen and (max-width: 480px) {
  .adspecial_type1 {padding: 0 16px;}
  .article-contents {padding: 0 8px 24px;}
  #adspecial_jnsa_2021.adspecial_type1 h1.adspecial {font-size: 1.5rem; line-height: 1.3;}
  #adspecial_jnsa_2021.adspecial_type1 h1.adspecial small {font-size: 1rem; margin-top: 16px;}
  #adspecial_jnsa_2021.adspecial_type1 h1.adspecial::before {left: -900px; opacity: .5;}
  #adspecial_jnsa_2021.adspecial_type1 h2.adspecial {line-height: 1.3; padding: 24px 0 16px;}
  #adspecial_jnsa_2021.adspecial_type1 .frame_col_left #block_story p.interviewer {padding: 8px 8px 8px 40px; margin: 1em 0;}
  #adspecial_jnsa_2021.adspecial_type1 .frame_col_left #block_story p.interviewer::before {font-size: 1rem; top: 8px;}
}

