.mb20 {
  margin-bottom: 20px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb60 {
  margin-bottom: 60px;
}

.mb80 {
  margin-bottom: 80px;
}

.mb100 {
  margin-bottom: 100px;
}

/*-------------------
 #breadcrumbs
-------------------*/
.breadcrumbs {
  margin: 0 0 1rem 0;
  list-style: none
}

.breadcrumbs::after,.breadcrumbs::before {
  display: table;
  content: ' ';
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1
}

.breadcrumbs::after {
  clear: both
}

.breadcrumbs li {
  float: left;
  font-size: .6875rem;
  color: #0a0a0a;
  cursor: default;
  text-transform: uppercase
}

.breadcrumbs li:not(:last-child)::after {
  position: relative;
  margin: 0 .75rem;
  opacity: 1;
  content: "/";
  color: #cacaca
}

.breadcrumbs a {
  color: #1779ba
}

.breadcrumbs a:hover {
  text-decoration: underline
}

.breadcrumbs .disabled {
  color: #cacaca;
  cursor: not-allowed
}

.breadcrumbs {
  margin: 0 auto;
  max-width: 1200px;
}

.breadcrumbs ul {
  margin: 0;
  padding: 20px 0 30px;
}

.breadcrumbs ul li {
  list-style: none;
  font-size: 0.8rem;
}

/***** alert ******/
.alert {
  margin: 0 auto;
  padding: 0px 20px;
  max-width: 640px;
}

/***** pre ******/
#pre {
  margin: 0px auto 90px;
}

#pre .logo {
  margin: 3px 0px;
  border-bottom: 1px solid #D9CEA0;
}
#pre .logo > img {
  width: auto;
  height: 100px;
}

#pre .info {
  max-width: 1200px;
  margin: 0 auto;
}

#pre .info img {
  max-width: 640px; 
}

#pre .info > p {
  font-size: 16px;
}

#pre .info > p.noteStyle {
  font-size: 14px;
}

#pre .copyright {
  text-align: right;
}

@media screen and (max-width: 960px) {
  #pre {
    margin-bottom: 90px;
    text-align: left;
  }
  #pre .breadcrumbs,
  #pre .info {
    padding: 0px 20px;
  }
  #pre .logo > img {
    height: 46px;
  }
}

body {
    margin: 0;
    font-family: 游ゴシック体, "Yu Gothic", YuGothic, sans-serif;
}

a { color: #000000;}

div {
	text-align: center;
}

picture {
  display: block;
}

.buttonBox picture {
  display: block;
}

img {
	display: inline-block;
    max-width: 100%;
    height: auto;
	vertical-align: bottom;
}

#contents {
  background-color: #4D0000;
}

.wrapper {
	max-width: 960px;
	text-align: center;
	margin: 0 auto;
}

.bg1 {
  padding-bottom: 160px;
  background: #000000 url(../img/pc_bg01.webp) bottom left repeat-x;
}

.bg2 {
  padding-top: 160px;
  background: #000000 url(../img/pc_bg02.webp) top left repeat-x;
}

.buttonBox.button-1 {
  padding: 25px;
}

.buttonBox.button-3 {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 960px) {
  img {
    width: 100%;
  }
  .wrapper {
    padding: 0;
  }
  .bg1 {
    background: #000000;
    padding: 0;
  }

  .buttonBox a {
    display: block;
    margin: 0 auto;
  }

  .buttonBox .button01{
    width: 32%;
  }

  .buttonBox .button02{
    width: 28%;
  }

  .buttonBox .button03{
    width: 46%;
  }

  .buttonBox.button-3 {
    display: flex;
    flex-flow: wrap;
  }
  .buttonBox.button-3 a {
    width: 50%;
  }

  .buttonBox.button-3 a img {
    width: 100%;
    height: auto;
  }
  .buttonBox.button-3 a:last-of-type {
    width: 100%;
  }
}