@charset "UTF-8";
/* CSS Document */

/* font-family:'Asap Condensed', sans-serif; */
body{background-color:#f0efeb;}
#bro_shop{width:100%; max-width:1200px; margin:0 auto;}
#bro_shop img{width:100%;}
#bro_shop a{color:#000;}
#bro_shop h2{width:15%;}
#bro_shop p{font-family:'Noto Sans JP', sans-serif;}

#main{width:100%;}
#bro_shop .menu{width:100%; background-color:#fff; padding:1.5% 0;}
#bro_shop .menu ul{width:80%; margin:0 auto; overflow:hidden;}
#bro_shop .menu ul li{width:20%; float:left; text-align:center;}
#bro_shop .menu ul li a{font-family:'Asap Condensed', sans-serif; letter-spacing:5px; color:000;}
#bro_shop .menu ul li a span{color:#cbbdd8; font-size:80%;}

#bro_shop .line{clear:both; width:60%; margin:8% auto;}
#bro_shop .br_more{clear:both; width:15%; padding:1%; background-color:#fff; margin:4% auto 0 auto; font-family:'Asap Condensed', sans-serif; letter-spacing:5px; border:2px solid #cbbdd8; display:block;}

#bro_shop #about{width:100%; text-align:center; overflow:hidden;}
#bro_shop #about h2{margin:0 auto 5% auto;}
#bro_shop #about p{font-size:90%; line-height:180%; font-family:'Noto Sans JP', sans-serif;}
#bro_shop #about .about_img{width:60%; margin:3% auto;}
#bro_shop #about .about_img img{width:48%; margin:0 1%; float:left;}

#bro_shop #concept{width:100%; text-align:center; overflow:hidden;}
#bro_shop #concept h2{margin:0 auto 5% auto;}
#bro_shop #concept h3{font-family:'Noto Serif JP', serif; font-size:150%; margin-bottom:2%;}
#bro_shop #concept h4{font-family:'Mr De Haviland', cursive; font-size:120%; margin-bottom:5%;}
#bro_shop #concept p{font-size:90%; line-height:230%; font-family:'Noto Sans JP', sans-serif;}

#bro_shop #look{width:100%; text-align:center; overflow:hidden;}
#bro_shop #look h2{margin:0 auto 5% auto;}
#bro_shop #look h3{font-family:'Asap Condensed', sans-serif; font-size:150%; letter-spacing:5px; text-align:left; width:60%; margin:5% auto 0 auto; clear:both;}
#bro_shop #look h3 span{color:#cbbdd8;}
#bro_shop #look h3 b{font-size:40%; margin-left:1%; font-family:'Noto Sans JP', sans-serif; letter-spacing:2px;}
#bro_shop #look ul{width:60%; margin:3% auto; overflow:hidden;}
#bro_shop #look ul li{width:31%; float:left; margin:0 1%;}
#bro_shop #look ul li p{font-size:80%; margin:4% 0; text-align:left; line-height: 120%;}
#bro_shop #look ul li p b{font-size:80%; text-align:right; display:block;}
#bro_shop #look ul li b::after{content: "円(税込)";}

#bro_shop #information{width:100%; text-align:center; overflow:hidden;}
#bro_shop #information h2{margin:0 auto 5% auto;}
#bro_shop #information a{width:50%; margin:1% auto; display:block;}

#bro_shop #instagram{width:100%; text-align:center; overflow:hidden;}
#bro_shop #instagram h2{margin:0 auto 5% auto;}
#bro_shop #instagram .insta_name{font-size:150%; font-family:'Source Sans Pro', sans-serif; letter-spacing:3px;}
#bro_shop #instagram .insta{width:60%; margin:3% auto;}

#br_footer{width:100%; margin:8% auto 0 auto; text-align:center; background-color:#cbbdd8; font-size:70%; padding:1.5%;}

#page_top{width:50px; height:50px; position:fixed; right:3%; bottom:3%; background:#977AB1; opacity:0.6;}
#page_top a{position:relative; display:block; width:50px; height:50px; text-decoration:none;}
#page_top a::before{font-family:'Font Awesome 5 Free'; font-weight:900; content:'\f106'; font-size:25px; color:#fff; position:absolute; width:25px; height:25px; top:0; bottom:0; right:0; left:0; margin:auto; text-align:center;}


@media screen and (max-width: 768px) {

#bro_shop h2{width:40%;}

#bro_shop .menu{padding:2% 0; margin-bottom:10%;}
#bro_shop .menu ul{width:95%;}
#bro_shop .menu ul li{width:20%;}
#bro_shop .menu ul li a{letter-spacing:1px; font-size:80%;}
#bro_shop .menu ul li a span{font-size:30%;}

#bro_shop .line{width:90%; margin:13% auto;}
#bro_shop .br_more{width:50%; padding:3%; margin:8% auto 0 auto; font-size:80%; border:1px solid #cbbdd8;}

#bro_shop #about h2{margin:0 auto 10% auto;}
#bro_shop #about p{width:95%; margin:0 auto; font-size:80%;}
#bro_shop #about .about_img{width:90%; margin:8% auto;}
#bro_shop #about .about_img img{margin-bottom:3%;}

#bro_shop #concept h2{margin:0 auto 10% auto;}
#bro_shop #concept h3{font-size:100%; margin-bottom:5%;}
#bro_shop #concept h4{font-size:90%; margin-bottom:8%;}
#bro_shop #concept p{font-size:80%;}

#bro_shop #look h2{margin:0 auto 10% auto;}
#bro_shop #look h3{font-size:120%; letter-spacing:4px; width:90%; margin:8% auto 0 auto;}
#bro_shop #look h3 b{font-size:30%; margin-left:2%;}
#bro_shop #look ul{width:90%; margin:5% auto;}
#bro_shop #look ul li p{font-size:70%; margin:8% 0}
#bro_shop #look ul li p b{font-size:70%;}

#bro_shop #information h2{margin:0 auto 10% auto;}
#bro_shop #information a{width:90%;}

#bro_shop #instagram h2{margin:0 auto 10% auto;}
#bro_shop #instagram .insta_name{font-size:130%;}
#bro_shop #instagram .insta{width:90%; margin:5% auto;}

#br_footer{width:100%; margin:15% auto 0 auto; padding:5%;}

#page_top{right:7%; bottom:2%;}

}