@charset "utf-8";
/* 知る・楽しむの「トンボ飲料の歴史」ページ用のスタイルシートです。 */
/*
.origin
*/
/* .origin-head.ttl-pattern_2 {
  margin-bottom: 2rem;
} */

/*
.origin 終
*/

/* ------------------------------------------------------ */

/*
.presidents
*/
.presidents-wrap {
  display: flex;
  justify-content: space-between;
  background-color: #F0F8FC;
  padding: 0.75rem 0;
}
.presidents-name{
  font-size: 1.11rem;
  margin: 0;
  padding: 0;
  font-weight: 700;
  padding-left: 0.5rem;
}
.presidents-term {
  font-size: 1rem;
  margin: 0;
  padding: 0;
  font-weight: 500;
  padding-right: 0.3rem;
  letter-spacing: -0.5px;
}

.president-photo {
  width: 110px;
  margin: 0 auto;
  flex-shrink: 0;
}
.presidents-type {
  font-weight: 700;
  color: #0070C5;
  font-size: 1rem;
}
/*
.presidents 終
*/
@media all and (min-width: 576px) {
/*
.origin
*/
  /* .origin-head.ttl-pattern_2 {
    margin-bottom: 3rem;
  } */
  figure.key-visual {
    text-align: center;
  }
  
/*
.origin 終
*/
/*
.presidents
*/
  .presidents-name{
    padding-left: 2rem;
  }
  .presidents-term {
    padding-right: 2rem;
    letter-spacing: 0px;
  }
/*
.presidents 終
*/
}
@media all and (min-width: 768px) {
/*
.origin
*/
  /* .origin-head.ttl-pattern_2 {
    margin-bottom: 40px;
  } */

/*
.origin 終
*/
}
@media all and (min-width: 992px) {
/*
.origin
*/
  /* .origin-head.ttl-pattern_2 {
    margin-bottom: 60px;
  } */

/*
.origin 終
*/
}
@media all and (min-width: 1200px) {
/*
.origin
*/
  /* .origin-head.ttl-pattern_2 {
    margin-bottom: 80px;
  } */

/*
.origin 終
*/
}

@media all and (min-width: 1400px) {
}

/* 1世紀以上にわたる歩み */
figcaption {
  line-height: 1.42;
}
.history-box {
  display: flex;
  position: relative;
}
.history-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 19px;
  width: 2px;
  height: 100%;
  background-color: #0070C5;
  z-index: -1;
}
.history-box-last::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #0070C5;
}
.history-year {
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  color: #fff;
  background-color: #0070C5;
  border-radius: 50%;
  line-height: 1.15;
  font-size: 12px;
}
.history-content {
  padding-left: 10px;
  width: 100%;
}
.history-ttl {
  font-size: 1rem;
  font-weight: 700;
  position: relative;
  padding: .75rem;
  color: #0070C5;
  background-color: #F0F8FC;
  margin-bottom: 0.75rem;
}
.history-ttl_emphasis::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: #0070C5;
}
.history-ttl a {
  color: #0070C5;
}
.history-content p, .history-content div {
  font-size: 14px;
  line-height: 1.66;
}
.history-img {
  text-align: center;
}
.history-img img {
  width: 180px;
  min-width: 180px;
}
.history-img figcaption {
  text-align: center;
}
.history-content_ttltop_2 {
  padding-top: .5rem;
}
.logomark-ttl_1 {
  font-size: 1.11rem;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 0.75rem;
  background-color: #0070C5;
}
.logomark-ttl_2 {
  font-size: 1rem;
  color: #0070C5;
}
@media all and (min-width: 576px) {

}
@media all and (min-width: 768px) {
  .history-box::before {
    left: 24px;
  }
  .history-box-last::after {
    left: 17px;
  }
  .history-content p, .history-content div {
    font-size: 1rem;
  }
  .history-year {
    font-size: 1rem;
    width: 50px;
    min-width: 50px;
    height: 50px;
  }
  .history-ttl {
    font-size: 1.11rem;
  }
  .history-hasimg {
    display: flex;
  }
  .history-hasimg-text {
    padding-right: 1.66rem;
    order: 0;
  }
  .history-img {
    order: 1;
  }
  .history-content_ttltop_2 {
    padding-top: .75rem;
  }
}
@media all and (min-width: 992px) {
  .history-box::before {
    left: 38px;
  }
  .history-box-last::after {
    left: 30px;
    width: 18px;
    height: 18px;
  }
  .history-year {
    width: 80px;
    min-width: 80px;
    height: 80px;
  }
  .history-content {
    padding-left: 1.11rem;
  }
  .history-content_ttltop {
    padding-top: 0.75rem;
  }
  .history-ttl {
    padding: 1rem 1.5rem;
  }
  .history-ttl_emphasis::before {
    width: 6px;
  }
  .history-content_ttltop_2 {
    padding-top: 1.75rem;
  }
}
@media all and (min-width: 1200px) {
  .history-content_ttltop {
    padding-top: 1.06rem;
  }
  .history-box::before {
    left: 49px;
  }
  .history-box-last::after {
    left: 41px;
  }
  .history-year {
    width: 100px;
    min-width: 100px;
    height: 100px;
  }
  .history-content_ttltop_2 {
    padding-top: 2.25rem;
  }
}
@media all and (min-width: 1400px) {
  .history-content_ttltop_2 {
    padding-top: 1.9rem;
  }
}
/* //1世紀以上にわたる歩み */

