@charset "utf-8";
*{ margin: 0; padding: 0;}
ul, ol { list-style : none;}
img { border-style:none; width: 100%;}
html,*,*:before,*:after { box-sizing: border-box;}
body {-webkit-text-size-adjust: 100%;text-size-adjust: 100%;overflow-x: hidden; }

body {
    color:#000;
	background-color:#FFF;
	text-align:left;
	font-size:18px;
	line-height: 26px;
	
	font-family: zen-maru-gothic, sans-serif;
	font-weight: 500;
	font-style: normal;
}
@media screen and (max-width: 700px) {
body {
	font-size: 16px;
}
}
a {
	text-decoration : none;
	color:#000;
	transition:0.3s;
}
a:hover {
	color:#000;
	transition:0.3s;
}
a img	{
	transform: scale(1.0, 1.0);
	transition:0.2s;
}
a:hover img	{
	transform: scale(1.05, 1.05);
	transition:0.2s;
}
@media screen and (min-width: 701px) {
.sp { display: none; }
}
@media screen and (max-width: 700px) {
.pc { display: none; }
}
.cap {
	font-size: 12px!important;
	font-weight: 500!important;
}
.cap a {
	text-decoration:underline;
}
@media screen and (max-width: 700px) {
.cap { font-size: 11px!important; }
}

