@charset "utf-8";
#Cont #pageNav {
  position: absolute;
  top: 860px;
  left: 0;
  width: 100%;
  z-index: 7; }
  @media screen and (max-width: 640px) {
    #Cont #pageNav {
      display: none; } }
  #Cont #pageNav.fixed {
    position: fixed;
    top: 0 !important;
    left: 0;
    background: #0054A8;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); }
  #Cont #pageNav.bottom {
    top: inherit !important;
    bottom: 0;
    background: #0054A8; }
  #Cont #pageNav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 700px;
    margin: 0 auto;
    padding: 20px 0 10px; }
    @media screen and (max-width: 1000px) {
      #Cont #pageNav ul {
        width: 100%; } }
    #Cont #pageNav ul li {
      font-size: 16px; }
      @media screen and (max-width: 1000px) {
        #Cont #pageNav ul li {
          font-size: 13px; } }
      #Cont #pageNav ul li.current a {
        border-bottom: 4px dotted #fff; }
      #Cont #pageNav ul li a {
        color: #fff;
        padding: 0 0 5px;
        display: inline-block;
        border-bottom: 4px dotted transparent; }
        #Cont #pageNav ul li a:hover {
          text-decoration: none;
          border-bottom: 4px dotted #fff; }

#Cont #pageNavSp {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 6;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  @media screen and (max-width: 640px) {
    #Cont #pageNavSp {
      display: block; } }
  #Cont #pageNavSp.fixed {
    position: fixed;
    top: 49px; }
  #Cont #pageNavSp.active .openClose span {
    background: none; }
    #Cont #pageNavSp.active .openClose span::before {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      top: 0px; }
    #Cont #pageNavSp.active .openClose span::after {
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      bottom: 0px; }
  #Cont #pageNavSp.fixed {
    top: 0; }
  #Cont #pageNavSp .openClose {
    background: #0054A8;
    color: #fff;
    font-size: 18px;
    padding: 6px;
    height: 42px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer; }
    #Cont #pageNavSp .openClose span {
      width: 15px;
      height: 2px;
      background: #FFF;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      margin: -2px 0 0 10px; }
      #Cont #pageNavSp .openClose span::before, #Cont #pageNavSp .openClose span::after {
        content: "";
        display: block;
        position: absolute;
        background: #fff;
        width: 15px;
        height: 2px;
        left: 0;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: -webkit-transform 0.3s ease;
        -o-transition: transform 0.3s ease;
        transition: transform 0.3s ease;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease; }
      #Cont #pageNavSp .openClose span::before {
        top: -5px; }
      #Cont #pageNavSp .openClose span::after {
        bottom: -5px; }
  #Cont #pageNavSp ul {
    background: #0091D6;
    padding: 20px 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    display: none; }
    #Cont #pageNavSp ul li {
      font-size: 16px; }
      #Cont #pageNavSp ul li a {
        color: #fff;
        display: block;
        padding: 10px; }
        #Cont #pageNavSp ul li a:hover {
          text-decoration: none; }

#Main_inner {
  padding: 0;
  position: relative; }

#Cont #pageNav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 7;
  background: #0054A8;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); }

