@charset "UTF-8";
:root {
  --font-family-jp-sans: "WindowsYuGothicM", "游ゴシック体", YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --font-family-jp-serif: "游明朝体", YuMincho, "Yu Mincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Times New Roman", Times, Georgia, Cambria, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", serif
}


* {
  box-sizing: border-box
}
*, :after, :before {
  margin: 0;
  padding: 0
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit
}
img, svg, video {
  height: auto;
  max-width: 100%;
  width: auto
}
input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit
}
/*img, svg, video {
  vertical-align: middle
}*/
button {
  -webkit-appearance: none;
  appearance: none;
  background-color: #0000;
  border: 0;
  display: inline-block;
  padding: 0
}
summary {
  cursor: pointer;
  display: block
}
summary::-webkit-details-marker {
  display: none
}
.c-container {
  max-width: var(--c-container-max-width, none);
  padding: var(--c-container-padding, 0)
}
.c-container.is-centered {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0rem;
	overflow: hidden;
}

.cta__button1 {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: button
}
@keyframes button {
  0% {
    transform: scale(1)
  }
  35% {
    transform: scale(1.05)
  }
  50% {
    transform: scale(1)
  }
  85% {
    transform: scale(1.05)
  }
  to {
    transform: scale(1)
  }
}
.cta__button {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: button
}
@keyframes button {
  0% {
    transform: scale(1)
  }
  35% {
    transform: scale(1.05)
  }
  50% {
    transform: scale(1)
  }
  85% {
    transform: scale(1.05)
  }
  to {
    transform: scale(1)
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0)
  }
  to {
    transform: translateX(calc(-100% - var(--scroll-item-gap, 1rem)))
  }
}
:root {
  --theme-font-family: var(--font-family-jp-sans);
  --theme-bg-color: #fff;
  --theme-outside-color: #e1e1e1;
  --theme-text-color: var(--theme-color-dark);
  --theme-content-max-width: 750;
  --theme-content-max-width-px: calc(var(--theme-content-max-width)*1px);
  --theme-color-dark: #000
}
html {
  background: var(--theme-outside-color);
  font-size: clamp(12px, 4.2666666667vw, 32px)
}
body {
  font-family: var(--theme-font-family);
  line-height: 1.5
}
.designed {
  background: var(--theme-bg-color);
  color: var(--theme-text-color)
}
.designed img, .designed svg, .designed video {
  display: block
}
.key {
    overflow: hidden;
    position: relative;
}
.steam{
    position:relative;
}
.steam-video{
    box-shadow: 11px 9px 15px -6px #b5b5b5;
    border-radius: 0px;
    position: absolute;
    width: 84%;
    top: 16.5%;
    right: 0;
    left: 0;
    margin: auto;
}
.cta {
  margin: 0 auto;
  position: relative;
}
.cta__button1 {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 53%;
    width: 84%;
}
.cta__button {
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 83%;
  width: 84%;
}
.component{
    border: 1px solid #2e2e2e;
    padding: 1rem;
    margin: 2rem 1rem 1rem;
}
.component__title{
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    text-align: center;
}
.component__txt{
    color: #2e2e2e;
    font-size: 0.6rem;
    line-height: 1.6;
}
.footer {
    background: #2e2e2e;
    color: #fff;
    padding: 2rem;
    margin: 0 auto;
    max-width: var(--theme-content-max-width-px)
}
.footer a {
  color: inherit
}
.footer__navigation {
  font-feature-settings: "palt";
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  font-size: .675rem;
  justify-content: center
}
.footer__navigation > * {
  border-color: #777;
  border-style: solid;
  border-width: 0 1px;
  line-height: 1;
  margin: .375em 0 .25em -1px;
  padding: .25em .5em
}
.footer__copyright {
  font-feature-settings: "palt";
  font-size: .75rem;
  line-height: 1;
  text-align: center
}
* + .footer__copyright {
  margin: 2rem 0 0
}

.fixed-offer {
    bottom: 0;
    opacity: 0;
    position: fixed;
    transition: opacity 0.3s linear 0s;
    width: 100%;
    z-index: 99;
    max-width: 750px;
    margin: 0 auto;
}
.fixed-offer a{
    display: flex;
    justify-content: center;
}
.fixed-offer-is-invisible {
  opacity: 0;
}

.fixed-offer-is-invisible.fixed-offer-is-ended {
  left: 100%;
}

.fixed-offer-is-visible {
  opacity: 1 !important;
}
.fixed-offer img{
    width: 100%;
    height: auto;
}


/*▼▼▼▼▼追加▼▼▼▼▼*/

