@charset "utf-8";

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body  {
    font-size: 1.8rem;
    line-height: 1.6;
    color:#333;
    font-style: normal;
    font-weight: 500;
    font-family: 'Noto Sans JP', sans-serif , "Yu Gothic", YuGothic, "Meiryo", sans-serif;
}

/*-----------------------------------------------
共通
-----------------------------------------------*/
.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.liquid-img {
    width: 100%;
    height: auto;
}

/*-----------------------------------------------
ここからコンテンツ
-----------------------------------------------*/
.bg01 {
    margin-top: -1.6vw;
    background: url('../img/bg01.jpg') repeat-y center top / 100%;
    padding: 11.3vw 7.638888888vw 16.666666666vw;
}
.bg02 {
    background: url('../img/campaign_bg.png') repeat-y center top / 100%;
}

@media (max-width: 768px) {
    .bg01 {
        padding: 4.6vw 10px 8vw;
    }
}

/*-----------------------------------------------
FV
-----------------------------------------------*/
.fv-box {
    position: relative;
    margin: 0 auto;
}
.fv-season {
    position: absolute;
    left: 0;
    bottom: -9.5vw;
    z-index: 2;
}

@media (max-width: 768px) {
    .fv-box {
        padding-bottom: 10vw;
        overflow: hidden;
    }
    .fv-season {
        bottom: -1vw;
        transform: scale(1.35);
    }
}

/*-----------------------------------------------
プレゼント
-----------------------------------------------*/
.present {
    max-width: 1240px;
    margin: 0 auto 7.222222222vw;
    padding: 0 5.277777777vw 2.083333333vw;
    border-radius: 1.111111111vw;
    background-color: #fff;
    box-shadow: 10px 10px 8px rgba(35, 24, 21, 0.16);
    
}
.present-title {
    position: relative;
    top: -0.833333333vw;
    width: 73.472222222vw;
    max-width: 1058px;
    margin: 0 auto;
}
.present-box {
    display: flex;
}
.present-notes {
    margin-top: 1.388888888vw;
    text-align: right;
}
.present-notes img {
    max-width: 128px;
    width: 8.888888888vw;
}

@media (max-width: 768px) {
    .present {
        padding: 0 3.6vw 2.08vw;
    }
    .present-title {
        width: 84vw;
        margin-bottom: 2vw;
    }
    .present-box {
        flex-direction: column;
    }
    .present-notes img {
        max-width: none;
        width: 30vw;
    }
}

/*-----------------------------------------------
対象商品
-----------------------------------------------*/
.target-product {
    max-width: 1240px;
    margin: 0 auto;
}
.target-product-title {
    max-width: 284px;
    width: 19.722222222vw;
    margin: 0 auto -5vw;
}
.target-product-bg {
    border-radius: 1.111111111vw;
    background-color: #fff;
    box-shadow: 10px 10px 8px rgba(35, 24, 21, 0.16);
    padding: 2.777777777vw;
}
.target-product-box {
    margin-bottom: 4.305555555vw;
}
.target-product-img01 {
    max-width: 920px;
    margin: 0 auto;
}
.target-product-img02 {
    max-width: 610px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .target-product-bg {
        padding-top: 3.6vw;
    }
    .target-product-title {
        width: 23vw;
    }
}

/*-----------------------------------------------
オンラインショップ
-----------------------------------------------*/
.online-shop {
    padding: 5.416666666vw 2.5vw 7.361111111vw;
    border-radius: 1.111111111vw;
    background: #2991c8;
}
.online-shop-title{
    max-width: 580px;
    margin: 0 auto 3.055555555vw;
}
.online-shop-box {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.694444444vw;
}
.online-shop-img {
    flex: 0 1 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .online-shop-title {
        width: 76vw;
    }
    .online-shop-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

/*-----------------------------------------------
CTA（応募方法）
-----------------------------------------------*/
.cta-bg{
    max-width: 1440px;
    margin: -8vw auto 0;
    background-image: url('../img/cta_bg.png');
    background-repeat: no-repeat; 
    background-position: center top;
    background-size: cover;
    padding-bottom: 42vw;
}
.cta-container{
    max-width: 1056px;
    margin: 0 auto;
}
.cta-title {
    max-width: 616px;
    width: 42.777777777vw;
    margin: 0 auto 5.416666666vw;
    padding-top: 4.4vw;
}
.cta-box{
    margin-bottom: 4.055555555vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.833333333vw;
}
.cta-box-img {
    max-width: 524px;
    width: 36.388888888vw;
}
.cta-box-btn{
    max-width: 722px;
    width: 47.222222222vw;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .cta-bg{
        background-image: url('../img/cta_bg_sp.png');
        margin-top: -6vw;
        padding-bottom: 41.8vw;
    }
    .cta-title {
        width: 50vw;
        padding-top: 2.4vw;
    }
    .cta-box {
        padding: 0 10px;
    }
    .cta-box-img {
        width: 50vw;
    }
    .cta-box-btn {
        width: 64vw;
    }
}

/*-----------------------------------------------
商品紹介
-----------------------------------------------*/
.product {
    padding-bottom: 5.902777777vw;
}
.product-title{
    max-width: 684px;
    width: 47.5vw;
    margin: -26vw auto 0;
}
.product-img01 {
    max-width: 1064px;
    margin: 2.46vw auto 5.416666666vw;
    width: 76.888888888vw;
}
.product-img02 {
    max-width: 1032px;
    width: 71.666666666vw;
    margin: 0 auto;
}
.product-img03 {
    max-width: 986px;
    width: 68.472222222vw;
    margin: 8.75vw auto 0;
}

@media (max-width: 768px) {
    .product {
        padding-bottom: 7.4vw;
    }
    .product-title {
        width: 52vw;
    }
    .product-img01 {
        width: 81vw;
    }
    .product-img02 {
        width: 73vw;
    }
    .product-img03 {
        width: 72vw;
    }
}

/*-----------------------------------------------
キャンペーン
-----------------------------------------------*/
.campaign{
    padding: 9.722222222vw 7.222222222vw 0;
}
.campaign-title{
    max-width: 876px;
    width: 60.833333333vw;
    margin: 0 auto 5vw;
}

/*-----------------------------------------------
キャンペーンテーブル
-----------------------------------------------*/
.campaign-table {
    width: 100%;
    border-collapse: unset;
    margin: 0 auto;
    max-width: 1240px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-spacing: 8px;
    line-height: 1.7;
}
.campaign-table th,
.campaign-table td {
  padding: 52px 45px;
  vertical-align: top;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-align: left;
  background: #fff;
}
.campaign-table th {
  width: 320px;
  letter-spacing: 0.05em;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 768px) {
    .campaign {
        padding: 9.722222222vw 4px 0;
    }
    .campaign-table {
        font-size: 1.2rem;
        border-spacing: 6px;
    }
    .campaign-table th,
    .campaign-table td {
        padding: 20px 18px;
        font-size: 12px;
    }
    .campaign-table th {
        width: 140px;
        padding: 20px 0;
    }
}

/*-----------------------------------------------
フッター
-----------------------------------------------*/
footer {
    padding: 6.25vw 0 9.027777777vw;
    text-align: center;
}
.footer-logo {
    max-width: 364px;
    width: 25.277777777vw;
    margin: 0 auto;
}

@media (max-width: 768px) {
    footer {
        padding-bottom: 15vw;
    }
    .footer-logo {
        width: 43vw;
    }
}