*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
}
#main{
    font-family: "Noto Serif JP", serif;
    color: #231815;
    width: 100%;
    position: relative;
    line-height: 2;
}

#main h2,
#main h3,
#main p{
    text-align: center;
}
#main h3{
    font-size: 3.6rem;
    line-height: 65px;
    font-weight: 600;
    letter-spacing: 4px;
    padding-top: 7rem;
}
#main p{
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 2.2;
}
.title {
    margin-top: -8rem;
    margin-bottom: 6rem;
}
.title img {
    max-width: 100%;
    height: 160px;
}
.back img{
    position: absolute;
    max-width: 100%;
    height: auto;
}

/*
 トップのナビ
*/
.top_icon{
    position: fixed;
    max-width: 100%;
    width: auto;
    display: flex;
    flex-direction: column;
    top: 60px;
    right: 0;
    z-index: 99;
    margin: 0 auto;
    align-items: flex-end;
    gap: 13px;
}

/*
 トップページ
*/
.mainview{
    position: relative;
    width: 100%;
    height: 100svh; /* 画面いっぱいの高さ */
    overflow: hidden;

}
.mv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url('../img/sakekonomo/FV_pc.jpg'); /* 相対パスで指定 */
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;    
}
.main-logo {
    position: absolute;
    top: 25%;
    left: 52%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    max-width: 340px;
}
.main-logo img{
    width: 90%;
}
rt{
    font-size: 1rem;
    letter-spacing: -1.5em;
    margin-right: 10px;
}
#toppage p{
    font-size: 3.6rem;
    line-height: 65px;
    font-weight: 600;
    letter-spacing: 4px;
    padding-top: 7rem;
}

/*
 商品ラインナップ
*/
.product{
    position: relative;
}
.product-content01{
    background-image: url("../img/sakekonomo/back_product.jpg") ;
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center;
    margin-top: 7rem;
    padding-top: 5rem;
    padding-bottom: 9rem;
}
.product-about {
    display: flex;
    justify-content: center;
    gap: 7rem; 
    list-style: none;
    margin: 0;
    padding: 0;
}
.item p{
    line-height: 1.8 !important;
}
.back-utage img{
    max-width: 100%;
    width: 300px;
    height: auto;
    position: absolute;
    top: -6%;
    left: 75%;
}
.buy_bt{
    text-align: center;
}
.buy_bt img {
    max-width: 100%;
    height: 105px;
    margin-top: 7rem;
}
.back-en img{
    width: 300px;
    top: 44%;
    left: 8%;
}
.back-toumei img{
    width: 84px;
    top: 52%;
    left: 75%;
}
.product-text{
    padding: 9rem 0;
}
.product-img img{
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* 共通の枠設定 */
.sample01, .sample02 {
    width: 300px;  /* 枠の幅 */
    height: 300px; /* 枠の高さ */
    overflow: hidden; /* はみ出た画像を隠す（重要！） */
    display: inline-block; /* 横並びにする場合 */
    border: 10px solid #ffffff;
}

.sample01 img, .sample02 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}

/* 個別の調整 */
.sample01 img {
    object-position: 30% 30%;
    transform: scale(1.1); 
}

.sample02 img {
    transform: scale(1.2) translate(20px, -3px);
}
/*
 雄町LOVERS
*/
.special {
    position: relative;
}
.special-content{
    background-image: url("../img/sakekonomo/back_special.jpg") ;
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: bottom center;
    margin-top: 9rem;
    padding-top: 5rem;
    padding-bottom: 9rem;
}

.omachi-logo{
    text-align: center;
}
.omachi-logo img{
    margin-top: 2rem;
}
.special-text{
    padding: 9rem 0;
}
.back-bizen img{
    width: 84px;
    top: 15%;
    left: 14%;
}
.back-maborosi img{
    width: 280px;
    top: 23%;
    left: 73%;
}
/*
 sake-about
*/
.sake-about{
    position: relative;
    padding-top: 5rem;
    padding-bottom: 17rem;
}
.subtitle{
    margin-bottom: 6rem;
}
.back-ai img{
    width: 280px;
    top: 58%;
    left: 10%;
}
.back-ine img{
    width: 340px;
    top: 0%;
    right: 0%;
}

