@charset "shift_jis";
/* CSS Document */

/*-----------------------------------------------*/
/*�x�[�X*/
/*-----------------------------------------------*/
#kafun{
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
	padding-bottom: 0%;
	color:#222;
	background: #f6fbf7;
}

#kafun img{
    width: 100%
}
#kafun a{
    display: block;
    position: relative;
}  
#kafun a:hover{
    opacity: 0.9;
    color:#222 !important;
} 
#kafun h2,#kafun h3,#kafun h4,#kafun h5,#kafun h6,#kafun ul,#kafun ol,#kafun dl,#kafun li,#kafun dt,#kafun dd,#kafun p,#kafun div,#kafun span,#kafun img,#kafun a,#kafun table,#kafun tr,#kafun th,#kafun td{
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
}
/*-----------------------------------------------*/
/*�S�̘g*/
/*-----------------------------------------------*/
#kafun .inner{
    max-width:93%;
    margin-inline: auto;
}
#kafun .pickup{
   background: #f6fbf7;
   padding-top: 3%;
}
#kafun .pickup > .inner{
    display: grid;
    gap: 30px;
}
#kafun section{
   padding:1% 0;  
}
/*
#kafun section:nth-of-type(odd) {
    background: #f6fbf7;
}
*/
#kafun .bg{
    background:#e6f3f4;
}
#kafun .fd{
background-color: #fdf2e0;
padding: 2rem 0 .5rem;
}
#kafun .fd h4 {
    background: #fe8059;
}
#kafun .fd dd.item-list-txt {
    color: #947c75;
}
#kafun .fd .item-list-btn {
    background-color: #ff9574;
    border: 2px solid #ff9574;
}
#kafun .fd ul[class^="cate-link_"] li a {
    background: #fe8059;
    border: 2px solid #fe8059;
}
/*-----------------------------------------------*/
/*���o��*/
/*-----------------------------------------------*/
#kafun h3{
    font-size: 37px;
    padding:0;
    color: #3a99b9;
    margin:15px 0;
    display: flex;
    position: relative;
    align-items: center;
}
#kafun h3::before,
#kafun h3::after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background: #3a99b9;
}
#kafun h3::before{
    margin-right: 1rem;
}
#kafun h3::after{
    margin-left: 1rem;
}
#kafun .sub-title{
    font-size: 18px;
    color: #6e6e6e;
    margin-bottom: 20px;
}
#kafun .sub-title span{
background-color: #ffffff;
padding: .3rem 1rem;
border-radius: 50px;
border: solid 1px #97cbcb;
color: #59a7a7;
}
#kafun h4{
    font-size: 27px;
    color: #f72621;
    position: relative;
    padding: 7px 0;
}
#kafun h5{
    font-size: 26px;
    color: #3a99b9;
    margin:30px 0 20px 0;
    position: relative;
}
#kafun .sub {
    background: #66b9d4;
    /* padding: .5rem 0; */
    font-size: 1.5rem;
    color: #fff;
}
/*-----------------------------------------------*/
/*�A���J�[*/
/*-----------------------------------------------*/
#kafun #navi ul {
    display: flex;
    justify-content: center;
    gap: 10px;
}
#kafun #navi ul li{
}
#kafun #navi ul li a{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    background: #3a99b9;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    transition: 0.3s all;
    border-radius: 5px;
    flex-direction: row;
}
#kafun #navi ul .name{
    flex-grow: 1;
    line-height: 1.1em;
    padding: 0;
    color: #fff;
    font-size: 17px;
    margin-bottom: 12px;
}
#kafun #navi ul li img{
    width:auto;
    border-radius:4px;
}
#kafun #navi ul .name::after {
    font-family: "Material Icons";
    color: inherit;
    font-size: 1.2rem;
    position: absolute;
    content: "expand_more";
    transform: rotate(0deg);
    right: 24%;
    bottom:5%;
    transition: 0.3s all;
}
/*hover*/
#kafun #navi ul li a:hover{
    color:#222 !important;
}
#kafun #navi ul a:hover .name::after{
    bottom: 2%;
}
/*-----------------------------------------------*/
/*���i*/
/*-----------------------------------------------*/
/*����*/
#kafun .item-list_col3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
#kafun .item-list_col2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
/*�g*/
#kafun .item-list_col2 li,#kafun .item-list_col3 li{
    background: #fff;
    border-radius: 5px;
}
#kafun .item-list_col2 li a, #kafun .item-list_col3 li a{
    display: block;
    padding:10px;
    transition: 0.3s all;
}
#kafun .item-list_col2 li dl,#kafun .item-list_col3 li dl{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
    text-align: center;
}
/*�̑��A�C�R��*/
#kafun .coupon-icon{
    background:#ed7255db;
    color: #fff89b;
    line-height: 0.8em;
    font-size: 19px;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 7px;
}
#kafun .coupon-icon span.big{
    font-size: 33px;
    font-family: 'Lato';
    font-weight: 700;
    line-height: 1em;
}
#kafun .coupon-icon span.small{
    font-size: 15px;
    display: block;
    line-height: 1em;
    color: #fff;
    
}
/*���i��*/
#kafun dd.item-list-txt{
    font-size:19px;
    line-height: 1.3em;
    color: #000000;
    border-bottom: 1px dashed;
    padding: 0 0 7px 0;
    width: 100%;
    height: 40px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center; 
}
/*���i������*/
#kafun dd.item-list-comment{
    font-size:14px;
    line-height: 1.4em;
    color: #383838;
    font-weight: 300;
}
/*�A�C�R��*/
#kafun dd.item-list-icon  ul {
    display: flex;
    justify-content: center;
}
#kafun dd.item-list-icon  ul li{
    color: #fff;
    font-size: 13px;
    padding:3px 8px;
    width: auto;
    margin-right: 4px;
    background: #f72621;
    display: flex;
    justify-content: center;
    align-items: center;
}
#kafun dd.item-list-icon ul li:last-child{
    margin-right: 0;
}
/*���w���͂�����*/
#kafun .item-list-btn {
   background: #f72621;
   color: #fff;
   border: 2px solid #f72621;
   padding:6px 0 8px 0;
   border-radius: 50px;
   line-height: 1.3em;
   position: relative;
   font-size:15px;
   width: 70%;
   margin-bottom: 6px;
   transition: 0.3s all;
   margin: auto;
}
#kafun .item-list-btn::after {
    font-family: "Material Icons";
    color: inherit;
    font-size: 1.2rem;
    position: absolute;
    content: "expand_more";
    transform: rotate(270deg);
    right: 6px;
    bottom: 7px;
    transition: 0.3s all;
}
/*hover*/
#kafun .item-list li a:hover{
    box-shadow: 0px 0px 10px #fff;
}
#kafun a:hover .item-list-btn{
   color: #f72621 !important;
   background: #fff;
   border: 2px solid #f72621;
}
#kafun a:hover .item-list-btn::after {
    right: 5px;
}
/*-----------------------------------------------*/
/*���i�v��*/
/*-----------------------------------------------*/
#kafun .scene__price,
#kafun li.price{
	color:#222 !important;
	border: none;
	font-weight: bold;
	margin:0;
	background: none;
	font-size:30px;
	padding:0;
}
/*�ŏ���*/
#kafun li.motoprice,
#kafun span.spesicalprice,
#kafun li.intax {
	display: none;
}
/*-----------------------------------------------*/
/*�̑��{�^��*/
/*-----------------------------------------------*/
#kafun .coupon-btn a{
	background:#ef7a5e;
    color: #fff89b;
    font-size: 21px;
    padding:14px 0;
    border-radius: 50px;
    border: 2px solid #ef7a5e;
}
#kafun .coupon-btn a span.white{
    color: #fff;
}
#kafun .coupon-btn a span.big{
    font-size: 28px;
    font-family: 'Lato';
    font-weight: 700;
    line-height: 1em;
}
#kafun .coupon-btn a:hover{
    color: #fff !important;
}
#kafun .coupon-btn a::after {
    font-family: "Material Icons";
    color: inherit;
    font-size: 1.4rem;
    position: absolute;
    content: "expand_more";
    transform: rotate(270deg);
    right: 15px;
    bottom:13px;
    transition: 0.3s all;
}
/*hover*/
#kafun .coupon-btn a:hover{
	background: #fff;
    border: 2px solid #ed7255db;
    color:#ed7255db !important;
}
#kafun .coupon-btn a:hover span.white{
    color:#ed7255db !important;
}
#kafun .coupon-btn a:hover::after {
    right: 10px;
    color: inherit !important;
}
/*-----------------------------------------------*/
/*���̑��͂�����*/
/*-----------------------------------------------*/
#kafun ul[class^="cate-link_"]{
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    margin:30px auto 50px auto;
}
#kafun ul[class^="cate-link_"] li a{
	font-size: 18px;
    display: block;
    padding: 13px 0;
    text-decoration: none;
    color: #fff;
    position: relative;
    border-radius: 8px;
    margin: 0 10px;
    background:#72dbd8;
    border: 2px solid #72dbd8; 
}
#kafun ul[class^="cate-link_"] li {
	margin: 0 auto;
}
#kafun .cate-link_1 > li {/*1�J����*/
	 width: 55%;
}
#kafun .cate-link_2 > li {/*2�J����*/
	 width: calc((100% - 2%) /2);
}
#kafun .cate-link_3 > li {/*3�J����*/
	 width: calc((100% - 2%) /3);
}
#kafun ul[class^="cate-link_"] li a:after{
	font-family: 'Material Icons';
    font-size: 1.5em;
    position: absolute;
    content: "expand_more";
    transform: rotate(270deg);
    bottom:20%;
    right:5%;
    color: #fff;
    transition: 0.3s all;
}
#kafun ul[class^="cate-link_"] li a:hover{
    color:#76d1bd !important;
    background: #fff;
}
#kafun ul[class^="cate-link_"] li a:hover:after{
    right:3%;
    color:#76d1bd;
}
/*-----------------------------------------------*/
/*�o�i�[*/
/*-----------------------------------------------*/
#kafun .feature-box{
    display: grid;
    gap: 30px;
    max-width: 850px;
    margin:0 auto;
}
#kafun .feature-box.col_1{
   grid-template-columns:repeat(1, 1fr);
}
#kafun .feature-box.col_2{
   grid-template-columns:repeat(2, 1fr);
}
#kafun .feature-box.col_3{
   grid-template-columns:repeat(3, 1fr);
}
#kafun .feature-box.col_4{
   grid-template-columns:repeat(4, 1fr);
}

