@charset "utf-8";
/* CSS Document */
/* ■■■■■ 基本部分 ■■■■■ */

#happy-iris *,
#happy-iris *::before,
#happy-iris *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body,
#happy-iris h1,
#happy-iris h2,
#happy-iris h3,
#happy-iris h4,
#happy-iris h5,
#happy-iris h6,
#happy-iris ul,
#happy-iris ol,
#happy-iris dl,
#happy-iris li,
#happy-iris dt,
#happy-iris dd,
#happy-iris p,
#happy-iris div,
#happy-iris span,
#happy-iris img,
#happy-iris a,
#happy-iris table,
#happy-iris tr,
#happy-iris th,
#happy-iris td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

#happy-iris header,
#happy-iris footer,
#happy-iris nav,
#happy-iris section,
#happy-iris article,
#happy-iris main,
#happy-iris aside,
#happy-iris figure,
#happy-iris figcaption {
    display: block;
}

#happy-iris ol,
#happy-iris ul,
#happy-iris li {
    list-style: none;
    list-style-type: none;
}

#happy-iris img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

#happy-iris a {
    color: inherit;
    text-decoration: none;
	transition: 0.2s;
}

#happy-iris a:hover {
    opacity: 0.5;
}

/* ベース */
body{
    width: 100%;
    background: #F7F2EC;
}

#happy-iris {
    margin: 0 auto;
    font-size: 22px;
    letter-spacing: 0.04em;
    line-height: 1.2;
    background: #F7F2EC;
    background-image:  radial-gradient(#fff 1.5px, transparent 1.5px), radial-gradient(#fff 1.5px, #F7F2EC 1.5px);
    background-size: 20px 20px;
    background-position: 0 0,10px 10px;
}

#happy-iris section{
    padding: 2% 0 5% 0;
}


#happy-iris div.center_content{
    width: 700px;
    margin: 0 auto;
}


#happy-iris div.inner_content{
    width: 650px;
    margin: 0 auto;
}

#happy-iris section.title,
#happy-iris section.fotter {
    padding: 0 0;
}


#happy-iris img {
	width: 100%;
}


#happy-iris .no,
#happy-iris .hidden,
#happy-iris .pc_none{
    display: none !important;
}


#happy-iris .smp_none{
    display: block !important;
}
/* 共通 見出し
================================ */
#happy-iris h2 {
    font-size: 40px;
    padding:15px 0;
    text-underline-offset: 10px;
    text-decoration-thickness: 3px;
}

#happy-iris h3 {
    font-size: 30px;
    padding:2% 0;
}


#happy-iris p{
    font-size: 25px;
    line-height: 30px;
    padding:2% 0;
}



/* 共通 カラム
================================ */
#happy-iris ul[class^="col_"]{
	display: flex;
	flex-wrap: wrap;
	gap:9px 1%;
	margin: 2% 0;
}

#happy-iris ul.col_1 > li{
	width:100%;
	margin: 0 0 0 0;
}

#happy-iris ul.col_2 > li{
	width: calc(calc(100% - 1%) / 2);
}

#happy-iris ul.col_3 > li{
	width: calc(calc(100% - 2%) / 3);
}

#happy-iris ul.col_4 > li{
	width: calc(calc(100% - 3%) / 4);
}

#happy-iris ul.col_5 > li{
	width: calc(calc(100% - 4%) / 5);
}


/* img side_rogo
================================ */
#happy-iris img.side_rogo{
    position: fixed;
    width: 19vw;
    left: calc((100% - 700px) / 4);
    top: 50%;
    transform: translate(-50%, -50%);
}

/* img side_plz
================================ */
#happy-iris img.side_plz{
    position: fixed;
    width: 13vw;
    right: calc((100% - 700px) / 4);
    top: 50%;
    transform: translate(50%, -50%) rotate(12deg);
}



/* section fv ファーストビュー
================================ */
/* 期間 ----- */
#happy-iris section.fv div.kikan{
    font-size: 24px;
    line-height: 25px;
    padding: 1% 0;
}



/* section osusume
================================ */
/*
    1カラム
======================*/
#happy-iris section.osusume ul.col_1 li{
    border: solid 5px var(--pink-color);
}

#happy-iris section.osusume ul.col_1 li h4{
    height: 40px;
    font-size: 22px;
    line-height: 25px;
}


/*
    ここから価格部分
======================*/

