@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');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

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

  /product/premium/css/premium.css

======================================================================== */
.img, .photo { font-size:0; }
img { width:100%; }
p.txt { line-height:calc(40/19); letter-spacing:0.025em; font-size:20px; font-size:2rem; word-break:normal; }
/* ============ smart phone ============ */
@media (max-width:750px){
p.txt { line-height:calc(56/28); font-size:calc(28/750*100vw); }
}
/************************************************************************
  main
************************************************************************/
#premium main { padding:0 0 180px; background:url('../images/bg.png') no-repeat; background-size:cover; color:#482d00; font-family:var(--shippori-mincho-b1-regular); }
#premium main .contents { box-sizing:content-box; }

#premium main h2, #premium main h3 { font-size:0; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#premium main { background-image:url('../images/bg@2x.png'); }
}
/* ============ smart phone ============ */
@media (max-width:750px){
#premium main { padding-bottom:calc(195/750*100vw); background-image:url('../images/bg_sp.png'); }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#premium main { background-image:url('../images/bg_sp@2x.png'); }
}
}
/************************************************************************
  #main-image
************************************************************************/
#main-image { font-size:0; }
#main-image .contents { margin:0; padding:0; max-width:initial; }
#main-image p.img { width:100%; aspect-ratio:1/0.446; }
#main-image p.img img { max-width:initial; }
/* .slick-slider */
.slick-slider { margin-bottom:0; }
/* ============ smart phone ============ */
@media (max-width:750px){
#main-image { padding-top:calc(120/750*100vw); }
#main-image p.img { width:100%; text-align:center; aspect-ratio:1/0.499; }
#main-image p.img img { margin:auto; /*width:auto;*/ height:100%; object-fit:cover; }
}
/************************************************************************
  #lead
************************************************************************/
#lead { padding:120px 0 0; }
#lead #h2-lead { margin:0 auto 40px; width:340px; height:104px; background:url('../images/h2_lead.png') no-repeat; background-size:100% auto; }
/* p.btn */
#lead p.btn { font-size:0; }
#lead p.btn a { margin:0 auto 100px; width:270px; height:45px; background:url('../images/btn_lineup.svg') no-repeat; background-size:100% auto; display:block; transition:0.5s; }
#lead p.btn:hover a { transform:translate(0,5px); cursor:pointer; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#lead h2 { background-image:url('../images/h2_lead@2x.png'); }
}
/* ============ smart phone ============ */
@media (max-width:750px){
#lead { padding:calc(120/750*100vw) 0 0; }
#lead #h2-lead { margin:0 auto calc(35/750*100vw); width:calc(374/750*100vw); height:calc(114/750*100vw); }
/* p.btn */
#lead p.btn a { margin:0 auto calc(100/750*100vw); width:calc(281/750*100vw); height:calc(44/750*100vw); }
}
/************************************************************************
  .layer
************************************************************************/
.layer { background:rgba(0, 0, 0, 0.45); display:flex; align-items:center; justify-content:center; z-index:9999; }
.layer nav { margin:0 auto; max-width:1100px; }
.layer nav ul { margin:0 50px; max-width:1000px; display:flex; justify-content:space-between; }
.layer nav ul li { width:47%; max-width:480px; text-align:center; }
.layer nav ul li a { color:#ffffff; }
.layer nav ul li p.img { margin-bottom:15px; }
.layer nav ul li img { border-radius:14px;  box-shadow:0px 0px 20px 0px rgba(47,48,48,0.2); }
/* .modal */
.modal__inner { padding:90px 0 50px; background:url('../images/bg_layer.png') no-repeat #ffffff center; background-size:cover; border-radius:20px; }
.modal__content { padding:0; }
.modal__button-wrap { top:-80px; right:0; }
/* .close-button */
.close-button { width:70px; height:70px; background-color:rgba(255,255,255,0.4); border-radius:10px; }
.close-button span { width:25px; height:6px; background-color:#655b41; border-radius:0; }
/* ============ smart phone ============ */
@media (max-width:750px){
.layer nav ul { width:calc(320/750*100vw); flex-direction:column; }
.layer nav ul li { width:auto; }
.layer nav ul li:not(:last-child) { margin-bottom:calc(40/750*100vw); }
.layer nav ul li p.img { margin-bottom:calc(5/750*100vw); }
.layer nav ul li p.txt { letter-spacing:0.075em; font-size:calc(18/750*100vw); }
/* .modal */
.modal { min-width:initial; }
.modal__inner { padding:calc(80/750*100vw) 0 calc(60/750*100vw); background-size:cover; border-radius:calc(30/750*100vw); }
.modal__button-wrap { top:calc(-100/750*100vw); }
/* .close-button */
.close-button { width:calc(70/750*100vw); height:calc(70/750*100vw); border-radius:calc(10/750*100vw); }
.close-button span { margin:auto; width:calc(35/750*100vw); height:calc(8/750*100vw); right:0; left:0; }
}
/************************************************************************
  a.icon
************************************************************************/
a.icon::after { content:''; margin-left:15px; width:7px; height:12px; mask-position:center center; mask-repeat:no-repeat; mask-size:100% auto; mask-image:url('../images/icon_link.svg'); display:inline-block; transition:0.5s; }
a.icon:hover::after { transform:translate(5px,0); }

.layer nav ul li a.icon::after { background-color:rgba(255,255,255,0.5); }
.layer nav ul li:hover a.icon::after { transform:translate(5px,0); }

/* ============ smart phone ============ */
@media (max-width:750px){
a.icon::after { margin-left:calc(15/750*100vw); width:calc(7/750*100vw); height:calc(12/750*100vw); }

}
/************************************************************************
  #nama-bread
************************************************************************/
#nama-bread { padding:0 0 80px; }
#nama-bread h3 { margin:0 auto 40px; }
#nama-bread h3 span { margin:0 auto; width:254px; height:44px; background:url('../images/h3_nama_bread.png') no-repeat; background-size:100% auto; position:relative; display:block; }
#nama-bread h3::before { content:''; margin:0 auto; width:825px; height:387px; background:url('../images/h3_nama_bread_before.png') no-repeat; background-size:100% auto; display:block; }
/* .flex */
#nama-bread .flex { padding:40px 0 0; justify-content:space-between; }
#nama-bread .flex .txt { order:2; width:390px; }
#nama-bread .flex .photo { order:1; width:570px; }
/* ============ for high resolution ============ */
@media only screen and (-webkit-min-device-pixel-ratio:2){
#nama-bread h3 span { background-image:url('../images/h3_nama_bread@2x.png'); }
#nama-bread h3::before { background-image:url('../images/h3_nama_bread_before@2x.png'); }
}
/* ============ smart phone ============ */
@media (max-width:750px){
#nama-bread { padding:0 0 calc(80/750*100vw); }
#nama-bread h3 { margin:0 auto calc(55/750*100vw); }
#nama-bread h3 span { margin:0 auto; width:calc(304/750*100vw); height:calc(53/750*100vw); }
#nama-bread h3::before { width:calc(660/750*100vw); height:calc(324/750*100vw); }
/* .flex */
#nama-bread .flex { padding:calc(40/750*100vw) 0 0; flex-direction:column; }
#nama-bread .flex .photo { margin-bottom:calc(40/750*100vw); width:auto; }
#nama-bread .flex .txt { width:auto; }
}
/************************************************************************
  .marker
************************************************************************/
strong.marker { background:linear-gradient(transparent 50%, rgba(206,150,22,0.15) 50%); font-weight:normal; word-break:normal; line-height:1; position:relative; }
/************************************************************************
  #voice
************************************************************************/
#voice { padding:0 0 180px; }
#voice h2#h2-voice { margin:0 auto 15px; padding-bottom:5px; height:65px; background-image:none; color:#ffffff; text-align:center; letter-spacing:0.01em; font-family:var(--noto-serif); font-weight:400; font-size:20px; font-size:2rem; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; }
#voice h2#h2-voice span { margin-top:-10px; display:inline-block; }
#voice h2#h2-voice::after { content:''; margin:auto; width:307px; height:65px; background:url('../images/bg_h2_voice.svg') no-repeat; background-size:100% auto; display:inline-block; position:absolute; right:0; left:0; z-index:-1; }
main #voice h3 { margin:0 auto 25px; text-align:center; font-weight:700; font-size:22px; font-size:2.2rem; }
/* ul */
#voice ul { margin:0 auto; width:880px; display:flex; justify-content:space-between; }
#voice ul li { padding-bottom:50px; position:relative; }
#voice ul li p.txt { line-height:calc(26/15); font-size:16px; font-size:1.6rem; }
/* .box */
.box { margin:auto; padding:0 0 20px; width:1000px; background-color:#fbfbfb; color:#533707; border-radius:14px; filter:drop-shadow(0 0 20px rgba(47, 48, 48, 0.12)); }
/* .fukidashi */
.fukidashi { padding:30px 35px; width:420px; background-color:rgba(245,235,212,0.7); border-radius:10px; font-family:var(--noto-sans); word-break:normal; position:relative; }
.fukidashi::after { content:''; margin:auto; width:35px; height:21px; background-color:rgba(245,235,212,0.7); clip-path:polygon(0 0, 65% 0, 82% 90%); position:absolute; bottom:-21px; left:250px; }
/* img */
#voice ul li .img { position:absolute; bottom:5px; }
#voice-001 { right:0; }
#voice-001 img { width:116px; }
#voice-002 { right:10px; }
#voice-002 img { width:94px; }
/* p.note */
#voice p.note { margin:0 auto; width:880px; font-weight:500; font-family:var(--noto-sans); }
#voice p.note small { font-size:14px; font-size:1.4rem; }
/* ============ smart phone ============ */
@media (max-width:750px){
#voice { padding-bottom:calc(180/750*100vw); }
#voice h2#h2-voice { margin-bottom:calc(30/750*100vw); height:calc(76/750*100vw); font-size:calc(28/750*100vw); }
#voice h2#h2-voice::after { /*margin-bottom:calc(20/750*100vw);*/ padding-bottom:0; width:calc(307/750*100vw); height:calc(76/750*100vw); background-image:url('../images/bg_h2_voice_sp.svg'); }
#voice h2#h2-voice span { margin-top:calc(-10/750*100vw); }
main #voice h3 { margin:0 auto 25px; font-size:calc(30/750*100vw); }
/* .box */
.box { padding:0 0 20px; width:auto; }
/* ul */
#voice ul { width:auto; flex-direction:column;}
#voice ul li { padding-bottom:calc(60/750*100vw); }
#voice ul li p.txt { line-height:calc(42/24); font-size:calc(24/750*100vw); }
#voice ul li p.txt span { display:block; }
/* p.note */
#voice p.note { padding-top:calc(10/750*100vw); width:calc(590/750*100vw); }
#voice p.note small { font-size:calc(20/750*100vw); }
/* .fukidashi */
.fukidashi { margin:0 auto; padding:calc(40/750*100vw) calc(45/750*100vw); width:calc(590/750*100vw); border-radius:10px; }
.fukidashi::after { display:none; }
/* img */
#voice ul li .img { bottom:calc(20/750*100vw); }
#voice-001 { right:calc(15/750*100vw); }
#voice-001 img { width:calc(200/750*100vw); }
#voice-002 { bottom:calc(-15/750*100vw) !important; right:calc(15/750*100vw); }
#voice-002 img { width:calc(167/750*100vw); }
}
/************************************************************************
  #tvcm
************************************************************************/
#tvcm { padding:0 0 140px; text-align:center; }
#tvcm h2 { margin:0 auto 45px; width:187px; height:43px; background:url('../images/h2_tvcm.svg') no-repeat; background-size:100% auto; }

#tvcm .dummy { margin:0 auto; width:792px; }
main #tvcm h3 { font-size:22px; font-size:2.2rem; }
#tvcm .text { padding:15px 0 0; }
/* ============ smart phone ============ */
@media (max-width:750px){
#tvcm .dummy { margin:0 0 0 calc(-16/750*100vw); width:auto; }
#tvcm .dummy p.img { width:calc(722/750*100vw) }
#tvcm h2 { margin:0 auto calc(50/750*100vw); width:calc(220/750*100vw); height:calc(52/750*100vw); }
main #tvcm h3 { font-weight:700; font-size:calc(28/750*100vw); }
#tvcm .text { padding:calc(20/750*100vw) 0 0;  }
#tvcm p.txt { font-weight:700; font-size:calc(20/750*100vw); }
}
/************************************************************************
  #interview
************************************************************************/
#interview { text-align:center; }
#interview .dummy { margin:0 auto; width:792px; }
#interview h2 { margin:0 auto 45px; width:341px; height:42px; background:url('../images/h2_interview.svg') no-repeat; background-size:100% auto; }
main #interview h3 { font-size:22px; font-size:2.2rem; }
#interview .text { padding:15px 0 0; }
/* ============ smart phone ============ */
@media (max-width:750px){
#interview .dummy { margin-left:calc(-16/750*100vw); width:auto; }
#interview .dummy p.img { width:calc(722/750*100vw) }
#interview h2 { margin:0 auto calc(40/750*100vw); width:calc(400/750*100vw); height:calc(52/750*100vw); }
main #interview h3 { font-weight:700; font-size:calc(28/750*100vw); }
#interview .text { padding:calc(20/750*100vw) 0 0; }
}
/************************************************************************
  .movie
************************************************************************/
.movie { margin:0 auto; width:760px; border:2px solid rgba(242,228,188,0.6); font-size:0; box-shadow:0px 0px 20px 0px rgba(47,48,48,0.12); border-radius:14px; aspect-ratio:1/0.563; }
.movie iframe { width:100%; height:100%; border-radius:14px; }
/*.movie { display:none; }*/
.dummy { display:none; }
/* ============ smart phone ============ */
@media (max-width:750px){
.movie { width:auto; }
}
/************************************************************************
  #banner-campaign
************************************************************************/
#banner-campaign { position:fixed; bottom:30px; right:30px; z-index:9999; }
#banner-campaign.close { display:none; }
/* .close-button */
#banner-campaign .close-button { width:24px; height:24px; background-color:rgba(255,255,255,1); border:1px solid #e4e0d5;  border-radius:50%; filter:drop-shadow(0 0 10px rgba(47, 48, 48, 0.12));  position:absolute; top:0; right:0; }
#banner-campaign .close-button span { margin:auto; width:12px; height:2px; background-color:#9c804a; border-radius:0; right:0; left:0; }
/* ============ smart phone ============ */
@media (max-width:768px){
#banner-campaign { width:40%; height:auto; }
/* .close-button */
#banner-campaign .close-button { width:calc(40/750*100vw); height:calc(40/750*100vw); background-color:rgba(255,255,255,1); filter:drop-shadow(0 0 10px rgba(47, 48, 48, 0.12)); top:calc(-10/750*100vw); right:calc(-10/750*100vw); }
#banner-campaign .close-button span { width:calc(18/750*100vw); height:calc(3/750*100vw); }
}