@charset "utf-8";
/* CSS Document */

/* style.css(header_new.html) */
/* ============================================ */
/* -- header -- */
.gmenu {
  background: #169fc1;
  color: #fff;
}
.gmenu > li {
  width: calc(100% / 3 - 0%);
}
.hmenu ul li a {
  color: #fff;
}
.hmenu ul li.sns a {
  color: #000;
  background: #fff;
}
.arrow::before {
  background: #bbb;
  color:#000;
}


/* style.css(SoftDrink) */
/* ============================================ */
/* -- Common -- */
body{
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic',sans-serif;
}
#pageTop a {
  padding: 0;
  line-height: 35px;
}

/* -- 各コンテンツ背景 -- */
.head_wrap {
  background:#223629;
  color:#fff;
  box-sizing:border-box;
}

.bg01{
/*  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u47055582/pc/softdrink/css/../img/back.png);*/
/*ffe9a7*/
}
.bg02 {
  background: #d0f6ff;
}
.bg03 {
  background: #bce7ff;
}
.bg04 {
  background: #f1f1f1;
}
.bg05 {
  background: #9dc7dd;
}

.bg05 h2,
.bg05 h3,
.bg05 p.cap {
  color:#fff;
}
.bg05 h3 {
  border-color:#fff;
}

/* header */
.head_wrap {
/*  background: #9fd1eb;*/
  background-color: #9fd1eb;
  background-image: radial-gradient(#b7e2f9 30%, transparent 30%);
  background-size: 20px 20px;
}

/* -- ham menu -- */
.menu div {
  background: #169fc1;
}
.gnav__menu__item {
  padding: 0;
}
.gnav__menu__item a {
  display: block;
}

/* -- .bubbleArea -- */
.bubbleArea {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}
.bubble {
  position: absolute;
  border-radius: 100%;
  border: 1px solid #169fc1;
  bottom: 1px;
}

/* -- main contents -- */
#feature ul {
  box-sizing: border-box;
}
#feature ul#Newitem {
  justify-content: flex-start;
  padding: 0 2%;
}
#feature ul#Newitem.item_lineup li {
  margin: 0 15px 15px;
}
.brand_lineup li{
  margin: auto;
  background:#fff;
}

/* -- .swiper -- */
.swiper-button-next,
.swiper-button-prev {
  background:#223629;
}

/* -- #Style -- */
#Style div{
  background: #fff;
}
#Style div div {
  width: 90%;
  margin: 5%;
}
#Style div div p.cap{
  font-size:0.8em;
}

/* -- #RankCompare -- */
#feature ul#RankCompare {
  padding: 3%;
}
#feature .ranking_wrap ul {
  padding: 3%;
}
#feature .ranking_wrap ul li img {
  box-sizing: border-box;
  height: 140px;
  padding: 8%;
  object-fit: contain;
  background: #fff;
}



/* SP版 表示用 */
/* ============================================ */
@media screen and (max-width: 768px) {
/* -- header（header_new.html） -- */
#header{
  background: #9fd1eb;
}

/* -- ham menu -- */
.gnav__menu__item a {
  padding: 30px;
}

/* -- main contents -- */
#feature ul#Newitem.item_lineup li {
  margin: 2.5%;
}

/* -- #Style -- */
#Style li {
  width: calc(100% / 2 - 4%);
  margin: 2% 1%;
  padding: 1%;
  text-align: center;
  font-size: 0.8em;
}

/* -- .ranking_wrap -- */
#feature .ranking_wrap ul li:nth-child(n-2) img {
  height: 140px;
}
#feature .ranking_wrap ul li:nth-child(n+3) {
  width: calc(100% / 3 - 20px);
  margin: 10px;
}
#feature .ranking_wrap ul li:nth-child(n+3) img {
  height: 95px;
}
}