/*
 こんなシーンに寄り添います
*/
.benefit{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom: 18rem;
}
.benefit .title{
    margin-top: 0;
}
.scene{
    display: flex;
    width: auto;
    margin: 0 auto;
    gap: 2.7rem;
}

/*
 お知らせ・コラム
*/
.news{
    position: relative;
    /*background-image: url("../img/sakekonomo/back_news.jpg") ;*/
    background-image: url("../img/sakekonomo/back_news_short.jpg") ;
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center;
    width: 100%;
    /*aspect-ratio: 33 / 26;/*背景画像を変えた時に数値を調整する*/
    aspect-ratio: 29 / 11;
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    justify-content: center; /* 垂直方向の中央 */
    align-items: center;    /* 水平方向の中央 */
    text-align: center;
}
.news .title{
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    height: 75px;
    width: 100%;
}
.news h3{

}
.back-hou img{
    width: 300px;
    top: 15%;
    right: 5%;
}

/*
 ご相談
*/
.contact{
    position: relative;
    background-image: url("../img/sakekonomo/back_contact.jpg") ;
    background-repeat: no-repeat;
    background-size: 100%; 
    background-position: bottom center;
    padding-bottom: 22rem;
}
.contact .title{
   margin-top: -2rem;
}
.contact_bt{
    text-align: center;
}
.contact_bt img{
    margin-top: 3rem;
    margin-bottom: 2rem;
    width: 60%;
}
.back-sou img{
    width: 290px;
    top: 4%;
    left: 14%;
}


/*
 フッター
*/
.pagetop{
    display: none !important;
}

/*
 スライダー

.slickslider {
  width: 100%;
  max-width: 1200px;   
  margin: 5rem auto 0;
  overflow: hidden; 
}
.specialslider{
  margin: 70px auto 0 !important;
}
.mainslider {
  width: 100%; 
}
.mainslider .slick-slide {
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0.6;
  transform: scale(0.9);
  display: flex; 
  justify-content: center; 
  
}
.mainslider .slick-center {
  opacity: 1;
  transform: scale(1);

}
.mainslider .slideitem {
  text-align: center;
}
.slideitem picture {
  width: 100%; 
  display: block; 
  height: auto;  
}
.slideitem img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
}
.slideitem p{
    font-size: 2rem !important;
    line-height: 30px;
    padding-top: 10px;
}
.mainslider .slick-prev,
.mainslider .slick-next {
  display: block !important;
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 10;
  border: none;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  font-size: 16px;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
}
.slick-next:before, .slick-prev:before {
  display: none;
}
.slick-next{
  display: block;
  background-size: contain;
  background:  url("../img/sakekonomo/arrow_next.png") no-repeat center center!important;
}
.slick-prev{
  display: block;
  background-size: contain;
  background:  url("../img/sakekonomo/arrow_prev.png") no-repeat center center!important;
}

.mainslider .slick-prev {
  left: 35%;
}
.mainslider .slick-next {
  right: 35%; 
}*/

/*フッター*/
footer {
	background: #000 !important;
	padding: 1.5rem 3rem !important;
}
footer a {
	display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  font-size: 4rem;
  line-height: 1;
  gap: 1rem;
  color: #fff !important;
  text-decoration: none !important;
}
footer span{
	font-size: 1.5rem;
}
footer a:hover {
  text-decoration: none !important;
}
footer a img {
	height: 1em;
	width: auto;
	vertical-align: middle;
}
footer .copyright {
	padding: 0;
	background: transparent !important;
  	line-height: 1 !important;
  	height: auto !important;
  	margin-top: 1.5rem;
}


/*
 タブレット
*/
@media screen and (max-width: 1024px) {
    .scene {
        width: 90%;
    }
    .news h3{
    padding-top: 3em!important;
}
}

