@charset "UTF-8";
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:100%;}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{*zoom:1;}

html{font-size:62.5%;}
body{font-size:15px; font-size:1.5rem; font-family:'Noto Serif JP',system-ui, "Hiragino Sans", "YuGothic","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Gothic",sans-serif; font-weight:400; letter-spacing:0.05em; line-height:1.75; text-align:center; background:#000; -webkit-text-size-adjust:100%; color:#f4f3f4; max-height: 100%; box-sizing:content-box; margin:0;}

img {max-width:100%; height:auto;}

a{color: #f4f3f4;}
a:hover{opacity: 0.8; filter: alpha(opacity=80);}

.en{font-family: 'Libre Baskerville', serif; font-weight:700;}

.sp{display:block;}
@media screen and (min-width : 568px) {
.sp{display:none;}
}

/*Layout*/
@font-face {
  font-family: 'abwft';
  src:  url('fonts/abwft.eot?3flcsd');
  src:  url('fonts/abwft.eot?3flcsd#iefix') format('embedded-opentype'),
  url('fonts/abwft.ttf?3flcsd') format('truetype'),
  url('fonts/abwft.woff?3flcsd') format('woff'),
  url('fonts/abwft.svg?3flcsd#abwft') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'abwft' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-link{letter-spacing:0.1rem;}
.icon-link:after {padding-left:4px; content: "\e900";}


header{margin-top:60px; text-align: center;}
header .logo img{width:70%; max-width:350px; height:auto; margin:0 auto;}

@media screen and (min-width : 568px) {
.sp{display: none;}
}


h2{position:relative; max-width:800px; font-size:clamp(1.9rem, 1.167rem + 3.67vw, 3rem); font-weight: 400; color: #f4f3f4; padding:0 0 30px 0; margin:0 auto 30px; line-height: 2.8rem;}
h2 span{font-size:1.7rem; margin-top:4px; display:block;}
h2:after{position:absolute; bottom:0; left:0; right:0; margin:0 auto; border-bottom:3px solid #f4f3f4; content:""; width:50px;}
#about h2:after{border-bottom:3px solid #e7464c;}

#mtalk{padding: 80px 0; text-align:center;}
#mtalk a{display:inline-block;}
#mtalk a img{width:200px; height:auto; margin:0 auto;}
#mtalk p{margin-top:10px;}

.info{margin:60px auto; padding:30px 0 60px 0; background:rgba(0, 0, 0, 0.1);}

#jbox{margin:0 auto; padding:80px 0; background:rgba(0, 0, 0, 0.1);}
#jbox ul{display:flex; justify-content:center; flex-wrap: wrap; max-width:600px; margin:16px auto; padding:0 20px;}
#jbox ul.special li{max-width:290px; width:48%;}
#jbox ul.special li:first-child{margin-right:2%;}
#jbox ul.special li:last-child{margin-left:2%;}
#jbox ul.winner{max-width:598px;}
#jbox ul li:hover{opacity:.7; transition : all 0.5s ease 0s;}
#jbox ul li.cs{filter: grayscale(100%); opacity:.65;}

#winner{margin: 0; background: #e7464c; padding: 60px 0;}
#winner .box{max-width:800px; margin:0 auto; }
#winner h4{margin:8px 0 0 0; border:none; font-family: 'Noto Serif', serif; font-size:1.7rem;}
#winner .inter{margin:16px auto 30px; max-width:350px;}
#grand,#specialbox{ padding: 0 20px;}
#grand{margin-bottom:60px;}
#grand .prize,#specialbox .prize{font-family: 'Noto Serif', serif; font-size:24px; font-size: 2.4rem; font-weight: 400; margin:0 0 16px 0; padding:10px; line-height: 2.8rem; text-align:center; border-top:1px solid #f4f3f4; border-bottom:1px solid #f4f3f4; color:#f4f3f4;}
#grand{padding:0 20px; max-width:800px; margin:0 auto;}
#grand .winjacket{max-width:300px; margin:0 auto;}

#specialbox .prize{max-width:800px; margin:0 auto; margin-bottom:16px;}
#specialbox .box{display:flex; flex-wrap:wrap; gap:32px; align-content:center; margin-bottom:30px; justify-content:center;}
#specialbox .box .special{width:calc((100% / 2) - 30px); max-width:280px;}
#specialbox h4{font-size:14px; font-size:1.4rem; line-height:1.4;}

@media screen and (min-width : 768px) {
#specialbox .box .special{}
#winner .box{max-width:800px; margin:0 auto; display:flex; gap:20px; justify-content:center;}
#specialbox h4{font-size:14px; font-size:1.4rem; line-height:1.4;}
}

#nominees{width:100%; margin:0; padding:0 0; padding:80px 0; background: #e7464c;}
@media screen and (max-width : 768px) {
  #nominees{padding:40px 0;}
}
#nominesslist{max-width:1000px; margin:0 auto; color:#f4f3f4; text-align:left; font-size:16px; font-size:1.6rem;}
#nominesslist ul{max-width:1000px; margin: 0px auto; text-align: center;}
#nominesslist ul#jacket{margin:20px; display:flex; flex-wrap:wrap; gap:5%; justify-content:center;}
#nominesslist ul#jacket li{position:relative; width:100%; padding-bottom:45px; margin-bottom:3%;}
#nominesslist a{color:#f4f3f4; text-decoration:underline; text-decoration-thickness:2px;}
#nominesslist a:hover{color:#f4f3f4;}
#nominesslist #jacket .title{margin-top:8px; font-size:clamp(1.25rem, 0.883rem + 1.83vw, 1.8rem); font-weight:700;}
#nominesslist #jacket .name{margin-bottom:5px; font-size:clamp(1.3rem, 1.167rem + 0.67vw, 1.5rem);}
#nominesslist #jacket .name a{text-decoration: none; border-bottom: 1px solid #f4f3f4; padding-bottom: 2px;}
#nominesslist #jacket .name a:hover{border-bottom: 1px solid #f4f3f4;}
#nominesslist #jacket .listen{position:absolute; bottom:10px; right:0; left:0; margin:0 auto; display:flex; justify-content:center; gap:10px}
#nominesslist #jacket .listen img{width:auto; height:28px;}
.attention{font-size:clamp(1.2rem, 1.133rem + 0.33vw, 1.3rem); margin: 15px 15px 0 0; text-align: center;}

@media screen and (min-width : 380px) {
#nominesslist ul#jacket li{width:calc((100% / 2) - 5%);}
}

@media screen and (min-width : 750px) {
#nominesslist ul#jacket li{width:calc((100% / 3) - 5%);}
}

@media screen and (min-width : 800px) {
}

.info{margin:40px auto 0px auto; padding-bottom:40px;}
.info .txt{max-width:650px; margin:0 auto;}
.info p{padding:0 20px 0 20px; font-family: 'Noto Sans JP', sans-serif; font-size:clamp(1.4rem, 1.267rem + 0.67vw, 1.6rem);  line-break:strict; text-align:justify; word-break:break-all; text-justify:inter-character; text-justify:inter-character; word-wrap:break-word; overflow-wrap:break-word; line-break:strict;}

#aboutbox{margin: 0; padding:80px 0; background:rgba(0, 0, 0, 0.1);}
@media screen and (max-width : 768px) {
  #aboutbox{padding:40px 0;}
}
#about{max-width:700px; margin:0 auto;}
#about h2{font-size:clamp(1.7rem, 1.5rem + 1vw, 2rem); letter-spacing:0; color: #e7464c;}
#about p{padding:0 20px 16px 20px; font-family: 'Noto Sans JP', sans-serif; font-size:clamp(1.4rem, 1.267rem + 0.67vw, 1.6rem);  line-break:strict; text-align:justify; word-break:break-all; text-justify:inter-character; text-justify:inter-character; word-wrap:break-word; overflow-wrap:break-word; line-break:strict;}
#about .gray{margin:20px; border: 1px solid #e7464c; padding:20px 0; background: #222;}
#about .right{display:block; text-align:right;}

#judge2{ padding:80px 0 !important; text-align:center; padding:20px 0; background: #222;}
@media screen and (max-width : 768px) {
  #judge2{padding:40px 0 !important;}
}
#judge2 h4{max-width:280px; font-size: 2.1rem; font-weight: 400; border-top: 1px solid rgba(255, 255, 255, 0.6); border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding: 5px; margin:32px auto; line-height: 2.8rem;}
#judge2 ul{display:flex; flex-wrap:wrap; max-width:100%; margin:0 auto 20px auto; padding:0 20px; justify-content:center;}
#judge2 li{width:calc((100% / 3) - 2%); margin:0 1% 16px 1%; box-sizing: border-box; vertical-align:top; text-align: left;}
#judge2 span{display:block; font-size:12px; font-size:1.2rem; letter-spacing: 0;}
#judge2 li:first-child{margin:0 1% 0 0;}
#judge2 li:last-child{margin:0 0 0 1%;}
#judge2 li img{margin-bottom:4px;}
#judge2 a{display:block; word-wrap:break-word;}

@media screen and (min-width :780px) {
#judge2 ul{max-width:1100px; flex-wrap:initial; margin:0 auto 20px auto;}
#judge2 li{width:calc(100% / 6); margin:0 1%; box-sizing: border-box; color: #222;}
}

#sponsor{padding:30px 0; background:rgba(0, 0, 0, 0.06);}
#sponsor ul{display:flex; flex-wrap:wrap; justify-content:center; max-width:900px; margin:16px auto; padding:0 20px; gap:2%; text-align:left;}
#sponsor ul li{width:calc((100% / 4) - 2%); margin-bottom:16px; font-size:1.4rem;}

@media screen and (min-width : 568px) {
#sponsor ul{flex-wrap:initial;}
#sponsor ul li{width:calc(100% / 6); max-width:100px; line-height:1.3;}
}

#contact{text-align: center; margin: 0 auto; margin: 30px auto 30px;; width: 95%;}
#contact a{padding: 15px 0; display: block; border: 1px solid #000; color: #000; text-decoration: none; background:rgba(255, 255, 255, 0.50); cursor:pointer;}

#sns{padding:30px 0; width:100%; background: #222; border-bottom: 1px solid #000;}
#sns ul{display:flex; justify-content:center; gap:20px;}
#sns ul li{width:50px;}
#sns ul li img{}

footer{padding:60px 0 20px 0; text-align: left; font-size:12px; font-size:1.2rem; background: #222;}
footer #copy{margin-left: 15px; text-align:center; font-family: 'Noto Sans JP', sans-serif; font-size:clamp(1.2rem, 1.133rem + 0.33vw, 1.3rem); letter-spacing:0; }

#history{margin:0 auto 60px auto; text-align:center; padding:20px 20px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
#history a{background:#fff;}
#history img{max-width:80px;}



/*fadein*/
.fadeTrigger,.fadeUpTrigger,.fadeDownTrigger,.fadeLeftTrigger,.fadeRightTrigger{opacity: 0;}
.fade{animation-name:fadeAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
.fadeLeft{animation-name:fadeLeftAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeAnime{
from {opacity: 0; transform: translateY(0);}
to {opacity: 1; transform: translateY(0);}
}
.fadeUp{animation-name:fadeUpAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeUpAnime{
from {opacity: 0; transform: translateY(20px);}
to {opacity: 1; transform: translateY(0);}
}
.fadeDown{animation-name:fadeDownAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeDownAnime{
from {opacity: 0; transform: translateY(-100px);}
to {opacity: 1; transform: translateY(0);}
}

.fadeLeft{animation-name:fadeLeftAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeLeftAnime{
from {opacity: 0; transform: translateX(-30px);}
to {opacity: 1; transform: translateX(0);}
}

.fadeRight{animation-name:fadeRightAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeRightAnime{
from {opacity: 0; transform: translateX(100px);}
to {opacity: 1; transform: translateX(0);}
}

/* .fadeInMonoTrigger{filter: grayscale(100%);}
.fadeInMono{animation: fadeInMonoAnime 4s forwards; filter: grayscale(100%);}
@keyframes fadeInMonoAnime {
100% {-webkit-filter: grayscale(0%);  filter: grayscale(0%);}
} */

.btn {
  margin-top: 15px;
}
.btn a {
  background: #e7464c;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  width: 350px;
  padding: 20px;
  margin: 0 auto;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 16px;
}
.btn a:after {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI0ZGRkZGRiIgY2xhc3M9ImJpIGJpLWFycm93LXJpZ2h0LWNpcmNsZS1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDBhOCA4IDAgMSAxIDAgMTZBOCA4IDAgMCAxIDggME00LjUgNy41YS41LjUgMCAwIDAgMCAxaDUuNzkzbC0yLjE0NyAyLjE0NmEuNS41IDAgMCAwIC43MDguNzA4bDMtM2EuNS41IDAgMCAwIDAtLjcwOGwtMy0zYS41LjUgMCAxIDAtLjcwOC43MDhMMTAuMjkzIDcuNXoiLz4KPC9zdmc+'); no-repeat;
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-size: 100%;
  margin-left: 10px;
}
@media all and (max-width: 768px) {
.btn a {
  width: 95%;
}
  
}