@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
.web-font{
font-family: 'Sawarabi Gothic', sans-serif;
}
.buono-catch{
letter-spacing: .24em;
line-height: 2.7;
font-size:1.8rem;
font-weight: 300;
text-align:center;
}
.buono-sub{
letter-spacing: .24em;
font-size:2.5rem;
font-weight: 300;
color:#9ede9e;
text-align:center;
}
.story-item-sub{
text-align:center;
}
.story-item-sub p{
letter-spacing: .24em;
font-size:2.5rem;
font-weight: 300;
background: linear-gradient(70deg, #cfd1f2, #fcd5ba, #fad1e3, #afeee5, #d4cdef);
color: #ffffff;
display: inline-block;
padding: 0 30px;
border-radius:30px;
}
.story-item .block-products{
margin:auto;
}
.sp-br{
display:none;
}
.img-parent{
position:relative;
}
.img-bg-01{
background: radial-gradient(#eaf1dd, #eaf1dd40);
width:600px;
height:600px;
position:absolute;
top: -70px;
left: 150px;
z-index: 0;
border-radius:50%;
}
.img-bg-02{
background: radial-gradient(#eaf1dd, #eaf1dd40);
width: 800px;
height: 800px;
position: absolute;
top: 180px;
left: 920px;
z-index: 0;
border-radius:50%;
}
.img-bg-03{
background: radial-gradient(#eaf1dd, #eaf1dd40);
width: 450px;
height: 450px;
position: absolute;
top: -80px;
left: 1180px;
z-index: 0;
border-radius:50%;
}
.img-bg-04{
background: radial-gradient(#eaf1dd, #eaf1dd40);
width: 600px;
height: 600px;
position: absolute;
top: 380px;
left: 120px;
z-index: 0;
border-radius:50%;
}
.buono-profile{
border: solid 1px #888888;
width:880px;
margin:0 auto;
}
.item-flexbox{
max-width: calc(1280px + 8rem);
margin:0 auto;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.item-flexbox .block-pic{
width: 33%;
padding:0 1rem;
margin:2rem 0 auto;
}
@media (max-width: 768px){
.buono-catch{
line-height: 2.5;
font-size:2.3rem;
}
.buono-sub,
.story-item-sub{
font-size:3rem;
}
.story-item-sub p{
padding: 5px 30px;
}
.sp-br{
display: inline-block;
}
.pc-br{
display:none;
}
.img-bg-01{
width:43%;
height:62%;
top: -40px;
left: 210px;
}
.img-bg-02{
width: 60%;
height: 67%;
top: 190px;
left: 150px;
}
.img-bg-03{
width: 30%;
height:34%;
top: -35px;
left: 5px;
}
.img-bg-04{
width: 50%;
height:56%;
top: -25px;
left: 5px;
}
.buono-profile{
width:auto;
margin:0 20px;
}
.item-flexbox{
width:90%;
}
.item-flexbox .block-pic{
width: 100%;
}
}
まるでフルーツのようにみずみずしく。
色とりどりに輝く「iOのある日々」の物語。
思わず笑みがこぼれる
Buono!（おいしい！）な毎日をつくります。