@charset "utf-8";
@import url('animation.css');
@import url('slick.css');
@import url('http://fonts.googleapis.com/earlyaccess/notosansjp.css');
/* ========================================================================

  style.css

======================================================================== */
:root {
--noto-sans:"Noto Sans JP", sans-serif;
}

#omugitocoffee { font-family:var(--noto-san); font-weight:500; }
#omugitocoffee * { box-sizing:border-box;}
#omugitocoffee .content { margin:auto; width:min(calc(1000/1920*100vw), 1000px); }
#omugitocoffee hr { display:none; }
#omugitocoffee img { max-width:100%; }
/* .img */
#omugitocoffee p.img { font-size:0; }
/* .note */
#omugitocoffee p.note { text-align:right; }
#omugitocoffee p.note small { font-size:min(calc(12/1920*100vw), 12px); }
/* .flex */
#omugitocoffee .flex { display:flex; justify-content:space-between; align-items:center; }

.sp-only { display:none; }
/* ============ smart phone ============ */
@media (max-width:900px){
#omugitocoffee .content { margin:auto calc(15/375*100vw); width:auto; }
/* .note */
#omugitocoffee p.note small { font-size:calc(24/1125*100vw); }
/* .flex */
#omugitocoffee .flex { flex-direction:column; }

.sp-only { display:inherit; }
}
/************************************************************************
  #fv
************************************************************************/
#omugitocoffee #fv { /*height:calc(100vh - 70px);*/ height:calc(608/1440*100vw); background:url('../images/fv.png') no-repeat center; background-size:cover; }
#omugitocoffee #fv h2 { display:none; }
#omugitocoffee #fv h3 { display:none; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#omugitocoffee #fv { background-image:url('../images/fv@2x.png'); }
}
/* ============ smart phone ============ */
@media (max-width:900px){
#omugitocoffee #fv { height:calc(399/375*100vw); background-image:url('../images/fv_sp.png'); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#omugitocoffee #fv { background-image:url('../images/fv_sp@2x.png'); }
}
}
/************************************************************************
  #menu
************************************************************************/
#omugitocoffee #menu { height:60px; background-color:#ffffff; position:static; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 6px 0 rgba(0,0,0,0.16); }
#omugitocoffee #menu ul { display:flex; align-items:center; justify-content:center; }
#omugitocoffee #menu ul li { margin:0 min(calc(15/1920*100vw), 15px) 0 0; height:min(calc(30/1920*100vw), 30px); display:flex; align-items:center; position:relative; }
#omugitocoffee #menu ul li:not(:last-child)::after { content:''; margin:auto; margin:auto 0 auto min(calc(15/1920*100vw), 15px) ; width:1px; height:100%; background-color:#858A76; display:inline-block; }
#omugitocoffee #menu ul li a { background-repeat:no-repeat; background-size:100%; display:block; font-size:0; }

#omugitocoffee #menu ul li.nav-001 a { width:min(calc(55.57/1920*100vw), 55.57px); height:min(calc(13.5/1920*100vw), 13.5px); background-image:url('../images/nav_001.svg'); }
#omugitocoffee #menu ul li.nav-002 a { width:min(calc(170.38/1920*100vw), 170.38px); height:min(calc(14.4/1920*100vw), 14.4px); background-image:url('../images/nav_002.svg'); }
#omugitocoffee #menu ul li.nav-003 a { width:min(calc(45.86/1920*100vw), 45.86px); height:min(calc(14.3/1920*100vw), 14.3px); background-image:url('../images/nav_003.svg'); }
#omugitocoffee #menu ul li.nav-004 a { width:min(calc(34.11/1920*100vw), 34.11px); height:min(calc(12/1920*100vw), 12px); background-image:url('../images/nav_004.svg'); }
#omugitocoffee #menu ul li.nav-005 a { width:min(calc(93.5/1920*100vw), 93.5px); height:min(calc(13.97/1920*100vw), 13.97px); background-image:url('../images/nav_005.svg'); }
#omugitocoffee #menu ul li.nav-006 a { width:min(calc(43.44/1920*100vw), 43.44px); height:min(calc(14.53/1920*100vw), 14.53px); background-image:url('../images/nav_006.svg'); }

