@charset "UTF-8";
/* ==========================================================
  フォント
========================================================== */
/* ==========================================================
  テキストシャドウ
========================================================== */
/* ===================================================================
CSS information
 file name  :topics.css
 style info :トピックスページのスタイル
=================================================================== */
@media screen and (min-width: 751px) {
  #wrap #content {
    padding-bottom: 60px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content {
    padding-bottom: 10vw;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box {
    font-size: 21px;
  }
}
#wrap #content .box .inner {
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner {
    width: 1020px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner {
    width: 94%;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close {
    width: 860px;
  }
}
#wrap #content .box .inner.close:nth-of-type(1), #wrap #content .box .inner.close:nth-of-type(2) {
  border-bottom: dotted 5px #000;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close:nth-of-type(1), #wrap #content .box .inner.close:nth-of-type(2) {
    padding-bottom: 40px;
    margin-bottom: 70px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner.close:nth-of-type(1), #wrap #content .box .inner.close:nth-of-type(2) {
    padding-bottom: 8vw;
    margin-bottom: 8vw;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close .sec p {
    width: 780px;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close .sec dl {
    width: 780px;
    margin: 0px auto 30px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner.close .sec dl {
    margin-bottom: 3vw;
  }
}
#wrap #content .box .inner.close .sec dl.important {
  color: #ff0000;
}
#wrap #content .box .inner.close .sec dl dt {
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner.close .sec dl dt {
    font-size: 4vw;
    margin-bottom: 1vw;
  }
}
#wrap #content .box .inner.close .sec dl dd.address {
  font-family: "Kosugi Maru", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close .sec dl dd.address {
    font-size: 18px;
    margin-top: 5px;
  }
}
#wrap #content .box .inner.close .sec .anoTxt {
  font-family: "Kosugi Maru", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close .sec .anoTxt {
    margin-top: 10px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner.close .sec .anoTxt {
    margin-top: 2vw;
  }
}
#wrap #content .box .inner.close .sec .anoTxt li {
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close .sec .anoTxt li {
    font-size: 16px;
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner.close .sec .anoTxt li {
    margin-bottom: 1vw;
  }
}
#wrap #content .box .inner.close .sec .anoTxtB {
  font-family: "Kosugi Maru", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close .sec .anoTxtB {
    margin-top: 10px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner.close .sec .anoTxtB {
    margin-top: 2vw;
  }
}
#wrap #content .box .inner.close .sec .anoTxtB li {
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close .sec .anoTxtB li {
    font-size: 16px;
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner.close .sec .anoTxtB li {
    margin-bottom: 1vw;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close .sec .noteTxt {
    width: 780px;
    margin: 0px auto;
  }
}
#wrap #content .box .inner.close .sec .noteTxt li {
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close .sec .noteTxt li {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner.close .sec .noteTxt li {
    margin-bottom: 2vw;
  }
}
#wrap #content .box .inner.close .lastTxt {
  font-family: "Kosugi Maru", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  text-align: left;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close .lastTxt {
    margin-bottom: 40px;
  }
}
#wrap #content .box .inner.close .lastTxt span {
  display: block;
  text-align: right;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner.close .lastTxt span {
    font-size: 18px;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .logo {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .logo {
    margin-bottom: 2vw;
  }
}
#wrap #content .box .inner h2 {
  font-weight: bold;
  line-height: 1.4;
  color: #1d308a;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner h2 {
    font-size: 36px;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner h2 {
    font-size: 4.8vw;
    margin-bottom: 3vw;
  }
}
#wrap #content .box .inner h2 span {
  font-family: "Kosugi Maru", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  display: inline-block;
  background: #ebefff;
  border-radius: 100px;
  padding: 0.2em 1em 0.24em;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner h2 span {
    font-size: 20px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner h2 span {
    font-size: 3.8vw;
  }
}
#wrap #content .box .inner .read {
  text-align: left;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .read {
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .read {
    margin-bottom: 6vw;
  }
}
#wrap #content .box .inner .read a {
  color: #00a2ff;
  text-decoration: none;
  word-break: break-all;
}
#wrap #content .box .inner .sec {
  text-align: left;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec {
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec {
    margin-bottom: 6vw;
  }
}
#wrap #content .box .inner .sec h3 {
  color: #fff;
  font-weight: bold;
  text-align: center;
  background-color: #8c4f05;
  background-image: url(/flo/avatar-gp/img/bg_tit_l.png), url(/flo/avatar-gp/img/bg_tit_r.png);
  background-repeat: no-repeat;
  background-position: center left 10px, center right 10px;
  border-radius: 10px;
  border: solid 3px #4f2b00;
  line-height: 1.4;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec h3 {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec h3 {
    margin-bottom: 3vw;
  }
}
#wrap #content .box .inner .sec h3 span {
  border-radius: 10px;
  border: solid 2px #d29245;
  display: block;
  text-shadow: 2px 2px 0px #000;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec h3 span {
    font-size: 30px;
    padding: 10px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec h3 span {
    font-size: 4.8vw;
    padding: 1vw;
  }
}
#wrap #content .box .inner .sec em {
  color: #ff0000;
  font-weight: bold;
}
#wrap #content .box .inner .sec p {
  text-align: left;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec p {
    margin: 0px auto 30px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec p {
    margin-bottom: 3vw;
  }
}
#wrap #content .box .inner .sec figure {
  text-align: center;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec figure {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec figure {
    margin-bottom: 3vw;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .superStar {
    width: 780px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .superStar figure {
    width: 300px;
    float: left;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec .superStar figure {
    width: 80%;
    margin: 0 auto 3vw;
  }
}
#wrap #content .box .inner .sec .superStar figure img {
  width: 100%;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .superStar p {
    width: 460px;
    float: right;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec .superStar p {
    margin-bottom: 3vw;
  }
}
#wrap #content .box .inner .sec .explanation {
  background: url(../img/topics/bg_blue.jpg) repeat 0 0;
  border-radius: 10px;
  text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .explanation {
    padding: 20px 40px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec .explanation {
    padding: 2vw 4vw;
  }
}
#wrap #content .box .inner .sec .explanation dt {
  text-align: center;
  color: #cd0000;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .explanation dt {
    font-size: 28px;
    margin-bottom: 20px;
    line-height: 1.4;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec .explanation dt {
    font-size: 4vw;
    margin-bottom: 2vw;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .lrBox {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .lrBox figure {
    width: 420px;
    float: left;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec .lrBox figure {
    width: 80%;
    margin: 0 auto 3vw;
  }
}
#wrap #content .box .inner .sec .lrBox figure img {
  width: 100%;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .lrBox p {
    width: 530px;
    float: right;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec .lrBox p {
    margin-bottom: 3vw;
  }
}
#wrap #content .box .inner .sec .jumpFesta {
  border-radius: 10px;
  border: solid 4px #cd0000;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .jumpFesta {
    padding: 20px 20px 0;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec .jumpFesta {
    padding: 3vw 3vw 0;
  }
}
#wrap #content .box .inner .sec .pv {
  text-align: center;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .pv {
    background: url(../img/topics/bg_blue.jpg) repeat 0 0;
    border-radius: 10px;
    width: 640px;
    padding: 20px;
    margin: 0 auto 40px;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .present > div {
    float: left;
    width: 530px;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .present > div p {
    width: auto;
  }
}
#wrap #content .box .inner .sec .present > div h4 {
  color: #fff;
  font-weight: bold;
  background: #1d3cb1;
  border-radius: 4px;
  text-align: center;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .present > div h4 {
    padding: 4px 0 6px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec .present > div h4 {
    font-size: 3.8vw;
    padding: 2vw 0;
    margin-bottom: 3vw;
  }
}
#wrap #content .box .inner .sec .present > div ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec .present > div ul {
    margin-bottom: 3vw;
  }
}
#wrap #content .box .inner .sec .present > div ul li {
  text-align: center;
  background: #ffdd65;
  border-radius: 100px;
  border: solid 2px #ffd334;
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .present > div ul li {
    width: 250px;
    padding: 4px;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 750px) {
  #wrap #content .box .inner .sec .present > div ul li {
    width: 48%;
    padding: 2vw 0;
    margin-bottom: 2vw;
  }
}
@media screen and (min-width: 751px) {
  #wrap #content .box .inner .sec .present figure {
    float: right;
  }
}
#wrap #content .box .inner .sec .btn {
  text-align: center;
}