.relative{
	position: relative;
}
.fv-01{
	position: relative;
	z-index: 2;
}
.fv_mov{
	position: absolute;
    z-index: 1;
    bottom: 5%;
    right: -34%;
    width: 100%;
}

.fv_mov_2{
	position: absolute;
    z-index: 1;
    bottom: 20%;
    right: -30%;
    width: 80%;
}

.se04_01{
	position: absolute;
	top: 30%;
	right: 10%;
}
.se_03_waku{
	position: relative;
    z-index: 2;
}
.se_03{
	position: absolute;
	bottom: 6%;
	left: 0;
	width: 100%;
	z-index: 1;
}

.absolute_01{
	position: absolute !important;
    top: 28%;
    width: 90%;
    left: 5%;
}

.absolute_02{
	position: absolute;
    bottom: 8%;
    width: 90%;
    left: 5%;
}

.se04_02{
	position: absolute;
	bottom: 27%;
	left: 10%;
}


.sec08_movie.-movie1 {
    top: 1%;
    left: 5%;
}
.sec08_movie.-movie2 {
    top: 4%;
    left: 29%;
}
.sec08_movie.-movie3 {
    top: 1%;
    right: 28%;
}
.sec08_movie.-movie4 {
    top: 4%;
    right: 5%;
}
.sec08_movie {
    position: absolute;
    width: 150px;
    height: 270px;
    overflow: hidden;
    filter: drop-shadow(0px 3px 12px rgba(0, 0, 0, 0.25));
}

.sec08_movie video {
    width: 100%;
    aspect-ratio: 9 / 16 !important;
    object-fit: cover;
}

/*==================================================
BAスライダー(ループ)
===================================*/
.ba_loop .before {
    animation: 2s ba_loop_before ease-in-out alternate infinite;
}

.ba_loop .after {
    animation: 2s ba_loop_after ease-in-out alternate infinite;
}
	
.ba_loop .before, .ba_loop .after {
    position: absolute;
    top: 28%;
    left: 6.667%;
    width: 86.667%;
}

.ba_loop .line {
    position: absolute;
    top: 28%;
    left: 46.933%;
    width: 6.133%;
    animation: 2s ba_loop_line ease-in-out alternate infinite;
}

@keyframes ba_loop_before {
  from {
    clip-path: inset(0% 100% 0% 0%);
  }
  to {
    clip-path: inset(0% 0% 0% 0%);
  }
}
	
@keyframes ba_loop_after {
  from {
    clip-path: inset(0% 0% 0% 0%);
  }
  to {
    clip-path: inset(0% 0% 0% 100%);
  }
}
	
@keyframes ba_loop_line {
  from {
    left: 4%;
  }
  to {
    left: 90%;
  }
}


/*==================================================
BAスライダー
===================================*/
.ba_wrapper{
	position: absolute;
    top: 26%;
    left: 4%;
    width: 92%;
}

.beer-slider{display:inline-block;overflow:hidden;position:relative;}

.beer-slider *,.beer-slider:after,.beer-slider :after,.beer-slider:before,.beer-slider :before{box-sizing:border-box;}

.beer-slider img,.beer-slider svg{vertical-align:bottom;}

.beer-slider>*{height:100%;}

.beer-slider>img{height:auto;max-width:100%;width: 100%;}

.beer-reveal{left:0;opacity:0;overflow:hidden;position:absolute;right:50%;top:0;transition:opacity .35s;z-index:1;}

.beer-reveal>:first-child{height:100%;max-width:none;width:200%;}

.beer-reveal>img:first-child{height:auto;}

.beer-range{
	/*-moz-appearance:none;*/
	-ms-touch-action:auto;
	/*-webkit-appearance:slider-horizontal!important;*/
	bottom:0;cursor:pointer;height:100%;left:-1px;margin:0;opacity:0;position:absolute;top:0;touch-action:auto;width:calc(100% + 2px);z-index:2;}

.beer-range::-webkit-slider-thumb{
	/*-webkit-appearance:none;*/
	height:300vh;}

.beer-range::-moz-range-thumb{
	/*-webkit-appearance:none;*/
	height:300vh;
}

.beer-range::-ms-tooltip{display:none;}

.beer-handle{background:hsla(0,0%,100%,.5);border-radius:50%;
	box-shadow:0 0 6px transparent;
	color:#000;
	height:48px;
	left:50%;
	opacity:0;
	pointer-events:none;
	position:absolute;
	top:50%;
	transform:translate3d(-50%,-50%,0);
	transition:background .3s,box-shadow .3s,opacity .5s .25s;width:48px;z-index:2;}

.beer-handle:after,.beer-handle:before{border-left:2px solid;border-top:2px solid;content:"";height:10px;position:absolute;top:50%;transform-origin:0 0;width:10px;}