#kafun #store.group {
    padding: 0 2vw;
}
#kafun .store-inner {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1vw;
    max-width: 850px;
    margin: auto;
}
#kafun .store-inner img, #kafun #fish img, #kafun #newlife img{
    border-radius: 5px;
}
/*-----------------------------------------------*/
/*�g�b�v�y�[�W*/
/*-----------------------------------------------*/
#kafun .pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
	z-index: 9999;
}
#kafun .pagetop a {
	display: flex;
	justify-content: center;
    align-items: center;
    text-align: center;
	vertical-align: middle;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	background-color: #667983d9;
	border-radius: 80px;
	width:70px;
	height:70px;
    line-height: 1.3em;
    transition: 0.3s all;
}
#kafun .pagetop a:hover{
	background-color: #4b8b91b0;
	color: #fff !important;
	transform: translateY(-2px);
}
#kafun #nav {
    position: fixed;
    bottom: 20%;
    right: 2%;
    z-index: 9999;
}

#kafun #nav .g-nav.g-nav__left a{
    display: block;
    background-color: #3a99b9;
    border: solid 1px #3a99b9;
    color: #fff;
    margin: .5rem auto;
    border-radius: 50px;
    padding: .5rem .3rem;
    font-size: 1.3rem;
    width: 230px;
}

