@charset "utf-8";
/* CSS Document */
*{box-sizing: border-box;}
body{padding: 0;margin: 0;font-family: "Noto Serif JP", serif; background-color: #920000;background-image: url("../images/bk.png");background-size: cover;background-position: center;background-attachment: fixed;color: #fff;font-size: 18px;}
a{color: #fff;font-size: 18px;text-decoration: none;}
a:hover{color: rgba(255,255,255,.6);font-size: 18px;text-decoration: none;}
a img {  transition: opacity .3s;}
a img:hover{opacity: .7;}
.wrap{padding: 0;margin: 0;position: relative;}
section{}
section > h2{text-align: center;font-size: clamp(1.2rem, 0.84rem + 1.8vw, 3rem);text-shadow: 0 2px 5px rgba(0,0,0,0.7);}
.contents{}
section.mainimage{background-image: url("../images/web_mainimage_BG.jpg");background-size:cover;background-position: center; height: 100vh;width: 100%;position: relative;overflow: hidden;}
section.mainimage img.title{position: absolute;bottom: 1em;left: 50%;transform: translateX(-50%);width: 90%;}
section.mainimage img.upper{position: absolute;left: 50px;top: 50px;width:min(65%, 600px);z-index: 1;}
section.mainimage img.middle{position: absolute;left: 50px;top: 50%;transform: translateY(-50%);width:min(60%, 550px);z-index: 1;}
section.mainimage img.right{position: absolute;right: 0;top: 50%;transform: translateY(-50%);height: auto;width:min(65%, 2000px);}
@media screen and (max-width: 820px){
section.mainimage img.upper{position: absolute;left: 1em;top: 50px;width:min(90%, 600px);z-index: 1;}
section.mainimage img.middle{left: 1em;top: auto;bottom:15%;transform: none;width:min(90%, 550px);}
section.mainimage img.right{position: absolute;right: auto;left: -10%; top: 40%;transform: translateY(-40%);height: auto;width:110%;}
}

section.about{padding: 5em 0;}
section.about > div{width: clamp(18.75rem, 93.75vw, 112.5rem);margin: auto;font-size: clamp(1rem, 0.8rem + 1vw, 2rem);display: flex;align-items: center;flex-direction: row-reverse;justify-content: center;}
section.about > div > div{line-height: 2;padding: 1em;}
section.about > div > div > dl > dt{font-weight: bold;text-shadow: 0 2px 5px rgba(0,0,0,0.7);color: #ffce05;}
section.about > div > img{width: 30%;height: auto;}
@media screen and (max-width: 820px){
section.about > div{width: clamp(18.75rem, 93.75vw, 112.5rem);margin: auto;font-size: clamp(1rem, 0.8rem + 1vw, 2rem);display: flex;flex-direction: column-reverse;}
section.about > div > img{width: 70%;height: auto;}
}

section.prize{padding: 5em 0;}
section.prize h2{padding: .5em;background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);}
section.prize > div{padding: 2em 0;width: clamp(18.75rem, 93.75vw, 112.5rem);margin: auto;font-size: clamp(1rem, 0.8rem + 1vw, 2rem);}
section.prize > div > h3{text-align: center;color: rgba(255,206,0,1.00); font-size: clamp(1.2rem, 0.84rem + 1.8vw, 3rem);text-shadow: 0 2px 5px rgba(0,0,0,0.7);}
section.prize > div > div > h4{font-size: clamp(1.1rem, 0.591rem + 2.55vw, 2.5rem);text-shadow: 0 2px 5px rgba(0,0,0,0.7);border-bottom: 1px solid #fff;}
section.prize > div > div > div{display: flex;gap:20px;align-items: center;width: 100%;}
section.prize > div > div > div > div{width: 100%;}
section.prize > div > div .prize-img{width: 100%;max-width: 300px;display: block;margin: auto;}
section.prize > div > div .prize-img img{width: 100%;}
section.prize .prize-item{display: flex;gap:20px;align-items: center;padding: 2em 0;width: clamp(18.75rem, 93.75vw, 112.5rem);margin: auto;font-size: clamp(1rem, 0.8rem + 1vw, 2rem);}
section.prize .prize-item h4{font-size: clamp(1.1rem, 0.591rem + 2.55vw, 2.5rem);color: rgba(255,206,0,1.00);text-shadow: 0 2px 5px rgba(0,0,0,0.7);border-bottom: 1px solid #fff;padding-top: 0;margin: 0;}
section.prize .prize-item .prize-text{width: 100%;}
section.prize .guide{display: flex; align-items: center;justify-content: center;margin: 0 auto;width: fit-content;padding: 1em;gap: 1em;font-size: 1.5rem;}
section.prize .guide img{width: 20%;}
section.prize .guide .text{display: block;width: fit-content;}
@media screen and (max-width: 820px){
section.prize > div > div > div{display: flex;flex-flow: column;gap:20px;align-items: center;width: 100%;}
section.prize .prize-item{display: flex;flex-flow: column-reverse; gap:20px;align-items: center;padding: 2em 0;width: clamp(18.75rem, 93.75vw, 112.5rem);margin: auto;font-size: clamp(1rem, 0.8rem + 1vw, 2rem);}
section.prize .guide{display: flex;flex-flow: column;align-items: center;justify-content: center;margin: 0 auto;width: fit-content;padding: 1em;gap: 1em;font-size: 1.5rem;}
section.prize .guide img{width: 70%;margin: auto;}
}

section.intro{padding: 5em 0;}
section.intro > p{font-size: 1.2rem;}
section.intro > div{width: clamp(18.75rem, 93.75vw, 112.5rem);margin: auto;}
section.intro > div > img{width: 100%;}
section.intro > div > button{display:flex;justify-content: center; padding: 0; margin: 1em auto;width: fit-content;background-color: inherit;border: 0;}
section.intro > div > button > a {width: fit-content;margin: auto; padding: .5em 2em;border-radius: 100px;background-color: #fff;color: #920000;}
section.intro > div > button > a:hover {width: fit-content;margin: auto; padding: .5em 2em;border-radius: 100px;background-color: rgba(255,255,255,.7);color: #920000;}

section.list{padding: 5em 0;}
section.list .contents{display: flex;justify-content: space-around;flex-direction:row; flex-wrap: wrap; gap:20px;}
section.list .text{text-align: center;font-size: clamp(1.2rem, 0.84rem + 1.8vw, 3rem);text-shadow: 0 2px 5px rgba(0,0,0,0.7);padding: 3em 0;}
section.list dl{width: 20%;}
section.list dl dt, section.list dl dd{width: 100%;padding: 0;margin: 0;}
section.list dl dt a img{width: 100%;}
section.list dl dd{width: 100%;text-align: center;}
section.list dl dd h4{margin: .5em auto;line-height: 1.5;}
section.list > div > dl > dd > h4{margin: .5em auto;line-height: 1.5;}
section.list > div > dl > dd > h4 > a{font-size: 2rem;width: 100%;}
section.list > div > dl > dd > h4 > a > span{display: block; font-size: 1.2rem;}
section.list > div > dl > dd > h4 > p{}

@media screen and (max-width: 820px) and (orientation: portrait) {
section.list dl{width: 45%;}
section.list > div > dl > dd > h4 > a{font-size: clamp(1.7rem, 1.508rem + 0.96vw, 2rem);width: 100%;}
section.list > div > dl > dd > h4 > a > span{display: block; font-size: 1.2rem;}
}
@media screen and (max-width: 420px) and (orientation: portrait) {
section.list dl{width: 80%;}
}

footer{width: 100%;padding: 1em;font-size: .8rem;background-color: rgba(0,0,0,1.00);position: absolute;bottom: 0;text-align: center;}