@charset "utf-8";

#str-main img{
	margin: 0 auto;
}
#contents h1 img{
width:auto;
}

.bg1{
	position: relative;
	padding: 0 0 131px;
	background: url(../images/bg1_pc.jpg) no-repeat center center #150101;
	z-index: 1;
}
.bg2{
	position: relative;
	background: url(../images/bg2_pc.jpg) no-repeat center center #d8b75f;
	padding: 134px 0px 104px;
	background-size: cover;
}
.bg3{
	position: relative;
	padding: 99px 0px 80px;
	background: url(../images/bg3_2024_pc.jpg) no-repeat center center #d8b75f;
	background-size: cover;
}
.bg4 {
	position: relative;
    background: url(../images/bg4_pc.jpg) no-repeat center center #d8b75f;
    padding: 350px 0px 100px;
}
.bg5{
	position: relative;
	padding: 176px 0px 162px;
	background:url(../images/bg5_pc.jpg) no-repeat center center #150101;
}
.bg6{
	position: relative;
	padding: 66px 0px 110px;
	background:url(../images/bg6_pc.jpg) no-repeat center center #d8b75f;
	background-size: cover;
}
.bg7{
	position: relative;
	padding: 60px 0px 65px;
	background:url(../images/bg7_pc.jpg) no-repeat center center #040201;
	background-size: cover;
}
u ul{
	width: 100%;
	margin: 0 auto;
}
p.ph_text, p.ph_text2{
	margin:0;
	padding:0;
}

#process7 figure{margin: auto;}
#process7 figure,#process7 figure img{width:100%;height:auto;}


#bnrArea{margin-top:4.37%;margin-bottom:3.125%;}
#bnrArea .bnr_drinx{margin:0 auto;width:62.5%;}
#bnrArea .bnr_drinx a{display:block;}
#bnrArea .bnr_drinx a img{width:100%;height:auto;}
@media screen and (max-width: 768px) {
	#bnrArea{margin-top:9.375%;margin-bottom:7.81%;}
	#bnrArea .bnr_drinx{width:93.75%;}
}
@media screen and (max-width: 1080px) {
#process2item{
	background-size: 100% auto;
}
}
@media screen and (max-width: 768px) {
  #aMenu {
      margin: 0px auto 4.2%;
  }
  #aMenu ul{
      display: none;
  }
  #contents section{
  	text-align: center;
  }
.bg1 {
    padding: 33.4375% 0px 22.8125%;
    background: url(../images/bg1_sp.jpg) no-repeat center top;
    background-size: 100% 100%;
    z-index: 1;
}
.bg2 {
    background: url(../images/bg2_sp.jpg) no-repeat center top;
    padding: 15.625% 0 0;
    background-size: 100% 100%;
}
.bg3 {
    background: url(../images/bg3_2024_sp.jpg) no-repeat center top;
    padding: 14.0625% 0px 16.25%;
    background-size: 100% 100%;
}
.bg4 {
    background: url(../images/bg4_sp.jpg) no-repeat center top;
    padding: 55% 0px 20%;
    background-size: 100% 100%;
}
.bg5 {
    background: url(../images/bg5_sp.jpg) no-repeat center top;
    padding: 17.03125% 0px 10.3125%;
    background-size: 100% 100%;
}
.bg6 {
    background: url(../images/bg6_sp.jpg) no-repeat center top;
    padding: 12.1875% 0px 0;
    background-size: 100% 100%;
}
.bg7 {
    background: url(../images/bg7_sp.jpg) no-repeat center top;
    padding:11.71% 0px 0;
    background-size: 100% 100%;
}

.btn_aMenu img{
	width: 100%;
}
.shadow{
	z-index: 3;
	/* box-shadow */
	box-shadow:0px 0px 4px 1px #a68a41;
	-moz-box-shadow:0px 0px 4px 1px #a68a41;
	-webkit-box-shadow: 0px 0px 9px 1px #8c6f22;
}
#contents .bg1 h1{
	padding: 0 0 9.0625%;
}
.bg1 h2, .bg2 h2, .bg4 h2, .bg5 h2{
	padding: 0 0 9.0625%;
}
.bg6 h2{
	padding: 0 0 9.6875%;
}
.bg3 p.ph_text{
	padding: 0 0 10%;
}

