html { font-size: 62.5% }
#sbf_contents,#sbf_contents * { padding:0; margin:0; font-weight:normal; text-decoration:none; border:none; list-style:none; box-sizing:border-box; vertical-align:bottom; line-height:100%; }
#sbf_contents,#sbf_contents * { font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, sans-serif; }
#sbf_contents { width:100%; }
.hide {position: absolute; top: 0; left: 0; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0;}
#sbf_contents ul,#sbf_contents ul li { display:block; }
/* ---- CSS Animation --------------------------------------------- */
#brand ul li a,
#wrap3 #mm .inner .link a,
#wrap3 #sns .inner .account .in a,
#sbf_footer .in h2 a,
#sbf_footer .in ul li a,
#sbf_footer .in a.eng,
#item_slider_1 .mask ul li a img,
#item_slider_1 .arrow a,
#item_slider_2 .mask ul li a img,
#sbf_header .in h2 a,
#sbf_header .in ul li a,
#wrap3 #sns .inner #suntory_id a,
#banner_slide_2.image_slide a.arrowr,
#banner_slide_2.image_slide a.arrowl,
#banner_slide_3.image_slide .arrowl,
#banner_slide_3.image_slide .arrowr,
#sbf_footer .in a.sbflogo { transition: all 300ms 0s ease; }
/* ---- /CSS Animation -------------------------------------------- */
#news { }
#news h2 { color:#545454; }
#news ul { }
#news ul li { background:url(../img/news_arrow.svg); background-repeat: no-repeat; }
#news ul li,#news ul li a { color:#545454; }
#brand { }
#brand h2 { color:#545454; background:url(../img/h2_icon.svg); background-repeat: no-repeat; }
#brand ul { }
#brand ul li a h3 { color:#545454; }
#brand ul li:nth-child(-n+10) a h3 { font-weight: bold; }
#brand ul li:nth-child(-n+10) a h3 span { font-weight: bold; }
#wrap1 { background:#e4f9ff; }
#wrap1 #campaign { position:relative; }
#wrap1 #campaign h2 { color:#545454; background:url(../img/h2_icon.svg); background-repeat: no-repeat; }
#wrap1 #cm { position:relative; }
#wrap1 #cm h2 { color:#545454; background:url(../img/h2_icon.svg); background-repeat: no-repeat; }
#wrap2 h2 { color:#545454; background:url(../img/h2_icon.svg); background-repeat: no-repeat; }
#wrap3 h2 { color:#545454; background:url(../img/h2_icon.svg); background-repeat: no-repeat; }
#wrap3 #sns .inner .account h3 { color:#545454; }
#sbf_contents a.list_link { display:inline-block; color:#57c3e0; border:1px solid #5bc2dc; background:#FFF; border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px; background-image:url(../img/news_arrow.svg); background-repeat:no-repeat; }
#item_slider_1 { border: 1px solid #e4f9ff; }
#item_slider_1,#item_slider_2 { opacity:0; }
#wrap3 #sns .inner #suntory_id h4 { color:#545454; }
#banner_slide_1.image_slide a.arrowl,#banner_slide_1.image_slide a.arrowr { display: none; }
#banner_slide_2.image_slide a:hover.arrowl { opacity:0.5; }
#banner_slide_2.image_slide a:hover.arrowr { opacity:0.5; }
#banner_slide_3.image_slide a:hover.arrowl { opacity:0.5; }
#banner_slide_3.image_slide a:hover.arrowr { opacity:0.5; }
@media screen and (min-width:768px)
{
/* ----------------------------------------------------------------------------------- */
/* PC */
/* ----------------------------------------------------------------------------------- */
#regist_box_back,#regist_box { display: none; }
#regist_box_back { background:rgba(0,0,0,0.5); width:100%; height:100%; position:fixed; left:0px; top:0px; z-index:1000; }
#regist_box { position: absolute; left:50%; margin-left:-200px; top:0px; z-index:1001; }
#regist_box,#regist_box * { box-sizing:border-box; }
#regist_box { width: 400px; background:#FFF; padding:30px 40px 40px 40px; }
#regist_box #modal_btn_box { border: 1px solid #a8b9c9; padding:20px 20px 20px 20px; text-align:center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#regist_box #modal_btn_box #modal_ttl { padding:0 0 20px 0; }
#regist_box #modal_btn_box .modal_txt { font-size:1.2rem; text-align: left; padding:0 0 5px 0; }
#regist_box #modal_btn_box #fb_btn,#regist_box #modal_btn_box #tw_btn,#regist_box #modal_btn_box #yh_btn,#regist_box #modal_btn_box #ln_btn,#regist_box #modal_btn_box #mail_btn { padding-top:10px; }
#regist_box .modal_close { background: #fff; text-align: center; padding: 10px 0 0 0; display: block; font-weight:bold; }
#regist_box .modal_close a { color:#3a4850; display: block; text-align: center; line-height: 20px; display: block; text-decoration: none; font-size:1.5rem; width:150px; margin:0 auto 0 auto; }
#regist_box .modal_close a span { font-family:'Noto Sans Japanese',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,sans-serif; }
#regist_box .modal_close a span:after { display:inline-block; width:24px; height:20px; color:#44bad8; content:"\00d7"; font-size:20px; font-weight:bold; margin:0 0 0 5px; line-height:10px; }
#sbf_contents .inner { width:1164px; margin:0 auto 0 auto; padding:30px 0 0 0; font-size:1.6rem; }
#sbf_header { background: #5bc2dc; }
#sbf_header .in { width:1164px; margin:0 auto 0 auto; padding:14px 0 14px 0; position:relative; }
#sbf_header .in h2 { position:absolute; left:0px; top:26px; }
#sbf_header .in h2 a { display:block; width:214px; height:28px; background:url(../img/sbf_logo2.png) left center no-repeat; background-size:214px 28px; }
#sbf_header .in h2 a:hover { opacity:0.7; }
#sbf_header .in ul { width: 650px; text-align:center; padding:8px; margin-left:auto; border:1px solid #FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#sbf_header .in ul li { display:inline-block; vertical-align:middle; padding-top:2px; }
#sbf_header .in ul li a { display:inline-block; font-size:1.6rem; color:#FFF; }
#sbf_header .in ul li a:hover { opacity:0.5; }
#sbf_header .in ul li:nth-child(1) { margin-right:25px; }
#sbf_header .in ul li:nth-child(2) { margin-right:25px; }
#sbf_header .in ul li:nth-child(3) { margin-right:25px; }
#sbf_header .in ul li:nth-child(4) { margin-right:25px; }
#sbf_header .in ul li:nth-child(5) img { width:140px; height:31px; }
#sbf_header .in a.spmenu_open,#sbf_header .in a.sponline_shop { display:none; }
#sbf_header .in .spmenu_open,#sp_topmenu { display:none; }
#news { padding:0 0 20px 0; }
#news h2 { font-size:1.8rem; padding:0 0 15px 0; }
#news ul { display:block; border:1px solid #68ccea; padding:20px; }
#news ul li { font-size:1.6rem; padding:0 0 15px 18px; background-size:7px 12px; background-position:0 6px; }
#news ul li,#news ul li a { vertical-align:top; line-height:150%; }
#news ul li:last-child { padding-bottom:0px; }
#news ul li.pc .pcicon { display: none; }
#news ul li a:hover { text-decoration:underline; color:#106076; }
#brand { padding:30px 0 50px 0; }
#brand h2 { font-size: 2.8rem; background-size: 36px 30px; background-position:0 0; padding:2px 0 25px 45px; }
#brand ul { width:1164px; height:643px; position:relative; }
#brand ul li { position:absolute; border:1px solid #68ccea; }
#brand ul li a { display:block; width:276px; height:200px; position:relative; }
#brand ul li a:hover { opacity: 0.7; }
#brand ul li a h3 { font-size:1.6rem; color:#106076; position:absolute; left:17px; top:17px; }
#brand ul li a img { position:absolute;}
#brand ul li:nth-child(1) { left:0px; top:0px; }
#brand ul li:nth-child(1) a img { width:50px; left:110px; top:50px; }
#brand ul li:nth-child(2) { left:296px; top:0px; }
#brand ul li:nth-child(2) a img { width:55px; left:108px; top:62px; }
#brand ul li:nth-child(3) { left:592px; top:0px; }
#brand ul li:nth-child(3) a img { width:52px; left:109px; top:48px; }
#brand ul li:nth-child(4) { left:0px; top:220px; }
#brand ul li:nth-child(4) a img { width:52px; left:107px; top:50px; }
#brand ul li:nth-child(5) { left:296px; top:220px; }
#brand ul li:nth-child(5) a img { width:52px; left:108px; top:50px; }
#brand ul li:nth-child(6) { left:592px; top:220px; }
#brand ul li:nth-child(6) a img { width:55px; left:108px; top:42px; }
#brand ul li:nth-child(7) { left:0px; top:440px; }
#brand ul li:nth-child(7) a img { width:55px; left:111px; top:44px; }
#brand ul li:nth-child(8) { left:296px; top:440px; }
#brand ul li:nth-child(8) a img { width:55px; left:108px; top:44px; }
#brand ul li:nth-child(9) { left:592px; top:440px; }
#brand ul li:nth-child(9) a img { width:auto;height: 139px; left:58px; top:44px; }
#brand ul li:nth-child(10) { left:888px; top:0px; border:1px solid #ed7d31; background-image:url(../img/new.svg); background-repeat: no-repeat; background-size:67px 67px; background-position: right 0px bottom 0px; }
#brand ul li:nth-child(10) h3 { color:#ff7b00; }
#brand ul li:nth-child(10) a img { width:55px; left:29px; top:42px; }
#brand ul li:nth-child(10) a p { font-size: 1.4rem; position:absolute; }
#brand ul li:nth-child(10) a p:nth-of-type(1) { color:#545454; left:100px; top:55px; }
#brand ul li:nth-child(10) a p:nth-of-type(2) { color:#106076; left:100px; top:80px; }
#brand ul li:nth-child(10) a p:nth-of-type(2) span { display: block; padding:0 10px 8px 0; }
#brand ul li:nth-child(11) { left:888px; top:220px; border:none; background:#e4f9ff; background-image:url(../img/corner.svg); background-repeat: no-repeat; background-size:30px 30px; background-position: right 0px bottom 0px; }
#brand ul li:nth-child(11) a { width:278px; height:202px; }
#brand ul li:nth-child(11) a h3 { font-size:2.2rem; color:#106076; left:0px; top:18px; width:100%; text-align:center; }
#brand ul li:nth-child(11) a img { width:222px; left:27px; top:39px; }
#brand ul li:nth-child(11) a p { font-size: 1.4rem; width:100%; color:#106076; position:absolute; left: 0px; bottom: 0px; text-align:center; font-size:1.5rem; padding-bottom:15px; line-height:150%; }
#brand ul li:nth-child(12) { left:888px; top:440px; border:none; background:#e4f9ff; background-image:url(../img/corner.svg); background-repeat: no-repeat; background-size:30px 30px; background-position: right 0px bottom 0px; }
#brand ul li:nth-child(12) a { width:278px; height:202px; overflow: hidden; }
#brand ul li:nth-child(12) a h3 { font-size:2.2rem; color:#106076; left:0px; top:18px; width:100%; text-align:center; }
#brand ul li:nth-child(12) a img { width: 100%; height: auto; top:30px; }
#brand ul li:nth-child(12) a p { font-size: 1.4rem; width:100%; color:#106076; position:absolute; left: 0px; bottom: 0px; text-align:center; font-size:1.5rem; padding-bottom:15px; line-height:150%; }
#brand ul li#newProducts a h3 { font-size: 2.2rem;left: 0px;top: 18px;width: 100%;text-align: center;font-weight:normal; }
#brand ul li#newProducts a p { font-size: 1.7rem; left: 67px; top: 79px; text-align:center; line-height: 150%; }
#sbf_contents a.list_link { background-size:6px 10px; padding: 8px 27px 8px 13px; background-position:52px 12px; }
#sbf_contents a:hover.list_link { background-image:url(../img/news_arrow_r.svg); color:#FFF; background-color:#5bc2dc; }
#sbf_contents #wrap1 .inner #campaign a.list_link { position:absolute; right: 0; top: 0px; }
#sbf_contents #wrap1 .inner #cm a.list_link { position:absolute; right: 0px; top: 10px; }
#sbf_contents #wrap1 .inner { padding:50px 0; }
#sbf_contents #wrap1 .inner #campaign { width:676px; margin: 0 auto; position:relative; }
#sbf_contents #wrap1 .inner #campaign h2 { font-size: 2.8rem; background-size: 36px 30px; background-position:0 0; padding:2px 0 25px 45px; }
#sbf_contents #wrap1 .inner #cm { width:676px; margin: 15px auto 0; position:relative; }
#sbf_contents #wrap1 .inner #cm h2 { font-size: 2.8rem; background-size: 36px 30px; background-position:0 0; padding:2px 0 25px 45px; }
#sbf_contents #wrap1 .inner #cm .movie { }
#sbf_contents #wrap1 .inner #cm .movie .youtube { width:414px; height:232px; background:#333; }
#sbf_contents #wrap1 .inner #cm .movie .text{ padding:22px 0 0 0; font-size: 1.4rem; padding:19px 0 0 0; line-height:150%; color:#666666; }
#sbf_contents #wrap1 .inner #cm .banner { text-align: center; }
#sbf_contents #wrap1 .inner #cm .banner > a { display: inline-block; }
#sbf_contents #wrap1 .inner:after { content: ""; clear: both; display: block; }
#banner_area { margin: 60px auto 190px;padding: 0;height: 77px;position: relative;}
#wrap2:after { content: ""; clear: both; display: block; }
#wrap2 h2 { font-size: 2.8rem; background-size: 36px 30px; background-position:0 0; padding:2px 0 15px 45px; border-bottom:2px solid #d2d2d2; }
#wrap2 a.list_link { position: absolute; top: 0px; right: 10px; }
#wrap2 { }
#wrap2 #whats_new { width:572px; float:left; }
#wrap2 #whats_new .notice .inner { width:572px; padding:40px 0 50px 0; }
#wrap2 #whats_new .notice { position:relative; }
#wrap2 #whats_new .notice .inner { color:#545454; }
#wrap2 #whats_new .notice .inner a { color:#545454; }
#wrap2 #whats_new .notice .inner dl { font-size:1.4rem; padding:0 0 20px 0; }
#wrap2 #whats_new .notice .inner dl dt { width: 70px; float:left; line-height:160%; }
#wrap2 #whats_new .notice .inner dl dd { width: 490px; float:right; line-height:160%; }
#wrap2 #whats_new .notice .inner dl:after { content: ""; clear: both; display: block; }
#wrap2 #whats_new .notice .inner a:hover dl dt {}
#wrap2 #whats_new .notice .inner a:hover dl dd { text-decoration: underline; color:#106076; }
#wrap2 #whats_new .notice:first-child .inner a:last-child dl { padding-bottom:0px; }
#wrap2 #whats_new .notice:last-child h2 { display: none; }
#wrap2 #whats_new .notice:last-child .inner { border:1px solid #68ccea; padding:20px; margin-bottom:50px; }
#wrap2 #whats_new .notice:last-child .inner dl dd { width: 450px; }
#wrap2 #release { position:relative; width:572px; }
#wrap2 #release { float:right; }
#wrap2 #release .inner,#wrap2 #release .inner { color:#545454; }
#wrap2 #release .inner { width:572px; padding:40px 0 50px 0; }
#wrap2 #release .inner dl { font-size:1.4rem; padding:0 0 20px 0; }
#wrap2 #release .inner dl dt { padding:5px; }
#wrap2 #release .inner dl dt { width: 80px; float:left; text-align:center; line-height:160%; }
#wrap2 #release .inner dl dd { padding:5px; }
#wrap2 #release .inner dl dd:nth-child(1) { width: 155px; font-size:1.3rem; text-align:center; color:#FFF; background:#5bc2dc; float:left; line-height:160%; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
#wrap2 #release .inner dl dd:last-child { width: 337px; float:left; line-height:160%; }
#wrap2 #release .inner dl:after { content: ""; clear: both; display: block; }
#wrap2 #release .inner a:hover dl dt { }
#wrap2 #release .inner a:hover dl dd:last-child { text-decoration: underline; color:#106076; }
#wrap2 #release .inner a { color:#545454; }
#wrap3 { padding: 0 0 100px 0; }
#wrap3:after { content: ""; clear: both; display: block; }
#wrap3 h2 { font-size: 2.8rem; background-size: 36px 30px; background-position:0 0; padding:2px 0 25px 45px; }
#wrap3 #mm { width:572px; float:left; }
#wrap3 #mm .inner { width:572px; min-height:295px; padding:97px 20px 20px 20px; border:10px solid #ffef73; background:url(../img/gabgab_logo.png) 18px 15px no-repeat; background-size:314px 67px; }
#wrap3 #mm .inner p { line-height:150%; color:#545454; }
#wrap3 #mm .inner p:first-of-type{ font-size: 1.6rem; padding:0 0 10px 0; }
#wrap3 #mm .inner p:last-of-type{ font-size: 1.3rem; }
#wrap3 #mm .inner .link { padding:15px 0 0 0; }
#wrap3 #mm .inner .link a { vertical-align:middle; display:inline-block; border:2px solid #ff9701; color:#ff9701; padding:5px 24px 7px 24px; background:#FFF; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; }
#wrap3 #mm .inner .link a:hover { background:#ff9701; color:#FFF; }
#wrap3 #mm .inner .link a:first-child { font-size:2.0rem; padding:11px 15px 11px 15px; background:#ff9701; color:#FFF; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; }
#wrap3 #mm .inner .link a:first-child:hover { background:#FFF; color:#ff9701; }
#wrap3 #mm .inner .link a span { font-family:monospace; margin-left:2px; }
#wrap3 #sns { width:100%; float:none; }
#wrap3 #sns h2 { font-size:2.4rem; padding-top:5px; }
#wrap3 #sns .inner { width:100%;padding:0;display: flex;flex-wrap: wrap;justify-content: space-between;
}
#wrap3 #sns .inner .account { width:275px; height:60px; }
#wrap3 #sns .inner .account:nth-child(1),
#wrap3 #sns .inner .account:nth-child(2),
#wrap3 #sns .inner .account:nth-child(3),
#wrap3 #sns .inner .account:nth-child(4) {
margin-bottom: 20px;
}
#wrap3 #sns .inner .account .in { position:relative; }
#wrap3 #sns .inner .account h3{ position:absolute; left: 70px; top:6px; font-size:1.5rem; }
#wrap3 #sns .inner .account img:first-of-type { width:60px; height:60px; left:0px; top:0px; }
#wrap3 #sns .inner .account .in a:hover { opacity:0.7; }
#wrap3 #sns .inner .account .in a { display:block; width:30px; height:30px; position:absolute; top:30px; }
#wrap3 #sns .inner .account .in a img { width: 30px; height: 30px; }
#wrap3 #sns .inner .account .in a:nth-of-type(1) { left: 70px; }
#wrap3 #sns .inner .account .in a:nth-of-type(2) { left: 105px; }
#wrap3 #sns .inner .account .in a:nth-of-type(3) { left: 140px; }
#wrap3 #sns .inner .account .in a:nth-of-type(4) { left: 175px; }
#wrap3 #sns .inner .account .in a:nth-of-type(5) { left: 210px; }
#wrap3 #sns .inner .account .in a:nth-of-type(6) { left: 245px; }
#wrap3 #sns .inner .account:nth-child(1) { left: 0px; top: 0px; }
#wrap3 #sns .inner .account:nth-child(2) { left: 0px; top: 70px; }
#wrap3 #sns .inner .account:nth-child(3) { left: 0px; top: 140px; }
#wrap3 #sns .inner .account:nth-child(4) { left: 295px; top: 0px; }
#wrap3 #sns .inner .account:nth-child(5) { left: 295px; top: 70px; }
#wrap3 #sns .inner .account:nth-child(6) { left: 295px; top: 140px; }
#wrap3 #sns .inner #suntory_id { width:572px; background:#e4f1f7;display: flex;justify-content: center;align-items: center;padding:10px 0 10px 0; text-align:center; vertical-align:middle; }
#wrap3 #sns .inner #suntory_id h4 { display:inline-block; vertical-align:middle; font-size: 1.8rem; margin-right:4px; }
#wrap3 #sns .inner #suntory_id a { color:#545454; display:inline-block; vertical-align:middle; font-size:1.3rem; padding:7px 22px 7px 22px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; }
#wrap3 #sns .inner #suntory_id a:hover { opacity:0.7; }
#wrap3 #sns .inner #suntory_id a:nth-of-type(1) { background:#ffde00; }
#wrap3 #sns .inner #suntory_id a:nth-of-type(2) { color:#FFFFFF; background:#5bc2dc; }
#wrap3 #sns .inner #suntory_id a:nth-of-type(3) { padding:7px 0 7px 0; }
#wrap3 #sns .inner #suntory_id a { margin:0 2px 0 2px; }
#sbf_footer { background: #5bc2dc; }
#sbf_footer .in { width:1164px; margin:0 auto 0 auto; position:relative; padding:35px 0 30px 0; color:#FFF; }
#sbf_footer .in h2 { font-size:2.4rem; font-weight:bold; padding:0 0 35px 0; }
#sbf_footer .in h2 a { color:#FFF; }
#sbf_footer .in h2 a:hover { opacity:0.5; }
#sbf_footer .in ul li { display:inline-block; width: 150px; vertical-align: top; }
#sbf_footer .in ul li a { color:#FFF; font-size:1.8rem; }
#sbf_footer .in ul li a:hover { opacity:0.5; }
#sbf_footer .in ul li ul { padding:25px 0 0 0; }
#sbf_footer .in ul li ul li { width:100%; display:block; padding: 0 0 13px 0; }
#sbf_footer .in ul li ul li a { display:block; width:100%; padding:1px 0 15px 13px; background:url(../img/pc_arrow_r_w.svg) 0px 2px no-repeat; font-size:1.4rem; }
#sbf_footer .in ul li:nth-child(4) ul li a { display:block; width:100%; background:none; font-size: 1.8rem; padding: 1px 0 15px; }
#sbf_footer .in a.eng { font-size: 1.6rem; padding: 6px 15px 8px 15px; border:1px solid #FFF; background:#FFF; color:#5bc2dc; position:absolute; right:190px; top:35px; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; }
#sbf_footer .in a.eng:hover { border:1px solid #FFF; background:none; color:#FFF; }
#sbf_footer .in a.sbflogo { display: block; width: 165px; height: 36px; background-image:url(../img/sbf_logo.png); background-repeat:no-repeat; background-size: 165px 36px; position:absolute; right:0px; top: 30px; }
#sbf_footer .in a.sbflogo:hover { opacity:0.5; }
#sbf_footer .in a.sbflogo span { display:none; }
#sbf_footer .in .adopt {display: none;}
}
@media screen and (max-width:767px)
{
/* ----------------------------------------------------------------------------------- */
/* SP */
/* ----------------------------------------------------------------------------------- */
#regist_box_back,#regist_box { display: none; }
#regist_box_back { background:rgba(0,0,0,0.5); width:100%; height:100%; position:fixed; left:0px; top:0px; z-index:1000; }
#regist_box { position: absolute; left:50%; margin-left:-200px; top:0; z-index:1001; }
#regist_box,#regist_box * { box-sizing:border-box; }
#regist_box { width: 400px; background:#FFF; padding:30px 40px 40px 40px; }
#regist_box #modal_btn_box { border: 1px solid #a8b9c9; padding:20px 20px 20px 20px; text-align:center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#regist_box #modal_btn_box #modal_ttl { padding:0 0 20px 0; }
#regist_box #modal_btn_box .modal_txt { font-size:1.2rem; text-align: left; padding:0 0 5px 0; }
#regist_box #modal_btn_box #fb_btn,#regist_box #modal_btn_box #tw_btn,#regist_box #modal_btn_box #yh_btn,#regist_box #modal_btn_box #ln_btn,#regist_box #modal_btn_box #mail_btn { padding-top:10px; }
#regist_box .modal_close { background: #fff; text-align: center; padding: 10px 0 0 0; display: block; font-weight:bold; }
#regist_box .modal_close a { color:#3a4850; display: block; text-align: center; line-height: 20px; display: block; text-decoration: none; font-size:1.5rem; width:150px; margin:0 auto 0 auto; }
#regist_box .modal_close a span { font-family:'Noto Sans Japanese',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,sans-serif; }
#regist_box .modal_close a span:after { display:inline-block; width:24px; height:20px; color:#44bad8; content:"\00d7"; font-size:20px; font-weight:bold; margin:0 0 0 5px; line-height:10px; }
#sbf_contents .inner { width:100%; padding:0; }
#sbf_header { width:100%; height: 70px; background: #5bc2dc; }
#sbf_header .in { position: relative; }
#sbf_header .in h2 { position:absolute; left:15px; top:25px; }
#sbf_header .in h2 a { display:block; background:url(../img/sbf_logo2.png) left center no-repeat; background-size: 150px 20px; width:150px; height:20px; }
#sbf_header .in ul.pclink { display:none; }
#sbf_header .in .spmenu_open { cursor:pointer; display:block; width:40px; height:41px; position:absolute; right:15px; top:15px; background:url(../img/sp_menu_open.svg) 0px 0px no-repeat; background-size: 40px 41px; }
#sbf_header .in .spmenu_open .ginner { position:relative; }
#sbf_header .in .spmenu_open .ginner div { transition: all 300ms 0s ease; }
#sbf_header .in .spmenu_open .ginner div { display:block; position:absolute; background:#FFF; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
#sbf_header .in .spmenu_open .ginner .graphic1 { width:30px; height:4px; left:6px; top:0px; }
#sbf_header .in .spmenu_open .ginner .graphic2 { width:30px; height:4px; left:6px; top:9px; }
#sbf_header .in .spmenu_open .ginner .graphic3 { width:30px; height:4px; left:6px; top:18px; }
#sbf_header .in .spmenu_open .ginner .graphic4 { width:50px; text-align:center; font-size:1.2rem; color:#FFF; background:none; left:-5px; top:30px; letter-spacing: -1px; }
#sbf_header .in .spmenu_open.close .ginner .graphic1 { transform: rotate(45deg); top: 9px; }
#sbf_header .in .spmenu_open.close .ginner .graphic2 { opacity:0; }
#sbf_header .in .spmenu_open.close .ginner .graphic3 { transform: rotate(-45deg); top: 9px; }
#sbf_header .in .spmenu_open.close .ginner .graphic4 { }
#sp_topmenu { background: #5bc2dc; display:none; }
#sp_topmenu .in { border-top:1px solid #84d3e2; position:relative; padding:0 0 20px 0; }
#sp_topmenu .in h2 { position:absolute; left:144px; top:20px; }
#sp_topmenu .in h2 a { display:block; width:165px; height:36px; background:url(../img/sbf_logo.png) 0 0 no-repeat; background-size: 165px 36px; }
#sp_topmenu .in ul li ul { display: none; }
#sp_topmenu .in ul { padding: 20px 20px 20px 20px; }
#sp_topmenu .in ul li { padding: 0 0 1px 0; }
#sp_topmenu .in ul li:first-of-type a { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; }
#sp_topmenu .in ul li:last-of-type a { -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; }
#sp_topmenu .in ul li a { display:block; padding:12px; color:#FFF; font-size:1.5rem; background:url(../img/sp_menu_arrow2.svg) right 10px top 13px no-repeat #2fa0c6; background-size:9px 14px; }
#sp_topmenu .in .eng { display:block; width:50%; padding:12px; font-size:1.5rem; text-align:center; margin:0 auto 0 auto; background:#FFF; color:#5ac2db;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
#news { padding:0 10px 50px 10px; }
#news h2 { font-size:2.0rem; padding:0 0 15px 0; }
#news ul { display:block; padding:30px 20px 30px 20px; border:1px solid #68ccea; }
#news ul li:first-line { }
#news ul li { font-size:1.6rem; padding:0 0 12px 16px; background-size:7px 12px; background-position:0 11px; line-height:150%; vertical-align:top; }
#news ul li:last-child { padding-bottom:0px; }
#news ul li.pc:after {content: url(../img/pcicon.svg); width: 38px; height: 28px; margin:0 0 -4px 4px; display:inline-block; vertical-align:middle; }
#brand { padding:0 10px 50px 10px; }
#brand h2 { font-size: 2.8rem; background-size: 36px 30px; background-position:0 0; padding:2px 0 25px 43px; }
#brand ul { }
#brand ul li { border:none; }
#brand ul li a { border:1px solid #68ccea; position:relative; display:block; height:120px; vertical-align:middle; }
#brand ul li:nth-child(odd) { float:left; padding:0 5px 10px 0; width:50%; }
#brand ul li:nth-child(even) { float:right; padding:0 0 10px 5px; width:50%; }
#brand ul li:nth-child(-n+9) a { padding:0 6px 0 90px; color:#106076; font-size:1.5rem; }
#brand ul li:nth-child(-n+9) a h3 { height:120px; display:table-cell; vertical-align:middle; }
#brand ul li:nth-child(-n+9) a h3,#brand ul li:nth-child(-n+9) a h3 span { font-weight: bold; }
#brand ul li:nth-child(-n+9) a img { width:25px; position:absolute; left:30px; top:27px; }
#brand ul li:nth-child(9) a h3 { position: absolute;top: 15px;left: 0;display: block;width: 100%;text-align: center;}
#brand ul li:nth-child(9) a img { width:70px;height: auto;position:absolute;left:calc(50% - 35px);top:45px;}
#brand ul:after { content: ""; clear: both; display: block; }
#brand ul li:nth-child(9) a h3 p:nth-of-type(1) { color:#ff7b00; padding: 0 0 10px 0; }
#brand ul li:nth-child(9) a h3 p:nth-of-type(2) { display: none; }
#brand ul li:nth-child(9) a h3 p:nth-of-type(3) { font-size: 1.5rem; line-height:140%;}
#brand ul li:nth-child(10) a { border:1px solid #ed7d31; background-image:url(../img/new.svg); background-repeat: no-repeat; background-size:50px 50px; background-position: right 0px bottom 0px; }
#brand ul li:nth-child(10) a { padding:0 6px 0 70px; color:#106076; font-size:1.5rem; }
#brand ul li:nth-child(10) a .wrap { height:120px; display:table-cell; vertical-align:middle; }
#brand ul li:nth-child(10) a .wrap h3 { color:#ff7b00; padding:0 0 10px 0; }
#brand ul li:nth-child(10) a .wrap h3 span { display:block; padding:0 0 10px 0; }
#brand ul li:nth-child(10) a .wrap img { width:25px; position:absolute; left:30px; top:27px; }
#brand ul li:nth-child(10) a .wrap p { display: block; font-size: 1.5rem; line-height:140%; }
#brand ul li:nth-child(10) a .wrap p:nth-of-type(1) { display:none; }
#brand ul li:nth-child(10) a .wrap p span { display: block; padding:0 0 4px 0; }
#brand ul li:nth-child(11) a { border:none; background-image:url(../img/corner.svg); background-repeat: no-repeat; background-size:30px 30px; background-position: right 0px bottom 0px; background-color:#e4f9ff; }
#brand ul li:nth-child(11) a { text-align: center; position:relative; }
#brand ul li:nth-child(11) a h3 { color:#106076; font-size:2.2rem; padding:10px 0 0 0; width:100%; }
#brand ul li:nth-child(11) a .wrap { }
#brand ul li:nth-child(11) a .wrap img { width:222px; }
#brand ul li:nth-child(11) a p { display:none; }
#brand ul li:nth-child(12) a { border:none; background-image:url(../img/corner.svg); background-repeat: no-repeat; background-size:30px 30px; background-position: right 0px bottom 0px; background-color:#e4f9ff; }
#brand ul li:nth-child(12) a { text-align: center; position:relative; }
#brand ul li:nth-child(12) a h3 { color:#106076; font-size:2.2rem; padding:10px 0 0 0; width:100%; }
#brand ul li:nth-child(12) a .wrap { }
#brand ul li:nth-child(12) a .wrap img { width:222px; margin-top:-5px; }
#brand ul li:nth-child(12) a p { display:none; }
#brand ul li:nth-child(2) a img { top:36px; }
#sbf_contents a.list_link { font-size:2rem; background-size:8px 13px; padding: 13px 53px 13px 27px; background-position:77px 17px; }
#sbf_contents #wrap1 .inner { padding: 50px 0; }
#sbf_contents #wrap1 .inner #campaign a.list_link { position:absolute; right:10px; top:10px; }
#sbf_contents #wrap1 .inner #cm a.list_link { position:absolute; right:10px; top:10px; }
#sbf_contents #wrap1 .inner #campaign { position:relative; }
#sbf_contents #wrap1 .inner #campaign h2 { font-size: 2.8rem; background-size: 36px 30px; background-position:10px 18px; padding:22px 0 22px 50px; }
#sbf_contents #wrap1 .inner #cm { position:relative; }
#sbf_contents #wrap1 .inner #cm h2 { font-size: 2.8rem; background-size: 36px 30px; background-position:10px 18px; padding:22px 0 22px 50px; }
#sbf_contents #wrap1 .inner #cm .movie { padding: 0 0px 40px 0px; }
#sbf_contents #wrap1 .inner #cm .movie .youtube { text-align:center; }
#sbf_contents #wrap1 .inner #cm .movie .youtube iframe { margin: 0 auto 0 auto; }
#sbf_contents #wrap1 .inner #cm .movie .text { font-size: 1.4rem; padding:19px 10px 0 10px; line-height:150%; color:#666666; }
#sbf_contents #wrap1 .inner #cm .banner { padding: 0 10px; }
#banner_area { padding: 50px 0 20px 0;width: 100vw;height: auto;margin: 0;padding: 50px 0 0;position: relative; }
#wrap2,#wrap3 { padding:0 10px 0 10px; }
#wrap2 h2,#wrap3 h2 { font-size: 2.8rem; background-size: 36px 30px; background-position:0 22px; padding:25px 0px 25px 43px; }
#wrap2 h2 { padding-right:130px; botder-bottom:1px solid #d2d2d2; }
#wrap2 #whats_new,#wrap2 #release { position: relative; }
#wrap2 a.list_link { position: absolute; right: 0px; top: 13px; }
#wrap2 #whats_new { }
#wrap2 #whats_new .notice { padding:0 0 20px 0; position:relative; }
#wrap2 #whats_new .notice h2 { border-bottom:2px solid #d2d2d2; }
#wrap2 #whats_new .notice .inner {}
#wrap2 #whats_new .notice .inner a {}
#wrap2 #whats_new .notice .inner dl { padding:20px 0 20px 0; border-bottom:1px dotted #d2d2d2; }
#wrap2 #whats_new .notice .inner dl dt { color: #888888; font-size: 1.5rem; padding:0 0 8px 0; }
#wrap2 #whats_new .notice .inner dl dd { color: #545454; font-size: 1.4rem; line-height:140%; }
#wrap2 #whats_new .notice:last-child h2 { display: none; }
#wrap2 #whats_new .notice:first-child .inner a:last-child dl { border: none; }
#wrap2 #whats_new .notice:last-child .inner { border:1px solid #68ccea; padding:0 20px 20px 20px; margin-bottom:50px; }
#wrap2 #whats_new .notice:last-child .inner dl { padding-bottom:0px; }
#wrap2 #whats_new .notice:last-child .inner dl:last-child { border:none; }
#wrap2 #release { padding:0 0 20px 0; }
#wrap2 #release h2 { border-bottom:2px solid #d2d2d2; }
#wrap2 #release .inner {}
#wrap2 #release .inner a {}
#wrap2 #release .inner dl { padding:20px 0 20px 0; border-bottom:1px dotted #d2d2d2; }
#wrap2 #release .inner dl dd:nth-child(1) { background:#5bc2dc; color:#FFF; font-size: 1.3rem; padding:8px; width:150px; text-align:center; display:inline-block; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
#wrap2 #release .inner dl dt { color: #888888; font-size: 1.5rem; padding:8px; font-size: 1.4rem; padding:8px; display:inline-block; }
#wrap2 #release .inner dl dd:last-child { color: #545454; font-size: 1.4rem; line-height:140%; padding:10px 0 0 0; }
#wrap3 { padding: 0 10px 45px 10px; }
#wrap3 h2 { font-size: 2.8rem; background-size: 36px 30px; background-position:0 0; padding:2px 0 25px 45px; }
#wrap3 #mm { padding:0 0 45px 0; }
#wrap3 #mm .inner { padding:97px 20px 20px 20px; border:10px solid #ffef73; background:url(../img/gabgab_logo.png) 18px 15px no-repeat; background-size:314px 67px; }
#wrap3 #mm .inner p { line-height:150%; color:#545454; }
#wrap3 #mm .inner p:first-of-type{ font-size: 1.6rem; padding:0 0 10px 0; }
#wrap3 #mm .inner p:last-of-type{ font-size: 1.3rem; }
#wrap3 #mm .inner .link { padding:15px 0 0 0; text-align:center; }
#wrap3 #mm .inner .link a { vertical-align:middle; display:inline-block; font-size:1.5rem; border:2px solid #ff9701; color:#ff9701; padding:8px 20px 8px 20px; margin:0 4px 0 4px; background:#FFF; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; }
#wrap3 #mm .inner .link a:first-child { display:block; width:200px; margin:0 auto 12px auto; text-align:center; font-size:2.0rem; padding:11px 15px 11px 15px; background:#ff9701; color:#FFF; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; }
#wrap3 #sns .inner { padding:0; position:relative; }
#wrap3 #sns .inner .account { padding:0 0 5% 0; }
#wrap3 #sns .inner .account .in { position:relative; }
#wrap3 #sns .inner .account h3 { font-size:2.5rem; float:left; margin:2% 0 0 2%; }
#wrap3 #sns .inner .account .in:after { content: ""; clear: both; display: block; }
#wrap3 #sns .inner .account .in a { display:block; position:absolute; bottom:0px; }
#wrap3 #sns .inner .account .in .icon { width:25%; position:relative; float:left; }
#wrap3 #sns .inner .account .in a:nth-of-type(1) { width:10%; padding-top:10%; left: 28%; }
#wrap3 #sns .inner .account .in a:nth-of-type(2) { width:10%; padding-top:10%; left: 39%; }
#wrap3 #sns .inner .account .in a:nth-of-type(3) { width:10%; padding-top:10%; left: 50%; }
#wrap3 #sns .inner .account .in a:nth-of-type(4) { width:10%; padding-top:10%; left: 61%; }
#wrap3 #sns .inner .account .in a:nth-of-type(5) { width:10%; padding-top:10%; left: 72%; }
#wrap3 #sns .inner .account .in a:nth-of-type(6) { width:10%; padding-top:10%; left: 83%; }
#wrap3 #sns .inner .account .in a img { position:absolute; width:100%; margin-top:-100%; vertical-align:bottom; }
#wrap3 #sns .inner #suntory_id { background:#e4f1f7; padding:20px; text-align:center; vertical-align:middle; }
#wrap3 #sns .inner #suntory_id h4 { display:block; text-align:left; font-size: 2rem; padding:0 0 15px 0; }
#wrap3 #sns .inner #suntory_id a { color:#545454; display:inline-block; vertical-align:middle; font-size:1.6rem; margin-bottom:10px !important; padding:12px 28px 12px 28px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; }
#wrap3 #sns .inner #suntory_id a:nth-of-type(1) { background:#ffde00; }
#wrap3 #sns .inner #suntory_id a:nth-of-type(2) { color:#FFFFFF; background:#5bc2dc; }
#wrap3 #sns .inner #suntory_id a:nth-of-type(3) { padding:5px 0 0 0; display:block; }
#wrap3 #sns .inner #suntory_id a { margin:0 2px 0 2px; }
#sbf_footer { background: #5bc2dc; }
#sbf_footer .in { position:relative; padding-top:20px; }
#sbf_footer .in h2 { text-align:center; }
#sbf_footer .in h2 a { display:block; margin:0 auto 0 auto; width:165px; height:36px; background:url(../img/sbf_logo.png) 0 0 no-repeat; background-size: 165px 36px; }
#sbf_footer .in h2 span { display:none; }
#sbf_footer .in ul li ul { display: none; }
#sbf_footer .in ul { padding: 20px 20px 20px 20px; }
#sbf_footer .in ul li { padding: 0 0 1px 0; }
#sbf_footer .in ul li:first-of-type a { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; }
#sbf_footer .in ul li:last-of-type a { -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; }
#sbf_footer .in ul li a { display:block; padding:12px; color:#FFF; font-size:1.5rem; background:url(../img/sp_menu_arrow2.svg) right 10px top 13px no-repeat #2fa0c6; background-size:9px 14px; }
#sbf_footer .in .eng { display:none; }
#sbf_footer .in .sbflogo { display:none; }
}
@media screen and (max-width:550px)
{
/* ----------------------------------------------------------------------------------- */
/* SP - 490px */
/* ----------------------------------------------------------------------------------- */
#sbf_header .in a.sponline_shop { font-size:1.2rem; left: 16px; top:39px; background-position:0px 0px; }
#wrap3 #sns .inner .account h3 { font-size:2.0rem; }
#brand ul li:nth-child(-n+9) a { padding:0 6px 0 45px; }
#brand ul li:nth-child(-n+9) a h3 { font-size: 1.5rem; }
#brand ul li:nth-child(-n+9) a img { width:25px; left:10px; }
#brand ul li:nth-child(9) a img { width:70px;height: auto;position:absolute; left:calc(50% - 35px); top:45px;}
#brand ul li:nth-child(10) a { padding:0 6px 0 45px; }
#brand ul li:nth-child(10) a h3 { font-size: 1.5rem; }
#brand ul li:nth-child(10) a .wrap p { font-size: 1.2rem; }
#brand ul li:nth-child(10) a .wrap img { width:25px; position:absolute; left:10px; top:25px; }
#brand ul li:nth-child(10) a { background-size:30px 30px; }
#brand ul li:nth-child(10) a .wrap p,#brand ul li:nth-child(10) a .wrap p span { display: inline; padding:0; }
#brand ul li:nth-child(-n+9) a h3 span { display: inline; padding:0; line-height:130%; }
#brand ul li:nth-child(11) a { vertical-align: middle; display:table-cell; width:99999px; }
#brand ul li:nth-child(11) a h3 { font-size: 1.7rem; padding-top:0; display:inline-block; }
#brand ul li:nth-child(11) a .wrap img { width:88%; margin-top:-5px; }
#brand ul li:nth-child(12) a { vertical-align: middle; display:table-cell; width:99999px; }
#brand ul li:nth-child(12) a h3 { font-size: 1.7rem; padding-top:0; display:inline-block; }
#brand ul li:nth-child(12) a .wrap img { width:88%; margin-top:-5px; }
#brand ul li#newProducts a { padding: 0 6px 0 6px;}
#brand ul li#newProducts a h3 { font-size: 1.7rem; color:#ff7b00; position: absolute; top: 15px; left: 0; display: block; width: 100%; text-align: center; font-weight:normal; }
#brand ul li#newProducts a p { width: 147px; height: auto; position: absolute; left: calc(50% - 73px); top: 48px; text-align: center; line-height: 150%;}
}
@media screen and (max-width:400px)
{
#wrap3 #mm .inner { padding:75px 20px 20px 20px; background-size:200px 43px; }
#brand ul li:nth-child(-n+9) a h3 { font-size: 1.3rem; }
#brand ul li:nth-child(-n+9) a h3 span { display: block; }
}
@media screen and (max-width:380px)
{
#wrap3 #sns .inner .account h3 { font-size:1.5rem; float:left; }
#brand ul li:nth-child(5) a h3,#brand ul li:nth-child(7) a h3,#brand ul li:nth-child(9) a h3 { letter-spacing: -0.15rem; }
}
@media screen and (max-width:300px)
{
#wrap3 #sns .inner .account h3 { font-size:1.2rem; float:left; }
}
/* h2 */
@media screen and (max-width:460px)
{
#news h2,#brand h2,#sbf_contents #wrap1 .inner #campaign h2,#sbf_contents #wrap1 .inner #cm h2,#wrap2 #whats_new h2,#wrap2 #release h2,#wrap3 h2,#wrap3 h2 { font-size:2rem; }
#sbf_contents a.list_link { font-size:1.5rem; padding:10px 34px 10px 20px; background-size: 6px 10px; background-position: 59px 13px; }
#wrap2 #whats_new h2,#wrap2 #release h2 { letter-spacing: -0.15rem; padding-right:100px; padding-bottom: 15px; }
#brand h2 { padding-top:4px; }
}
@media screen and (max-width:340px)
{
#news h2,#brand h2,#sbf_contents #wrap1 .inner #campaign h2,#sbf_contents #wrap1 .inner #cm h2,#wrap2 #whats_new h2,#wrap2 #release h2,#wrap3 h2,#wrap3 h2 { font-size:1.8rem; }
}
/* /h2 */
@media screen and (max-width:399px)
{
#regist_box { width: 100%; padding:10px; margin-left:0px; left:0px; }
#modal_btn_box div a img { width:100%; }
}
/* --------------------------------- */