@charset "utf-8";
* {font-family: "Noto Sans JP", sans-serif !important;}
.mt0{margin-top: 0!important;}
#suntory_contents .main .section2 {padding-top: 100px;}
#suntory_contents .main .subTtl {color: #011A5D;font-size: 17px;font-weight: bold;letter-spacing: 0.425px;text-align: left;padding: 0 30px;}
#suntory_contents .main .section2 h1.mainTtl {font-weight: bold; margin-bottom: 18px; font-size: 24px;line-height: 1.45833;margin-top: 10px;letter-spacing: 0.6px;text-align: left;color: #333;padding: 0 30px;}
#suntory_contents .main .mvSection {background: #CDEDF5;padding: 10px 0 15px;margin-bottom: 60px;}
#suntory_contents .main .mvSection img {}

#suntory_contents .main .section2 h2.performanceTtl {font-size: 18px;color: #1476CB;margin-bottom: 20px;}
#suntory_contents .main .performanceBox {padding:0 27px;}
#suntory_contents .main .performanceBox .col {display: flex;gap: 15px;}
#suntory_contents .main .performanceBox .col+.col {margin-top: 30px;}
#suntory_contents .main .performanceBox .col .imgBox {width: 62px;}
#suntory_contents .main .performanceBox .col .imgBox img {}

#suntory_contents .main .performanceBox .col .ttlBox {align-content: baseline; display: flex;flex-wrap: wrap;gap: 20px;width: 33px;font-weight: bold;font-size: 17px;line-height: 1.1764;}
#suntory_contents .main .performanceBox .col .ttlBox .ttl {height: 63.5px;display: flex;width: 100%;justify-content: center;align-items: center;background: #087CC6;color: #fff;}
#suntory_contents .main .performanceBox .col .ttlBox .ttl.ttlArr {height: 101.5px;padding-bottom: 15px; background: url(/softdrink/jihanki/ogori/img/jirei/jirei_common_04_sp.png) center/cover no-repeat;}

#suntory_contents .main .performanceBox .col .txtBox {width: calc(100% - 31.5px);display: flex;flex-wrap: wrap;gap: 20px;}
#suntory_contents .main .performanceBox .col .txtBox .txtItem {position: relative; padding: 5px 0;display: flex;gap: 5px;text-align: left;width: 100%;}
#suntory_contents .main .performanceBox .col .txtBox .txtItem:first-child {min-height: 101.5px;}
#suntory_contents .main .performanceBox .col .txtBox .txtItem img {width: 30px;height: 35px;}
#suntory_contents .main .performanceBox .col .txtBox .txtItem p {width: calc(100% - 35px);font-size: 15px;line-height: 1.6;}

#suntory_contents .main .infoBox {margin:70px 30px 0;position: relative;border-radius: 20px; border: 2px solid #BDE8F4;text-align: left;margin-bottom: 70px;}
#suntory_contents .main .infoBox .imgBox {margin-top: -15px;margin-left: -15px;width: 278px;}
#suntory_contents .main .infoBox .imgBox img {}
#suntory_contents .main .infoBox .txtBox {padding: 10px 15px 20px;}
#suntory_contents .main .infoBox .txtBox .name {font-weight: bold;font-size: 16px;}
#suntory_contents .main .infoBox .txtBox .name+.name {margin-top: 4px;}
#suntory_contents .main .infoBox .txtBox .infoList {margin-top: 13px;}
#suntory_contents .main .infoBox .txtBox .infoList .info {font-size: 14px;}
#suntory_contents .main .infoBox .txtBox .infoList .info+.info {margin-top: 10px;}
#suntory_contents .main .infoBox .txtBox .infoList .info .ttl {display: flex;width: 100px;margin-bottom: 7px;height: 25px;font-weight: bold;color: #fff;border-radius: 30px;background: #5AC2DC;justify-content: center;align-items: center;text-align: center;}
#suntory_contents .main .infoBox .txtBox .infoList .info .txt {}