/* .fixed */
#omugitocoffee #menu.fixed { width:100%; position:fixed; top:0; z-index:10; }

/* ============ smart phone ============ */
@media (max-width:900px){
#omugitocoffee #menu { height:auto; }
#omugitocoffee #menu ul { margin:auto calc(15/375*100vw); padding:calc(5/375*100vw) 0; width:calc(345/375*100vw); flex-wrap:wrap; position:relative; }
#omugitocoffee #menu ul::before { content:''; margin:auto; width:calc(345/375*100vw); height:1px; background-color:#858A76; display:block; position:absolute; top:calc(38/375*100vw); right:0; left:0; } 
#omugitocoffee #menu ul li { margin:0; width:calc(110/375*100vw); height:calc(30/375*100vw); justify-content:center; position:relative; }
#omugitocoffee #menu ul li:nth-child(2),
#omugitocoffee #menu ul li:nth-child(5) { width:calc(125/375*100vw); }
#omugitocoffee #menu ul li:nth-child(1),
#omugitocoffee #menu ul li:nth-child(2),
#omugitocoffee #menu ul li:nth-child(3) { margin-bottom:calc(6/375*100vw) }
#omugitocoffee #menu ul li:not(:nth-child(3n))::after { height:calc(30/375*100vw); position:absolute; right:0; }
#omugitocoffee #menu ul li:nth-child(3n)::after { display:none; }
#omugitocoffee #menu ul li.nav-001 a { width:calc(55.57/375*100vw); height:calc(13.5/375*100vw); }
#omugitocoffee #menu ul li.nav-002 a { width:calc(92.46/375*100vw); height:calc(29.15/375*100vw); background-image:url('../images/nav_002_sp.svg'); }
#omugitocoffee #menu ul li.nav-003 a { width:calc(45.86/375*100vw); height:calc(14.3/375*100vw); }
#omugitocoffee #menu ul li.nav-004 a { width:calc(34.11/375*100vw); height:calc(12/375*100vw); }
#omugitocoffee #menu ul li.nav-005 a { width:calc(93.5/375*100vw); height:calc(13.97/375*100vw); }
#omugitocoffee #menu ul li.nav-006 a { width:calc(43.44/375*100vw); height:calc(14.53/375*100vw); }
}
/************************************************************************
  
************************************************************************/
#omugitocoffee h2 { margin:auto; background-repeat:no-repeat; background-size:100% auto; font-size:0; }
#omugitocoffee h3 { margin:auto; background-repeat:no-repeat; background-size:100% auto; font-size:0; }
a.anchor { margin-top:-150px; padding-top:150px; display:block; }
/* ============ smart phone ============ */
@media (max-width:900px){
a.anchor { margin-top:calc(-140/375*100vw); padding-top:calc(140/375*100vw); }
}
/************************************************************************
  #about
************************************************************************/
#about { padding-top:min(calc(75/1920*100vw), 75px); background-color:#a9d1ca; overflow:hidden; }
#about h2 { width:min(calc(76.67/1920*100vw), 76.67px); height:min(calc(26.79/1920*100vw), 26.79px); background-image:url('../images/h2_about.svg'); position:relative; z-index:1; }
/* ============ smart phone ============ */
@media (max-width:900px){
#about { padding-top:calc(30/375*100vw); }
#about h2 { width:calc(58.84/375*100vw); height:calc(20.56/375*100vw); }
}
/************************************************************************
  #new
************************************************************************/
#new { padding-bottom:min(calc(30/1920*100vw), 30px); position:relative; z-index:0; }
#new::after { content:''; margin:auto; width:100vw; height:calc(472/1920*100vw); background:url('../images/bg_new.png') repeat-x center bottom; background-size:100% auto; display:block; position:absolute; bottom:0; /*right:0;*/ right:-25vw; left:-25vw; z-index:-1; }
#new h3 { margin-bottom:min(calc(20/1920*100vw), 20px); width:min(calc(408/1920*100vw), 408px); height:min(calc(119/1920*100vw), 119px); background-image:url('../images/h3_new.svg'); }
#new .flex { flex-direction:column; }
#new h4 { order:2; color:#603117; font-weight:700; font-size:min(calc(32/1920*100vw), 32px); }
#new h4 span, #new h4 span sub { font-size:min(calc(24/1920*100vw), 24px); }
#new p.img { order:1; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#new::after { background-image:url('../images/bg_new@2x.png'); }
}
/* ============ smart phone ============ */
@media (max-width:900px){
#new { padding-bottom:calc(20/375*100vw); }
#new::after { height:calc(330/375*100vw); background-image:url('../images/bg_new_sp.png'); }
#new h3 { margin-bottom:calc(15/375*100vw); width:calc(299.56/375*100vw); height:auto; aspect-ratio:407.905/127.416; }
#photo-new { width:calc(161.66/375*100vw); }
#new h4 { font-size:calc(24/375*100vw); }
#new h4 span, #new h4 span sub { font-size:calc(18/375*100vw); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#new::after { background-image:url('../images/bg_new_sp@2x.png'); }
}
}
/************************************************************************
  #kodawari
************************************************************************/
#kodawari { padding:min(calc(80/1920*100vw), 80px) 0 min(calc(70/1920*100vw), 70px); background-color:#CEB18D; color:#603117; }
#kodawari h3 { margin-bottom:min(calc(25/1920*100vw), 25px); width:min(calc(227.14/1920*100vw), 227.14px); height:min(calc(74/1920*100vw), 74px); background-image:url('../images/h3_kodawari.svg'); }
#kodawari .flex { margin:auto; width:min(calc(605/1920*100vw), 605px); }
#kodawari .flex .photo { order:1; width:min(calc(290/1920*100vw), 290px); }
#kodawari .flex .photo .img { margin-bottom:min(calc(50/1920*100vw), 50px); }
#kodawari p.txt small { font-weight:500; font-size:min(calc(10/1920*100vw), 10px); }
/* dl */
#kodawari dl { order:2; width:min(calc(288/1920*100vw), 288px); }
#kodawari dl dt { margin-bottom:min(calc(10/1920*100vw), 10px); width:min(calc(288/1920*100vw), 288px); height:min(calc(26/1920*100vw), 26px); background-repeat:no-repeat; background-size:100% auto; font-size:0; }
#kodawari dl dd { margin-bottom:min(calc(15/1920*100vw), 15px); font-weight:700; font-size:min(calc(16/1920*100vw), 16px); }
#kodawari dl dt.kodawari-001 { background-image:url('../images/kodawari_001.svg'); }
#kodawari dl dt.kodawari-002 { background-image:url('../images/kodawari_002.svg'); }
#kodawari dl dt.kodawari-003 { background-image:url('../images/kodawari_003.svg'); }
/* ============ smart phone ============ */
@media (max-width:900px){
#kodawari { /*margin-top:calc(-150/375*100vw);*/ padding:calc(40/375*100vw) 0 calc(20/375*100vw); position:relative; }
#kodawari .content { margin:0; }
#kodawari h3 { margin-bottom:calc(10/375*100vw); width:calc(227.14/375*100vw); height:calc(74/375*100vw); }
#kodawari .flex { width:auto; flex-direction:row; }
#kodawari .photo p.txt { width:100%; text-align:center; position:absolute; bottom:calc(15/375*100vw); }
#kodawari p.txt small { font-size:calc(10/375*100vw); }
#photo-kodawari { width:calc(160/375*100vw); height:calc(290/375*100vw); }
#photo-kodawari img { height:100%; object-fit:cover; object-position:100% 0;  }

/* dl */
#kodawari dl { order:2; padding-bottom:calc(10/375*100vw); width:calc(206/375*100vw); }
#kodawari dl dt { margin-bottom:calc(10/375*100vw); width:calc(206/375*100vw); height:calc(26/375*100vw); }
#kodawari dl dd { margin-bottom:calc(15/375*100vw); font-size:calc(14/375*100vw); }
#kodawari dl dt.kodawari-001 { background-image:url('../images/kodawari_001_sp.svg'); }
#kodawari dl dt.kodawari-002 { background-image:url('../images/kodawari_002_sp.svg'); }
#kodawari dl dt.kodawari-003 { background-image:url('../images/kodawari_003_sp.svg'); }
}
/************************************************************************
  #future
************************************************************************/
#future { padding:min(calc(75/1920*100vw), 75px) 0 min(calc(85/1920*100vw), 85px); background:url('../images/bg_future.png') no-repeat center bottom #858a76; background-size:100% auto; color:#ffffff; text-align:center; }
#future .content { padding-bottom:min(calc(120/1920*100vw), 120px); }
#future h2 { margin-bottom:min(calc(25/1920*100vw), 25px); width:min(calc(74.55/1920*100vw), 74.55px); height:min(calc(23.73/1920*100vw), 23.73px); background-image:url('../images/h2_future.svg'); }
#future h3 { margin-bottom:min(calc(25/1920*100vw), 25px); color:#FCF3E4; font-weight:700; font-size:min(calc(30/1920*100vw), 30px); }
/* #photo-future */
#photo-future { margin:auto auto min(calc(55/1920*100vw), 55px); width:min(calc(498/1920*100vw), 498px); position:relative; }
#photo-future::before,
#photo-future::after { content:''; background-repeat:no-repeat; background-size:100% auto; display:block; position:absolute; }
#photo-future::before { width:min(calc(52/1920*100vw), 52px); height:min(calc(82/1920*100vw), 82px); background-image:url('../images/photo_future_b.png'); bottom:min(calc(-20/1920*100vw), -20px); left:min(calc(-70/1920*100vw), -70px); }
#photo-future::after { width:min(calc(53/1920*100vw), 53px); height:min(calc(62/1920*100vw), 62px); background-image:url('../images/photo_future_a.png'); top:min(calc(-10/1920*100vw), -10px); right:min(calc(-70/1920*100vw), -70px); }
#future p.txt { line-height:calc(26/16); font-weight:500; font-size:min(calc(16/1920*100vw), 16px);  }
#future p.txt:not(:last-child) { margin-bottom:1em; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#future { background-image:url('../images/bg_future@2x.png'); }
#photo-future::before { background-image:url('../images/photo_future_b@2x.png'); }
#photo-future::after { background-image:url('../images/photo_future_a@2x.png'); }
}
/* ============ smart phone ============ */
@media (max-width:900px){
#future { padding:calc(40/375*100vw) 0 calc(60/375*100vw); background-image:url('../images/bg_future_sp.png'); }
#future .content { padding-bottom:calc(95/375*100vw); }
#future h2 { margin-bottom:calc(10/375*100vw); width:calc(74.55/375*100vw); height:calc(23.73/375*100vw); }
#future h3 { margin-bottom:calc(25/375*100vw); font-size:calc(30/375*100vw); }
#future p.txt { font-size:calc(14/375*100vw); }
/* #photo-future */
#photo-future { margin:auto auto calc(30/375*100vw); width:calc(227/375*100vw); }
#photo-future::before { width:calc(52/375*100vw); height:calc(81.38/375*100vw); bottom:calc(-35/375*100vw); left:calc(-48/375*100vw); }
#photo-future::after { width:calc(52.35/375*100vw); height:calc(61.21/375*100vw); top:calc(-10/375*100vw); right:calc(-50/375*100vw); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#future { background-image:url('../images/bg_future_sp@2x.png'); }
}
}
/************************************************************************
  .gallery
************************************************************************/
.gallery { margin:0; padding:0; font-size:0; position:relative; z-index:0; }
.gallery::before { content:''; margin:auto; width:calc(167.17/1920*100vw); height:calc(98.18/1920*100vw); background:url('../images/gallery_before.svg') no-repeat; background-size:100%  auto; display:block; position:absolute; top:calc(-80/1920*100vw); right:0; left:0; z-index:1; }
.gallery li { margin:0; padding:0; width:calc(193/1920*100vw); font-size:0; }
.gallery li img { width:100%; max-width:initial; }
/* ============ smart phone ============ */
@media (max-width:900px){
.gallery { height:calc(90/375*100vw); }
.gallery::before { width:calc(108.21/375*100vw); height:calc(63.55/375*100vw); top:calc(-50/375*100vw); }
.gallery li { /*width:calc(125/375*100vw) !important;*/ height:calc(90/375*100vw); }
}
/************************************************************************
  #how-to
************************************************************************/
#how-to { padding:min(calc(75/1920*100vw), 75px) 0 min(calc(85/1920*100vw), 85px); background-color:#9AC1BC; }
#how-to h2 { margin-bottom:min(calc(10/1920*100vw), 10px); width:min(calc(58.15/1920*100vw), 58.15px); height:min(calc(22.44/1920*100vw), 22.44px); background-image:url('../images/h2_how_to.svg'); }
#how-to h3 { margin-bottom:min(calc(25/1920*100vw), 25px); color:#603117; text-align:center; font-weight:700; font-size:min(calc(30/1920*100vw), 30px); }
#how-to h4 { margin-bottom:min(calc(10/1920*100vw), 10px); padding:0.3em 0.8em 0.2em; color:#ffffff; border-radius:min(calc(5/1920*100vw), 5px); line-height:1; font-weight:700; font-size:min(calc(22/1920*100vw), 22px); }
#how-to #hot, #how-to #ice { margin:0 auto; width:min(calc(605/1920*100vw), 605px); display:flex; justify-content:space-between; align-items:center; }
#how-to #hot .img { order:1; }
#how-to #hot .text { order:2; }
#how-to #hot .text, #how-to #ice .text { width:min(calc(295/1920*100vw), 295px); }
#how-to #hot .img, #how-to #ice .img { width:min(calc(270/1920*100vw), 270px); }
#how-to #hot h4 { background-color:#D16230; }
#how-to #ice h4 { background-color:#2E7683; }
/* ol */
#how-to ol { margin:0 0 0 min(calc(10/1920*100vw), 10px); color:#ffffff; font-weight:700; font-size:min(calc(16/1920*100vw), 16px); }
#how-to ol li:not(:last-child) { margin-bottom:min(calc(15/1920*100vw), 15px) }
#how-to ol li strong { padding:0 0 0.1em; border-bottom:1px solid #ffffff; }
#how-to ol li::before { content:''; margin-right:min(calc(5/1920*100vw), 5px); background-repeat:no-repeat; background-size:100% auto; display:inline-block; }
#how-to ol li:nth-child(1)::before { width:min(calc(17.95/1920*100vw), 17.95px); height:min(calc(24.29/1920*100vw), 24.29px); background-image:url('../images/no1.svg'); }
#how-to ol li:nth-child(2)::before { width:min(calc(19.54/1920*100vw), 19.54px); height:min(calc(24.55/1920*100vw), 24.55px); background-image:url('../images/no2.svg'); }
/* ============ smart phone ============ */
@media (max-width:900px){
#how-to { padding:calc(40/375*100vw) 0 calc(100/375*100vw); }
#how-to h2 { margin-bottom:calc(10/375*100vw); width:calc(58.15/375*100vw); height:calc(22.44/375*100vw); }
#how-to h3 { margin-bottom:calc(40/375*100vw); font-size:calc(30/375*100vw); }
#how-to h4 { margin-bottom:calc(10/375*100vw); border-radius:calc(5/375*100vw); font-size:calc(22/375*100vw); }
#how-to #hot { padding-bottom:calc(65/375*100vw); }
#how-to #hot, #how-to #ice { width:auto; }
#how-to #hot .text, #how-to #ice .text { width:calc(190/375*100vw); }
/* ol */
#how-to ol { margin:0 0 0 min(calc(10/1920*100vw), 10px); font-size:calc(14/375*100vw); }
#how-to ol li:not(:last-child) { margin-bottom:calc(15/375*100vw); }
#how-to ol li::before { margin-right:calc(10/375*100vw); }
#how-to ol li:nth-child(1)::before { width:calc(17.95/375*100vw); height:calc(24.29/375*100vw); }
#how-to ol li:nth-child(2)::before { width:calc(19.54/375*100vw); height:calc(24.55/375*100vw); }
#how-to ol li:nth-child(1) { margin-left:calc((17.95 + 10)/375*100vw); text-indent:calc((-17.95 - 10)/375*100vw); }
#how-to ol li:nth-child(2) { margin-left:calc((19.54 + 10)/375*100vw); text-indent:calc((-19.54 - 10)/375*100vw); }

#how-to #hot .img, #how-to #ice .img { width:calc(160/375*100vw); height:calc(180/375*100vw); }
#how-to p.img img { height:100%; object-fit:cover; position:relative; }
#how-to #hot p.img img { left:calc(-15/375*100vw); object-position:100% 0; }
#how-to #ice p.img img { right:calc(-15/375*100vw); object-position:0 100%; }
}
/************************************************************************
  #qa
************************************************************************/
#qa { padding:min(calc(75/1920*100vw), 75px) 0 min(calc(85/1920*100vw), 85px); background-color:rgba(154,193,188,0.4); position:relative; }
#qa::before,
#qa::after { content:''; background-repeat:no-repeat; background-size:100% auto; position:absolute; }
#qa::before { width:min(calc(330/1920*100vw), 330px); height:min(calc(385/1920*100vw), 385px); background-image:url('../images/photo_qa_b.png'); top:calc(-115/1920*100vw); left:0; }
#qa::after { width:min(calc(87/1920*100vw), 87px); height:min(calc(174/1920*100vw), 174px); background-image:url('../images/photo_qa_a.png'); bottom:calc(-80/1920*100vw); right:0; }

