@charset "UTF-8";

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html{
font-size: 20px;
overflow-x: hidden;
background-color: rgb(35,35,35);
}

body{
 overflow-x: hidden;
min-width: 820px;
font-family: sans-serif;
}

.container{
width: 760px;
margin: 0 auto;
background-color: rgb(35,35,35);
}

img{
max-width: 100%;
height: auto;
display: block;
}

section{
padding-bottom: 140px;
}

h1{
width: 250px;
position: absolute;
left: 15%;
top: 10px;
}

h3{
color: #fff;
font-size: 64px;
margin-bottom: 80px;
text-align: center;
position: relative;
}

h3:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;/*線の上下位置*/
  display: inline-block;
  width: 140px;/*線の長さ*/
  height: 2px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #fff;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

.about h3::after {
  content: '"さけぼむ" とは？';
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  font-size: 18px;
   font-weight: 200;
  color: #fff;
 /* letter-spacing: 0.2em;*/
}

.lineup h3::after {
  content: 'ラインナップ';
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  font-size: 18px;
   font-weight: 200;
  color: #fff;
 /* letter-spacing: 0.2em;*/
}

.info h3::after {
  content: '商品情報';
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  font-size: 18px;
   font-weight: 200;
  color: #fff;
 /* letter-spacing: 0.2em;*/
}

.enjoy h3::after {
  content: 'みんなで飲もう';
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 200;
  color: #fff;
 /* letter-spacing: 0.2em;*/
}

.online_shop h3::after {
  content: 'オンラインショップ';
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  font-size: 18px;
   font-weight: 200;
  color: #fff;
 /* letter-spacing: 0.2em;*/
}

p{
color: #fff;
font-size: 20px;
text-align: center;
}

header{
background-color: rgba(25,25,25,0.75);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  z-index: 1000;
  
  border-bottom: 0.25px solid #fff;
}


header.is-active {
  opacity: 1;
  visibility: visible;
}

.top{
 min-height: 100vh;
  padding-top: 200px;
padding-bottom: 50px;
}

.visual img {
  display: block;
}

.first-vew{
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 3 / 4; /* デザインの縦横比 */
  margin: 0 auto;
}

.top-logo{
  display: block;
  width: 80%;
  margin: 0 auto;
  position: absolute;
 left: 10%;
  top: 0%;
  transform: translate(-50%, -50%);
}

/* 背景 */
.top-bg {
  width: 100%;
  height: auto;
  object-fit: contain;
 padding-top: 20px;
}

/* 共通：ボトル */
.top-btr {
  position: absolute;
 width: 30%; 
}

/* ピンク（左上） */
.top-berry {
width: 55%;
max-width: 60%;
height: auto;
  top: 12%;
  left: -5%;
}

/* 白（右上） */
.top-zero{
width: 45%;
height: auto;
  top: 20%;
  right: 1%;
  transform: rotate(15deg);
}

/* グリーン（中央下） */
.top-ori {
width: 65%;
height: auto;
  bottom: 10%;
  left: 15%;
  transform: translateX(-50%);
}

.top-copy{
position: relative;
top: -150px;
}


.about{
padding-bottom: 250px;
}

.abbiju{
position: relative;
}

.about-haikei{
display: flex;
justify-content: space-between;
position: absolute;
z-index: 1;

}

.about-ena,.about-sake{
  width: 30%;
  opacity: 0.6;
}

.syoukai{
width: 80%;
margin: 0 auto;
position: relative;
top: 180px;
z-index: 2;

}

.big-bakutan{
margin: 140px auto 0;
  width: 90%;
}

.abtx{
height: 600px;
padding-top: 100px;
background-image: url("../images/about-bg-logo.png");
background-size: 40%;
background-repeat: no-repeat;
background-position: center;
position: relative;
top: 150px;
font-weight: lighter;
}


.about-text1 p{
margin-bottom: 50px;
}

.lineup{
padding-bottom: 50px;
}

.azi-logo{
width: 110%;
height: auto;
}

