@charset "UTF-8";

/*-------------------------------------------------------------------
 *
 * File Name   : style.css

-------------------------------------------------------------------*/
html{width:100%;height:100%;}
#body_inner{width:100%;}

#contents{margin:0 auto;width:100%;background: url(../images/contentsmain_bg.jpg) repeat center top;font-size: 16px;}
#contents .section_inner{width:960px;margin:0 auto 20px;padding-top: 30px;}
.section_heading02{margin:50px 0;}
.section_heading02 img,.section_heading03 img{margin:0 auto;}

/*===================================================================

    contentsNav

===================================================================*/
.contentsNav{width:100%;margin:0 auto;padding:10px 0 5px;text-align:center;}
.contentsNav .navList{margin:0 0 20px;padding:0 60px;}
.contentsNav .navList li{display:inline-block;vertical-align:middle;border-right:1px solid rgba(0,0,0,.6);}
.contentsNav .navList li:first-child{border-left:1px solid rgba(0,0,0,.6);}
.contentsNav .navList li a{display:block;padding:5px 50px;}
.contentsNav .navList li a:hover img{opacity:0.7;}

/*===================================================================

    contentsMain

===================================================================*/
#contents .contentsMain{text-align:center;}
#contents .contentsMain .section_heading03{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;text-align: center; /* for no-flexbox browsers */}
#contents .contentsMain .productsBox{padding:50px 0 30px;margin-top:-27px;}
#contents .contentsMain .productsBox .lead{margin-top:50px;margin-bottom: 40px;}
#contents .contentsMain ul.lineup{display:table;width:100%;text-align:left;}
#contents .contentsMain ul.lineup li{display:inline-block;width:25%;margin:30px 0;text-align:center;}
#contents .contentsMain #other ul.lineup li {
  width:20%;
}
#contents .contentsMain ul.lineup li a{display:block;color:#000;position:relative;}
#contents .contentsMain ul.lineup li span.item{display:inline-block;width:100%;text-align:center;vertical-align:bottom;}
#contents .contentsMain ul.lineup li span.item img{margin:0 auto;transition:opacity .5s;}
#contents .contentsMain ul.lineup li a:hover span.item img{opacity:0.7!important;}
#contents .contentsMain ul.lineup li span.name{display:table;width:100%;padding-top:10px;vertical-align:top;font-size:15px;}
#contents .contentsMain ul.lineup li span.name span{display:table-cell;vertical-align:top;}
#contents .contentsMain ul.lineup li a:hover span.name{text-decoration:underline; }
#contents .contentsMain ul.lineup li.new_item span.new,
#contents .contentsMain ul.lineup li.new_item span.new02,
#contents .contentsMain ul.lineup li.new_item span.new03,
#contents .contentsMain ul.lineup li.new_item span.new04 {
	display: block;
	position: absolute;
	top: -5px;
	right: 10px;
	width: 57px;
	height: 38px;
	background: url(../images/product_new.png) 0 0 no-repeat;
}
#contents .contentsMain ul.lineup li.new_item span.new02 {
	background: url(../images/product_new0623.png) 0 0 no-repeat;
	background-size: contain;
	right: 12px;
}
#contents .contentsMain ul.lineup li.new_item span.new03 {
	background: url(../images/product_new03.png) 0 0 no-repeat;
}
#contents .contentsMain ul.lineup li.new_item span.new04 {
  background: url(../images/product_new0929.png) 0 0 no-repeat;
  height: 44px;
  top: -2px;
}

#contents .contentsMain ul.lineup li span.credit {display:table;width:100%;padding-top:10px;vertical-align:top;line-height: 1;}
#contents .contentsMain ul.lineup li.appletea_soda span.name {padding-top: 0;}


/* new ----------------------------------------- */
#contents .contentsMain #new .section_inner{
	padding:50px 0 60px;
	background-color: #fef6e9;
}
#contents .contentsMain #new .lineup{
	text-align: left;
	max-width: 800px;
	margin: auto;
}
#contents .contentsMain #new .lineup li {
  width: 33.3%;
}
#contents .contentsMain #new_peachpea .section_inner{padding:37px 0 36px;background:url("../images/contents_new_bg.png") no-repeat center top;background-size:100% 100%;
	position: relative;
}
#contents .contentsMain #new_peachpea .lineup{text-align:center;}
#contents .contentsMain #new_peachpea .lineup li{width:26%;}
#new_peachpea .new_peachpea_copy {
	text-align: left;
	position: absolute;
	bottom: 36px;
	right: 36px;
}

