@charset "UTF-8";

/* reset ------------------------------------------------------------------

INDEX
-00 reset
-01 common

------------------------------------------------------------------ */

/* ------------------------------------------------------------------


00 reset




------------------------------------------------------------------ */
img{
     position:bottom;
}
h1,h2,h3,h4,h5,h6 {
     font-size:100%;
     font-weight:normal;
     width: fit-content;
}
ul {
     list-style:none;
     margin: 0;
     padding: 0;
}
h1,h2,h3,h4,h5,h6,
p,li {
     line-height:100%;
     margin: 0;
}

table {
     font-size:100%;
     border-collapse:collapse;
     border-spacing:0;
}
fieldset,img,abbr,acronym {
     border:0;
}
address,caption,cite,code,dfn,em,var {
     font-style:normal;
     font-weight:normal;
}
img {
     vertical-align:bottom;
}
q:before,q:after {
     content:'';
}

/* ----------------------------------
font reset
---------------------------------- */
body{
     font:13px/1.231;
     *font-size:small;
     *font:x-small;
     color:#282828;
     font-family: 'Karla',Noto Sans Japanese, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
     margin:0;
     padding:0;
}
select,
input,
button,
textarea,
button{
     font:99% arial,helvetica,clean,sans-serif;
     font-family: 'Karla',Noto Sans Japanese, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
input:focus {
    outline: none;
}
table{
     font-size:inherit;
     font:100%;
}
pre,
code,
kbd,
samp,
tt{
    font-family: 'Karla', sans-serif;
     *font-size:108%;
     line-height:100%;
}
input[type="text"],
input[type="password"],
textarea,
select {
    outline:none;
  }
/* ----------------------------------
clearfix
---------------------------------- */
.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}

/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.v-middle{
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  position: absolute;
}
.y-middle{
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  position: absolute;
}

a{
  text-decoration: none;
  transition-duration:0.3s;
  color:#04c;
}
a:hover{
  opacity: 0.6;
}

*{box-sizing: border-box;}


html,body{width: 100%;height: 100%;font-family: "Noto Sans JP", sans-serif;}

.box>.inner{width: 1000px;margin: 0 auto;padding:100px 0;}

.bsk{transform: skewY(-5deg);display: flex;align-items: center;box-shadow: 0 0 10px rgba(0,0,0,0.2);
  background-image: url(../img/bg_texture.png);
  background-blend-mode: multiply;
  background-size: cover;overflow: hidden;background-repeat: no-repeat;}