#Cont {
  width: auto;
  overflow: hidden;
  text-align: center;
  background: #c6f4fe; }
  @media screen and (max-width: 640px) {
    #Cont {
      margin-bottom: 20px; } }
  #Cont img, #Cont picture {
    margin: 0 auto; }
  #Cont .pc {
    display: block; }
    @media screen and (max-width: 640px) {
      #Cont .pc {
        display: none; } }
  #Cont .sp {
    display: none; }
    @media screen and (max-width: 640px) {
      #Cont .sp {
        display: block; } }
  #Cont sup {
    vertical-align: super; }
  #Cont .tac {
    text-align: center; }
  #Cont .inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  #Cont .section {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom left;
    position: relative;
    padding: 100px 0; }
    @media screen and (max-width: 640px) {
      #Cont .section {
        background-position: bottom 10% left;
        padding: 40px 0; } }
    #Cont .section::before {
      /*content: "";*/
      height: 300px;
      width: 200vw;
      background: -webkit-gradient(linear, left top, left bottom, from(#00a2e4), to(rgba(0, 162, 228, 0)));
      background: -webkit-linear-gradient(top, #00a2e4 50%, rgba(0, 162, 228, 0) 100%);
      background: -o-linear-gradient(top, #00a2e4 50%, rgba(0, 162, 228, 0) 100%);
      background: linear-gradient(to bottom, #00a2e4 50%, rgba(0, 162, 228, 0) 100%);
      display: block;
      position: absolute;
      top: -60px;
      left: 50%;
      -webkit-transform: translateX(-50%) rotate(-4.5deg);
      -ms-transform: translateX(-50%) rotate(-4.5deg);
      transform: translateX(-50%) rotate(-4.5deg);
      -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
      transform-origin: top center;
      z-index: 2; }
      @media screen and (max-width: 640px) {
        #Cont .section::before {
          top: -30px; } }
    #Cont .section .inner {
      padding-bottom: 160px;
      position: relative;
      z-index: 3; }
      @media screen and (max-width: 640px) {
        #Cont .section .inner {
          padding-bottom: 50px; } }
    #Cont .section.topLine::after {
      /*content: "";*/
      height: 10px;
      width: 200vw;
      background: -webkit-gradient(linear, left top, right top, from(#e8d596), color-stop(53%, #fcefc8), color-stop(80%, #cfb35d));
      background: -webkit-linear-gradient(left, #e8d596 0%, #fcefc8 53%, #cfb35d 80%);
      background: -o-linear-gradient(left, #e8d596 0%, #fcefc8 53%, #cfb35d 80%);
      background: linear-gradient(to right, #e8d596 0%, #fcefc8 53%, #cfb35d 80%);
      display: block;
      position: absolute;
      top: -70px;
      left: 50%;
      -webkit-transform: translateX(-50%) rotate(-4.5deg);
      -ms-transform: translateX(-50%) rotate(-4.5deg);
      transform: translateX(-50%) rotate(-4.5deg);
      -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
      transform-origin: top center;
      z-index: 3; }
      @media screen and (max-width: 640px) {
        #Cont .section.topLine::after {
          top: -40px; } }
  #Cont .block .sectionTtl {
    margin-bottom: 50px; }
    @media screen and (max-width: 640px) {
      #Cont .block .sectionTtl {
        margin-bottom: 30px; } }
  #Cont .block .img .shadow {
    -webkit-filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.4)); }
  #Cont .block .img .notes {
    text-align: left; }
    #Cont .block .img .notes.top {
      margin-bottom: 10px; }
    #Cont .block .img .notes.bottom {
      margin-top: 30px; }
      @media screen and (max-width: 640px) {
        #Cont .block .img .notes.bottom {
          margin-top: 15px; } }
    #Cont .block .img .notes.white {
      color: #fff; }
  #Cont .block .txt {
    color: #fff;
    text-shadow: 1px 1px 9px #0568a9;
    font-size: 20px;
    margin-bottom: 50px; }
    @media screen and (max-width: 640px) {
      #Cont .block .txt {
        font-size: 16px;
        margin-bottom: 30px; } }
    @media screen and (max-width: 374px) {
      #Cont .block .txt {
        font-size: 4.27vw; } }
    #Cont .block .txt.comment {
      font-size: 18px;
      text-align: left; }
      @media screen and (max-width: 640px) {
        #Cont .block .txt.comment {
          font-size: 16px; } }
      @media screen and (max-width: 374px) {
        #Cont .block .txt.comment {
          font-size: 4.27vw; } }
    #Cont .block .txt p {
      margin-bottom: 30px; }
      @media screen and (max-width: 640px) {
        #Cont .block .txt p {
          margin-bottom: 20px; } }
    #Cont .block .txt .txtInner {
      position: relative; }
      #Cont .block .txt .txtInner .left {
        position: absolute;
        left: 0; }
        @media screen and (max-width: 1000px) {
          #Cont .block .txt .txtInner .left {
            position: static; } }
        @media screen and (max-width: 640px) {
          #Cont .block .txt .txtInner .left {
            font-size: 14px; } }
      #Cont .block .txt .txtInner .name {
        font-size: 24px; }
        @media screen and (max-width: 640px) {
          #Cont .block .txt .txtInner .name {
            font-size: 20px; } }
      #Cont .block .txt .txtInner img {
        margin-right: 0; }
  #Cont .block .chartbox {
    background: #fff;
    padding: 0 35px; }
    @media screen and (max-width: 640px) {
      #Cont .block .chartbox {
        padding: 20px; } }
    @media screen and (max-width: 640px) {
      #Cont .block .chartbox.box02 {
        padding: 0; } }
    #Cont .block .chartbox .subttl {
      margin-bottom: 30px; }
      @media screen and (max-width: 640px) {
        #Cont .block .chartbox .subttl {
          max-width: 76%;
          margin: 0 auto 30px; } }
    #Cont .block .chartbox .txt {
      color: #0054A8;
      font-size: 20px;
      margin-bottom: 30px;
      text-shadow: none; }
      @media screen and (max-width: 640px) {
        #Cont .block .chartbox .txt {
          font-size: 14px; } }
    #Cont .block .chartbox .img {
      margin-bottom: 20px; }
    #Cont .block .chartbox .note {
      font-size: 14px; }
      @media screen and (max-width: 640px) {
        #Cont .block .chartbox .note {
          font-size: 10px; } }
    #Cont .block .chartbox .tal {
      text-align: left; }
  #Cont #area01 {
    padding: 120px 0 200px;
    margin-bottom: -100px; }
    @media screen and (max-width: 640px) {
      #Cont #area01::before {
        display: none; } }
  #Cont #area02 .sectionTtl img {
    max-width: 96%; }
  #Cont #area02 .img img {
    margin-right: 0; }
    @media screen and (max-width: 640px) {
      #Cont #area02 .contBox_subttl img {
        max-height: 60.5px; } }
    @media screen and (max-width: 640px) {
      #Cont #area03::before {
        background: -webkit-gradient(linear, left top, left bottom, from(#009ee0), to(rgba(0, 158, 224, 0)));
        background: -webkit-linear-gradient(top, #009ee0 50%, rgba(0, 158, 224, 0) 100%);
        background: -o-linear-gradient(top, #009ee0 50%, rgba(0, 158, 224, 0) 100%);
        background: linear-gradient(to bottom, #009ee0 50%, rgba(0, 158, 224, 0) 100%); } }
  #Cont #area03 .sectionTtl img {
    max-width: 93%; }
  #Cont #area04 .sectionTtl img {
    max-width: 93%; }
    @media screen and (max-width: 640px) {
      #Cont #area04::before {
        background: -webkit-gradient(linear, left top, left bottom, from(#27d3ff), to(rgba(39, 211, 255, 0)));
        background: -webkit-linear-gradient(top, #27d3ff 50%, rgba(39, 211, 255, 0) 100%);
        background: -o-linear-gradient(top, #27d3ff 50%, rgba(39, 211, 255, 0) 100%);
        background: linear-gradient(to bottom, #27d3ff 50%, rgba(39, 211, 255, 0) 100%); } }
    @media screen and (max-width: 640px) {
      #Cont #area04 .contBox_subttl img {
        max-height: 60.5px; } }
  #Cont #area05 {
    padding-bottom: 7vw;
    margin-bottom: -4vw; }
    @media screen and (max-width: 640px) {
      #Cont #area05::before {
        background: -webkit-gradient(linear, left top, left bottom, from(#008cf0), to(rgba(0, 140, 240, 0)));
        background: -webkit-linear-gradient(top, #008cf0 50%, rgba(0, 140, 240, 0) 100%);
        background: -o-linear-gradient(top, #008cf0 50%, rgba(0, 140, 240, 0) 100%);
        background: linear-gradient(to bottom, #008cf0 50%, rgba(0, 140, 240, 0) 100%); } }
    @media screen and (max-width: 640px) {
      #Cont #area05 .sectionTtl img {
        max-height: 131px; } }

/* 2021.02.02 add */
#Cont .contBox {
  background-color: #fff;
  padding: 50px 100px;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 640px) {
  #Cont .contBox {
    background-color: transparent;
    padding: 0;
  }
}
#Cont .contBox::before {
  background: -webkit-linear-gradient(top,  #ffffff 0%,#ffeb43 6%,#f6ba19 20%,#cb930d 80%,#cb930d 80%,#ffc119 100%);
  background: -o-linear-gradient(top,  #ffffff 0%, #ffeb43 6%, #f6ba19 20%, #cb930d 80%, #cb930d 80%, #ffc119 100%);
  background: linear-gradient(to bottom,  #ffffff 0%,#ffeb43 6%,#f6ba19 20%,#cb930d 80%,#cb930d 80%,#ffc119 100%);
  content: "";
  display: block;
  height: 100%;
  left: 5px;
  position: absolute;
  top: 5px;
  width: 100%;
  z-index: -1;
}
@media screen and (max-width: 640px) {
  #Cont .contBox::before {
    display: none;
  }
}
#Cont .contBox::after {
  background-color: #fff;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
@media screen and (max-width: 640px) {
  #Cont .contBox::after {
    display: none;
  }
}
#Cont .contBox_subttl {
  margin-bottom: 42px;
}
#Cont .contBox_txt {
  color: #0054a8;
  font-size: 20px;
  margin-bottom: 40px;
}
@media screen and (max-width: 640px) {
  #Cont .contBox_txt {
    color: #fff;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 32px;
    filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 60%)) drop-shadow(-1px -1px 2px rgb(0 0 0 / 60%));
  }
}
#Cont .contBox_txt--caption {
  margin-bottom: 0;
  margin-top: 20px;
}
@media screen and (max-width: 640px) {
  #Cont .contBox_txt--caption {
    margin-top: 14px;
    font-size: 15px;
  }
}
#Cont .contBox_txt--left {
  font-weight: bold;
  position: absolute;
  text-align: left;
  left: 0;
}
@media screen and (max-width: 640px) {
  #Cont .contBox_txt--left {
    font-weight: normal;
    position: static;
    text-align: center;
  }
}
@media screen and (max-width: 640px) {
  #Cont .contBox_txt--sp-w {
    color: #fff;
  }
}
#Cont .contBox_txt > p:not(:first-of-type) {
  margin-top: 1em;
}
#Cont .contBox_researcher {
  position: relative;
}
#Cont .section-img {
  background-image: url(/alcohol/nonalcohol/karadafree/maturedhop/images/bg03.jpg);
  background-position: top center;
  background-size: cover;
}
#Cont .section-sky {
  background-color: #a9f2ff;
  background: -webkit-linear-gradient(-4.5deg,  #a9f2ff 0%,#e9f8ff 50%,#00a1e3 90%,#00a3e4 100%);
  background: -o-linear-gradient(-4.5deg,  #a9f2ff 0%, #e9f8ff 50%, #00a1e3 90%, #00a3e4 100%);
  background: linear-gradient(175.5deg,  #a9f2ff 0%,#e9f8ff 50%,#00a1e3 90%,#00a3e4 100%);
}
#Cont .section-sky::before {
  background-color: #a9f2ff;
  background: -webkit-gradient(linear, left top, left bottom, from(#a9f2ff), to(rgba(169, 242, 255, 0)));
  background: -webkit-linear-gradient(top, #a9f2ff 50%, rgba(169, 242, 255, 0) 100%);
  background: -o-linear-gradient(top, #a9f2ff 50%, rgba(169, 242, 255, 0) 100%);
  background: linear-gradient(to bottom, #a9f2ff 50%, rgba(169, 242, 255, 0) 100%);
}
#Cont .img--right img {
  margin-right: 0;
  width: 64.48230668414155%;
}
@media screen and (max-width: 640px) {
  #Cont .img--right img {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  #Cont .chartCaption {
    font-size: 10px;
    margin-top: 18px;
    text-align: left;
  }
}
@media screen and (max-width: 640px) {
  #Cont .shadow-sp {
    -webkit-filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.4));
  }
}
@media screen and (max-width: 640px) {
  #Cont .sp-mt-0 {
    margin-top: 0 !important;
  }
}