@charset "utf-8";
/* CSS Document */
a img {
    transition: 0.4s;
}
a:hover img {
	opacity: 0.75;
}

/*--------------------------------------
全体調整 / 共通パーツ
--------------------------------------*/
body {
    counter-reset: number 0;
}
figure{
	margin: 0;
}
.u-text--body :is(h2,h3,h4,p,span,a){
	font-family: "Zen Kaku Gothic Antique", sans-serif;
	font-weight: 400;
	margin: 0;
}
.u-text--body :is(h2,h3,h4){
    font-weight: 400;
}
/* 共通h1無効 */
main #top h1 {
	position: absolute;
	left: -200%;
	z-index: -100;
}
.p-page_header__inner .img {
	display: none! important;
}
/* 全体の左右を全面に拡げる */
.p-page_content__inner {
	width: 100%;
	max-width: 100%;
}
/* 全体の左右余白を削除 */
.p-page_content{
    padding:0;
}
/* footer上の余白を削除 */
.page_main {
	font-weight: 500;
	margin-bottom: 0;
}
/*--------------------------------------
ページ共通パーツ
--------------------------------------*/
.content_product{
    width: 100%;
    padding: 0 min(calc(20* 100vw / 1000), 20px);
    margin-bottom:min(calc(150* 100vw / 1000), 150px);
}
/* 共通コンテンツ幅 */
.content_wrapper{
	max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    /* padding: 0 min(calc(20* 100vw / 1000), 20px); */
}
@media screen and (max-width: 750px) {
    .content_product{
        width: 100%;
        padding:0;
        margin-bottom: calc(120 * 100vw / 750);
    }
	.content_wrapper{
		padding: 0 15px;
	}
}

/* 共通h2見出し */
.content_product h2 {
	font-weight: 700;
	font-size: min(calc(24 * 100vw / 1000), 24px) !important;
	line-height:1.5;
	margin: 0 auto min(calc(40 * 100vw / 1000), 40px);
    letter-spacing: 0.1em;
    text-align: left;
}
.content_product h2:not(.product_nav-ttl){
    background:#2A2525;
    height: min(calc(72 * 100vw / 1000), 72px);
    padding-left: min(calc(20 * 100vw / 1000), 20px);
    line-height:min(calc(72 * 100vw / 1000), 72px);
    color: #fff;
}
@media screen and (max-width: 750px) {
	.content_product .content_read h2 {
		font-size: calc(40 * 100vw / 750) !important;
		margin: 0 auto calc(60 * 100vw / 750);
	}
    .content_product h2:not(.product_nav-ttl){
        background:#2A2525;
        height: calc(128 * 100vw / 750);
        padding-left:calc(40 * 100vw / 750);
        line-height:calc(128 * 100vw / 750);
        margin-bottom:calc(80 * 100vw / 750);
    }
}
/* 共通h2見出し下部テキスト */
.content_read p {
    line-height: 2;
    text-align: center;
}
@media screen and (max-width: 750px) {
	.content_read p {
		margin-bottom: calc(96 * 100vw / 750);
	}
}

/* 基本テキスト */
.content_wrapper p {
	font-size: min(calc(16 * 100vw / 1000), 16px);
	font-weight: 400;
}
@media screen and (max-width: 750px) {
	.content_wrapper p {
		font-size: calc(28 * 100vw / 750);
	}
}

/* テキストボタン */
.text_btn {
    display:inline-block;
    margin-top:1em;
    text-decoration:underline !important;
    font-weight: 500;
    font-size: 15px !important;
    line-height: 1;
    padding-right: 1.5em;
    position: relative;
}
.text_btn::after {
    position: absolute;
    content: "";
    display: block;
    top: 50%;
    right: -.2em;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 10px;
    background-color: #333;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}


/*--------------------------------------
セクション共通リスト
--------------------------------------*/
.content_product > section{
    max-width: 1000px;
    margin: 0 auto min(calc(120 * 100vw / 1000), 120px);
}
@media screen and (max-width: 750px) {
    .content_flower > section{
        margin-bottom:calc(80* 100vw / 750);
    }
}
/*--------------------------------------
リード文
--------------------------------------*/
.content_wrapper .content_read {
    text-align: center;
    margin-bottom: min(calc(64 * 100vw / 1000), 64px);
}
.content_wrapper .content_read p:first-child{
    font-family:"Shippori Mincho B1", serif;
    font-size: min(calc(18* 100vw / 1000), 18px);
    line-height: 225%;
    letter-spacing: 0.06em;
    margin-bottom:min(calc(40* 100vw / 1000), 40px);
}
.content_wrapper .content_read .caption{
    font-size:min(calc(11* 100vw / 1000), 11px);
    letter-spacing: 0.06em;
    line-height: 175%;
    font-weight: 400;
    display: flex;
    column-gap: min(calc(8 * 100vw / 1000), 8px);
    justify-content: center;
}
.content_wrapper .content_read .caption::before{
    content: "※";
    display: inline-block;
}
@media screen and (max-width: 750px) {
    .content_wrapper .content_read {
        margin-bottom: calc(80 * 100vw / 750);
    }
	.content_wrapper .content_read p {
        text-align: left;
	}
    .content_wrapper .content_read p:first-child{
        font-size:calc(33* 100vw / 750);
        line-height: 200%;
        letter-spacing: 0.02em;
        margin-bottom:calc(64* 100vw / 750);
    }
    .content_wrapper .content_read .caption{
        font-size:calc(22* 100vw / 750);
        column-gap: calc(16* 100vw / 750);
        justify-content: start;
    }
}


/*--------------------------------------
キービジュアル
--------------------------------------*/
#kv{
    margin-bottom:min(calc(40 * 100vw / 1000), 40px);
    position: relative;
}
.kv_wrap{
    max-width: 1000px;
    margin: auto;
    position: relative;
}
.kv_wrap .kv_ttl{
    font-family: "Shippori Mincho B1", serif;
    font-weight: 700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size:min(calc(32 * 100vw / 1000), 32px) !important;
    letter-spacing: 0.1em;
    width: 100%;
    text-align: center;
}
@media screen and (max-width: 750px) {
    #kv{
        margin-bottom:calc(80 * 100vw / 750);
    }
    .kv_wrap .kv_ttl{
    font-size:calc(56 * 100vw / 750) !important;
}
}

