@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');

body{font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;}
h1{color:#999;}
img{width: 100%;vertical-align: top; pointer-events: none; -webkit-touch-callout:none; -webkit-user-select:none; -moz-touch-callout:none; -moz-user-select:none; user-select:none;}

section{width: 100%; display: block;  overflow: hidden; position: relative; text-align: center;}
section#top{height: 100vh;}
section#doodles,section#shop,section#sns{padding: 5vw 0;}
section#footer{padding: 1vw 0;}


.logo{width: 50%; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
div.logo p{font-family: "Yusei Magic", sans-serif; font-size: 3vw; font-style: normal; margin: 3vw 0;}

.shuffle_box{display: flex; flex-wrap: wrap;}
.shuffle_item{width: calc(100% / 2); padding:5px; box-sizing: border-box; font-family: "Yusei Magic", sans-serif; font-size: 3vw; font-style: normal;}

.shop_box{display: flex; flex-wrap: wrap; width: 100%; text-align: center;}
.shop_box a{width: 50%; padding:5px 15px; box-sizing: border-box; font-size: 3vw; text-align: center;}

.sns_box{display: flex; flex-wrap: wrap; width: 100%; text-align: center; margin: auto;}
.sns_box a{width: 20%; padding:5px 15px; box-sizing: border-box; font-size: 3vw; text-align: center; margin: auto;}

@media (min-width: 1100px) {
div.logo{width: 20%;}
div.logo p{font-size: 18px;}
.shuffle_item {width: calc(100% / 6); font-size: 14px;}
.shop_box a{width: 33%; padding:5px 5vw; font-size: 18px;}
.sns_box a{width: 20%; padding:5px 5vw;}

}

@media print {
body {display: none;}
}