@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&family=Murecho:wght@100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Shippori+Mincho&family=Shippori+Mincho+B1:wght@400;700&display=swap');

:root {
--shippori-mincho-b1-regular: "Shippori Mincho B1","Shippori Mincho", serif;
--you-gothic: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
--sawarabi:"Sawarabi Mincho", serif;
}
/* ========================================================================

  /product/uruoirich/css/uruoirich.css

======================================================================== */
#uruoirich .breadcrumbs, #uruoirich footer { position:relative; z-index:1; }
#uruoirich main { padding:0 0 calc(150/1500*100vw); min-height:calc(5981/1500*100vw); background:url('../images/bg.png') repeat-y; background-size:100% auto; color:#1e1e1e; font-weight:600; font-family:var(--shippori-mincho-b1-regular); overflow:hidden; }
#uruoirich main p.txt { text-align:left; letter-spacing:0.075em; word-break:normal; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#uruoirich main { background-image:url('../images/bg@2x.png'); }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#uruoirich main { padding-top:calc(120/750*100vw); }
}
/************************************************************************
  #main-image
************************************************************************/
#main-image { height:calc(1027/1500*100vw); background:url('../images/main_image.png')no-repeat; background-size:100% auto; }
#main-image .contents { padding:calc(85/1500*100vw) 0 0; display:flex; flex-direction:column; }
#main-image h2,
#main-image h3 { font-size:0; }
#main-image h2 { order:2; margin:auto; width:calc(672/1500*100vw); height:calc(454/1500*100vw); background:url('../images/h2.png') no-repeat; background-size:100% auto; } 
#main-image h3 { order:1; margin:0 0 calc(10/1500*100vw); width:calc(289/1500*100vw); height:calc(91/1500*100vw); background:url('../images/h3.svg') no-repeat; background-size:100% auto; } 