.border {border-bottom: 1px solid #D9D9D9;margin: 0 30px}

.pc__flex_item {display: none!important;}

#suntory_contents  .document {
  min-width: inherit;
  margin: 20.8333333333vw auto 0;
  padding: 0;
  background-color: #eff9fc
}
#suntory_contents  .document-title {
  font-size: 7.2916666667vw;
  margin-bottom: 5.2083333333vw
}
#suntory_contents  .document-title-small {
  font-size: 2.8645833333vw
}
#suntory_contents  .document-note {
  width: 82.2916666667vw;
  font-weight: 500;
  margin: 0 auto;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 2.8645833333vw;
  line-height: 1.5454545455
}
#suntory_contents  .document .ogori-links {
  margin-top: 0;
  padding-bottom: 7.8125vw;
  bottom: 0;
  opacity: 0;
  z-index: 100;
  transition: opacity 200ms ease-in-out
}
#suntory_contents .document .ogori-links-block.is-fixed .ogori-links {
  position: fixed
}
#suntory_contents .document .ogori-links-block.is-active .ogori-links {
  opacity: 1
}
.concept__link {
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
}
#suntory_contents .document .ogori-links {
  margin-top: 0;
  padding-bottom: 7.8125vw;
  bottom: 0;
  opacity: 0;
  z-index: 100;
  transition: opacity 200ms ease-in-out;
}
#suntory_contents li {
  list-style: none;
}
#suntory_contents .ogori-links-link:first-of-type {
  margin-right: 0;
  margin-bottom: 5.2083333333vw;
}

#suntory_contents .ogori-links-anchor {
  width: 308px;
  height: 61px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
#suntory_contents .ogori-links-anchor {
  width: 80.2083333333vw;
  height: 15.8854166667vw;
}
#suntory_contents .ogori-links-link.blue .ogori-links-anchor {
  color: #5ec3db;
}
.concept__link__btn a {
  min-width: 280px;
  font-size: 20px;
}
.concept__link__btn a {
  position: relative;
  display: block;
  min-width: 305px;
  background: #ffc000;
  color: #fff;
  font-size: 23px;
  font-weight: bold;
  padding: 12px 0;
  text-decoration: none;
  border: 2px solid #ffc000;
  box-shadow: 0 6px 0 #ed7600;
  transition: 0.4s;
  border-radius: 9999px;
}
.concept__link__btn.blue a {
  color: #5ec3da;
  background: #ffffff;
  border: 2px solid #5ec3da;
  box-shadow: 0 6px 0 #14a3c3;
}



.fixedCvBtn .bottom__link {position: relative;transition: .3s ease;}
.fixedCvBtn.fixed .bottom__link {position: fixed;bottom: 0;left: 0;}