.bsk>.inner{transform: skewY(5deg);padding:150px 0;color: #fff;}
figure.mov-wrap{aspect-ratio:16 /9;width: 800px;margin:80px auto;border-radius: 6px;overflow: hidden;}
figure.mov-wrap iframe{width: 100%;height: 100%;}

h2{font-size: 42px;font-weight: bold;margin:0 auto 60px;}
h2>span{font-size: 14px;display: block;}
#topics h2,
#about h2,
#sponsor h2{font-family: "Oswald", sans-serif;font-size: 62px;text-align: center;position: relative;}
#topics h2 span,
#about h2 span,
#sponsor h2 span{font-family: "Noto Sans JP";line-height: 1;font-size: 16px;color: #128F3C;background: #fff;        z-index: 1;position: relative;width: fit-content;margin: 10px auto 0;padding: 0 10px;}
#topics h2:after,
#about h2:after,
#sponsor h2:after{content:"";position: absolute;        bottom: 6px;display: block;width: 100%;height:1px; background:#128F3C;}

#kv{height: 110vh;overflow: hidden;margin-bottom: -10vh}
#kv .kv-wrap{display: flex;height: 100%;}
#kv .kv-wrap div{width: 50%;height: 100%;}
#kv .left{padding:3vw;position: relative;background-image:url(../img/img_kyusyu.svg);background-repeat: no-repeat;background-size: 80%;background-position: center 33vw;}
#kv .btn-entry{position: absolute;right: 2vw;bottom: calc(18vh);}
#kv .btn-entry img{width: 13vw;height: auto;}

#kv h1 img{width: 4vw;height: auto;}
#kv .logo{width: 90%;height: auto;margin:80px 0;}
ul.scrollwrap{display: flex;width: 90%; justify-content: space-between;}
ul.scrollwrap>li{width:calc((100% / 3) - 10px);}
ul.scrollwrap>li:nth-child(1)>ul{animation: infinity-scroll-up 40s infinite linear 0.5s both;}
ul.scrollwrap>li:nth-child(2)>ul{animation: infinity-scroll-down 42s infinite linear 0.5s both;}
ul.scrollwrap>li:nth-child(3)>ul{animation: infinity-scroll-up 38s infinite linear 0.5s both;}
ul.scrollwrap ul.photo li{margin:0.6vw 0;border-radius: 6px;overflow: hidden;box-shadow: 0 5px 5px rgba(0,0,0,0.1);}
ul.scrollwrap ul.photo li img{width: 100%;height: auto;aspect-ratio:2 / 3;object-fit: cover;}

#fukuma{background-color: #128F3C;}
#fukuma .inner{text-align: center;}
#fukuma .inner>img{margin-bottom: 20px;}
#fukuma .inner p{line-height: 2.4;font-size: 18px;}
#fukuma .inner ul{margin:60px 0;}
#fukuma .inner ul>li{margin-bottom:2px;}
#fukuma .inner ul>li>dl{display: flex;justify-content: space-between;font-size: 18px;font-weight: bold;}
#fukuma .inner ul>li>dl>dt{border-radius: 6px 0 0 6px;padding:26px;width: 25%;text-align: center;background: #282828;color: #fff;}
#fukuma .inner ul>li>dl>dd{border-radius: 0 6px 6px 0;padding:26px;width: calc(75% - 2px);margin: 0;text-align: left;background: #fff;color: #282828;font-weight: normal;}
#fukuma .inner ul+a>img{width:282px;height: auto;}

#topics{margin-top:100px;}
#topics .content-wrap{display: flex;justify-content: space-between;}
#topics div:nth-child(odd){flex-direction: row-reverse;}
#topics .content-wrap div{width: 50%;}
#topics .content-wrap:nth-child(even){margin-bottom: 80px;}
#topics .content-wrap:nth-child(even)>div{        padding-right: 40px;}
#topics .content-wrap:nth-child(odd)>div{        padding-left: 40px;}
#topics .content-wrap div h3{font-size: 38px;font-weight: bold;margin-bottom:40px;line-height: 1.4;}
#topics .content-wrap div h3+p{font-size: 18px;line-height: 2;}
#topics .content-wrap div h3+p>span{display: block;font-size: 12px;margin-top: 10px;}
#topics .content-wrap div.right{position: relative;min-height: 546px;}
#topics .content-wrap div.right>figure{box-shadow: 0 10px 20px rgba(0,0,0,0.08);margin:0;position: absolute;width:280px;height: auto;aspect-ratio:2 / 3;transform: skewY(-5deg);overflow: hidden;}
#topics .content-wrap div.right>figure>img{object-fit: cover;transform: skewY(5deg) scale(1.1);width:280px;height: auto;aspect-ratio:2 / 3;}
#topics .content-wrap div.right>figure:nth-child(even){left: 0;top: 100px;}
#topics .content-wrap div.right>figure:nth-child(odd){right: 0;}

#mc{background-color: #EEEEEE;}
#mc>.inner{padding: 0;display: flex;}
#mc>.inner>div>h2>span{display: block;color: #fff;background-color: #128F3C;font-size: 18px;width: 140px;font-weight: bold;text-align: center;border-radius: 40px;margin-bottom: 20px;}
#mc>.inner>div:nth-child(1){width: calc(100% - 342px);padding-right: 80px;color: #282828;padding:130px 80px 50px 0;}
#mc>.inner>div:nth-child(1)>p{font-size: 16px;font-weight: 500;line-height: 2;}
#mc>.inner>div:nth-child(2){width: 342px;display: flex;align-items: end;}
#mc>.inner img{width: 342px;height: auto;}
#mc>.inner>div:nth-child(1) h2{margin-left:0;}


#about{}
#about p{font-size: 18px;line-height: 2;text-align: center;}
#about ul{display: flex;}
#about ul li{width: calc(100% / 3);text-align: center;}
#about ul li h3{color: #128F3C;font-size: 18px;font-weight: bold;margin: 20px auto;}
#about ul li img{width: 192px;height: 192px;margin: 0 auto;}
#about ul li p{font-size: 14px;line-height: 1.8;}

#sponsor ul{display: flex;justify-content: center;align-items: center;}
#sponsor ul>li{margin: 0 30px;}
#sponsor ul>li .soken{height: 140px;}
#sponsor ul>li .roj{width:300px;height:auto;}

#map{height: 450px;width: 100%;}
#map iframe{width: 100%;height:100%;}

footer{background: #282828;text-align: center;}
footer.box>.inner{padding:40px 0 20px;}
footer ul{display: flex;justify-content: center;margin-bottom:120px;}
footer ul li{margin:0 20px;}
footer p{font-size: 12px;color: #fff;}
footer svg{fill:#ffffff;margin-bottom:10px;}
@keyframes infinity-scroll-up {
from {
    transform: translateY(0);
  }
    to {
    transform: translateY(-100%);
  }
}
@keyframes infinity-scroll-down {
from {
    transform: translateY(-100%);
  }
    to {
    transform: translateY(0);
  }
}
@media screen and (max-width:480px) {

  .box>.inner{width: 100%;margin: 0 auto;padding:50px 20px;}

  .bsk{transform: skewY(-5deg);display: flex;align-items: center;box-shadow: 0 0 10px rgba(0,0,0,0.2);
    background-image: url(../img/bg_texture.png);
    background-blend-mode: multiply;
    background-size: 100%;overflow: hidden;overflow: hidden;background-repeat: no-repeat;}
  .bsk>.inner{transform: skewY(5deg);padding:100px 20px;color: #fff;}
  figure.mov-wrap{aspect-ratio:16 /9;width: 94%;margin:40px auto;border-radius: 6px;overflow: hidden;}
  figure.mov-wrap iframe{width: 100%;height: 100%;}

  h2{font-size: 32px;line-height: 1.4;font-weight: bold;margin:0 auto 30px;}
  h2>span{font-size: 14px;display: block;}
  #topics h2,
  #about h2,
  #sponsor h2{font-family: "Oswald", sans-serif;font-size: 42px;text-align: center;position: relative;}
  #topics h2 span,
  #about h2 span,
  #sponsor h2 span{font-family: "Noto Sans JP";line-height: 1;font-size: 14px;color: #128F3C;background: #fff;        z-index: 1;position: relative;width: fit-content;margin: 5px auto 0;padding: 0 10px;}
  #topics h2:after,
  #about h2:after,
  #sponsor h2:after{content:"";position: absolute;        bottom: 6px;display: block;width: 100%;height:1px; background:#128F3C;}

  #kv{height: 100vh;overflow: hidden;margin-bottom: -2vh}
  #kv .kv-wrap{display: flex;height: 100%;flex-wrap: wrap;}
  #kv .kv-wrap div{width: 100%;height: 50vh;position: relative;}
  #kv .kv-wrap div.left{height: 60vh;}
  #kv .kv-wrap div.right{height: 40vh;}
  #kv .left{padding:3vw;position: relative;background-image:url(../img/img_kyusyu.svg);background-repeat: no-repeat;background-size: 80%;background-position: center 61vw;}
  #kv .btn-entry{position: absolute;right: 2vw;bottom: 0;}
  #kv .btn-entry img{width: 23vw;height: auto;}

  #kv h1 img{width: 8vw;height: auto;}
  #kv .logo{width: 90%;height: auto;margin:60px 0 0;}
  ul.scrollwrap{display: block;width: 100%; height: 100%;justify-content: space-between;}
  ul.scrollwrap>li{width:100%;display: flex;height:calc(100% / 3);}
  ul.scrollwrap>li:nth-child(1)>ul{animation: infinity-scroll-up 40s infinite linear 0.5s both;}
  ul.scrollwrap>li:nth-child(2)>ul{animation: infinity-scroll-down 42s infinite linear 0.5s both;}
  ul.scrollwrap>li:nth-child(3)>ul{animation: infinity-scroll-up 38s infinite linear 0.5s both;}
  ul.scrollwrap ul.photo{display: flex;width: fit-content;}
  ul.scrollwrap ul.photo li{margin:0.6vw;border-radius: 3px;overflow: hidden;box-shadow: 0 5px 5px rgba(0,0,0,0.1);width:calc(100vw / 3 - 30px);}
  ul.scrollwrap ul.photo li img{width: 100%;height: auto;object-fit: cover;object-position: center;aspect-ratio: auto;}

  #fukuma{background-color: #128F3C;}
  #fukuma .inner{text-align: center;}
  #fukuma .inner>img{margin-bottom: 10px;width: 60%;}
  #fukuma .inner p{line-height: 2;font-size: 16px;}
  #fukuma .inner ul{margin:40px 0 20px;}
  #fukuma .inner ul>li{margin-bottom:2px;}
  #fukuma .inner ul>li>dl{display: flex;justify-content: space-between;font-size: 12px;line-height: 1.4;font-weight: bold;}
  #fukuma .inner ul>li>dl>dt{border-radius: 6px 0 0 6px;padding:14px;width: 25%;text-align: center;background: #282828;color: #fff;        display: flex;justify-content: center;align-items: center;}
  #fukuma .inner ul>li>dl>dd{border-radius: 0 6px 6px 0;padding:14px;width: calc(75% - 2px);margin: 0;text-align: left;background: #fff;color: #282828;font-weight: normal;}
  #fukuma .inner ul+a>img{width:40vw;height: auto;}

  #topics{margin-top:30px;}
  #topics .content-wrap{display: flex;justify-content: space-between;flex-wrap: wrap;flex-direction: column;}
  #topics div:nth-child(even),#topics div:nth-child(odd){flex-direction:column-reverse;}
  #topics .content-wrap div{width: 100%;}
  #topics .content-wrap:nth-child(even){margin-bottom: 80px;}
  #topics .content-wrap:nth-child(even)>div{        padding-right: 0px;}
  #topics .content-wrap:nth-child(odd)>div{        padding-left: 0px;}
  #topics .content-wrap div h3{font-size: 24px;font-weight: bold;margin-bottom:40px;line-height: 1.4;text-align: center;margin:0 auto 20px;}
  #topics .content-wrap div h3+p{font-size: 16px;line-height: 1.8;}
  #topics .content-wrap div h3+p>span{display: block;font-size: 12px;margin-top: 10px;}
  #topics .content-wrap div.right{position: relative;min-height: 90vw;}
  #topics .content-wrap div.right>figure{box-shadow: 0 10px 20px rgba(0,0,0,0.08);margin:0;position: absolute;width:280px;height: auto;aspect-ratio:3 / 2;transform: skewY(-5deg);overflow: hidden;}
  #topics .content-wrap div.right>figure>img{object-fit: cover;transform: skewY(5deg) scale(1.2);width:280px;height: auto;aspect-ratio:3 / 2;}
  #topics .content-wrap div.right>figure:nth-child(even){left: 0;top: 100px;}
  #topics .content-wrap div.right>figure:nth-child(odd){right: 0;}

  #mc{background-color: #EEEEEE;}
  #mc>.inner{padding: 0 20px;display: flex;flex-direction: column;}
  #mc>.inner>div>h2>span{display: block;color: #fff;background-color: #128F3C;font-size: 14px;width: 100px;font-weight: bold;text-align: center;border-radius: 40px;margin: 0px auto;}
  #mc>.inner>div:nth-child(1){width: calc(100%);padding-right: 0px;color: #282828;padding:60px 0px 0px 0;}
  #mc>.inner>div:nth-child(1)>p{font-size: 14px;font-weight: 500;line-height: 1.8;margin-bottom: 40px;}
  #mc>.inner>div:nth-child(2){width: 100%;display: flex;align-items: end;}
  #mc>.inner img{width: 80%;height: auto;margin: 0 auto -50px;}

  #about{}
  #about p{font-size: 16px;line-height: 1.8;text-align: center;}
  #about ul{display: flex;justify-content: center;gap:10px;flex-wrap: wrap;}
  #about ul li{width: calc(100% / 2 - 10px);text-align: center;}
  #about ul li h3{color: #128F3C;font-size: 14px;font-weight: bold;margin: 20px auto;}
  #about ul li img{width: 100%;height: auto;margin: 0 auto;}
  #about ul li p{font-size: 14px;line-height: 1.8;}

  #sponsor ul{display: flex;flex-direction: column;justify-content: center;align-items: center;}
  #sponsor ul>li{margin: 0 0px 30px;}
  #sponsor ul>li .soken{height: 100px;}
  #sponsor ul>li .roj{width:70vw;height:auto;}

  #map{height: 200px;width: 100%;}
  #map iframe{width: 100%;height:100%;}

  footer{background: #282828;text-align: center;}
  footer.box>.inner{padding:20px 0 20px;}
  footer ul{display: flex;justify-content: center;margin-bottom:60px;}
  footer ul li{margin:0 10px;}
  footer ul li img{width: 44px;}
  footer p{font-size: 10px;color: #fff;}
  footer svg{fill:#ffffff;margin-bottom:00px;width: 40px;height: auto;}
  @keyframes infinity-scroll-up {
  from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
  }
  @keyframes infinity-scroll-down {
  from {
      transform: translateX(-100%);
    }
      to {
      transform: translateX(0);
    }
  }
}