/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#main-image { background-image:url('../images/main_image@2x.png'); }
#main-image h2 { background-image:url('../images/h2@2x.png'); } 
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#main-image { height:auto; }
#main-image .contents { margin:0 calc(50/750*100vw); padding:calc(50/750*100vw) 0 0; }
#main-image h2 { width:calc(610/750*100vw); height:calc(412/750*100vw); } 
#main-image h3 { margin-bottom:calc(40/750*100vw); width:calc(291/750*100vw); height:calc(93/750*100vw); } 
}
/************************************************************************
  #lead
************************************************************************/
#lead { margin:0 auto calc(-410/1500*100vw); padding:calc(516/1500*100vw) 0 0; height:calc(1383/1500*100vw); background:url('../images/bg_lead.png') no-repeat; background-size:100% auto; position:relative; top:calc(-410/1500*100vw); text-align:center; z-index:1; }
#lead h2 { margin:0 auto calc(35/1500*100vw); width:calc(312/1500*100vw); height:calc(152/1500*100vw); background:url('../images/h2_lead.png') no-repeat; background-size:100% auto; font-size:0; }
#lead h3 { margin-bottom:calc(30/1500*100vw); letter-spacing:0.14em; line-height:calc(48/24); font-weight:600; font-size:calc(24/1500*100vw); }
#lead .text { margin:0 auto; width:calc(870/1500*100vw); }
#lead p.txt { margin-bottom:calc(10/1500*100vw); font-weight:500; font-size:calc(20/1500*100vw); }
#lead p.note { margin-bottom:calc(30/1500*100vw); font-weight:500; text-align:right; line-height:calc(40/16); }
#lead p.note small { font-size:calc(16/1500*100vw); }
/* a.icon */
#uruoirich #lead a.icon::after { width:calc(10/1500*100vw); height:calc(19/1500*100vw); background-color:#1e1e1e; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#lead { background-image:url('../images/bg_lead@2x.png'); }
#lead h2 { background-image:url('../images/h2_lead@2x.png'); }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#lead { margin:0 auto calc(-180/750*100vw); padding-top:calc(530/750*100vw); height:calc(1724/750*100vw); background-image:url('../images/bg_lead_sp.png'); top:calc(-180/750*100vw); }
#lead h2 { margin-bottom:calc(60/750*100vw); width:calc(357/750*100vw); height:calc(171/750*100vw); background-image:url('../images/h2_lead_sp.png'); }
/* a.icon */
#uruoirich #lead a.icon::after { width:calc(10/750*100vw); height:calc(19/750*100vw); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#lead { background-image:url('../images/bg_lead_sp@2x.png'); }
#lead h2 { background-image:url('../images/h2_lead_sp@2x.png'); }
#lead h3 { margin-bottom:calc(15/750*100vw); line-height:calc(58/34); font-size:calc(34/750*100vw); }
#lead h3 span { display:block; }
#lead .text { width:auto; }
#lead p.txt { margin-bottom:0; line-height:calc(50/28); font-size:calc(28/750*100vw); }
#lead p.note { margin-bottom:calc(45/750*100vw); }
#lead p.note small { line-height:calc(50/24); font-size:calc(24/750*100vw); }
}
}
/************************************************************************
  a.btn
************************************************************************/
p.btn { margin:0 auto; width:calc(420/1500*100vw); height:calc(115/1500*100vw); text-align:center; display:flex; align-items:center; justify-content:center; position:relative; }
p.btn a { margin:0 auto; width:100%; height:100%; background-color:#ffffff; color:#1e1e1e; border-radius:calc(100/1500*100vw); /*border:2px solid rgba(255,255,255,0.4);*/ font-size:calc(28/1500*100vw); display:flex; align-items:center; justify-content:center; z-index:1; box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,0.4);  }
p.btn::after { content:''; width:calc(100% + 12px); height:calc(100% + 9px); background: #EC716D;background: linear-gradient(90deg,rgba(236, 113, 109, 1) 0%, rgba(247, 177, 90, 1) 25%, rgba(243, 239, 87, 1) 50%, rgba(196, 214, 94, 1) 75%, rgba(120, 204, 241, 1) 100%); border-radius:calc(100/1500*100vw); position:absolute; bottom:calc(-7/1500*100vw); right:calc(-9/1500*100vw); z-index:0; display:block; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
p.btn { width:calc(520/750*100vw); height:calc(115/750*100vw); }
p.btn a { border-radius:calc(60/750*100vw); font-size:calc(30/750*100vw); }
p.btn::after { width:calc(100% + (12/750*100vw)); height:calc(100% + (9/750*100vw)); border-radius:calc(60/750*100vw); bottom:calc(-7/750*100vw); right:calc(-9/750*100vw); }
}
/************************************************************************
  .product
************************************************************************/
.product { margin:0 auto calc(230/1500*100vw); text-align:center; position:relative; z-index:1; }
.product .contents { padding:0; max-width:calc(1160/1500*100vw); }
/* .header */
.product .header { margin:0 auto calc(60/1500*100vw); width:calc(1080/1500*100vw); height:calc(660/1500*100vw); background-repeat:no-repeat; background-size:100% auto; }
.product .header h2 { margin:0 auto calc(20/1500*100vw); letter-spacing:0.075em; font-weight:900; font-size:46px; font-size:4.6rem; }
.product .header h2::before { content:''; margin:0 auto calc(35/1500*100vw); background-repeat:no-repeat; background-size:100% auto; display:block; }
.product .header p.txt { text-align:center !important; line-height:calc(40/20); font-weight:500; font-size:20px; font-size:2rem; }
/* ============ smart phone ============ */
@media screen and (max-width:750px){
.product { margin-bottom:calc(280/750*100vw); }
.product .contents { margin:0; max-width:initial; }
.product .header { margin-bottom:calc(80/750*100vw); width:auto; }
.product .header h2::before { margin-bottom:calc(30/750*100vw); }
.product .header h2 { margin-bottom:calc(15/750*100vw); font-size:calc(48/750*100vw); }
.product .header p.txt { line-height:calc(46/26); font-size:calc(26/750*100vw); }
}
/************************************************************************
  ul.products-list
************************************************************************/
ul.products-list { margin:0 auto; max-width:1000px; text-align:center; display:flex; }
ul.products-list li { width:50%; display:flex; flex-direction:column; }
ul.products-list li .text { order:2; }
ul.products-list li .photo { order:1; }
/* h3 */
ul.products-list li h3 { margin:0 auto 1em; padding:0 0 0.4em; height:1em; letter-spacing:0.025em; font-weight:600; font-size:26px; font-size:2.6rem; }
ul.products-list li h3 span { line-height:1; display:inline-block; }
ul.products-list li h3 span::after { content:''; margin-top:0.2em; width:100%; height:3px; display:block; }
ul.products-list li p.txt { text-align:center !important; font-weight:400; font-size:15px; font-size:2rem; }
/* linear-gradient */
#uruoi-sand-ichigo h3 span::after { background:#E61267; background:linear-gradient(90deg,rgba(230, 18, 103, 1) 0%, rgba(241, 209, 104, 1) 94%); }
#uruoi-sand-milk h3 span::after { background:#21B9ED;
background:linear-gradient(90deg,rgba(33, 185, 237, 1) 0%, rgba(236, 222, 10, 1) 94%); }
#uruoi-focaccia-cheese h3 span::after  { background:#F18E3E; background:linear-gradient(90deg,rgba(241, 142, 62, 1) 15%, rgba(244, 225, 0, 1) 94%); }
#uruoi-focaccia-olive h3 span::after { background:#01BA4E; background:linear-gradient(90deg,rgba(1, 186, 78, 1) 0%, rgba(236, 222, 10, 1) 100%); }