/* ラムネの歴史とトンボラムネ */
.kaisei {
  font-family: 'Kaisei Opti', serif;
}
.ramune-history {
  background: url(../images/learnenjoy/origin/ramune/history-bg.jpg) repeat;
}
.ramune-history-ttl {
  padding: .5rem 0 1.2rem;
  line-height: 1.15;
  z-index: 100;
}
.ramune-history-ttl, .ramune-history-ttl_bubble {
  font-size: 2.11rem;
  position: relative;
  text-align: center;
  font-weight: 500;
}
.ramune-history-ttl::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 7.61rem;
  height: 7.61rem;
  border-radius: 50%;
  background-color: #fff;
  z-index: -1;
}
.ramune-history-ttl::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8.22rem;
  height: 6.5px;
  background: url(../images/learnenjoy/origin/ramune/ttl-ac.svg) no-repeat center center/contain;
}
.ramune-history-ttl_bubble span {
  display: inline-block;
  position: relative;
  padding-bottom: 2.5rem;
}
.ramune-history-ttl_bubble span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 2.11rem;
  background: url(../images/learnenjoy/origin/ramune/ac-bubble.svg) no-repeat center bottom/contain;
  z-index: 10;
}
.text-sepia {
  color: #66533B;
}
.first-bottle-board {
  color: #333;
  padding: 1.75rem;
  background-image: url(../images/learnenjoy/origin/ramune/board-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.first-bottle-ttl {
  font-size: 1.55rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
  text-align: center;
}
.first-bottle-ttl span {
  position: relative;
  padding: 0 1em;
}
.first-bottle-ttl span::before, .first-bottle-ttl span::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #66533B;
}
.first-bottle-ttl span::before {
  left: 0;
}
.first-bottle-ttl span::after {
  right: 0;
}
.trivia-box {
  padding: 1.25rem;
  background-color: #E8F4FC;
  border: 3px dashed #D5D5D5;
  box-shadow: 0 0 0 4px #E8F4FC;
  height: 100%;
  position: relative;
}
.trivia-box::before {
  content: '';
  position: absolute;
  top: -41px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
}
.trivia-ttl {
  font-size: 1.33rem;
  font-weight: 700;
  margin-bottom: .4rem;
  color: #CC414B;
  padding-top: 1rem;
}
.trivia-ttl span {
  background: linear-gradient(transparent 45%, #fff 45%);
}
.trivia-subttl {
  font-size: 1rem; 
  font-weight: 700;
}
.etymology-box {
  text-align: center;
  position: relative;
  font-weight: 700;
  z-index: 10;
}
.etymology-box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 12rem;
  height: 12rem;
  background-color: #fff;
  border-radius: 50%;
  z-index: -1;
}
.etymology-1, .etymology-2 {
  position: relative;
  padding-bottom: 1.77rem;
}
.etymology-1::after, .etymology-2::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: .25rem;
  left: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 7.5px 0 7.5px;
}
.etymology-1::after {
  border-color: #8DC7EF transparent transparent transparent;
}
.etymology-2::after {
  border-color: #67AEDF transparent transparent transparent;
}
.etymology-1_jap {
  font-size: 14px;
  color: #8DC7EF;
  padding-top: 4px;
}
.etymology-1_eng {
  font-size: 1.11rem;
  color: #8DC7EF;
  margin-top: -0.4rem;
}
.etymology-2_eng {
  font-size: 1.11rem;
  color: #67AEDF;
}
.etymology-3_jap {
  color: #569FD2;
}
.etymology-3_eng {
  font-size: 2.11rem;
  color: #569FD2;
  margin-top: -1rem;
}
.tombow-ramune-history {
  background-color: #F3F2E8;
}
.tombow-ramune-history_box {
  display: flex;
}
.tombow-ramune-history_img {
  width: 80px;
  min-width: 80px;
}
.tombow-ramune-history_text {
  padding-left: 1rem;
}
.tombow-ramune-history_box:not(:last-child) {
  margin-bottom: 2.22rem;
}
.tombow-ramune-history_box dt {
  font-size: 1.11rem;
  font-weight: 700;
  color: #66533B;
}
.tombow-ramune-history_box dl, .tombow-ramune-history_box dd {
  margin-bottom: 0;
}
.tombow-ramune-history_wrap {
  position: relative;
  z-index: 10;
  overflow: hidden;
}
.tombow-ramune-history_wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 39px;
  width: 3px;
  height: calc(100% - 80px);
  background: url(../images/learnenjoy/origin/ramune/acc-dashed.svg) repeat-y center center/contain;
  z-index: -1;
}
@media all and (min-width: 576px) {
  .tombow-ramune-history_text {
    padding-left: 1.5rem;
  }
}
@media all and (min-width: 768px) {
  .first-bottle-board {
    padding: 2.5rem;
  }
  .trivia-subttl {
    height: 3.46rem;
    margin-bottom: 1rem;
  }
  .trivia-box {
    box-shadow: 0 0 0 .55rem #E8F4FC;
  }
  .trivia-box::before {
    top: -47px;
    width: 65px;
    height: 65px;
  }
  .tombow-ramune-history_img {
    width: 100px;
    min-width: 100px;
  }
  .tombow-ramune-history_wrap::before {
    left: 49px;
  }
}
@media all and (min-width: 992px) {
  .trivia-ttl {
    padding-top: 1.25rem;
  }
  .tombow-ramune-history_text {
    padding-left: 3rem;
  }
}
@media all and (min-width: 1200px) {
  .tombow-ramune-history_img {
    width: 7.77rem;
    min-width: 7.77rem;
  }
  .tombow-ramune-history_wrap::before {
    left: 3.8rem;
  }
}
@media all and (min-width: 1400px) {
}
/* //ラムネの歴史とトンボラムネ */

