/*reset*/
html{ scroll-behavior: smooth;}
body{ margin:0; padding: 0; background: #0085ff url(../images/bg-gasha.png) no-repeat center 5em/cover;font-size: 18px; font-family: "source-han-sans-traditional", sans-serif; font-weight: 400;}
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}
b{ font-weight: normal;}
h1{ margin: 0; position: relative;}
a{ color: inherit; text-decoration: none;}
em{ font-style: normal; font-weight: 500;}

/*�酞��𧢲��*/
header{ position: relative; overflow: hidden; text-align: center; min-height: 100vh;}
.g-boom1{ background: url(../images/g-boom1.png) no-repeat center 5em/cover; position: absolute; top:0; left: 0; right: 0; bottom: 0; animation: boom1 1s;}
.g-boom2{ background: url(../images/g-boom2.png) no-repeat center 5em/cover; position: absolute; top:0; left: 0; right: 0; bottom: 0; animation: boom2 1s;}
.gbtn{ justify-content: center; gap: 40px; display: flex; margin:1em 0; position: relative;}
a[href="index.html"]{position: fixed;right: 0;top:50%;background: #001771;color: #fff;width: 1em;line-height: 1.1;padding: 10px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;}

.gbtn a{ flex: 0 1 135px;}
.gbtn a span{ display: block; border-radius: 15px; padding: 5px 10px; border:3px solid #231463; color:#231463; font-size: 0.9em; line-height: 1.1;}
#showMusicBtn span{ background:#ffa6a6;}
#showEventBtn span{ background:#f9ec8f;}
#showPlaceBtn span{ background:#b8eaad;}


h1{ background: url(../images/title-gasha.png) no-repeat center center/contain; width:30%; max-width: 537px; min-width: 300px; margin: 1em auto 0 auto;}
h1:before{ content: ''; display: block; padding-top: 36%;}
.h-text{ margin:0.5em 0 1em 0; position: relative;}
.g-gashapon{ width: 33%; max-width: 367px; margin:0 auto; position: relative;}

.gashapon div[class^=idea0]{ width:70%; max-width: 500px; padding:50px 0; border-radius: 15px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center;box-shadow: 0 0 10px #03A9F4;}
.music div[class^=idea0]{ background:#ffbbea;}
.event div[class^=idea0]{ background:#ffed8f;}
.place div[class^=idea0]{ background:#70ff94;}
.i-author{ flex: 0 0 150px; text-align: center; padding:0 20px; border-right: 1px solid #000;}
.i-author b{ display: inline-block; padding: 2px 5px; border-radius: 5px; font-size: 14px; border:1px solid #000;}
.i-author em{ font-size: 1.1em; display: block;}
.i-txt{ padding:0 20px;}

.close{ transform:rotate(45deg); font-size: 2em; font-weight: 100; position: absolute; right:15px; top:25px; line-height: 0;}

.i-author:before{content: '�剖�靝�删㬢敺�'; display: block; font-size: 14px; text-align: center; margin-bottom: 1em;}
.i-author:after{ content: '��𣂷�𤤿������'; display: block; font-size: 14px; text-align: center; margin-top: 1em;}
.music .i-author:before,.music .i-author:after{ color:#d73da8;}
.event .i-author:before,.event .i-author:after{ color:#f2951d;}
.place .i-author:before,.place .i-author:after{ color:#0c975b;}


/**/
.share{position:fixed; z-index:5; width:50px; height:50px; font-size:14px; bottom:20px; right:22px;}
#option{ display: none;list-style: none; margin:0 ; position: absolute; bottom:0; left:-310px;  width:300px; height: 50px;}
.share.show #option{ display:flex; background:#0000006b; color:#fff; border-radius:50px; box-sizing: border-box; padding:20px 10px; align-items:center; justify-content:space-around;}
#option li{ padding:5px 0;}
#option a{text-decoration: none;}
#option img{width:20px; height: 20px;}
.logo{ display: block; height: 35px;}

@media screen and (max-width:1440px){
    .g-gashapon{ width: 260px;}
    .gbtn a{ flex: 0 1 110px; }
    .gbtn a span{ border-radius: 10px;}

}
@media screen and (max-width:768px){
    .desktop{ display: none;}

    .g-boom1{ background: url(../images/m_g-boom1.png) no-repeat center top; background-size: 170%;}
    .g-boom2{ background: url(../images/m_g-boom2.png) no-repeat center top; background-size: 170%;}

    .gbtn{ gap: 30px;}
    .gbtn a{ flex: 0 1 25%; }

    .gashapon div[class^=idea0]{ flex-direction: column; padding:20px;}
    .i-author{ flex: auto; border-right:none; border-bottom:1px solid #000; padding: 20px;}
    .i-txt{padding:20px ;}
    
    /*��鈭�*/
	.share{ bottom:10px; right:10px;}
}
@media screen and (max-width:550px){
    .logo img{ height: 25px;}
     .gbtn{ gap:20px;}
}