@charset "UTF-8";

/* てすと用 */
/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}


/* 共通事項 */
a {
  text-decoration: none;
  color: black;
}

.top-nav {
  display: flex;
  justify-content: space-around;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}

.header_nav {
  justify-content: space-between;
}

.nav_li {
  padding-left: 3rem;
  list-style-type: none;
}

h1 {
  padding: 1rem;
}

h2 {
  padding: 1rem 0 1rem 0;
  background-color: darkgreen;
  color: beige;
  text-align: center;
}
h3{
  padding-bottom: 1.5rem;
}
li {
  list-style-type: none;
}

main {
  padding: 0 auto 4rem 5rem;
  height: 100%;
}

article {
  width: auto;
  padding-top: 80px;
  padding-left: 800px;
}

.pdng_4r {
  padding-left: 4rem;
}

.pdng_2r {
  padding-left: 2rem;
}

section {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  gap: 50px;
  max-width: 80%;
  margin: auto;
  border-bottom: 3px dotted #4fa54f;
}

.sub {
  background-color: rgb(224, 250, 232);
}
table{
  padding-top: 1rem;
}
/* フッター用　流れる文字用 */
.scrolling-text {
  color: #6e6e6e;
  white-space: nowrap;
  overflow: hidden;
  animation: scrolling 30s linear infinite;
}

@keyframes scrolling {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* ------------------------- 
  index.html
----------------------------*/
#top {
  display: block;
  background-image: url(../images/peter.png), url(../images/peter2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: -50px -50px, -30px -30px;
}

header {
  display: flex;
  justify-content: space-between;
}

nav {
  /*   width: 50%; */
  padding-right: 2rem;
  display: flex;
  justify-content: space-around;
}

nav div a {
  text-decoration: none;
  color: rgb(1, 14, 2);
}

.nav_li a:hover {
  color: rgb(161, 247, 122);
  transition: all 0.5s;
  /*   font-size: 1.5rem; */
}

.hello {
  font-size: 4rem;
  line-height: 5rem;
  text-align: center;
}

.topics {
  /*   background-color: rgba(187, 212, 203,.5); */
  padding-top: 5rem;
}

.tpcs_wrapp {
  display: flex;
  padding: 0 0 2rem 5rem;
  border-bottom: 3px dotted #4fa54f;
}

/* 円を描く */
.contents {
  position: relative;
}

.contents__circle {
  position: absolute;
  top: -600px;
  left: 800px;
}

.circle {
  display: inline-block;
  width: 700px;
  height: 700px;
  background-color: rgba(187, 212, 203, .5);
  border-radius: 50%;
}

.txt_big {
  font-size: 3.5rem;
  padding: 1rem 2rem 1rem 1rem;
}

.txt_middle {
  font-size: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 0.7rem;
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}

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

.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left {
  animation: infinity-scroll-left 30s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 12);
}

.d-demo__item>img {
  width: 80%;
}

.d-demo__wrap:hover .d-demo__list--left {
  animation-play-state: paused;
}


/* ------------------------- 
  event.html
----------------------------*/
.d-demo__item2 {
  width: calc(100vw / 24);
}

.d-demo__item2>img {
  width: 90%;
}

.wrapper {
  padding-top: 2rem;
  padding-bottom: 5rem;
  display: flex;
  justify-content: space-around;
}

.ttl_evnt {
  background-image: url(../images/tinck.png);
  background-size: contain;
}
.txt_middle li{
  padding-left: 3rem;
  padding-top: 1rem;
}
/* ------------------------- 
  contact.html
----------------------------*/
th,td{
  padding:1rem;
}
table tr:nth-child(2n) th {
  background-color: rgb(224, 250, 232);
}
table tr:nth-child(2n) td {
    background-color: rgb(224, 250, 232);
}
table tr:nth-child(2n+1) th {
  background-color: rgb(164, 182, 169);
}
table tr:nth-child(2n+1) td {
  background-color: rgb(164, 182, 169);
}
.staff{
  padding-left: 10rem;
}
input,textarea{
  border: 1px solid #4fa54f;
  border-radius: 5px;
}
form p{
  padding-top: 1rem;
}
.category{
  padding-top: 2rem;
}
input[type="submit"]{
width: 100px;
background-color: #a0e5a0;
}
input[type="button"]{
  width: 400px;
  background-color: #1b7c1b;
  }

/* ------------------------- 
  lineup.html
----------------------------*/
  #bk_ilovej {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    max-width: 1020px;
    margin: auto;
    padding: 30px;
}
#bk_score {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1020px;
  margin: auto;
  padding: 30px;
}