/*ul.products-list li#uruoi-sand-milk h3 span::after*/
/* ============ smart phone ============ */
@media screen and (max-width:750px){
ul.products-list { margin:0 calc(30/750*100vw); justify-content:space-between; }
ul.products-list li { width:calc(340/750*100vw); }
ul.products-list li p.photo { margin:0 auto calc(15/750*100vw); }
ul.products-list li h3 { margin-bottom:0.5em; height:auto; font-size:calc(28/750*100vw); }
ul.products-list li h3 span { line-height:calc(38/28); }
ul.products-list li h3 span::after { height:calc(3/750*100vw); }
ul.products-list li p.txt { letter-spacing:0.05em; font-size:calc(24/750*100vw); }
}
/************************************************************************
  #uruoi-sand
************************************************************************/
#uruoi-sand .header { padding-top:calc(65/1500*100vw); background-image:url('../images/bg_001.png'); }
#uruoi-sand .header h2::before { width:calc(856/1500*100vw); height:calc(239/1500*100vw); background-image:url('../images/bg_uruoi_sand.png'); }

/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#uruoi-sand .header { background-image:url('../images/bg_001@2x.png'); }
#uruoi-sand .header h2::before { background-image:url('../images/bg_uruoi_sand@2x.png'); }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#uruoi-sand .header { padding-top:calc(90/750*100vw); height:calc(588/750*100vw);  background-image:url('../images/bg_001_sp.png'); }
#uruoi-sand .header h2::before { width:calc(670/750*100vw); height:calc(187/750*100vw); } 