/*
 スマホ
*/
@media screen and (max-width:767px){
#main{
    line-height: 1.8;
}
#main h3{
    font-size: 1.7rem;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 1px;
    padding-top: 0;
}
.subtitle{
    width: 230px;
    margin: 0 auto;
    padding-bottom: 3rem;
    margin-top: 4rem;
}
#main p{
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 2.2;
}
.buy_bt img {
    height: 42px;
    margin-top: 2rem;
}
/*
 トップのナビ
*/
.mv-bg {
        background-image: url('../img/sakekonomo/FV_sp.jpg'); /* スマホ用 */
    }
.mainview{
}

.mainview img{
    margin-top: 20px;
}
.main-logo{
    top: 11rem;
    max-width: 270px;
    left: 60%;
}
.main-logo img{
    width: 65%;
}
rt{
    font-size: 0.5rem;
    letter-spacing: -1.5em;
    margin-right: 1px;
}
.title {
    margin-top: -5.8rem;
    margin-bottom: 0;
}
.title img {
    height: 75px;
}
.top_icon{
    width: 55px;
    top: 15px;
    gap: 7px;
}
#toppage p{
    font-size: 1.7rem;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 1px;
/*    padding-top: 2rem;*/
    padding-top: 0;
}

/*
 商品ラインナップ
*/
.product-content01{
    margin-top: 3rem;
    padding-bottom: 3rem;
}
.product-about {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        margin-top: 3rem;
    }
.item {
        width: 80%; 
        text-align: center;
    }
.item p {
    font-size: 1.5rem !important;
    margin-top: 1rem;
}
.back-utage img {
    width: 140px;
    top: -4%;
    left: 64%;
}
.product-text {
    padding: 4rem 0;
}
.back-en img{
    width: 140px;
    top: 68%;
    left: -2%;
}
.back-toumei img{
    width: 35px;
    top: 77%;
    left: 90%;
}
/*
 雄町LOVERS
*/
.special h3{
    margin-top: 3rem;

}
.special-content {
    margin-top: 3.5rem;
    padding-bottom: 4rem;
}
.omachi-logo{
    width: 150px;
    margin: 0 auto;
}
.omachi-logo img {
    margin-top: 3rem;
}
.special-text {
    padding: 2rem 0;
}
.back-bizen img{
    width: 35px;
    top: 14%;
    left: 5%;
}
.back-maborosi img{
    width: 140px;
    top: 16%;
    left: 64%;
}
.sake-about {
    padding-top: 1rem;
    padding-bottom: 5rem;
}
.back-ai img{
    width: 140px;
    top: 57%;
    left: -4%;
}
.back-ine img{
    width: 110px;
    top: -2%;
    right: 0%;
}

/*
 こんなシーンに寄り添います
*/
.benefit{
    margin-bottom: 6rem;

}
.bene-title{
    margin-top: 1rem;
}
.scene{
    gap: 4px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/*
 お知らせ・コラム
*/
.news{
    background-position: top;
}
.news .title{
    margin-top: -3rem;
}
.back-hou img{
    width: 150px;
    top: -15%;
    right: -5%;
}
.news h3{
    padding-top: 2.5em!important;
}
/*
 ご相談
*/
.contact{
    padding-bottom: 6.5rem;
}
.contact .title{
    margin-top: 0;
}
.contact_bt img {
    width: 280px;
    margin-left: 0.5rem;
}
.back-sou img{
    width: 145px;
    top: -10%;
    left: -2%;
}
/*
 スライダー

.slickslider{
  margin: 3rem auto 0;
  max-width: 100%;
  width: 100%;
}
.specialslider{
  margin: 3.2rem auto 0 !important;
}
.slideitem p{
    font-size: 1.2rem !important;
    line-height: 20px !important;
}
  .mainslider .slick-slide {
    margin: 0 4px;
  }

  .slideitem {
    padding: 0 4px;
  }
.mainslider .slick-prev,
.mainslider .slick-next{
  top: 42%;
}
.mainslider .slick-prev {
  left: 1%; 
}
.mainslider .slick-next {
  right: 1%; 
}*/
}