#contents .contentsMain #new div ul li.lemon_nonsugar a span.new04_02 {
	display: block;
	position: absolute;
  top: 4px;
  right: 30px;
  width: 57px;
  height: 42px;
	background: url(../images/product_new0922_01.png) 0 0 no-repeat;
}

@media screen and (max-width: 640px) {
	#new_peachpea .new_peachpea_copy {
		font-size: 10px;
		bottom: 10px;
		right: 10px;
	}
}

/*===================================================================

    modalArea

===================================================================*/
#overlay{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);-ms-filter:"alpha(opacity=70)";-moz-opacity:0.7;-khtml-opacity:0.7;}

.modalArea{display:none;position:relative;width:850px;background:#fff;}
.modalArea .back_btn{position:absolute;top:50%;left:-46px;width:26px;height:44px;margin-top:-13px;background:url(../images/modal/m_btn_back.png) no-repeat top center;cursor:pointer;}
.modalArea .next_btn{position:absolute;top:50%;right:-46px;width:26px;height:44px;margin-top:-13px;background:url(../images/modal/m_btn_next.png) no-repeat top center;cursor:pointer;}
.modalArea .close{position:absolute;top:4px;right:4px;width:37px;height:37px;background:url(../images/modal/m_btn_close.png) no-repeat top center;z-index:5;cursor:pointer;}
.modalArea .modalBox{border:4px solid #ebe1c3;background:url(../images/modal/m_box_bg.jpg) repeat top center;}
.modalArea .modal_title{padding:25px 40px;}
.modalArea .modal_title span{display:inline-block;vertical-align:middle;color:#000;font-weight:bold;font-size:28px;letter-spacing:1px;line-height:1.4;}
.modalArea .modal_title span.modal_title_smallmark{font-size:12px;line-height:1.4;}
.modalArea .modal_title .seven_text{vertical-align: baseline;}
.modalArea .modal_title span.modal_title_small{display:block;font-size:12px;line-height:1.4;}
.modalArea .modal_title span > .smaller {font-size: 60%;}
.modalArea .modal_cont{padding:25px 35px 25px 50px;color:#603b00;background:rgba(255,255,255,.76);}
.modalArea .modal_cont .modal_txt{float:left;width:500px;}
.modalArea .modal_cont .lead{font-size:15px;}
.modalArea .modal_cont .lead + .lead{margin:15px 0 0;}
.modalArea .modal_cont .bnr {
	display: inline-block;
	margin-top: 1em;
}
.modalArea .modal_cont .annotation_type01,.modalArea .modal_cont .annotation_type02{margin:10px 0 0;font-size:12px;}
.modalArea .modal_cont .modal_memo{margin:1em 0 0;font-size:14px;}
.modalArea .modal_cont .modal_memo span{font-weight:bold;}
.modalArea .modal_cont .source{font-size:10px;}
.modalArea .modal_cont .modal_circle_area{margin:20px 0 0;}
.modalArea .modal_cont .modal_icon{float:left;}
.modalArea .modal_cont .modal_icon li{display:inline-block;width:70px;margin:0 0 0 15px;}
.modalArea .modal_cont .modal_icon li:first-child{margin:0;}
.modalArea .modal_cont .modal_leaf{float:right;font-size:12px;}
.modalArea .modal_cont .modal_leaf li{display:inline-block;width:72px;margin:0 0 0 15px;text-align:center;}
.modalArea .modal_cont .modal_leaf li a{display:block;color:#603b00;}
.modalArea .modal_cont .modal_bnr{margin:20px 0 0;padding:15px 0 0;border-top:1px solid #f0e1c7;}
.modalArea .modal_cont .modal_bnr li{display:inline-block;width:235px;text-align:center;}
.modalArea .modal_cont .modal_bnr li.w_max {width:auto;}
.modalArea .modal_cont .modal_bnr li:nth-child(even){margin:0 0 0 20px;}
.modalArea .modal_cont .modal_bnr li a{display:block;color:#603b00;}
.modalArea .modal_cont .modal_bnr li a img{margin:0 auto;}
.modalArea .modal_cont .modal_bnr li span{display:block;margin:0 0 5px;font-size:15px;line-height:1.4;}
.modalArea .modal_cont .modal_bnr ul {margin-bottom: 30px;}
.modalArea .modal_cont .modal_img{float:right;width:240px;text-align:center;color:#603b00;font-size:12px;}
.modalArea .modal_cont .modal_img img{margin:0 auto;}
.modalArea .modal_cont .modal_bnr img.om{background:url("/products/softdrink/gogo/common/images/bnr/bnr_om.jpg") no-repeat center top;background-size:contain;}
.modalArea .modal_cont .modal_bnr img.mmt{background:url("/products/softdrink/gogo/common/images/bnr/bnr_mmt.jpg") no-repeat center top;background-size:contain;}


@media screen and (max-width: 960px) and (min-width: 641px){
	#contents .section_inner{width:94%;}

	/*===================================================================

        contentsMain

	===================================================================*/
	#contents .productArea{width:100%;padding:60px 0 90px;background-size:contain;}
	#contents .contentsMain .section_heading03.line:before,#contents .contentsMain .section_heading03.line:after{width:40%;}
	.contentsNav .navList{padding:0;}
	.contentsNav .navList li a{padding:7px 40px;}

	#contents .contentsMain ul.lineup li.new_item span.new,
	#contents .contentsMain ul.lineup li.new_item span.new02 {
    top: 0%;
    right: 8%;
    width: 26%;
    height: 38px;
    background-size: contain;
  }
	#contents .contentsMain ul.lineup li.new_item span.new03 {
    top: 0%;
    right: -5px;
    width: 26%;
    height: 38px;
    background-size: contain;
  }
	#contents .contentsMain ul.lineup li.new_item span.new04 {
    top: 0%;
    right: 0px;
    width: 26%;
    height: 38px;
    background-size: contain;
  }
	#contents .contentsMain ul.lineup li.new_item span.new02.paper_pack {
		right: -10px;
	}

  #contents .contentsMain #new div ul li.lemon_nonsugar a span.new04_02 {
    width: 22%;
    height: 0;
    padding-top: 22%;
    right: 27px;
    top: 2px;
    background-size: contain;
}

	/*===================================================================

　　    modalArea

	===================================================================*/
	.modalArea{width:85%;}
	.modalArea .back_btn{width:8%;left:-8.5%;}
	.modalArea .next_btn{width:8%;right:-8.5%;}
	.modalArea .modal_title{padding:25px 6%;}
	.modalArea .modal_cont{padding:25px 6%;}
	.modalArea .modal_cont .modal_img{width:30%;}
	.modalArea .modal_cont .modal_txt{width:65%;}
	.modalArea .modal_cont .modal_bnr li{width:48%;}
	.modalArea .modal_cont .modal_bnr li:nth-child(even){margin:0 0 0 4%;}
}



@media screen and (max-width: 640px) {
	#contents {font-size: 3.86vw;}

	#contents .section_inner{width:100%;padding:0 5%;padding-top: 75px;}
	.section_heading02{width: 90%;margin:calc(65/640*100vw) auto calc(25/640*100vw);}
	#contents .contentsMain #new .section_heading03 img{width:calc(416/640*100vw);margin:0 auto;}
	#contents .contentsMain #new_peachpea .section_heading03 img{width:30%;margin:0 auto;}
	#contents .contentsMain #other .section_heading03 img{width:calc(540/640*100vw);margin:0 auto;}
	#contents .contentsMain #kodawari .section_heading03 img{width:37%;margin:0 auto;}
	#contents .contentsMain #other .section_heading03 img{width:calc(408/640*100vw);margin:0 auto;}
	#contents .contentsMain #chilled .section_heading03 img {
    width: 80%;
    margin: 0 auto;
  }

	/*===================================================================

        contentsNav

	===================================================================*/
	.contentsNav{padding:2% 0 0;background-size:auto 100%;}
	.contentsNav .navList{margin:0;padding:0 3%;}
	.contentsNav .navList li:nth-child(1){width:12%;}
	.contentsNav .navList li:nth-child(2){width:24%;}
	.contentsNav .navList li:nth-child(3){width:15%;}
	.contentsNav .navList li:nth-child(4){width:19%;}
	.contentsNav .navList li a{padding:2px 15%;}
	.contentsNav .navList li a img{width:100%;margin:0 auto;}

	/*===================================================================

        contentsMain

	===================================================================*/
	#contents .contentsMain{margin-top:-58px;}
	#contents .contentsMain .section_heading03.line:before,#contents .contentsMain .section_heading03.line:after{width:30%;}
	#contents .contentsMain .productsBox{padding:15px 0;margin-bottom:-80px;padding-top:35px;}
	#contents .contentsMain .productsBox .lead{margin:calc(36/640*100vw) 0 0;}
  #contents .contentsMain ul.lineup li{width:33%;}
  #contents .contentsMain #other ul.lineup li {
    width:33%;
  }
	#contents .contentsMain ul.lineup li span.item{padding:0 20%;}
	#contents .contentsMain ul.lineup li span.name{margin:0 auto;font-size:10px;}
	#contents .contentsMain ul.lineup li span.credit{font-size: 10px;}
	#contents .contentsMain ul.lineup li.new_item span.new,
	#contents .contentsMain ul.lineup li.new_item span.new02 {
    width: 35%;
    height: 0;
		padding-top: 22%;
    right: -5px;
    top: 2px;
    background-size: contain;
  }
	#contents .contentsMain ul.lineup li.new_item span.new03 {
    width: 35%;
    height: 0;
		padding-top: 22%;
    right: -15%;
    top: 2px;
    background-size: contain;
  }
  #contents .contentsMain ul.lineup li.new_item span.new04 {
    width: 35%;
    height: 0;
		padding-top: 22%;
    right: -8%;
    top: -5px;
    background-size: contain;
  }
	#contents .contentsMain ul.lineup li.new_item span.new02.paper_pack {
		right: -16%;
	}

	/* new ----------------------------------------- */
	#contents .contentsMain #new .section_inner{padding: 35px 0;}
	#contents .contentsMain #new.productsBox{padding:75px 0 0;}
	#contents .contentsMain #new ul.lineup li{width:50%;}
	#contents .contentsMain #new ul.lineup li span.item{padding:0 20%;}
	#contents .contentsMain ul.lineup li span.item img{-webkit-tap-highlight-color:rgba(0,0,0,0);}
	#contents .contentsMain #new .lineup{padding:0 10%;}
	#contents .contentsMain #new_peachpea .section_inner{padding: 35px 0;}
	#contents .contentsMain #new_peachpea.productsBox{padding:80px 0 0;}
	#contents .contentsMain #new_peachpea ul.lineup li{width:50%;}
	#contents .contentsMain #new_peachpea ul.lineup li span.item{padding:0 20%;}
  #contents .contentsMain #new_peachpea .lineup{padding:0 15%;}
  
  #contents .contentsMain #new div ul li.lemon_nonsugar a span.new04_02 {
    width: 23%;
    height: 0;
    padding-top: 22%;
    right: 7%;
    top: 2px;
    background-size: contain;
  }


	/*===================================================================

　　    modalArea

	===================================================================*/
	.modalArea{width:80%;}
	.modalArea .back_btn{left:-12%;width:12%;height:42px;background-size:20px;background-position: center;}
	.modalArea .next_btn{right:-12%;width:12%;height:42px;background-size:20px;background-position: center;}
	.modalArea .close{top:-37px;right:0;width:35px;height:35px;background-size:contain;}
	.modalArea .modalBox{border:3px solid #ebe1c3;}
	.modalArea .modal_cont{padding:15px 6%;}

	.modalArea .modal_cont .modal_txt,.modalArea .modal_cont .modal_img{float:none;width:100%;margin-top:10px;}
	.modalArea .modal_title{padding:15px 6%;}
  .modalArea .modal_title span{font-size:4.7vw;}
  .modalArea .modal_title .seven_text{font-size:4.4vw;}  
  .modalArea .modal_title span.modal_title_smallmark{font-size:2.5vw;}
	.modalArea .modal_title span.modal_title_small{font-size:2.5vw;}
	.modalArea .modal_cont .modal_img{position:relative;font-size:10px;}
	.modalArea .modal_cont .modal_img p img{width:30%;height:auto;}
	.modalArea .modal_cont .modal_img.imgSize_large p img{width:60%;height:auto;}
	.modalArea .modal_cont .modal_icon{position:absolute;top:0;left:0;float:none;width:24%;}
	.modalArea .modal_cont .modal_icon li{display:block;width:100%;margin:10px 0 0;}
	.modalArea .modal_cont .modal_leaf{position:absolute;bottom:0;right:0;float:none;width:22%;font-size:10px;}
	.modalArea .modal_cont .modal_leaf li{display:block;width:100%;margin:0;}
	.modalArea .modal_cont .lead{font-size:12px;}
	.modalArea .modal_cont .annotation_type01, .modalArea .modal_cont .annotation_type02{margin:5px 0 0;font-size:10px;}
	.annotation_type01.type_center{text-align: center;}
	.modalArea .modal_cont .modal_bnr{margin:10px 0;padding:10px 0 0;}
	.modalArea .modal_cont .modal_bnr li{display:block;width:100%;}
	.modalArea .modal_cont .modal_bnr li:nth-child(even){margin:0;}
}