#header{position:fixed;top:0;left:0;z-index:100;width:100%;padding:1rem;background:var(--white900)}
#header a{display:inline-block;width:10.8rem}
#mainImg{padding-top:5rem}
#mainImg .wrapper{position:relative;width:104rem;margin:0 auto}
#mainImg .wrapper .logo{position:absolute;top:11rem;left:0;right:0;z-index:10;margin:auto;width:35.4rem}
#mainImg .wrapper .logo .logo01{position:relative;z-index:10}
#mainImg .wrapper .logo .logo02,#mainImg .wrapper .logo .logo03{position:absolute;top:0;left:0;z-index:5}
#hidamari_youtube .wrapper{position:relative;width:104rem;margin:0 auto;padding-top:8rem;text-align: center}
#hidamari_youtube iframe{aspect-ratio: 16 / 9;width: 100%;max-width: 560px}
#link{padding-top:8rem}
#link .wrap{width:85rem}
#link ul{display:grid;grid-template-columns:repeat(4,minmax(0,25%));column-gap:1.66rem;row-gap:0}
#link ul li a{display:inline-block}
#campaign{padding-top:8rem}
#campaign picture{border:.2rem solid var(--white900);border-radius:4rem;overflow:hidden;box-shadow:0 0 3rem rgba(132,115,71,.5)}
#product{padding-top:12rem}
#product .box{position:relative;width:30.2rem;margin:0 auto}
#product .box .ramen picture.shio,#product .box .ramen picture.shoyu{position:absolute;top:-3rem}
#product .box .ramen picture.shio img,#product .box .ramen picture.shoyu img{width:28.2rem}
#product .box .ramen picture.shoyu{left:-30rem}
#product .box .ramen picture.shio{right:-30rem}
#product .box .character{position:relative;margin-top:4rem}
#product .box .character .cloud01,#product .box .character .cloud02{position:absolute;z-index:10}
#product .box .character .cloud01{top:0;left:0;width:7.1rem;animation:cloud 1.3s ease-in-out infinite alternate-reverse}
#product .box .character .cloud02{top:-1rem;right:0;width:5.2rem;animation:cloud 2s ease-in-out infinite alternate-reverse}
#lineup{padding-top:12rem}
#lineup .row{display:grid;grid-template-columns:repeat(2,minmax(0,50%));column-gap:1rem;row-gap:0}
#lineup .row .shio,#lineup .row .shoyu{border:.2rem solid var(--white900);border-radius:3rem;overflow:hidden;box-shadow:0 0 3rem rgba(132,115,71,.2);background-size:100% auto!important;color:var(--white900);padding-bottom:3rem}
#lineup .row .shoyu{background:url(../img/lineup_shoyu_bg.webp) center}
#lineup .row .shoyu button.btn a{color:var(--red500)}
#lineup .row .shoyu button.btn a:before{background:var(--red500)}
#lineup .row .shio{background:url(../img/lineup_shio_bg.webp) center}
#lineup .row .shio button.btn a{color:var(--aqua500)}
#lineup .row .shio button.btn a:before{background:var(--aqua500)}
#lineup .row picture.name{margin-bottom:2rem}
#lineup .row h3.catch{font-size:1.8rem;text-align:center;font-weight:var(--fontMedium);margin-bottom:2rem}
#lineup .row p.feature{padding:0 2rem;text-align:justify;text-justify:inter-ideograph}
#lineup .row button.btn{text-align:center;margin-top:4rem}
#lineup .row button.btn a{display:inline-block;width:21rem;background:var(--yellow500);padding:1.2rem 4rem 1.4rem;border-radius:9rem}
#lineup .row button.btn a:before{content:'';display:inline-block;position:relative;top:.4rem;width:2rem;height:2rem;margin-right:1rem;mask:url(../img/i_arr.svg) no-repeat center;mask-size:100% auto}
#character{padding:12rem 0}
#character .row{display:grid;grid-template-columns:repeat(2,minmax(0,50%));column-gap:2rem;row-gap:0}
#character .row .imgBox{text-align:center;padding-top:4rem}
#character .row .imgBox .img{position:relative;width:35rem;margin:0 auto}
#character .row .imgBox .img img.cloud01,#character .row .imgBox .img img.cloud02{position:absolute}
#character .row .imgBox .img img.cloud01{top:-2rem;left:-.5rem;width:7.1rem;animation:cloud 1.3s ease-in-out infinite alternate-reverse}
#character .row .imgBox .img img.cloud02{top:2rem;right:0;width:5.2rem;animation:cloud 2s ease-in-out infinite alternate-reverse}
#character .row .imgBox p.profile{margin-top:3rem}
#character .row .txtBox{background:url(../img/character_info_border.webp) no-repeat bottom center;background-size:100% auto;padding-bottom:.5rem}
#character .row .txtBox dl{display:flex;align-items:center;font-size:1.4rem;padding:1.4rem 0 1rem;background:url(../img/character_info_border.webp) no-repeat top center;background-size:100% auto}
#character .row .txtBox dl dt{flex-shrink:0;width:13rem}
#recipe{padding:12rem 0 18rem;background:url(../img/recipe_bg.webp) center;background-size:1.5rem auto}
#recipe .box.shio{margin-top:8rem}
#recipe .box.shio h3.hd{color:var(--aqua500)}
#recipe .box.shio ul.recipe li a h4.name span{color:var(--aqua500)}
#recipe .box.shio ul.recipe li a h4.name span:before{background:var(--aqua500)}
#recipe .box h3.hd{font-family:var(--roundGothic);font-size:3rem;text-align:center;margin-bottom:3rem;color:var(--red500)}
#recipe .box ul.recipe{display:grid;grid-template-columns:repeat(3,minmax(0,33.3333333333%));column-gap:2.5rem;row-gap:3rem;margin:0 -9rem}
#recipe .box ul.recipe li a{display:block}
#recipe .box ul.recipe li a picture{text-align:center;margin-bottom:2.5rem}
#recipe .box ul.recipe li a picture img{width:31rem}
#recipe .box ul.recipe li a h4.name{text-align:center}
#recipe .box ul.recipe li a h4.name span{display:inline-block;color:var(--red500)}
#recipe .box ul.recipe li a h4.name span:before{content:'';display:inline-block;position:relative;top:.4rem;width:2rem;height:2rem;margin-right:1rem;mask:url(../img/i_arr.svg) no-repeat center;mask-size:100% auto;background:var(--red500)}
#footer{background:url(../img/recipe_bg.webp) center;background-size:1.5rem auto}
#footer .top{height:7.7rem;background:url(../img/footer_bg.webp) repeat-x top center;background-size:38rem auto;text-align:right}
#footer .top .character{position:relative;top:-8rem;display:inline-block;animation:footerCharacterMove 13s infinite linear}
#footer .top .character .inner{animation:footerCharacter 1.3s infinite steps(1,end);background-size:100% auto!important}
#footer .top .character .inner img{opacity:0;width:8.1rem}
#footer .top .character .inner img.character02{position:absolute;top:0;left:0}
#footer .bottom{background:var(--white900);font-size:1.2rem;text-align:center;padding:1.5rem 0}
@media screen and (max-width:767px){
#mainImg .wrapper{width:100%}
#mainImg .wrapper .logo{top:12.5rem;width:34rem}
#hidamari_youtube .wrapper{width:100%}
#link{padding-top:3rem}
#link .wrap{width:100%}
#link ul{grid-template-columns:repeat(2,minmax(0,50%));column-gap:1rem;row-gap:1rem}
#campaign{padding-top:6rem}
#campaign picture{border-radius:2rem}
#product{padding-top:6rem}
#product .box{width:100%}
#product .box .ramen{display:flex;height:19rem;margin:2rem -1rem 0}
#product .box .ramen picture.shio,#product .box .ramen picture.shoyu{display:flex;align-items:center;justify-content:center;position:static;top:auto;width:50%}
#product .box .ramen picture.shio img,#product .box .ramen picture.shoyu img{width:20rem}
#product .box .character{margin-top:0}
#product .box .character .cloud01{top:5rem;left:3rem;width:6rem}
#product .box .character .cloud02{top:4rem;right:1rem;width:4.5rem}
#lineup{padding-top:6rem}
#lineup .row{grid-template-columns:repeat(1,minmax(0,100%));row-gap:5rem}
#lineup .row .shio,#lineup .row .shoyu{padding-bottom:5rem}
#lineup .row button.btn{margin-top:2.5rem}
#character{padding:6rem 0}
#character .row{grid-template-columns:repeat(1,minmax(0,100%));row-gap:2.5rem}
#character .row .imgBox{padding-top:0}
#character .row .imgBox .img img.cloud01{top:-1.5rem;left:2rem;width:6.4rem}
#character .row .imgBox .img img.cloud02{right:3.5rem;width:4.8rem}
#recipe{padding:6rem 0 15rem}
#recipe .box h3.hd{font-size:2.4rem;margin-bottom:2rem}
#recipe .box ul.recipe{grid-template-columns:repeat(1,minmax(0,100%));row-gap:4rem}
#recipe .box ul.recipe{margin:0}
#recipe .box ul.recipe li a picture{padding:0 2rem;margin-bottom:1.5rem}
#recipe .box ul.recipe li a picture img{width:100%}
#footer .top{height:6.5rem;background-size:100% auto}
#footer .bottom{font-size:.8rem}
}
/*# sourceMappingURL=style.css.map */