.beer-handle:before{left:10px;transform:rotate(-45deg);}

.beer-handle:after{right:0;transform:rotate(135deg);}

.beer-range:focus~.beer-handle{background:hsla(0,0%,100%,.85);box-shadow:0 0 3px rgba(0,0,0,.4);}

.beer-reveal[data-beer-label]:after,.beer-slider[data-beer-label]:after{background:hsla(0,0%,100%,.75);border-radius:.125rem;content:attr(data-beer-label);line-height:1;padding:.5rem;position:absolute;top:0.5rem;font-size:17px!important;}

.beer-slider[data-beer-label]:after{right:0.5rem;}

.beer-reveal[data-beer-label]:after{left:0.5rem;}

.beer-reveal[data-beer-label=""]:after,.beer-slider[data-beer-label=""]:after{content:none;}

.beer-ready .beer-handle,.beer-ready .beer-reveal{opacity:1;}


/*==================================================
SNS スライダー
===================================*/
.sns {
	/*position: absolute;
    bottom: 17vh;*/
    width: 100%;
}

.loopSlide {
  display: flex;
  width: 300vw;
  height: auto;
  overflow: hidden;
	position: absolute;
	bottom: 18%;
}
.loopSlide img {
  width: auto;
  height: 100%;
}
.loopSlide img:first-child {
  animation: slide1 20s -30s linear infinite;
}
.loopSlide img:last-child {
  animation: slide2 20s linear infinite;
}

@keyframes slide1 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}




/*==================================================
オファー
===================================*/
.offer_txt{
	position: absolute;
	top: 140px;
	right: 115px;
}
.cta_01{
	position: absolute;
    bottom: 32%;
    left: 0;
    z-index: 3;
	width: 100%;
}
.cta_01_v2{
	position: absolute;
    bottom: 27%;
    left: 0;
    z-index: 3;
	width: 100%;
}
.cta_01_v3{
	position: absolute;
    bottom: 21%;
    left: 0;
    z-index: 3;
    width: 100%;
}
.cta_01_v4{
	position: absolute;
    bottom: 14%;
    left: 0;
    z-index: 3;
    width: 100%;
}
.cta_01_v5{
	position: absolute;
    bottom: 16%;
    left: 0;
    z-index: 3;
    width: 100%;
}
.cta_01_v6{
	position: absolute;
    bottom: 10%;
    left: 0;
    z-index: 3;
    width: 100%;
}
.cta_02{
	position: absolute;
    bottom: 24%;
    left: 0;
    z-index: 3;
    width: 100%;
}
.cta_03{
	position: absolute;
    bottom: 21%;
    left: 0;
    z-index: 3;
    width: 100%;
}
.cta_04{
	position: absolute;
    bottom: 16%;
    left: 0;
    z-index: 3;
    width: 100%;
}
.cta_05{
	position: absolute;
    bottom: 10%;
    left: 0;
    z-index: 3;
    width: 100%;
}
.cta_06{
	position: absolute;
    bottom: 16.5%;
    left: 0;
    z-index: 3;
    width: 100%;
}
.cta_07{
	position: absolute;
    bottom: 12%;
    left: 0;
    z-index: 3;
    width: 100%;
}

img.btn_animate01 {
margin: 0 auto;
animation: fuwafuwa 1s ease 0s infinite alternate;
transform-origin:center;
cursor: pointer;
}
@keyframes fuwafuwa {
from {transform: scale(0.9,0.9);}
to {transform: scale(1,1);}
}

.of-01{
	position: relative;
	z-index: 2;
}

.of-02{
	position: relative;
	z-index: 2;
}
.of-03{
	position: relative;
	z-index: 2;
}

.of_mov{
	position: absolute;
    z-index: 1;
    top: 34%;
    left: 0;
    width: 54%;
}

.of_mov_01{
	position: absolute;
    z-index: 1;
    top: 9.7%;
    left: 8%;
    width: 84%;
}

.of_mov_02{
	position: absolute;
    z-index: 1;
    top: 28%;
    left: 0;
    width: 54%;
}
.of_mov_03 {
    position: absolute;
    z-index: 1;
    top: 9%;
    left: 8%;
    width: 84%;
}

.of_mov_04 {
    position: absolute;
    z-index: 1;
    top: 8%;
    left: 8%;
    width: 84%;
}
.of_mov_05 {
    position: absolute;
    z-index: 1;
    top: 7%;
    left: 8%;
    width: 84%;
}
.of_mov_06 {
    position: absolute;
    z-index: 1;
    top: 12%;
    left: 8%;
    width: 84%;
}
.of_mov_07 {
    position: absolute;
    z-index: 1;
    top: 13.9%;
    left: 8%;
    width: 84%;
}

