@charset "UTF-8";
/*=====================================================*/
/*							ticket.scss make start
/*=====================================================*/
body {
  font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "メイリオ",sans-serif;
  color: #666;
}

a,
img {
  vertical-align: bottom;
}

.wrap {
  max-width: 320px;
  min-width: 320px;
  margin: 0 auto;
}

.wrap .member {
  margin: 10px 0 0 0;
  width: 100%;
}

.wrap .member h1 {
  background-color: #0aa4cf;
  color: #fff;
  padding: 12px 20px;
  margin: 0 0 0 0;
  font-size: 1.5em;
  line-height: 140%;
}

.wrap .member dl {
  margin: 0;
}

.wrap .member dl dd {
  width: 90%;
  border: 1px solid #666;
  margin: 10px auto 0 auto;
}

.wrap .member dl dd h3 {
  margin: 7px 0;
}

.wrap .member dl dd img {
  width: 100%;
}

.wrap .member dl dd span {
  font-size: 0.7em;
  line-height: 70%;
}

.wrap .member dl dd p {
  margin: 0;
  padding: 3px 10px 9px 10px;
  text-align: left;
}

.wrap .member dl dd .btn {
  width: 100%;
}

.wrap .member dl dd .btn::after {
  content: "";
  display: block;
  height: 0;
  clear: left;
}

.wrap .member dl dd .btn a {
  display: block;
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
}

.wrap .member dl dd .btn a img {
  margin: 0;
  padding: 0;
}

.wrap .member dl .first-content img {
  border-top: 1px solid #aaa;
}

.wrap .other {
  width: 100%;
  margin: 20px 0 0 0;
}

.wrap .other h2 {
  background-color: #0aa4cf;
  color: #fff;
  padding: 12px 20px;
  margin: 0 0 0 0;
  font-size: 1.5em;
  line-height: 130%;
}

.wrap .other dl {
  width: 100%;
  margin: 10px auto 0 auto;
}

.wrap .other dl dd {
  width: 90%;
  margin: 10px auto 0 auto;
  border: 1px solid #666;
  padding: 0;
}

.wrap .other dl dd h4 {
  padding: 0;
  margin: 5px 0;
}

.wrap .other dl dd img {
  width: 100%;
}

.wrap .other dl dd .btn {
  width: 100%;
}

.wrap .other dl dd .btn::after {
  content: "";
  display: block;
  height: 0;
  clear: left;
}

.wrap .other dl dd .btn a {
  display: block;
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
}

.wrap .other dl dd .btn a img {
  margin: 0;
  padding: 0;
}

.wrap .attention {
  margin: 10px auto;
  padding: 10px;
  border: 2px dashed #666;
  width: 85%;
}

.wrap .attention h5 {
  font-size: 1.5em;
  padding: 0;
  margin: 0 0 10px 0;
}

.wrap .attention dl {
  margin: 10px 0 0 0;
}

.wrap .attention dl dt,
.wrap .attention dl dd {
  text-align: left;
}

.wrap .attention dl dt {
  font-weight: bold;
}

.wrap .attention dl dd {
  margin: 0 0 0 1em;
}

.wrap .other2 {
  width: 100%;
  margin: 20px 0 0 0;
}

.wrap .other2 h2 {
  background-color: #0aa4cf;
  color: #fff;
  padding: 12px 20px;
  margin: 0 0 0 0;
  font-size: 1.5em;
  line-height: 130%;
}

.wrap .other2 dl {
  width: 100%;
  margin: 10px auto 0 auto;
}

.wrap .other2 dl dd {
  width: 90%;
  margin: 10px auto 0 auto;
  border: 1px solid #666;
  padding: 0;
}

.wrap .other2 dl dd h4 {
  padding: 0;
  margin: 5px 0;
}

.wrap .other2 dl dd img {
  width: 100%;
}

.wrap .other2 dl dd .btn {
  width: 100%;
}

.wrap .other2 dl dd .btn a {
  width: 100%;
  margin: 0;
  padding: 0;
}

.wrap .other2 dl dd .btn a img {
  margin: 0;
  padding: 0;
}

/*=============== breakpoing 769px ===============*/
@media screen and (min-width: 769px) {
  dl {
    margin: 0;
  }
  dl::after {
    content: "";
    height: 0;
    display: block;
    clear: both;
  }
  .wrap {
    max-width: 960px;
    min-width: 960px;
  }
  .wrap .member {
    margin: 10px 0 0 0;
    width: 100%;
  }
  .wrap .member h1 {
    padding: 10px 0px;
    font-size: 2.6em;
    line-height: 120%;
  }
  .wrap .member dl dd {
    float: left;
    width: 24%;
    border: 1px solid #666;
    margin: 10px 0 0 5px;
  }
  .wrap .member dl dd h3 {
    margin: 7px 0;
  }
  .wrap .member dl dd img {
    width: 100%;
  }
  .wrap .member dl dd a:hover {
    opacity: 0.7;
  }
  .wrap .member dl dd p {
    padding: 2px 10px 0 10px;
  }
  .wrap .member dl .first-content {
    height: 273px;
  }
  .wrap .other {
    width: 100%;
    margin: 20px 0 0 0;
  }
  .wrap .other h2 {
    padding: 9px 0 10px 0;
    font-size: 2.6em;
    line-height: 120%;
  }
  .wrap .other dl {
    width: 100%;
    margin: 10px auto 0 auto;
  }
  .wrap .other dl dd {
    width: 19%;
    float: left;
    margin: 0 0 0 5px;
    border: 1px solid #666;
    padding: 0;
  }
  .wrap .other dl dd h4 {
    padding: 0;
    margin: 5px 0;
  }
  .wrap .other dl dd img {
    width: 100%;
  }
  .wrap .other dl dd a:hover {
    opacity: 0.7;
  }
  .wrap .attention {
    margin: 20px 0;
    padding: 20px;
    width: calc(100% - 44px);
  }
  .wrap .attention h5 {
    font-size: 2em;
    padding: 0;
    margin: 0 0 20px 0;
  }
  .wrap .attention dl {
    margin: 10px 0 0 0;
  }
  .wrap .attention dl dt,
  .wrap .attention dl dd {
    text-align: left;
  }
  .wrap .attention dl dt {
    font-weight: bold;
  }
  .wrap .attention dl dd {
    margin: 0 0 0 2em;
  }
  .wrap .other2 {
    width: 100%;
    margin: 20px 0 0 0;
  }
  .wrap .other2 h2 {
    padding: 9px 0 10px 0;
    font-size: 2.6em;
    line-height: 120%;
  }
  .wrap .other2 dl {
    width: 100%;
    margin: 10px auto 0 auto;
  }
  .wrap .other2 dl dd {
    width: 32.5%;
    float: left;
    margin: 0 0 10px 5px;
    border: 1px solid #666;
    padding: 0;
  }
  .wrap .other2 dl dd h4 {
    padding: 0;
    margin: 5px 0;
  }
  .wrap .other2 dl dd img {
    width: 100%;
  }
  .wrap .other2 dl dd a:hover {
    opacity: 0.7;
  }
}