/*価格 > 販促内容-----------------*/
#happy-iris section.osusume ul.col_1 li a dl dd.sale_box div.sale{
    font-size: 32px;
    letter-spacing: 0px;
    line-height: 30px;
    text-stroke: 4.5px var(--pink-color);
    -webkit-text-stroke: 4.5px var(--pink-color);
    filter: drop-shadow(5px 4px 0 var(--pink-color));
    margin-bottom: 23px;
}

#happy-iris section.osusume ul.col_1 li a dl dd.sale_box div.sale span{
    font-size: 58px;
    letter-spacing: -3px;
    line-height: 65px;
}

#happy-iris section.osusume ul.col_1 li a dl dd.sale_box div.sale span::after{
    width: 90%;
    height: 28px;
    top: 40%;
}



/*価格 > 通常価格-----------------*/
#happy-iris section.osusume ul.col_1 li dl dd.sale_box div.price_normal{
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 0;
}


/*価格 > メイン価格-----------------*/
#happy-iris section.osusume ul.col_1 li dl dd.sale_box div.price_block{
    height: 109px;
}

#happy-iris section.osusume ul.col_1 li dl dd.sale_box div.price_block div.prices{
    margin: 0 auto 25px auto;
}

#happy-iris section.osusume ul.col_1 li dl dd.sale_box div.price_block div.prices span.prdisp-taxin{
    text-stroke: 5px #222;
    -webkit-text-stroke: 5px #222;
	filter:
		drop-shadow(5px 5px 0 #222);
    letter-spacing: -5px;
    text-align: center;
    padding-right: 0;
}

#happy-iris section.osusume ul.col_1 li dl dd.sale_box div.price_block div.prices span.prdisp-taxin span.value{
    font-size: 65px;
    line-height: 60px;
    letter-spacing: -1px;
    margin:0 0 0 7px;
}

#happy-iris section.osusume ul.col_1 li dl dd.sale_box div.price_block div.prices span.prdisp-taxin span{
    font-size: 35px;
    line-height: 40px;
} 

#happy-iris section.osusume ul.col_1 li dl dd.sale_box div.price_block div.prices span.prdisp-taxin span.value::after{
    width: 84%;
    height: 35px;
    top: 30%;
    right: 19px;
}

/*
    ボタン
======================*/
#happy-iris section.osusume ul dl dd.btn {
    height: 50px;
    width: 85%;
    font-size: 22px;
    margin: 0 auto 10px auto;
}

#happy-iris section.osusume ul dl dd.btn::before {
    font-size: 50px;
    top: 50%;
    right: 10%;
}


/* section nomal_item
================================ */
/*商品========*/
#happy-iris section.nomal_item ul li{
	padding: 15px 15px 30px 15px;
	transition: 0.3s;
}

#happy-iris section.nomal_item ul{
    padding: 0 55px;
}

/*======================
    ここから価格部分
======================*/
/*価格 > 商品名-----------------*/
#happy-iris section.nomal_item ul dl dt{
	font-size: 25px;
	margin-bottom: 0%;
	height: 85px;
	line-height: 28px;
	letter-spacing: 0.5px;
}

/*価格 > 販促内容-----------------*/
#happy-iris section.nomal_item ul dl dd.sale{
	height: 90px;
	font-size: 28px;
    line-height: 31px;
    margin-bottom: 15px;
}

#happy-iris section.nomal_item ul dl dd.sale span{
	font-size:40px;
    line-height: 45px;
    letter-spacing: -2px;
}

/*価格 > 通常価格-----------------*/
#happy-iris section.nomal_item ul dl dd.price_block div.price_normal{
	font-size: 22px;
    line-height: 27px;
    margin-bottom: 5px;
}

/*価格 > メイン価格-----------------*/
#happy-iris section.nomal_item ul dl dd.price_block img.price_secret{
    width: 94%;
    height: 77%;
    bottom: 5px;
    left: 9px;
}

#happy-iris section.nomal_item ul dl dd.price_block .prdisp-taxin{
    text-stroke: 5px #371a0a;
    -webkit-text-stroke: 5px #371a0a;
    filter: drop-shadow(5px 5px 0 #371a0a) ;
    align-items: baseline;
    padding-right: 17px;
    margin-bottom: 20px;
}

#happy-iris section.nomal_item ul dl dd.price_block .prdisp-taxin span{
	font-size: 40px;
	line-height: 45px;
    letter-spacing: -16px;
}

#happy-iris section.nomal_item ul dl dd.price_block .prdisp-taxin span.value{
	font-size: 70px;
	line-height: 80px;
    letter-spacing: -6px;
    margin: 0 0 0 18px;
}

#happy-iris section.nomal_item ul dl dd.price_block .prdisp-taxin span.value::after {
    width: 93%;
    height: 28px;
    top: 38%;
}