/*==================================================
カウントアップ
===================================*/
.lead{
  padding: 20px;
  text-align: center;
}

.count_up{
    margin:0;
    padding:0;
	position: absolute;
	top: 17%;
    left: 15%;
}
.count_up_pito{
    margin:0;
    padding:0;
	position: absolute;
	top: 17%;
    left: 15%;
}
.count_up p{
    padding: 0;
    margin: 0;
}
.count-size{
    font-size:4.6em;
	/*font-family: 'ＭＳ Ｐ明朝', serif;*/
	background: linear-gradient(32deg, #543d1c 0%, #cf8e30 40%, #865d24 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

.count-size_pito{
    font-size:4.6em;
	font-family: 'ＭＳ Ｐ明朝', serif;
	background: linear-gradient(32deg, #543d1c 0%, #cf8e30 40%, #865d24 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*==================================================
ヘッダーバナー
===================================*/
.header_bnr{
	position: relative;
	z-index: 20;
}
.header_bnr_fixed{
	position: fixed;
	z-index: 10;
	top: 0;
}
/*▼カウントダウン*/
.cdt_wrapper{
	background: #33322e;
    color: #fff;
    text-align: center;
}
.cdt_txt{
	font-size: 80%;
}
.cdt{
	font-size: 1.3em;
}

/*==================================================
efo
===================================*/
#agree_id{
	transform: scale(1.4);
}



/*==================================================
※※※※※※※ここからスマホ用※※※※※※
===================================*/
/* ▼スマホ用 */
@media screen and (max-width: 767px) {

	    .fv_mov {
        position: absolute;
        z-index: 1;
        bottom: 5%;
        right: -21vh;
    }

	    .cta_01 {
        position: absolute;
        bottom: 32%;
        left: 5%;
        z-index: 3;
        width: 90%;
    }
	.cta_01_v2{
	position: absolute;
    bottom: 27%;
    left: 5%;
    z-index: 3;
	width: 90%;
}
	.cta_01_v3{
	position: absolute;
    bottom: 21%;
    left: 5%;
    z-index: 3;
	width: 90%;
}
	.cta_01_v4{
	position: absolute;
    bottom: 14%;
    left: 5%;
    z-index: 3;
    width: 90%;
}
	.cta_01_v5{
	position: absolute;
    bottom: 16%;
    left: 5%;
    z-index: 3;
    width: 90%;
}
	.cta_01_v6{
	position: absolute;
    bottom: 10%;
    left: 5%;
    z-index: 3;
    width: 90%;
}
	.cta_02 {
    position: absolute;
    bottom: 24%;
    left: 5%;
    z-index: 3;
    width: 90%;
}
	.cta_03{
	position: absolute;
    bottom: 21%;
    left: 5%;
    z-index: 3;
    width: 90%;
}
	.cta_04{
	position: absolute;
    bottom: 16%;
    left: 5%;
    z-index: 3;
    width: 90%;
}
	.cta_05{
	position: absolute;
    bottom: 10%;
    left: 5%;
    z-index: 3;
    width: 90%;
}
	.cta_06{
	position: absolute;
    bottom: 16.5%;
    left: 5%;
    z-index: 3;
    width: 90%;
}
	.cta_07{
	position: absolute;
    bottom: 12%;
    left: 5%;
    z-index: 3;
    width: 90%;
}
	.of_mov {
    position: absolute;
    z-index: 1;
    top: 33%;
    left: 0;
	width: 57%;
}

	/*.sns {
    position: absolute;
    bottom: 17%;
}*/
.loopSlide {
    display: flex;
    width: 265vw;
    height: auto;
    overflow: hidden;
    position: absolute;
    bottom: 18%;
}
	.count_up_pito{
		margin: 0;
    padding: 0;
    position: absolute;
    top: 18%;
    left: 12%;
	}
	
	.count-size_pito{
    font-size:4.2em;
	font-family: 'ＭＳ Ｐ明朝', serif;
	background: linear-gradient(32deg, #543d1c 0%, #cf8e30 40%, #865d24 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
	
.se04_01 {
    position: absolute;
    top: 31%;
    right: 8%;
    width: 60%;
}
.se04_02 {
    position: absolute;
    bottom: 28%;
    left: 10%;
    width: 60%;
}
.sec08_movie {
    position: absolute;
    width: 20%;
    overflow: hidden;
    filter: drop-shadow(0px 3px 12px rgba(0, 0, 0, 0.25));
}

/*==================================================
efo
===================================*/
.mobile #smart-dialog .layout-padding{
		padding-top: 10px!important;
	}
	
}