#kafun #nav .g-nav.g-nav__left a:last-child{
    display: block;
    background-color: #fff;
    border: solid 1px #3a99b9;
    color: #3a99b9;
    margin: .5rem auto;
    border-radius: 50px;
    padding: .5rem .3rem;
    font-size: 1.3rem;
    width: 230px;
}


/* フォン�? */
#daily-bulk-campaign{
    font-family: "Zen Kaku Gothic New",'Noto Sans JP','Yu Gothic black',sans-serif,'メイリオ';
    font-weight: 500;
    font-style: normal;
}
#daily-bulk-campaign p{
    font-family: "Zen Kaku Gothic New",'Noto Sans JP','Yu Gothic black',sans-serif,'メイリオ';
    font-weight: 500;
    font-style: normal;
    font-size: 1rem;
}
#daily-bulk-campaign h1{
    font-family: "Zen Kaku Gothic New",'Noto Sans JP','Yu Gothic black',sans-serif,'メイリオ';
    font-weight: 600;
    font-style: normal;
}
#daily-bulk-campaign h2{
    font-family: "Zen Kaku Gothic New",'Noto Sans JP','Yu Gothic black',sans-serif,'メイリオ';
    font-weight: 600;
    font-style: normal;
}
#daily-bulk-campaign h2 span{
    font-family: "Zen Kaku Gothic New",'Noto Sans JP','Yu Gothic black',sans-serif,'メイリオ';
    font-weight: 900;
    font-style: normal;
}
#daily-bulk-campaign h3{
    font-family: "Zen Kaku Gothic New",'Noto Sans JP','Yu Gothic black',sans-serif,'メイリオ';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #00aec1;
}
#daily-bulk-campaign h3 span{
    font-family: "Lato";
    font-weight: 700;
    font-style: normal;
    font-size: 1.1em;
    color: #00aec1;
    padding-right: 1%;
}
#daily-bulk-campaign h5{
    font-family: "Zen Kaku Gothic New",'Noto Sans JP','Yu Gothic black',sans-serif,'メイリオ';
    font-weight: 700;
    font-style: normal;
    font-size: 1.1rem;
}
#daily-bulk-campaign  span{
    font-family: "Zen Kaku Gothic New",'Noto Sans JP','Yu Gothic black',sans-serif,'メイリオ';
    font-weight: 700;
    font-style: normal;
}