#process2item{
	position: static;
	margin:0;
	padding:82.03125% 0 0;
	background:url(../images/process2item_sp.png) no-repeat center -70.78125%;
	background-size:70.78125% auto;
}
.text img{
	width: inherit;
}
#contents .bg1 h1 img{
	width:56.5625%;
}
.bg1 h2 img{
	width:76.71875%;
}
.bg1 section > img{
	width:76.25%;
}
.bg2 h2 img{
	width:81.25%;
}
.bg2 .text > img{
	width:79.84375%;
}
.bg3 h2 img{
	width: 54.53125%;
}
.bg3 .ph_text img{
	width:79.375%;
}
.bg3 section > img{
	width:79.375%;
}
#str-main .bg4 h2 img{
	width:67.5%;
	margin-left: 0;
	padding-left: 5%;
}
#str-main .bg4 .text > img{
	width:73.95%;
	margin-left: 0;
	padding-left: 5%;
}
#str-main .bg5 h2 img{
	width:44.0625%;
	margin-right: 0;
	padding-right:5%;
}
#str-main .bg5 .text > img{
	width:78.59375%;
	margin-right: 0;
	padding-right:5%;
}
.bg6 h2 img{
	width:69.6875%;
}
.bg6 .ph_text img{
	width:89.0625%;
}
.bg6 .ph_text img.image2{
	width:93.6%;
}
.bg6 .ph_text2 img{
	width:93.59375%;
}
.bg6 .inner > img{
	width:83.59375%;
}
#process7 .onlySp .ph_text,#process7 .onlySp .ph1_sp{
	height:auto;
	width:100%;
}
#process7 .onlySp .ph_text{margin-bottom:6.56%;}
}

@media screen and (min-width: 769px) {
.bg3_midashi {
	padding-bottom: 33px !important;
}
	.bg4, .bg5{
		overflow: hidden;
	}
.text.text_l{
	position: relative;
	margin-left: 0;
	text-align: left;
	z-index: 1;
}
#str-main .text.text_l img, #str-main .text.text_l h2 img{
	margin-left: 0;
}
.text.text_r{
	float: right;
	text-align: right;
}
#str-main .text.text_r h2 img{
	margin-right: 0;
}
.bg2 section{
	overflow: visible;
}
#process2item{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 522px;
	margin:0;
	padding:0;
	background-image:url(../images/process2item.png);
	background-position: center bottom;
	background-repeat: no-repeat;
}
#process3item{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 247px;
	margin:0;
	padding:0;
	background-image:url(../images/process3item.png);
	background-position: center top;
	background-repeat: no-repeat;
}
}
@media screen and (max-width: 768px) {
	.onlyPc{
		display: none!important;
	}
	#aMenu ul {
		display: block;
	}
}


/* 20240214 更新 */

@media screen and (max-width: 768px) {


	/* 一番搾り製法 */

	/* 一番搾り製法 テキスト */
	.bg1 section > img.process_top_img3_sp {
		width: 73.90625vw;
	}

	/* キリンビール独自の一番搾り製法 テキスト */
	.bg3 section > img.process3_img3_sp {
		width: 77.34375vw;
	}


	/* 私たちがこだわっていること テキスト */
	#str-main .bg4 .text > img.process4_img4_sp {
		width: 70.46875vw;
	}

	/* 一番搾りの製造工場 タイトル */
	.bg6 h2 img.process6_img1_sp {
		width: 70vw;
	}
}


/* 2024 9/1 リニューアル --------------------------------------  */
.bg3 {
	margin-top: 78px;
}
@media screen and (max-width: 768px) {
	.bg3 {
		margin-top: 18.125vw;
	}
	.bg3_midashi {
		padding-bottom: 17.8125vw;
	}
	.bg3 section > img.process3_img3_sp {
		width: 87.96875vw;
	}
}
/* ナビ */
@media screen and (min-width: 769px) {
  #aMenu ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #aMenu ul li {
    display: flex;
    align-items: center;
    height: 78px;
    padding-top: 0;
    padding-bottom: 0;
  }
  #aMenu ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 32px 0;
  }
}
@media screen and (max-width: 768px) {
	#aMenu ul {
		display: flex;
		justify-content: center;
	}
	#aMenu ul li {
		position: relative;
	}
	#aMenu ul li.current::before {
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-bottom: 2.5vw solid #8a6611;
		border-left: 1.875vw solid transparent;
		border-right: 1.875vw solid transparent;
		content: "";
		z-index: 1;
	}
	#aMenu ul li + li {
		border-left: .3125vw solid #fff;
	}
	#aMenu ul li:first-child {
		width: 28.125vw;
	}
	#aMenu ul li:nth-of-type(2) {
		width: 43.125vw;
	}
	#aMenu ul li:nth-of-type(3) {
		width: 28.125vw;
	}
	#aMenu ul li a {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 18.125vw;
	}
	#aMenu ul li a img {
		width: auto;
	}
	#aMenu ul li:first-child a img {
		width: 21.09375vw;
	}
	#aMenu ul li:nth-of-type(2) a img {
		width: 39.375vw;
	}
	#aMenu ul li:nth-of-type(3) a img {
		width: 21.25vw;
	}
}