/* 歴史ページ共通 */
.child-link-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3rem;
  gap: .75rem;
}
.child-link-btn {
  font-size: 14px;
  font-weight: 700;
  color: #177ABB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  width: 48.5%;
  padding: 15px;
  position: relative;
  border-radius: 1rem;
  border: 1px solid #0070C5;
}
.child-link-btn:hover {
  color: #fff;
  background: #177ABB;
}
.child-link-btn_prev::after, .child-link-btn_next::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  transition: .3s;
}
.child-link-btn_prev::after {
  transform: translateY(-50%) rotate(-45deg);
  -webkit-transform: translateY(-50%) rotate(-45deg);
  left: 8px;
  border-top: 2px solid #0070C5;
  border-left: 2px solid #0070C5;
}
.child-link-btn_next::after {
  transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
  right: 8px;
  border-top: 2px solid #0070C5;
  border-right: 2px solid #0070C5;
}
.child-link-btn_prev:hover::after, .child-link-btn_next:hover::after {
  border-color: #fff;
}
@media all and (min-width: 576px) {
  .child-link-btns {
    flex-wrap: nowrap;
  }
}
@media all and (min-width: 768px) {
  .child-link-btn {
    font-size: 1.11rem;
    padding: 2rem 2.22rem;
  }
  .child-link-btn_prev::after, .child-link-btn_next::after {
    width: .72rem;
    height: .72rem;
  }
  .child-link-btn_prev::after {
    left: 1.5rem;
  }
  .child-link-btn_next::after {
    right: 1.5rem;
  }
}
@media all and (min-width: 992px) {
  .child-link-btns {
    margin-top: 4.44rem;
  }
}
@media all and (min-width: 1200px) {
}
@media all and (min-width: 1400px) {
}
/* //歴史ページ共通 */

/*デスクトップ*/
@media all and (min-width: 992px) and (max-width: 1199px) {
}
/*中デバイス*/
@media all and (min-width: 768px) and (max-width: 991px) {
  
}
/*小デバイス*/
@media all and (min-width: 576px) and (max-width: 767px) {

}

@media all and (max-width: 400px) {
 
}

/*iPhone5:SE*/
@media all and (max-width: 320px) {

}