#qa h2 { margin-bottom:min(calc(10/1920*100vw), 10px); width:min(calc(55.87/1920*100vw), 55.87px); height:min(calc(23.86/1920*100vw), 23.86px); background-image:url('../images/h2_qa.svg'); }
#qa h3 { margin-bottom:min(calc(25/1920*100vw), 25px); color:#858A76; text-align:center; font-weight:700; font-size:min(calc(30/1920*100vw), 30px); }
#qa h4 { color:#9AC1BC; font-weight:700; font-size:min(calc(16/1920*100vw), 16px); display:flex; align-items:center; position:relative; }
#qa h4::after { content:''; width:min(calc(15.212/1920*100vw), 15.212px); height:min(calc(15.212/1920*100vw), 15.212px); background-image:url('../images/icon_qa.svg'); background-size:100% auto; display:block; position:absolute; top:min(calc(15/1920*100vw), 15px); right:min(calc(20/1920*100vw), 30px); transition:0.5s; }
#qa h4 strong { margin-right:min(calc(15/1920*100vw), 15px); width:min(calc(46/1920*100vw), 46px); height:min(calc(46/1920*100vw), 46px); background-image:url('../images/icon_Q.svg'); background-repeat:no-repeat; background-size:100% auto; display:inline-block; font-size:0; }

