html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}

ol, ul {
  list-style: none
}
img {
  vertical-align: bottom
}
html{
  scroll-behavior: smooth;
}
body {
  width: 100%;
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  font-style: normal;
  color: #333333;
  animation: load 4s ease 0s 1 normal;
  -webkit-animation: load 4s ease 0s 1 normal;
  line-height: 1;
  min-height: 100vh
}
@keyframes load { 0% {opacity: 0}100% {opacity: 1}}
@-webkit-keyframes load {0% {opacity: 0}100% {opacity: 1}}

a {
  font-size: 0.9rem;
  color: #999;
  text-decoration: none;
  word-break: break-word;
  line-height: 1.4;
  outline: none !important;
}
a:focus {outline: none !important;}
a:visited {border:none;-webkit-border:none;}
a:hover {
  text-decoration: none;
  color: rgba(117,75,47,0.80);
}
a img {border:none;-webkit-border:none;}
a + img {border: none}
img {max-width: 100%}
a.btn {
  border-radius: 40px;
  padding: 15px 50px;
  color: #fff;
  font-size: 0.8em;
  background-color: #82d7da;
  text-decoration: none;
  font-weight: bold;
  vertical-align: top;
}
a:hover.btn {
  color: #fff;
  opacity: 0.7;
  transition: .4s;
}
h1 {
	font-size: 2.2rem;
}
h2 {
	font-size: 1.6rem;
}
h3 {
  font-size: 0.9em;
  line-height: 1.2em;
  font-weight: bold;
  padding: 2em 0 0 0;
}
h3.year {
 color: #666; 
}

p {
	font-size:.9rem;
	line-height: 1.6;
}
p.bottomhl {
  position: relative;
  padding: 0.5em 0;
}
p.bottomhl:after {
  content: "";
  position: absolute;
  top: 150%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 40px;
  height: 10px;
  background: linear-gradient(90deg, #74ebd5 0%, #8acbdf 50%, #a0ace6 100%), #74ebd5;
}
.sp_br {
   display: none;
}
.gutters-10 {
  margin-left: -5px;
  margin-right: -5px;
}
.gutters-10 > div {
  padding-right: 5px;
  padding-left: 5px;
}
.mb10 {
  margin-bottom: 10px;
}

#main {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 200%;
  animation: gradient 15s ease infinite;
  margin: 60px 0;
  padding: 3rem;
  height:auto;
  position: relative;
}
@keyframes gradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}
#main .box {
  position: absolute;
  width: 100%;
  height: 105%;
  background:url("../images/jewel_pc_bg.png") no-repeat;
  background-size: cover;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  animation-name: anime;
  transform: scale(1, 1);
}
.move {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 7s;
}

#main .logo {
  width: 388px;
  height:500px;
  z-index: 5;
}

main {
  padding-top: 50px;
}

.media img {
  width: 60px;
}

.catbox {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 100%;
}
.cate {
  width: 100px;
  padding: 10px;
  }

  .caticon {
  margin: 10px 10px 10px 10px;
  filter: drop-shadow(2px 2px 5px rgba(0,0,0,.3));
  -webkit-filter: drop-shadow(2px 2px 5px rgba(0,0,0,.3));
  transition: .1s ease;
  -webkit-transition: .1s ease;
  padding: 1em;
  }
  .caticon:hover {
  margin: 10px 10px 10px 10px;
  filter: drop-shadow(2px 4px 5px rgba(0,0,0,.4));
  -webkit-filter: drop-shadow(2px 4px 5px rgba(0,0,0,.4));
  transform: translateY(-2.5px);
  }
  .catinfo a{
  display: block;
  font-size: 0.9rem;
  line-height: 1.2em;
  outline: none !important;
}
  .catinfo a:focus {
	  outline: none !important;
}
  .cateinfo a span {
  display: block;
  font-size: 0.7rem;
  line-height: 1.4em;
}

audio {
  margin: 2em 0 0.5em;
  padding: 1em 1em;
  background-color: #74ebd5;
  background-image: linear-gradient(90deg, #74ebd5 0%, #8acbdf 50%, #a0ace6 100%);
  border-radius: 7px;
}
_:lang(x)+_:-webkit-full-screen-document, audio {
  margin: 10px;
  padding: 0;
  background-color: #74ebd5;
  border-radius: 7px;
}

/* bootstrap custom */
.btn1st{
  color: #000;
  background-color: #F3E19D;
  border: 2px solid #999;
  border-radius: 40px;
  padding: 10px 15px;
  font-size: 1em;
  font-weight: bold;
  }
.btn2nd{
  color: #000;
  background-color: #BCD9AA;
  border: 2px solid #999;
  border-radius: 40px;
  padding: 10px 15px;
  font-size: 1em;
  font-weight: bold;
  }
.btn3rd{
  color: #000;
  background-color: #B6DFDF;
  border: 2px solid #999;
  border-radius: 40px;
  padding: 10px 15px;
  font-size: 1em;
  font-weight: bold;
  }
.btn4th{
  color: #000;
  background-color: #F9D2D3;
  border: 2px solid #999;
  border-radius: 40px;
  padding: 10px 15px;
  font-size: 1em;
  font-weight: bold;
}
#footer {
  background-color: #74ebd5;
  background-image: linear-gradient(90deg, #74ebd5 0%, #8acbdf 50%, #a0ace6 100%);
}
#copyright {
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  padding: 1em;
}
@media (min-width: 992px) {
  .h-100 {
  margin-bottom: 4em;
  }
}
@media (max-width:768px) {
  h3 {
  font-size: 1.2em;
  line-height: 1.5em;
  padding: 3em 0 0.5em;
  }	
  .sp_br {
  display: block;
  }
  .img-fluid {
  margin-top: 4em;
  }
  main {
  margin: 0 auto;
  }
  #main .box {
  background:url("../images/jewel_sp2_bg.png") no-repeat;
  background-size: cover;
  }	
  #main .logo {
  max-width: 100%;
  height: auto;
}
.cate {
  width: 80%;
}
.caticon {
  margin: 20px 0 10px;
  padding: 0 3px;
  width: 70%;	
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,.3));
  -webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.3));
  transition: .1s ease;
  -webkit-transition: .1s ease;
 }
.caticon:hover {
  margin: 20px 0 10px;
  padding: 0 3px;
  width: 70%;
  filter: drop-shadow(2px 3px 4px rgba(0,0,0,.3));
  -webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.3));
  transform: translateY(-3px);
  overflow: auto;
}
.catinfo a{
  font-size: 0.5rem;	
  line-height: 1;
  overflow: auto;
  outline: none !important;
}
.catinfo a:focus {
  outline: none !important;
}
.cateinfo a span {
  font-size: 0.7rem;
}	
}
@media (max-width: 575px) {
#main .box {
  position: absolute;
  width: 100%;
  height: 100%;
  background:url("../images/jewel_sp_bg.png") no-repeat top center;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  animation-name: anime;
  transform: scale(1, 1);
}
}
@keyframes anime {100% {transform: scale(0.97, 0.97);}}