.btn-ori,.btn-berry,.btn-zero{
width: 250px;
color: #fff;
border: 1px solid #fff;
   cursor: pointer;
   transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
   display: block;
   padding: 15px 20px;
   text-align: center;
   
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.btn-ori,.btn-zero{
position: absolute;
left: 30%;
}

.btn-berry{
position: absolute;
right: 30%;
}
/*ORIのボタン*/
.btn-ori::after {
background-image: #E8ED53;
background-image: linear-gradient(90deg, rgba(247, 255, 5, 1) 0%, rgba(241, 255, 87, 1) 45%, rgba(101, 250, 2, 1) 100%);
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.btn-ori:hover {
  color: #000;
}
.btn-ori:hover::after {
  transform: scale(1, 1);
}

/*Berryのボタン*/
.btn-berry::after {
background-image: #E8ED53;
background-image: linear-gradient(90deg,rgba(255, 54, 174, 1) 0%, rgba(54, 61, 255, 1) 100%);
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.btn-berry:hover {
  color: #fff;
  border: 1px solid #CBC1DA;
}
.btn-berry:hover::after {
  transform: scale(1, 1);
}

/*ZEROのボタン*/
.btn-zero::after {
background-image: #E8ED53;
background-image: linear-gradient(90deg,rgba(222, 255, 251, 1) 0%, rgba(153, 190, 255, 1) 100%);
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.btn-zero:hover {
  color: #323842;
}
.btn-zero:hover::after {
  transform: scale(1, 1);
}

.ori,.berry,.zero{
margin-bottom: 50px;
}

.ori{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
position: relative;
width: 100%;
  padding-bottom: 30px;
  min-height: 700px;
}

.ori-text{
/*border: 1px solid #F99696;*/
position: relative;
bottom: 50px;
z-index: 2;
margin-left: -35%;
padding-top: 250px;
}

.azi-mark-ori{
position: relative;
bottom: 10px;
}

.btn-ori{
position: relative;
bottom: 20px;
}

.ori-biju{
/*border: 1px solid #fff;*/
position: relative;
z-index: 1;
top: 0;
  left: 0;
  width: 150%;
  height: auto;
margin: 0 auto;
}

.ori-biju img{
 height: auto;
/*  max-height: 100%;*/
}

.ori-biju .fadein1{
position: absolute;
overflow: visible;/*煙がはみ出しok*/
inset: 0;
 left: -10%;          /* ← 左にはみ出す */
 /*top: 10px;*/
z-index: 1;
flex-shrink: 0;
 transform: scale(1.2);
}

.ori-biju .btr{
position: relative;
width: 80%;
  height: auto;
padding-top: 50px;
z-index: 2;
}

.berry{
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
width: 100%;
  padding-bottom: 30px;
  min-height: 700px;
}

.berry-text{
position: relative;
z-index: 2;
margin-right: -35%;
padding-top: 230px;
}

.azi-mark-berry{
 position: relative;
 top: -10px;
}

.btn-berry{
position: absolute;
bottom: -13px;
}

.berry-biju{
position: relative;
z-index: 1;
top: 0;
 right: 0;
  width: 150%;
  height: auto;
margin: 0 auto;
}

.berry-biju img{
 height: auto;
}

.berry-biju .fadein2{
position: absolute;
overflow: visible;/*煙がはみ出しok*/
inset: 0;
right: -40%;          /* ← 右にはみ出す */
width: 150%;       /* ← はみ出した分を含める */
height: auto;
/*top: -40px;*/
z-index: 1;
flex-shrink: 0;
}

.pon-berry{
position: absolute;
overflow: hidden;
right: -40px;
top: -50px;
width: 80%;       /* ← はみ出した分を含める */
height: auto;
z-index: 2;
flex-shrink: 0;

}

.berry-biju .btr{
position: relative;
width: 80%;
  height: auto;
/*margin-left: 5%;*/
padding-top: 50px;
right: -100px;
z-index: 3;
}

.zero{
/*padding-top: 180px;*/
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
position: relative;
width: 100%;
  padding-bottom: 30px;
  min-height: 700px;
}

.zero-text{
position: relative;
top: -30px;
z-index: 2;
margin-left: -35%;
padding-top: 200px;
}

.zero-text .azi-logo{
width: 700px;
}

.azi-mark-zero{
 position: relative;
  top: 10px;
  right: 5px;
}

.btn-zero{
position: absolute;
bottom: 65px;
}

.zero-biju{
position: relative;
z-index: 1;
top: 0;
  left: 0;
  width: 150%;
  height: auto;
margin: 0 auto;
}

.zero-biju img{
 height: auto;
}

.zero-biju .fadein3{
position: absolute;
overflow: visible;/*煙がはみ出しok*/
inset: 0;
 left: -10%;          /* ← 左にはみ出す */
width: 150%;       /* ← はみ出した分を含める */
height: auto;
/*top: -40px;*/
z-index: 1;
flex-shrink: 0;
padding-top: 30px;
}

.zero-biju .btr{
position: relative;
width: 80%;
  height: auto;
/*margin-left: 5%;*/
padding-top: 50px;
z-index: 2;
}

.fadein1-before{
    /*透過度の設定。0で表示されなくなる。*/
    opacity: 0;
    /*要素を左に100pxずらしたところに配置する*/
    transform:translateX(-100px);
    /*透過度と表示位置を1秒かけて変化させる*/
    transition:opacity 1s,transform 1s;
}

.fadein1-after{
    /*透過度の設定。非表示から表示にする。*/
    opacity: 1;
    /*要素を100px左にしていたのを元の位置に戻す*/
    transform: translate(0);
}



.info{
/*background-color: rgb(27,27,27);*/
}

.spec-table{
background-image: url("../images/info-bg.png");
background-size: 90%;
background-repeat: no-repeat;
background-position: center;
width: 100%;

border-collapse: collapse;
color: #fff;
font-size: 20px;
display: flex;
justify-content: center;
padding: 150px;
}

.spec-table th,
.spec-table td{
padding: 20px 0;
vertical-align: top;
width: 280px;
}

.spec-table th{
width: 25%;
font-weight: 500;
text-align: left;
}

.spec-table td{
padding-left: 24px;
padding-right: -24px;
}

.spec-table tr{
border-bottom: 1px solid #fff;
}

.spec-table tr:last-child{
border-bottom: none;
}


.enjoy{
/*background-color: rgb(27,27,27);*/
}

.enjoy h3{
color: #fff;
}

.paripi{
width: 500px;
height: 500px;
border-radius: 50%;
margin: 0 auto;

  opacity: .3; /*スライドを薄くする*/
  transform: scale(.8); /*スライドのサイズを80%にする*/
  transition: opacity .5s, transform .5s; /*スライド透過率と拡大のアニメーション時間を0.5秒に設定*/
}

.paripi img{
object-fit: cover;
}
.slider{
width: 100%;
/*border: 1px solid #000;*/
margin: 0 auto;
}
/* ← これを追加 */
.slick-slide {
  margin: 0 5px;
}
.slick-list {
  margin: 0 5px;
  overflow: visible;
}

/* 中央のスライド */
.slider .slick-center img{
opacity: 1; /*中央のスライドは透過しない*/
 transform: scale(1); /*中央のスライドは小さくしない*/
}


.online_shop h3{

}

.shop-btn{
width: 500px;
margin: 0 auto;
padding: 50px 20px;
display: flex;
justify-content: space-between;
color: #fff;

position: relative;
bottom: 50px;
}

.btn-amezen,.btn-rakuden{
width: calc(500px/2 - 30px);
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.btn-amezen{
  background: #FFCF65;
  border: 2px solid #FFCF65;
    border-radius: 60px;
  color: #000;
  display: block;
  font-weight: bold;
  max-width: 300px;
  padding: 10px 20px;
  text-align: center;
  
    transition-duration: .3s;
}

.btn-amezen:hover {
  transform: scale(1.1);
}

.btn-rakuden{
  background: #7D1710;
  border: 2px solid #7D1710;
    border-radius: 60px;
  color: #fff;
  display: block;
  font-weight: bold;
  max-width: 300px;
  padding: 10px 20px;
  text-align: center;
  
      transition-duration: .3s;
}

.btn-rakuden:hover {
  transform: scale(1.1);
}


.sns{
width: 250px;
text-align: center;
align-items: center;
margin: 0 auto;
position: relative;
top: 50px;
}

.sns-icon{
display: flex;
justify-content: space-between;
padding-top: 30px;
}

.sns-icon a{
width: 15%;
    transition-duration: .4s;
}

.sns-icon a:hover{
  transform: scale(1.2);
}

footer{
position: relative;
overflow: hidden;
aspect-ratio: 1280 / 920;
}

.footer{
padding-bottom: calc(100vw *(920 / 1280));
/*background-color: rgb(27,27,27);*/
position: relative;
overflow: hidden;
}

.footer-bg{
width: 100%;
height: auto;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}

.footer-inner{
position: absolute;
left: 50%;
bottom: 10%;
transform: translateX(-50%);
z-index: 2;

text-align: center;
color: #000;
}

.footer__logo{
width: 350px;
height: auto;
margin-bottom: 20px;
}

.footer-links{
font-size: 12px;
}

.footer-links a{
text-decoration: none;
color: #000;
}
.footer-links span{
margin: 0 8px;
}

footer small{
color: #000;
font-size: 11px;
text-align: center;
position: relative;
top: 40px;
}