/*==============================================
PC限定スライダー ここから
================================================*/
/* スライダー */
#daily-bulk-campaign #slider {
    position: fixed;
    left: 0;
    width: calc((100vw - 768px) / 2);
    height: calc(100vh - 191px);
    z-index: -1;
}
#daily-bulk-campaign .scroll-infinity {
    width: 100%;
}
#daily-bulk-campaign .scroll-infinity__wrap {
    display: flex;
    position: relative;
    z-index: 100;
    width: 300%;
    justify-content: center;
    margin: 0 auto;
}
#daily-bulk-campaign .scroll-infinity__wrap.vertical {
    width: 100%;
    flex-direction: column;
}
#daily-bulk-campaign .scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
}
#daily-bulk-campaign .scroll-infinity__list--vertical {
    animation: infinity-scroll-vertical 40s infinite linear 0s both
}
#daily-bulk-campaign .scroll-infinity__item {
    width: 100%;
}
#daily-bulk-campaign .scroll-infinity__item > img {
    width: 100%;
    display: block;
}
/* タブレ�?ト用 */
    #daily-bulk-campaign #slider {
        display: none;
    }
/* キーフレー�?縦無限スクロール */
@keyframes infinity-scroll-vertical {
    from {
        transform: translateY(0);
    }
        to {
        transform: translateY(-100%);
    }
}
/*==============================================
PC限定スライダー ここまで
================================================*/

/*==============================================
セール ここから
================================================*/
#daily-bulk-campaign #sale-item.daily {
    width: 100%;
    background-color: #044698;
    position: relative;
}
#daily-bulk-campaign #sale-item.baby {
    width: 100%;
    background-color: #d8f5ff;
    position: relative;
}
#daily-bulk-campaign #sale-item.crecia {
    width: 100%;
    background-color: #fff;
    position: relative;
}
#sale-item {
    margin: auto;
}
#sale-item .box_base{
    padding: 1% 0 5%;
}
#sale-item .text_box {
    padding-bottom: 5%;
}
#sale-item > ul{
width: 100%;
margin: auto;
display: grid;
gap: 15px;
}
#sale-item img {
max-width: 90%;
padding: 5% 5% 0;
display: block;
}
#sale-item .swiper-slide {
width: 35%;
}
.sample-slider .swiper-wrapper{
display: flex;
align-items: center;
}
#sale-item.daily .item_box {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 8px 8px 10px 0px rgb(153 153 153 / 59%);
}
#sale-item.baby .item_box {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 8px 8px 10px 0px rgb(4 67 153 / 36%);
}
#sale-item.crecia .item_box {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 8px 8px 10px 0px rgb(4 67 153 / 36%);
}
#sale-item > ul.col_1 .item_box a{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: 10px 0 10px 10px;
}

#sale-item .text_box .item_name{
font-size: 1rem;
text-align:center;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
line-height: 21px;
color: #222222;
}

