@charset "UTF-8";

.EX {
  background: #c0bf4a;
}

body.reward,
.containerEX {
  max-width: initial;
}

/* pattern */
.pattern {
  background: url(/member/series/mabinogion/part01_2nd/common/img/bg.jpg),url(/member/series/mabinogion/part01_2nd/common/img/bg_pt.jpg);
  background-position: center top, center top;
  background-size: auto, auto;
  background-repeat: repeat-y, repeat;
 }

@media screen and (max-width: 960px){
  .pattern {
    background: #e0bb6f url(/member/series/mabinogion/part01_2nd/common/img/bg_sp.jpg);
    background-position: top center;
    background-size: 100%;
    background-repeat: repeat-y;
   }
}

.hero_inner {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.series_logo {
  position: absolute;
  width: 85%;
  max-width: 816px;
  margin: 0 auto;
  bottom: 0;
  left: 7.5%;
  text-align: center;
}

.series_logo .log_image {
  width: 100%;
}

.series_logo .log_image_sub {
  width: 70%;
}

.containerEX_inner {
  width: 100%;
  max-width: 960px;
 }

/* 項目 */
.h3Img {
  margin: 10% auto 1.5%;
  width: 85%;
  max-width: 816px;
}

.h4Img {
  margin: 0.45% auto 0.1%;
  width: 60%;
  max-width: 576px;
}

/* 画像 */
.imgEX {
  width: auto;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.imgEX-story {
  margin: 1.5% auto 2.5%;
}

.imgEX-ss {
  width: 58%;
  max-width: 550px;
  margin: 1.5% auto 2.5%;
}

.imgEX-illust,
.imgEX-correlation {
  width: 95%;
  margin: 1.5% auto 2.5%;
}

.imgEX-correlation {
  margin: 0 auto 2.5%;
}

.imgEX-step {
  width: 70%;
  max-width: 547px;
}
.icon {
  width: 100%;
  max-width: 100px;
  vertical-align: bottom;
}

/* テキスト */
.txtEX, .regEX, .listEX, td {
  color: #783a0a;
}

.em {
  color: #2c6000;
}

.txtLink {
  color: #5c9600;
}

.regEX, .listEX, td {
  font-size: 18px;
  font-size: 1.8rem;
}

@media screen and (max-width: 640px) {
  .regEX, .listEX, td {
    font-size: 14px;
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 360px) {
  .regEX, .listEX, td {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

/* 期間 */
.term {
  background: rgba(111, 45, 2, .9);
  width: 95%;
  margin: 0 auto;
  padding: 1px 0;
  border-radius: 40px;
}

.term .txtEX {
  color: #fff;
  text-align: center;
}

/* リード文 */
.ledeBox {
  width: 90%;
  max-width: 864px;
  background-color: rgba(255, 255, 255, .75);
  margin-top: 0;
  margin: 2% auto;
  padding: 1.5% 3%;
  border-radius: 8px;
}

/* table */
.table {
  width: 95%;
  max-width: 912px;
  background: none;
}

.table,
.table th,
.table td {
  border-color: #402d0e;
  border-width: 1px;
  word-break: break-word;
}

.table th { background: #a76902; }
.table td { background: rgba(255, 255, 255, .5); }
.table-material td em { color: #e60012; font-weight: normal; }

.table-material td:nth-child(1) { width: 20% }
.table-material td:nth-child(2) { width: 30% }
.table-material td:nth-child(3) { width: 50% }

.table-usoul th:nth-child(1) { width: 11% }
.table-usoul th:nth-child(2) { width: 19% }
.table-usoul th:nth-child(3) { width: 13% }
.table-usoul th:nth-child(4) { width: 20% }


/* ボタン類 */
.btn {
  width: 40%;
  max-width: 336px;
  margin: 0 auto;
}

.btn img {
  width: 100%;
  vertical-align: top;
}

.btn a {
  display: block;
}

.btn-back {
  margin: 2.5% auto 4%;
}

.btn-details,
.btn-get {
  width: 40%;
  height: 6.72vw;
  max-height: 50px;
  background-repeat: no-repeat;
  background-size: contain;
}

.btn-details { background-image: url(/member/series/mabinogion/part01_2nd/common/img/btn_detail_open.png); }
.btn-details.active{ background-image: url(/member/series/mabinogion/part01_2nd/common/img/btn_detail_close.png); }

.btn-get { background-image: url(/member/series/mabinogion/part01_2nd/common/img/btn_get.png); }
.btn-get.active{ background-image: url(/member/series/mabinogion/part01_2nd/common/img/btn_close.png); }

/* step */
.step {
  margin-bottom: 1.5%;
}

.step dt {
  border-bottom:#793a0b 1px dotted;
  color: #793a0b;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
}

@media screen and (max-width: 640px) {
  .step dt {
    font-size: 15px;
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 360px) {
  .step dt {
    font-size: 13px;
    font-size: 1.3rem;
  }
}

/* etc */
hr {
  border: none;
  border-top: #783a0a 1px dotted;
  width: 95%;
  margin: 1% auto 3%;
}

/* 注意事項 */
.attentionEX {
  width: 95%;
  max-width: 912px;
  margin: 2.5% auto;
  padding: 1% 0;
  border: none;
}

.attentionEX_ttl {
  border-bottom: #783a0a 2px dotted;
  border-top: #783a0a 2px dotted;
  color: #783a0a;
  padding: 0.5% 1%;
}

.attentionEX .regEX {
  padding-left: 1%;
}

@media screen and (max-width: 640px){
  .attentionEX_ttl {
    font-size: 15px;
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 360px){
  .attentionEX_ttl {
    font-size: 13px;
    font-size: 1.3rem;
  }
}

/* シャドウまとめ */
.shadow,
.imgEX-illust,
.imgEX-correlation,
.slider-for {
  box-shadow: 0 0 10px 0 rgba(123, 76, 0, .8);
}

@media screen and (max-width: 460px){
  .shadow,
  .slider-for,
  .imgEX-illust,
  .imgEX-correlation {
    box-shadow: 0 0 5px 0 rgba(123, 76, 0, .8);
  }
}