/*--------------------------------------
FV下キャンペーンエリア
--------------------------------------*/
#campaign_top {
    max-width: 1000px;
    margin: 0 auto min(calc(80* 100vw / 1000), 80px);
    text-align: center;
    width: 100%;
}
@media screen and (max-width: 719px) {
    #campaign_top {
        max-width: inherit;
    }
}
#campaign_top .campaign_title {
    background: #4C78BB;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: min(calc(14* 100vw / 1000), 14px);
    gap: min(calc(16* 100vw / 1000), 16px);
}
#campaign_top .campaign_title .title {
    background: #4C78BB;
    color: #FFFFFF;
    font-size: min(calc(18* 100vw / 1000), 18px);
    font-weight: 600;
    line-height: 1;
}
#campaign_top .campaign_title .period {
    background: #FFFFFF;
    color: #4C78BB;
    font-size: min(calc(20* 100vw / 1000), 20px);
    font-weight: 600;
    line-height: 1;
    padding: min(calc(6* 100vw / 1000), 6px) min(calc(30* 100vw / 1000), 30px);
}
#campaign_top .campaign_title .period small {
    font-size: min(calc(14* 100vw / 1000), 14px);
}
@media screen and (max-width: 719px) {
    #campaign_top .campaign_title {
        flex-direction: column;
        padding: calc(28 * 100vw / 750) 0;
        gap: calc(16 * 100vw / 750);
    }
    #campaign_top .campaign_title .title {
        font-size: calc(33 * 100vw / 750);
    }
    #campaign_top .campaign_title .period {
        font-size: calc(40 * 100vw / 750);
        padding: calc(14 * 100vw / 750) calc(40 * 100vw / 750);
    }
    #campaign_top .campaign_title .period small {
        font-size: calc(28 * 100vw / 750);
    }

}
#campaign_top .campaign_wide {
    margin: min(calc(24* 100vw / 1000), 24px) auto;
    max-width: 750px;
    width: 75%;
}
@media screen and (max-width: 719px) {
    #campaign_top .campaign_wide {
        margin: calc(36 * 100vw / 750) auto;
        max-width: inherit;
        width: 91.4%;
    }
}