#uruoi-sand-ichigo p.photo, 
#uruoi-sand-milk p.photo { width:calc(270/750*100vw); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#uruoi-sand .header { background-image:url('../images/bg_001_sp@2x.png'); }
}
}
/************************************************************************
  #uruoi-focaccia
************************************************************************/
#uruoi-focaccia .header { padding-top:calc(30/1500*100vw); background-image:url('../images/bg_002.png'); }
#uruoi-focaccia .header h2::before { width:calc(760/1500*100vw); height:calc(289/1500*100vw); background-image:url('../images/bg_uruoi_focaccia.png'); }
#uruoi-focaccia-cheese p.photo, #uruoi-focaccia-olive p.photo { margin-bottom:calc(30/1500*100vw) }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#uruoi-focaccia .header { background-image:url('../images/bg_002@2x.png'); }
#uruoi-focaccia .header h2::before { background-image:url('../images/bg_uruoi_focaccia@2x.png'); }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
#uruoi-focaccia .header { padding-top:calc(45/750*100vw); height:calc(599/750*100vw); background-image:url('../images/bg_002_sp.png'); }
#uruoi-focaccia .header h2::before { width:calc(650/750*100vw); height:calc(249/750*100vw); }
#uruoi-focaccia-cheese p.photo, 
#uruoi-focaccia-olive p.photo { margin-bottom:calc(30/1500*100vw); width:calc(260/750*100vw); }

#uruoi-focaccia-olive p.txt br { display:none; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#uruoi-focaccia .header { padding-top:calc(30/1500*100vw); background-image:url('../images/bg_002_sp@2x.png'); }
}
}
/************************************************************************
  article.lineup
************************************************************************/
article.lineup { padding:0 0 calc(100/1500*100vw); }
article.lineup .contents { padding:calc(135/1500*100vw) 0 0; min-height:calc(650/1500*100vw); background:url('../images/bg_003.png') no-repeat; background-size:100% auto; }
article.lineup h2 { margin:0 auto 1em; text-align:center; letter-spacing:0.075em; font-weight:900; font-size:46px; font-size:4.6rem; }
article.lineup ul.line-up li a, article.lineup .ul.line-up li span { width:auto; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
article.lineup .contents { background-image:url('../images/bg_003@2x.png'); }
}
/* ============ smart phone ============ */
@media screen and (max-width:750px){
article.lineup { padding-bottom:calc(60/1500*100vw); position:relative; z-index:1; }
article.lineup .contents { margin:0; padding-top:calc(140/750*100vw); min-height:calc(650/1500*100vw); background-image:url('../images/bg_003_sp.png'); }
article.lineup h2 { font-size:calc(50/750*100vw) }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
article.lineup .contents { min-height:initial; background-image:url('../images/bg_003_sp@2x.png'); }
}
}
/************************************************************************
  .bubble
************************************************************************/
.bubble { background-repeat:no-repeat; background-size:100% auto; position:absolute; animation:floating 3000ms infinite; transition:0.5s; z-index:0; }
.bubble:nth-child(2n) { animation:floating2 3000ms infinite; transition:0.5s; }
#bubble-1 { width:calc(396/1500*100vw); height:calc(360/1500*100vw); background-image:url('../images/bubble_1.png'); top:calc(1001/1500*100vw); left:0; }
#bubble-2 { width:calc(416/1500*100vw); height:calc(458/1500*100vw);  background-image:url('../images/bubble_2.png'); top:calc(1601/1500*100vw); right:0; }
#bubble-3 { width:calc(141/1500*100vw); height:calc(274/1500*100vw);   background-image:url('../images/bubble_3.png'); top:calc(2125/1500*100vw); right:0; }
#bubble-4 { width:calc(439/1500*100vw); height:calc(508/1500*100vw); background-image:url('../images/bubble_4.png'); top:calc(2478/1500*100vw); left:0; }
#bubble-5 { width:calc(331/1500*100vw); height:calc(514/1500*100vw); background-image:url('../images/bubble_5.png'); top:calc(3473/1500*100vw); right:0; }
#bubble-6 { width:calc(358/1500*100vw); height:calc(465/1500*100vw); background-image:url('../images/bubble_6.png'); top:calc(4503/1500*100vw); left:0; }
#bubble-7 { width:calc(430/1500*100vw); height:calc(551/1500*100vw); background-image:url('../images/bubble_7.png'); top:calc(5823/1500*100vw); left:0; }
#bubble-8 { width:calc(141/1500*100vw); height:calc(416/1500*100vw); background-image:url('../images/bubble_8.png'); top:calc(5085/1500*100vw); right:0; }
#bubble-9 { width:calc(141/1500*100vw); height:calc(416/1500*100vw); background-image:url('../images/bubble_9.png'); top:calc(5259/1500*100vw); right:0; }