@media (min-width: 800px) {
  .bottom__link {}
  .fixedCvBtn .bottom__link,.fixedCvBtn.fixed .bottom__link {position: relative;}

  .pc__flex_item {display: flex!important;}
  #suntory_contents .main .subTtl {max-width: 740px;margin: 0 auto 15px;font-size: 30px;letter-spacing: 0.75px;padding: 0;}
  #suntory_contents .main .section2 h1.mainTtl {max-width: 740px;margin: 0 auto 34px;font-size: 40px;letter-spacing: 1px;padding: 0;}
  #suntory_contents .main .mvSection {padding: 0;}
  #suntory_contents .main .section2 .mvSection img {max-width: 740px;}

  #suntory_contents .main .section2 h2.performanceTtl {font-size: 28px;margin-bottom: 50px;}
  #suntory_contents .main .performanceBox {max-width: 740px;margin: 0 auto 80px;padding: 0;}
  #suntory_contents .main .performanceBox .col {flex-wrap: wrap;gap: 30px;}
  #suntory_contents .main .performanceBox .col+.performanceTtl {margin-top: 24px;}
  #suntory_contents .main .performanceBox .col .imgBox {width: 100%}
  #suntory_contents .main .performanceBox .col .imgBox img {}

  #suntory_contents .main .performanceBox .col .ttlBox {width: 100%;font-size: 28px;gap: 30px;}
  #suntory_contents .main .performanceBox .col .ttlBox .ttl {width: 340px;height: 52px;}
  #suntory_contents .main .performanceBox .col .ttlBox .ttl.ttlArr {width: 370px;height: 52px;padding:0;padding-right: 52px;background: url(/softdrink/jihanki/ogori/img/jirei/jirei_common_04.png) center/cover no-repeat;}

  #suntory_contents .main .performanceBox .col .txtBox {width: 100%;gap: 60px;padding-top: 0}
  #suntory_contents .main .performanceBox .col .txtBox .txtItem:first-child {min-height: auto;}
  #suntory_contents .main .performanceBox .col .txtBox .txtItem {width: 340px;gap: 10px;padding: 0;}
  #suntory_contents .main .performanceBox .col .txtBox .txtItem img {width: 60px;height: 70px;}
  #suntory_contents .main .performanceBox .col .txtBox .txtItem p {font-size: 18px;line-height: 1.77777;}

  #suntory_contents .main .infoBox {max-width: 740px;margin: 0 auto 80px;display: flex;padding: 30px 30px 20px 0;gap: 20px;}
  #suntory_contents .main .infoBox .imgBox {margin-left: -20px;margin-top: 0; width: 310px;}
  #suntory_contents .main .infoBox .imgBox img {}
  #suntory_contents .main .infoBox .txtBox {padding: 0}
  #suntory_contents .main .infoBox .txtBox .name {font-size: 20px;margin-bottom: 0;}
  #suntory_contents .main .infoBox .txtBox .name+.name {margin-top: 6px;}
  #suntory_contents .main .infoBox .txtBox .infoList {margin-top: 20px}
  #suntory_contents .main .infoBox .txtBox .infoList .info {font-size: 18px;display: flex;gap: 20px;}
  #suntory_contents .main .infoBox .txtBox .infoList .info+.info {margin-top: 14px;}
  #suntory_contents .main .infoBox .txtBox .infoList .info .ttl {width: 130px;height: 30px;margin-bottom: 0;}
  #suntory_contents .main .infoBox .txtBox .infoList .info .txt {width: 250px;}
  .border {border-bottom: 1px solid #D9D9D9;max-width: 740px;margin: 0 auto;}

}

.contacts {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  transform: translate3d(0, -50%, 0)
}
.contacts-anchor {
  display: inline-block;
  width: 76px;
  font-size: 19px;
  color: #fff;
  writing-mode: vertical-rl;
  padding: 19px 25px 17px;
  border-radius: 8px 0 0 8px;
  background: #ffc000;
  border: 3px solid #ffc000;
  border-right: 0;
  box-shadow: 0 6px 0 #ed7600;
  transition: .4s;
  text-decoration: none;
  font-weight:bold;
}
@media(min-width: 768px) {
  .contacts-anchor:hover {
    color: #ffc000;
    background: #fff;
    transform: translateY(7px) !important;
    box-shadow: 0 0 0 #ed7600;
    transition: .4s
  }
  .contacts-anchor:hover::after {
    background: url("../../img/external_link_o.png") no-repeat;
    background-size: 23px;
    background-position: bottom;
    animation-name: fade;
    animation-fill-mode: forwards;
    animation-duration: .4s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-direction: normal
  }
}
.contacts-anchor.blue {
  color: #5ec3da;
  background: #fff;
  border: 3px solid #5ec3da;
  border-right: 0;
  box-shadow: 0 6px 0 #14a3c3;
  margin-top: 15px
}
@media(min-width: 768px) {
  .contacts-anchor.blue:hover {
    color: #fff;
    background: #5ec3da;
    box-shadow: 0 0 0 rgba(5, 4, 4, .15)
  }
  .contacts-anchor.blue:hover::after {
    background: url("../../img/external_link_w.png") no-repeat;
    background-size: 23px;
    background-position: bottom;
    animation-name: fade;
    animation-fill-mode: forwards;
    animation-duration: .4s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-direction: normal
  }
}