/*--------------------------------------
上部アンカーナビゲーション
--------------------------------------*/
#product_nav h2{
    font-size: min(calc(28 * 100vw / 1000), 28px) !important;
    text-align: center;
}
#product_nav .product_nav-list{
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
    gap:min(calc(20 * 100vw / 1000), 20px);
}
#product_nav .product_nav-list li {
    height: min(calc(93 * 100vw / 1000), 93px);
    position: relative;
    z-index: 1;
    overflow: hidden;
}
#product_nav .product_nav-list li a{
    display: flex;
    width: 100%;
    height: 100%;
    font-size: min(calc(20 * 100vw / 1000), 20px);
    color: #fff;
    font-weight: 700;
    flex-direction: column;
    justify-content: center;
    padding: 0 min(calc(30 * 100vw / 1000), 30px) 0 min(calc(20 * 100vw / 1000), 20px);
}
#product_nav .product_nav-list li a:hover{
    opacity: 1;
}
#product_nav .product_nav-list li::after {
    content: "";
    display: inline-block;
    background: url(../images/arrow_icon.svg) no-repeat 0 0 / contain;
    width: min(calc(20 * 100vw / 1000), 20px);
    height: min(calc(12 * 100vw / 1000), 12px);
    position: absolute;
    right: min(calc(30 * 100vw / 1000), 30px);
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
}
@media screen and (min-width: 751px){
    #product_nav .product_nav-list li:hover{
        opacity: 0.8;
    }
    #product_nav .product_nav-list li:hover::before {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }
}
/*-----商品を選ぶ 画像-----*/
#product_nav .product_nav-list li::before{
    content: "";
    display: block;
    height: 100%;
    width: 100%; 
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    transition: .3s ease;
}
#product_nav .product_nav-list .special::before {
    background: url(../images/product_nav-special.webp) no-repeat 0 0 / cover;
}
#product_nav .product_nav-list .kabayaki::before {
    background: url(../images/product_nav-kabayaki.webp) no-repeat 0 0 / cover;
}
#product_nav .product_nav-list .sumikabayaki::before {
    background: url(../images/product_nav-sumikabayaki.webp) no-repeat 0 0 / cover;
}
#product_nav .product_nav-list .sumishiroyaki::before {
    background: url(../images/product_nav-sumishiroyaki.webp) no-repeat 0 0 / cover;
}
#product_nav .product_nav-list .kohaku::before {
    background: url(../images/product_nav-kohaku.webp) no-repeat 0 0 / cover;
}
#product_nav .product_nav-list .manpuku::before {
    background: url(../images/product_nav-manpuku.webp) no-repeat 0 0 / cover;
}
#product_nav .product_nav-list .gift::before {
    background: url(../images/product_nav-gift.webp) no-repeat 0 0 / cover;
}
#product_nav .product_nav-list .other::before {
    background: url(../images/product_nav-other.webp) no-repeat 0 0 / cover;
}
@media screen and (max-width: 750px){
    #product_nav{
        margin-bottom:calc(160 * 100vw / 750);
    }
    #product_nav h2{
        font-size:calc(40 * 100vw / 750) !important;
        text-align: center;
    }
    #product_nav .product_nav-list{
        grid-template-columns: repeat(2 , 1fr);
        gap:calc(20 * 100vw / 750);
    }
    #product_nav .product_nav-list li{
        height: calc(108 * 100vw / 750);
    }
    #product_nav .product_nav-list li a{
        font-size: calc(28 * 100vw / 750);
        padding: 0 calc(30 * 100vw / 750) 0 calc(34 * 100vw / 750);
    }
    #product_nav .product_nav-list li::after {
        width:calc(22 * 100vw / 750);
        height:calc(14 * 100vw / 750);
        right:calc(36 * 100vw / 750);
    }
}

/*--------------------------------------
一覧部分
--------------------------------------*/
.f-products_wrap{
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
    gap:min(calc(36 * 100vw / 1000), 36px);
}
@media screen and (max-width: 750px){
  .f-products_wrap{
        grid-template-columns: repeat(2 , 1fr);
        gap:calc(60 * 100vw / 750) calc(32 * 100vw / 750);
    }  
}
/*--------------------------------------
一覧 内容
--------------------------------------*/
.f-products_box h4{
    font-size: min(calc(14 * 100vw / 1000), 14px);
    font-weight: 500;
    margin-bottom:min(calc(19 * 100vw / 1000), 19px);
}
.f-products_box .pic{
    margin-bottom: min(calc(14 * 100vw / 1000), 14px);
}
.f-products_box .regular_price{
    font-size: min(calc(12 * 100vw / 1000), 12px);
    font-family: "Zen Kaku Gothic Antique", sans-serif !important;
    font-weight: 500;
    font-style: normal;
    display: flex;
    align-items: baseline;
    line-height: normal;
    text-decoration: line-through;
    margin-bottom: min(calc(10 * 100vw / 1000), 10px);
}
.f-products_box .price{
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    line-height:1;
    letter-spacing: 0.04em;
    font-size: min(calc(16 * 100vw / 1000), 16px);
}
.f-products_box .price span{
    display: inline-block;
    font-weight: 500;
}
.f-products_box .price .yen{
    font-size:min(calc(12 * 100vw / 1000), 12px);
}
.f-products_box .price .tax{
    font-size:min(calc(12 * 100vw / 1000), 12px);
}
@media screen and (max-width: 750px){
    .f-products_box h4{
        font-size:calc(24 * 100vw / 750);
        margin-bottom:calc(10 * 100vw / 750)
    }
    .f-products_box .regular_price{
        font-size:calc(22*100vw/750);
        margin-bottom: calc(10*100vw/750);
    }
    .f-products_box .price{
        font-size:calc(28 * 100vw / 750);
    }
    .f-products_box .price .yen{
        font-size:calc(20 * 100vw / 750);
    }
    .f-products_box .price .tax{
        font-size:calc(20 * 100vw / 750);
    }
}
/* 一覧下部キャンペーン */
.campaign_bnr {
    margin: min(calc(64* 100vw / 1000), 64px) auto;
    max-width: 750px;
    width: 75%;
}
@media screen and (max-width: 719px) {
    .campaign_bnr {
        margin: calc(80 * 100vw / 750) auto;
        max-width: inherit;
        width: 100%;
    }
}