@keyframes floating {
from { transform:translate(0, calc(20/1500*100vw)); }
50% { transform:translate(0, 0); }
to { transform:translate(0, calc(20/1500*100vw)); }
}

@keyframes floating2 {
from { transform:translate(0, 0); }
50% { transform:translate(0, calc(20/1500*100vw)); }
to { transform:translate(0, 0); }
}
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#bubble-1 { background-image:url('../images/bubble_1@2x.png'); }
#bubble-2 { background-image:url('../images/bubble_2@2x.png'); }
#bubble-3 { background-image:url('../images/bubble_3@2x.png'); }
#bubble-4 { background-image:url('../images/bubble_4@2x.png'); }
#bubble-5 { background-image:url('../images/bubble_5@2x.png'); }
#bubble-6 { background-image:url('../images/bubble_6@2x.png'); }
#bubble-7 { background-image:url('../images/bubble_7@2x.png');}
#bubble-8 { background-image:url('../images/bubble_8@2x.png'); }
#bubble-9 {background-image:url('../images/bubble_9@2x.png'); }
}

/* ============ smart phone ============ */
@media screen and (max-width:750px){
#bubble-1 { width:calc(201/750*100vw); height:calc(288/750*100vw); background-image:url('../images/bubble_1_sp.png'); top:calc(1795/750*100vw); }
#bubble-2 { width:calc(230/750*100vw); height:calc(407/750*100vw); background-image:url('../images/bubble_2_sp.png'); top:calc(2590/750*100vw); right:auto; left:0; }
#bubble-3 { width:calc(184/750*100vw); height:calc(373/750*100vw); background-image:url('../images/bubble_3_sp.png'); top:calc(4417/750*100vw); right:auto; left:0; }
#bubble-4 { width:calc(223/750*100vw); height:calc(441/750*100vw); background-image:url('../images/bubble_4_sp.png'); top:calc(5724/750*100vw); right:auto; left:0; }
#bubble-5 { width:calc(295/750*100vw); height:calc(371/750*100vw); background-image:url('../images/bubble_5_sp.png'); top:calc(1875/750*100vw); right:auto; right:0; }
#bubble-6 { width:calc(202/750*100vw); height:calc(223/750*100vw); background-image:url('../images/bubble_6_sp.png'); top:calc(2150/750*100vw); right:0; left:auto; }
#bubble-7 { width:calc(226/750*100vw); height:calc(417/750*100vw); background-image:url('../images/bubble_7_sp.png'); top:calc(3325/750*100vw); right:0; left:auto;  }
#bubble-8 { width:calc(233/750*100vw); height:calc(337/750*100vw); background-image:url('../images/bubble_8_sp.png'); top:calc(5960/750*100vw); right:0; left:auto; }
#bubble-9 {  width:calc(396/750*100vw); height:calc(523/750*100vw); background-image:url('../images/bubble_9_sp.png'); top:calc(6035/750*100vw); right:0; left:auto; }


/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#bubble-1 { background-image:url('../images/bubble_1_sp@2x.png'); }
#bubble-2 { background-image:url('../images/bubble_2_sp@2x.png'); }
#bubble-3 { background-image:url('../images/bubble_3_sp@2x.png'); }
#bubble-4 { background-image:url('../images/bubble_4_sp@2x.png'); }
#bubble-5 { background-image:url('../images/bubble_5_sp@2x.png'); }
#bubble-6 { background-image:url('../images/bubble_6_sp@2x.png'); }
#bubble-7 { background-image:url('../images/bubble_7_sp@2x.png'); }
#bubble-8 { background-image:url('../images/bubble_8_sp@2x.png'); }
#bubble-9 { background-image:url('../images/bubble_9_sp@2x.png'); }
}
}