#sale-item  ul.box_base .text_box .item_sale {
background-color: #e90416;
font-size: 1rem;
text-align: center;
color:#fff;
margin: 0 auto;
text-align: center;
padding: 3px 0;
}
#sale-item  ul.box_base .text_box .item_sale_big {
background-color: #e90416;
font-size: 1rem;
text-align: center;
color:#fff;
margin: 0 auto;
text-align: center;
padding: 3px 0;
height: 39px;
line-height: 25px;
display: flex;
justify-content: center;
align-items: center;
}
#sale-item .text_box .item_nprice {
text-align: center;
font-size: 1rem;
color: #7e7e7e;
margin: 1% 0 0;
line-height: 1.2;
margin-top: 11px;
}
#sale-item .text_box .item_nprice span {
padding-left: .2rem;
font-size: 1.2rem;
}
#sale-item .text_box .item_cprice {
text-align: center;
font-size: 1.2rem;
color: #ea0012 !important;
display: flex;
justify-content: center;
align-items: flex-end;
}
#sale-item .text_box .item_cprice .price{
font-size: 2.3rem;
color: #ea0012 !important;
line-height: 1;
font-family: Lato;
font-weight: 700;
padding-left: .5rem;
}
#sale-item .text_box .item_cprice_n {
text-align: center;
font-size: 1.2rem;
color: #ea0012 !important;
display: flex;
justify-content: center;
align-items: flex-end;
}
#sale-item .text_box .item_cprice_n .price{
font-size: 2.5rem;
color: #ea0012 !important;
line-height: 1;
font-family: Lato;
font-weight: 700;
padding-left: .5rem;
padding: 9% 0 3.5%;
}
#sale-item .text_box .item_price .spesicalprice,#sale-item .text_box .buy_price>ul .intax{
display:none;
}
#sale-item .text_box .item_btn{
background-color: #222222;
color: #ffffff;
width: 75%;
margin: .5rem auto 0;
text-align: center;
border-radius: 50px;
padding: .3rem 0;
position: relative;
}
#sale-item .text_box .item_btn::after {
content: '';
display: inline-block;
position: absolute;
top: 47%;
width: 6px;
height: 6px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: -3px 0 0 3px;
right: 11%;
transition:.3s;
}
#sale-item .btn a::after {
content: '';
display: inline-block;
position: absolute;
top: 48%;
width: 10px;
height: 10px;
border-top: solid 3px #222;
border-right: solid 3px #222;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: -3px 0 0 3px;
right: 5%;
transition:.3s;
}
#sale-item .text_box .item_btn:hover::after {
right: 9%;
transition:.3s;
}

#sale-item > ul li {
border-radius: 10px;
}
#sale-item > ul li a {
font-size: 1rem;
color: #222222;;
}
#sale-item > ul li a span {
font-weight: 900;
font-size: 1.2rem;
}
#sale-item > ul .item_box a{
display: grid;
align-items: center;
padding: 14px;
}


#sale-item .btn {
position: relative;
background-color: #fff;
width: 60%;
margin: .5rem auto;
text-align: center;
padding: .5rem;
border-radius: 50px;
color: #222;
border:solid 1px ;
}

#sale-item .btn a{
font-size: 1.2rem;
}

#sale-item #countdownArea.countdown {
text-align: center;
font-size: 1.5rem;
}

#sale-item .sub_text {
text-align: center;
font-size: 1.2rem;
background-color: #25211e;
padding: .3rem;
color: #ffffff;
}

#sale-item .sub_text2 {
text-align: center;
color: #ffffff;
font-size: 1.3rem;
}

/*==============================================
セール ここまで
================================================*/

/*==============================================
スライダーレイアウト変更 ここから
================================================*/
#daily-bulk-campaign .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-color: rgb(255, 255, 255, .5);
    border: 2px solid #333333;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    top: 40%;
}
#daily-bulk-campaign .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-color: rgb(255, 255, 255, .5);
    border: 2px solid #333333;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    top: 40%;
}
#daily-bulk-campaign .swiper-wrapper~.swiper-pagination-bullets {
    text-align: center;
    padding-bottom: 2%;
}
#daily-bulk-campaign .swiper-wrapper~.swiper-pagination-bullets .swiper-pagination-bullet {
    border-radius: unset;
    width: 7px;
    height: 7px;
    margin: 0 4px;
    background-color: #222;
    opacity: .2;
    border-radius: 50%;
}
#daily-bulk-campaign .swiper-wrapper~.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: #222;
    opacity: 1;
}
/*==============================================
スライダーレイアウト変更 ここまで
================================================*/