/*-----------------------------------
KV
-----------------------------------*/
.kv {
	width: 100%;
	height: 100vh;
	height: 100svh;
	background-image:url("../images/kv_kira.gif"),url("../images/kv_back.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}
@media screen and (max-width: 700px) {
.kv {
	background-image:url("../images/kv_kira_sp.gif"),url("../images/kv_back_sp.webp");
}
}

h1 {
	position: absolute;
	min-width: 280px;
	width: 27%;
	top: 8%;
	right: 3%
}
@media screen and (max-width: 700px) {
h1 {
	min-width: auto;
	width: 45%;
	top: 12%;
	right: 2%;
}
}


.awards {
	position: absolute;
	width: 23%;
	max-width: 150px;
	top: 3%;
	left: 2%
}
.kvjo {
	position: absolute;
	width: 23%;
	max-width: 150px;
	bottom: 1%;
	left: 2%;
	animation: floating-y 1.6s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
0% { transform: translateY(-2%); }
100% { transform: translateY(2%); }
}

/*-----------------------------------
Contents
-----------------------------------*/
section {
	width: 100%;
	margin: 0 auto;
}
h2 {
	font-size: 50px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	z-index: 2;
	position: relative;
	margin-bottom: 1em;
}
h2 span {
	font-size: 26px;
	letter-spacing: 0;
}
@media screen and (max-width: 700px) {
h2 { font-size: 34px; }
h2 span { font-size: 18px; }
}

/*-----------------------------------
intro
-----------------------------------*/
.intro {
	position: relative;
	width: 100%;
}
.intro .title,.intro .kaeru {
	position: absolute;
	top: 0;
	width: 100%;
}
.intro .photo {
	position: relative;
	top: 0;
}
.intro p {
	position: absolute;
	bottom: 11%;
	left: 11.5%;
	font-size: 1.6vw;
	line-height: 1.85;
}
@media screen and (max-width: 700px) {
.intro p {
	position: absolute;
	bottom: auto;
	top: 25%;
	left: 11.5%;
	font-size: 4.3vw;
	line-height: 1.8;
}
}


/*-----------------------------------
製品情報
-----------------------------------*/
.seihin {
	text-align: center;
}
.seihin h2 {
	margin-bottom: 0;
	letter-spacing: 0.08em;
}
.seihin h3 {
	position: absolute;
	bottom: 0.4em;
	left: 0;
	right: 0;
	margin: 0 auto;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.0;
	letter-spacing: -0.04em;
}
.seihin h3 span {
	font-size: 28px;
	letter-spacing: 0em;
}
@media screen and (max-width: 700px) {
.seihin h3 { font-size: 36px; }
.seihin h3 span { font-size: 18px; }
}


.seihin .beer_bkkm {
	padding-top: 60px;
	background-color: #FFDA2A;
}
.seihin .beer_bkkm .beer_pic {
	background-image:url("../images/seihin_kira.gif"),url("../images/seihin_back.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	max-width: 752px;
	height: 496px;
	margin: 0 auto;
}
.seihin .beer_bkkm .beer_pic .beer {
	width: 200px;
	position: absolute;
	top: 25px;
	left: -115px;
	right: 0;
	margin: 0 auto;
}
.seihin .beer_bkkm .beer_pic .can {
	width: 168px;
	position: absolute;
	top: 55px;
	left: 115px;
	right: 0;
	margin: 0 auto;
}
.seihin .beer_bkkm .beer_pic .balloon {
	width: 150px;
	position: absolute;
	top: 35px;
	left: -265px;
	right: 0;
	margin: 0 auto;
}

.seihin .beer_bkkm .gentei {
	max-width: 370px;
	width: 60%;
	margin: 0 auto;
}
.seihin .beer_bkkm .cap {
	padding-top: 30px;
	line-height: 1.8;
}


.beer_pic.act_on {
	animation: FadeIn 1.0s ease;
	animation-fill-mode: forwards;
}
.beer.act_on {
	animation: ActSlideR 1.0s ease 0.3s;
	animation-fill-mode: forwards;
}
.can.act_on {
	animation: ActSlideL 1.0s ease 0.3s;
	animation-fill-mode: forwards;
}
.balloon.act_on {
	animation: Scl 0.5s ease 0.8s;
	animation-fill-mode: forwards;
}




@media screen and (max-width: 700px) {
.seihin .beer_bkkm {
	padding-top: 30px;
}
.seihin .beer_bkkm .beer_pic {
	height: 380px;
}
.seihin .beer_bkkm .beer_pic .beer {
	width: 150px;
	top: 25px;
	left: -90px;
}
.seihin .beer_bkkm .beer_pic .can {
	width: 127px;
	top: 45px;
	left: 90px;
}
}
@media screen and (max-width: 420px) {
.seihin .beer_bkkm .beer_pic .balloon {
	width: 120px;
	top: 35px;
	left: -205px;
}
}


.seihin .beer_jo {
	padding-top: 60px;
	color: #FFF;
	background-color: #2678c8;
}
.seihin .beer_jo .beer_pic {
	background-image:url("../images/seihin_kira.gif"),url("../images/seihin_back_jo.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	max-width: 752px;
	height: 496px;
	margin: 0 auto;
}
.seihin .beer_jo .beer_pic .beer {
	width: 200px;
	position: absolute;
	top: 0;
	left: -115px;
	right: 0;
	margin: 0 auto;
}
.seihin .beer_jo .beer_pic .can {
	width: 168px;
	position: absolute;
	top: 30px;
	left: 115px;
	right: 0;
	margin: 0 auto;
}
.seihin .beer_jo .beer_pic .balloon {
	width: 148px;
	position: absolute;
	top: 10px;
	left: -265px;
	right: 0;
	margin: 0 auto;
}

.seihin .beer_jo .gentei {
	max-width: 370px;
	width: 60%;
	margin: 0 auto 10px auto;
}
.seihin .beer_jo .toujyou {
	color: #fff;
	font-size: 21px;
	line-height: 1;
	padding: 10px 18px;
	font-weight: 700;
	background-color: #e3007f;
	display: inline-block;
	margin: 0 auto 3px auto;
}
.seihin .beer_jo .cap {
	margin-bottom: 25px;
}
@media screen and (max-width: 700px) {
.seihin .beer_jo {
	padding-top: 30px;
}
.seihin .beer_jo .beer_pic {
	height: 380px;
}
.seihin .beer_jo .beer_pic .beer {
	width: 150px;
	top: 25px;
	left: -90px;
}
.seihin .beer_jo .beer_pic .can {
	width: 127px;
	top: 45px;
	left: 90px;
}
.seihin .beer_jo .toujyou {
	font-size: 16px;
	padding: 10px 10px;
}
}
@media screen and (max-width: 420px) {
.seihin .beer_jo .beer_pic .balloon {
	width: 120px;
	top: 35px;
	left: -205px;
}
}

.beer_style {
	font-size: 21px;
	font-weight: 700;
	margin-bottom: 1em;
}
.beer_txt {
	line-height: 1.8;
	font-weight: 700;
	margin-bottom: 1em;
}
.beer_exp {
	font-size: 14px;
	line-height: 1.9;
	margin-bottom: 2.5em;
}
.seihin a {
	font-size: 20px;
	font-weight: 700;
	padding: 8px 40px;
	background-color: #FFF;
	border-radius: 50px;
	transition:0.3s;
}
.seihin a:hover	{
	background-color: #000;
	color: #FFF;
	transition:0.3s;
}
@media screen and (max-width: 700px) {
.beer_style {
	font-size: 14px;
}
.beer_txt {
	font-size: 16px;
}
.beer_exp {
	font-size: 12px;
	line-height: 1.7;
}
}


/*-----------------------------------
お店
-----------------------------------*/
.shop {
	padding-top: 50px;
	text-align: center;
	background-color: #E5E5E4;
	position: relative;
}
.shop .pic {
	width: 173px;
	margin: 0 auto;
}
@media screen and (max-width: 700px) {
.shop { padding-top: 20px; }
.shop .pic { width: 150px; }
}
.shop p {
	font-size: 22px;
	line-height: 1.8;
	font-weight: 700;
	margin-bottom: 2.0em;
}
.shop p span {
	 background: linear-gradient(transparent 60%, #FFDA2A 0%);
     display: inline-block;
}

.shop .ba {
	display: flex;
	justify-content: space-between;
	max-width: 670px;
	width: 90%;
	margin: 0 auto 30px auto;
}
.shop .ba a {
	width: 30%;
}
.shop .cap {
	margin-bottom: 4.0em;
}

@media screen and (max-width: 700px) {
.shop p {
	font-size: 18px;
	margin-bottom: 1.5em;
}
.shop .ba {
	margin: 0 auto 10px auto;
}
.shop .ba a {
	width: 32%;
}
}
@media screen and (max-width: 420px) {
.shop p {
	font-size: 16px;
}
}

.sato_title {
	max-width: 624px;
	width: 90%;
	margin: 0 auto;
}
.sato_bana {
	max-width: 230px;
	width: 50%;
	margin: 0 auto;
	position: relative;
}
.origrass {
	position: absolute;
	width: 190px;
	top: -40px;
	right: -190px;
	z-index: 9;
}
@media screen and (min-width: 701px) {
.origrass_sp {
	display: none;
}
}
@media screen and (max-width: 700px) {
.origrass {
	display: none;
}
}

/*-----------------------------------
飲めるお店
-----------------------------------*/
.meetyou {
	padding-top: 50px;
	text-align: center;
	background-color: #FFDA2A;
	overflow: hidden;
}
.meetyou .pic {
	width: 173px;
	margin: 0 auto;
}
@media screen and (max-width: 700px) {
.meetyou { padding-top: 20px; }
.meetyou .pic { width: 150px; }
}

.nomeru_bana {
	max-width: 280px;
	width: 60%;
	margin: 0 auto 90px auto;
	position: relative;
}
.origrass {
	position: absolute;
	width: 190px;
	top: -40px;
	right: -200px;
	z-index: 9;
	animation: floating-y 1.0s ease-in-out infinite alternate-reverse;
}
@media screen and (min-width: 701px) {
.origrass_sp {
	display: none;
}
}
@media screen and (max-width: 700px) {
.nomeru_bana {
	margin: 0 auto 0 auto;
}
.origrass {
	display: none;
}
}


/*-----------------------------------
とっておき情報
-----------------------------------*/
.special {
	padding-top: 50px;
	text-align: center;
}
.special .pic {
	width: 190px;
	margin: 0 auto;
}
@media screen and (max-width: 700px) {
.special { padding-top: 20px; }
.special .pic { width: 150px; }
}

.lineup {
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	text-align: left;
	display: flex;
	justify-content: space-between;
}
.lineup .txt_area {
	width: 50%;
	display: flex;
	flex-direction: column;
}
.lineup .pic_area {
	width: 45%;
}
.rev {
	flex-direction: row-reverse;
	margin: 40px auto;
}
@media screen and (max-width: 700px) {
.lineup {
	display: block;
}
.lineup .pic_area {
	width: 85%;
	margin: 0 auto;
}
.lineup .txt_area {
	width: 100%;
}
}

.lineup h3 {
	font-size: 32px;
	line-height: 1.3;
	letter-spacing: 0.01em;
	padding: 0.15em;
	margin-bottom: 0.4em;
	
	background-image:url("../images/special_line.webp");
	background-size: 100% 25%;
	background-position: bottom;
	background-repeat: no-repeat;
	display: inline-block;
}
.lineup h3 span {
	font-size: 20px;
}
.lineup p {
	line-height: 1.8;
	margin-bottom: 1.0em;
}
.lineup .cap {
	margin: 0 0 2.5em 0;
}
.lineup a {
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	display: block;
	width: 100%;
	background-color: #FFDA2A;
	background-image:url("../images/btn_back.png");
	background-size: contain;
	background-position: left;
	background-repeat: no-repeat;
	border-radius: 15px;
	padding: 20px 0;
	margin-top: auto;
}
.lineup a:hover {
	color: #FFDA2A;
	background-color: #000;
}
.lineup .b01 a {
	margin-bottom: 5.5%;
}
.lineup .b02 a {
	margin-bottom: 15.5%;
}
@media screen and (max-width: 700px) {
.lineup h3 {
	font-size: 24px;
	margin-bottom: 0.6em;
}
.lineup h3 span {
	font-size: 18px;
}
.lineup p {
	line-height: 1.6;
	margin-bottom: 1.0em;
}
.lineup a {
	font-size: 21px;
	padding: 15px 0;
}
.lineup .b01 a {
	margin-bottom: 20px;
}
.lineup .b02 a {
	margin-bottom: 40px;
}
}
@media screen and (max-width: 420px) {
.lineup h3 {
	font-size: 21px;
}
.lineup h3 span {
	font-size: 14px;
}
}

@media screen and (max-width: 1002px) {
.lineup .txt_area .pc { display: none; }
}


/*-----------------------------------
公式X
-----------------------------------*/
.yonax {
	padding-top: 50px;
	text-align: center;
	color: #FFF;
	background-color: #0F1419;
	background-image:url("../images/back_x.gif");
	background-size: 713px 185px;
	background-position: center 25px;
	background-repeat: no-repeat;
	position: relative;
}
.yonax h2 {
	font-size: 32px;
	line-height: 1.4;
}


.yonax h2 span {
	font-size: 24px;
	letter-spacing: 0;
}
.yonax h2 a {
	color: #FFDA2A;
}
.yonax h2 a:hover {
	color: #fff;
}
.hash {
	font-size: 23px;
	line-height: 0;
	font-weight: 700;
	padding: 1px 24px;
	background-color: #FFDA2A;
	transition:0.3s;
}
@media screen and (max-width: 700px) {
.yonax {
	padding-top: 30px;
	background-size: auto 145px;
	background-position: center 15px;
}
.yonax h2 { font-size: 22px; }
.yonax h2 span { font-size: 16px; }
.hash { font-size: 18px; }
}
@media screen and (max-width: 420px) {
.yonax h2 {
	font-size: 20px;
}
}


.hash:hover	{
	background-color: #FFF;
	transition:0.3s;
}
.timeline {
	max-width: 650px;
	width: 90%;
	margin: 50px auto 0 auto;
}

/*-----------------------------------
Footer
-----------------------------------*/
footer {
	padding-top: 50px;
	width: 100%;
	font-size: 10px;
	line-height: 1.8;
	text-align: center;
	letter-spacing: 0.02em;
	padding-bottom: 30px;
}
footer a img {
	width: 66px;
	animation: floating-y 0.8s ease-in-out infinite alternate-reverse;
}
footer .ff {
	margin-bottom: 0!important;
}
footer .yoho {
	font-size: 18px;
	font-weight: 700;
}
footer p {
	margin-bottom: 16px;
}
@media screen and (max-width: 700px) {
footer { padding-top: 10px; }
footer .yoho { font-size: 16px; }
}

/*-----------------------------------
Loading
-----------------------------------*/
#loader-bg {
	display: block;
	position: fixed;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	top: 0px;
	left: 0px;
	background: #FFDA2A;
	z-index: 99;
}
#loader {
	display: flex;
	align-items:center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	color: #FFF;
	line-height: 1.6;
	letter-spacing: 0.08em;
	font-weight: 700;
}
#loader div {
	text-align: center;
}
#loader img {
	width: 100%;
}

/*-----------------------------------
WAVE
-----------------------------------*/
.wave_y,.wave_jo,.wave_g,.wave_w,.wave_x {
	position: relative;
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 80px;
	overflow: hidden;
}
.wave_y{ margin-top: 0; }

@media screen and (max-width: 700px) {
.wave_y,.wave_jo,.wave_g,.wave_w { margin-top: 40px; }
.wave_y { margin-top: 0; }
.wave_x { margin-top: 10px; }
}

.wave_y div,
.wave_g div,
.wave_x div {
	position: absolute;
	top: 0;
	left: 0;
	width: 4500px;
	height: 50px;
	background-size: 1500px 50px;
	background-repeat: repeat-x;
}
.wave_jo div,
.wave_w div {
	position: absolute;
	top: 0;
	right: 0;
	width: 4500px;
	height: 50px;
	background-size: 1500px 50px;
	background-repeat: repeat-x;
}

.wave_y div {
	background-image:url("../images/wave_y.webp");
	animation: WaveY 13s linear infinite;
}
@keyframes WaveY {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(-1500px,0px);}
}
.wave_jo div {
	background-image:url("../images/wave_jo.webp");
	animation: WaveJo 14s linear infinite;
}
@keyframes WaveJo {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(1500px,0px);}
}
.wave_g div {
	background-image:url("../images/wave_g.webp");
	animation: WaveG 13s linear infinite;
}
@keyframes WaveG {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(-1500px,0px);}
}
.wave_w div {
	background-image:url("../images/wave_w.webp");
	animation: WaveW 14s linear infinite;
}
@keyframes WaveW {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(1500px,0px);}
}
.wave_x div {
	background-image:url("../images/wave_x.webp");
	animation: WaveX 16s linear infinite;
}
@keyframes WaveX {
    0% {transform: translate(0px,0px);}
    100% {transform: translate(-1500px,0px);}
}