#qa p.txt { color:#858A76; line-height:calc(25/16); font-weight:400; font-size:min(calc(16/1920*100vw), 16px); display:flex; }
#qa p.txt strong { margin-right:min(calc(15/1920*100vw), 15px); width:min(calc(46/1920*100vw), 46px); height:min(calc(46/1920*100vw), 46px); background-image:url('../images/icon_A.svg'); background-repeat:no-repeat; background-size:100% auto; display:inline-block; font-size:0; }
#qa p.txt span { padding-right:min(calc(50/1920*100vw), 50px); width:min(calc(100% - (46/1920*100vw)), calc(100% - 46px)); display:inline-block; }
/* ul */
#qa ul { margin:auto;  width:min(calc(605/1920*100vw), 605px);  }
#qa ul li { padding:min(calc(10/1920*100vw), 10px); background-color:#ffffff; border-radius:min(calc(5/1920*100vw), 5px); }
#qa ul li:not(:last-child) { margin-bottom:min(calc(25/1920*100vw), 25px); }
/* .box */
#qa ul li .box { display:none; }
#qa ul li p.img { padding:min(calc(10/1920*100vw), 10px) 0; text-align:center; }
/* .active */
#qa ul li.active .box { display:block; opacity:1; }
#qa ul li.active h4 { margin-bottom:min(calc(10/1920*100vw), 10px); padding:0 0 min(calc(10/1920*100vw), 10px); border-bottom:1px solid #9AC1BC; }
#qa ul li.active h4::after { transform:rotate(180deg); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#qa::before { background-image:url('../images/photo_qa_b@2x.png'); }
#qa::after { background-image:url('../images/photo_qa_a@2x.png'); }
}
/* ============ smart phone ============ */
@media (max-width:900px){
#qa { padding:calc(45/375*100vw) 0 calc(60/375*100vw); }
#qa::before { width:calc(205/375*100vw); height:calc(239/375*100vw); top:calc(-85/375*100vw); }
#qa::after { width:calc(54/375*100vw); height:calc(108/375*100vw); bottom:calc(-40/375*100vw); }
#qa h2 { margin-bottom:calc(10/375*100vw); width:calc(55.87/375*100vw); height:calc(23.86/375*100vw); }
#qa h3 { margin-bottom:calc(35/375*100vw); font-size:calc(30/375*100vw); }
#qa h4 { font-size:calc(14/375*100vw); }
#qa h4::after { width:calc(12/375*100vw); height:calc(12/375*100vw); top:calc(12/375*100vw); right:calc(10/375*100vw); }
#qa h4 strong { margin-right:calc(10/375*100vw); width:calc(36/375*100vw); height:calc(36/375*100vw); }
#qa h4 span { width:calc(100% - ((36 + 10 + 35)/375*100vw)); display:inline-block; }
/* ul */
#qa ul { margin:auto; width:calc(315/375*100vw); }
#qa ul li { padding:calc(5/375*100vw) calc(10/375*100vw); border-radius:calc(5/375*100vw); }
#qa ul li p.img { padding:calc(10/375*100vw) 0; }
/* p.txt */
#qa p.txt { font-size:calc(14/375*100vw); }
#qa p.txt strong { margin-right:calc(10/375*100vw); width:calc(36/375*100vw); height:calc(36/375*100vw); }
#qa p.txt span { width:calc(100% - ((36 + 10)/375*100vw));  }
}
/************************************************************************
  #line-up
************************************************************************/
#line-up { padding:min(calc(75/1920*100vw), 75px) 0 min(calc(85/1920*100vw), 85px); }
#line-up h2 { margin-bottom:min(calc(10/1920*100vw), 10px); width:min(calc(84.48/1920*100vw), 84.48px); height:min(calc(28.02/1920*100vw), 28.02px); background-image:url('../images/h2_line_up.svg'); }
#line-up h3 { margin-bottom:min(calc(55/1920*100vw), 55px); color:#9AC1BC; text-align:center; font-weight:700; font-size:min(calc(30/1920*100vw), 30px); }
/* ul */
#line-up ul { margin:0 auto; width:min(calc(605/1920*100vw), 605px); display:flex; justify-content:space-between; }
#line-up ul li { width:50%; text-align:center; font-weight:700; font-size:min(calc(22/1920*100vw), 22px); display:flex; flex-direction:column; }
#line-up ul li p.txt, #line-up ul li p.txt sub { color:#603117; font-weight:700; font-size:min(calc(22/1920*100vw), 22px); }
#line-up ul li p.txt { order:2; margin-bottom:min(calc(20/1920*100vw), 20px); }
#line-up ul li p.img { order:1; margin-bottom:min(calc(20/1920*100vw), 20px); }
/* .link */
#line-up ul li p.txt.link { order:3; color:#9AC1BC; font-size:min(calc(16/1920*100vw), 16px);}
#line-up ul li p.txt.link a { margin:auto; width:min(calc(162/1920*100vw), 162px); height:min(calc(42/1920*100vw), 42px); color:#9AC1BC; border:1px solid #9AC1BC; border-radius:min(calc(20/1920*100vw), 20px); display:flex; align-items:center; justify-content:center; }
/* ============ smart phone ============ */
@media (max-width:900px){
#line-up { padding:calc(45/375*100vw) 0 calc(50/375*100vw); }
#line-up h2 { margin-bottom:calc(15/375*100vw); width:calc(84.48/375*100vw); height:calc(28.02/375*100vw); }
#line-up h3 { margin-bottom:calc(40/375*100vw); font-size:calc(30/375*100vw); }
/* ul */
#line-up ul  { width:calc(275/375*100vw); }
#line-up ul li { justify-content:flex-end; }
#line-up ul li p.txt { margin-bottom:calc(15/375*100vw); font-size:calc(16/375*100vw); }
#line-up ul li p.txt, #line-up ul li p.txt sub { font-size:calc(16/375*100vw); }
#line-up ul li p.img { margin:0 auto calc(15/375*100vw); width:calc(76.86/375*100vw); text-align:center; }
/* .link */
#line-up ul li p.txt.link { font-size:calc(12/375*100vw);}
#line-up ul li p.txt.link a { width:calc(115/375*100vw); height:calc(30/375*100vw); border-radius:calc(118/375*100vw); }
}
/************************************************************************
  #online-shop
************************************************************************/
#online-shop { padding:min(calc(75/1920*100vw), 75px) 0 min(calc(85/1920*100vw), 85px); background-color:#858A76; }
#online-shop h2 { margin-bottom:min(calc(10/1920*100vw), 10px); width:min(calc(106.49/1920*100vw), 106.49px); height:min(calc(28.38/1920*100vw), 28.38px); background-image:url('../images/h2_online_shop.svg'); }
#online-shop h3 { margin-bottom:min(calc(25/1920*100vw), 25px); color:#FCF3E4; text-align:center; font-weight:700; font-size:min(calc(30/1920*100vw), 30px); }
#online-shop p.note { margin-bottom:min(calc(45/1920*100vw),  45px); text-align:center; }
#online-shop p.note small { color:#ffffff; font-weight:500; font-size:min(calc(10/1920*100vw), 10px); }
/* ul */
#online-shop ul { margin:auto; width:min(calc(690/1920*100vw), 690px); display:flex; justify-content:space-between; }
#online-shop ul li { width:min(calc(319/1920*100vw), 319px); }
#online-shop ul li p.note { margin-bottom:0; padding-top:min(calc(5/1920*100vw), 5px); }
/* ============ smart phone ============ */
@media (max-width:900px){
#online-shop { padding:calc(45/375*100vw) 0 calc(55/375*100vw); background-color:#858A76; }
#online-shop h2 { margin-bottom:min(calc(10/1920*100vw), 10px); width:calc(84.48/375*100vw); height:calc(28.02/375*100vw); }
#online-shop h3 { margin-bottom:min(calc(25/1920*100vw), 25px); font-size:calc(30/375*100vw); }
#online-shop p.note { margin-bottom:calc(40/375*100vw); }
#online-shop p.note small { font-size:calc(10/375*100vw); }
/* ul */
#online-shop ul { width:calc(315/375*100vw); flex-direction:column; }
#online-shop ul li { width:auto; text-align:center; }
#online-shop ul li:not(:last-child) { margin-bottom:calc(35/375*100vw); }
#online-shop ul li p.note { padding-top:calc(10/375*100vw); }
}
/************************************************************************
  #btn-top
************************************************************************/
#top { margin-top:-140px; padding-top:140px; display:block; }
#btn-top { width:min(calc(60/1920*100vw), 60px); height:min(calc(60/1920*100vw), 60px); background:url('../images/btn_top.svg') no-repeat; background-size:100% auto; position:fixed; bottom:30px; right:55px; display:none; z-index:3; }
/* ============ smart phone ============ */
@media (max-width:900px){
#top { margin-top:-70px; padding-top:70px;  }
#btn-top { width:calc(60/375*100vw); height:calc(60/375*100vw); bottom:calc(15/375*100vw); right:calc(15/375*100vw);  }
}