/*
    2カラム
======================*/
#happy-iris section.osusume ul.col_2 li a{
    border: solid 5px var(--blue-color);
}

#happy-iris section.osusume ul.col_2 li h4{
    height: 62px;
    font-size: 20px;
    line-height: 25px;
}

/*
    ここから価格部分
======================*/
#happy-iris section.osusume ul.col_2 li a dl{
    width: 100%;
    background-color: var(--yellow-color);
}



/*価格 > 販促内容-----------------*/
#happy-iris section.osusume ul.col_2 li a dl dd.sale_box div.sale{
    font-size: 25px;
    line-height: 25px;
    height: 80px;
}


#happy-iris section.osusume ul.col_2 li a dl dd.sale_box div.sale span{
    font-size: 40px;
    letter-spacing: -2px;
}


/*価格 > 通常価格-----------------*/
#happy-iris section.osusume ul.col_2 li dl dd.sale_box div.price_normal{
    font-size: 18px;
    margin-bottom: 0;
}

/*価格 > メイン価格-----------------*/
#happy-iris section.osusume ul.col_2 li dl dd.sale_box div.price_block{
    height: 115px;
}

#happy-iris section.osusume ul.col_2 li dl dd.sale_box div.price_block div.prices{
    margin: 0 auto;

}

#happy-iris section.osusume ul.col_2 li dl dd.sale_box div.price_block div.prices span.prdisp-taxin{
    text-stroke: 5px #222;
    -webkit-text-stroke: 5px #222;
    filter: drop-shadow(5px 5px 0 #222);
    letter-spacing: -5px;
    text-align: center;
    padding-right: 20px;
    line-height:65px;
}

#happy-iris section.osusume ul.col_2 li dl dd.sale_box div.price_block div.prices span.prdisp-taxin span.value{
    font-size: 65px;
    margin:0 0 0 8px;
}

#happy-iris section.osusume ul.col_2 li dl dd.sale_box div.price_block div.prices span.prdisp-taxin span{
    font-size: 35px;
} 

#happy-iris section.osusume ul.col_2 li dl dd.sale_box div.price_block div.prices span.prdisp-taxin span.value::after{
    content: "";
    width: 89%;
    height: 35px;
    position: absolute;
    top: 30%;
    right: 13px;
    background-color: #222222;
    pointer-events: none;
    z-index: -1;
}







/*価格 > ボタン-----------------*/
#happy-iris section.nomal_item ul dl dd.btn{
	border: solid 3px #fff;
	width: 80%;
    height: 55px;
	font-size: 20px;
    box-shadow: 7px 8px #371a0a;
}

#happy-iris section.nomal_item ul dl dd.btn::before{
	top:50%;
	right: 10%;
    font-size: 50px;
}

#happy-iris section.nomal_item ul dl dd.btn::after {
    inset: -7px;
    border: 5px solid #371a0a;
}





/*======================
    もっと見るボタン
======================*/
#happy-iris a.other_btn{
	width: 70%;
	height: 90px;
	margin: 3% auto;
    border-radius: 15px;
	font-size: 25px;
	transition: 0.2s;
    box-shadow:
        10px 10px 0 #371a0a,
        inset 3px 3px 0 #fff;
	border: solid 5px #371a0a;
}

#happy-iris a.other_btn::after{
	top:50%;
	right: 8%;
	font-size: 35px;
}

#happy-iris a.other_btn:hover{
	opacity: 1;
    box-shadow:
        0 0 0 #371a0a,
        inset 3px 3px 0 #fff;
	transform: translate(10px,10px);
}


/* cate_block
================================ */
#happy-iris section.cate_block ul{
    width: 600px;
	gap: 20px 1%;
    margin: 0 auto;
}

#happy-iris section.cate_block li{
	border-radius: 20px;
	box-shadow: 0 5px 0 #96abbc,0 3px 12px #fff;
}

#happy-iris section.cate_block li img{
	border-radius: 20px;
}

#happy-iris section.cate_block h4 {
	font-size: 24px;
	height: 65px;
}

/* section footer
================================ */
#happy-iris section.fotter {
    height: 50px;
    font-size: 17px;
}

#happy-iris section.fotter a {
    padding: 0 5px;
	font-size: 17px;
}

/*top_back TOPに戻る
================================ */
#happy-iris .top_back{
    bottom: 3%;
    height: 50px;
    width: 170px;
    border-radius: 100px 0 0 100px;
    border: solid 4px #fff;
    border-right: 0;
}

#happy-iris .top_back a{
	font-size: 20px;
}