.page-title-wrapper .page-title.page-guideline {
  background-image: url(../img/tit_guideline.png);
  background-size: auto 42px;
  background-position: center bottom 4px
}

@media screen and (min-width:640px) {
  .page-title-wrapper .page-title.page-guideline {
    background-size: auto 50px;
    background-position: center bottom 6px;
    margin-bottom: 50px
  }
}
.page-title-wrapper {
  display: block;
  padding: 20px 0 0 0
}

@media screen and (min-width:640px) {
  .page-title-wrapper {
    padding: 30px 0 0 0
  }
}
@media screen and (min-width:640px) {
  .page-title-wrapper.guideline-detail {
    display: none
  }
}
.lead-container-wrapper {
  padding: 0 15px 20px;
  overflow: hidden
}
.lead-container .text {
  text-align: left
}

@media screen and (min-width:768px) {
  .lead-container-wrapper {
    padding: 0 40px 40px;
    max-width: 1280px;
    margin: 0 auto
  }
  .lead-container .text {
    text-align: center
  }
}

.sort-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0 10px
}

.sort-wrapper .sort-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

@media screen and (min-width:640px) {
  .sort-wrapper .sort-list {
    max-width: 796px;
    margin: 0 auto
  }
}

.sort-wrapper .sort-list .tab {
  display: block;
  width: 33%;
  padding: 0
}

@media screen and (min-width:640px) {
  .sort-wrapper .sort-list .tab {
    padding: 0 10px
  }
}

@media screen and (min-width:1120px) {
  .sort-wrapper .sort-list .tab {
    margin-top: 14px;
    padding: 0 10px
  }
}

.sort-wrapper .sort-list .tab .btn {
  display: block;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center 58%;
  background-color: #e5e5e5;
  text-align: left;
  text-indent: -9999px
}

@media screen and (min-width:640px) {
  .sort-wrapper .sort-list .tab .btn {
    height: 35px
  }
}

@media screen and (min-width:768px) {
  .sort-wrapper .sort-list .tab .btn {
    height: 40px
  }
}

.sort-wrapper .sort-list .tab .btn.btn-msg {
  background-image: url(../img/tab_txt_msg.png);
  border-bottom: 3px solid ##e5e5e5;
  background-size: auto 10px
}

.sort-wrapper .sort-list .tab .btn.btn-msg.active, .sort-wrapper .sort-list .tab .btn.btn-msg:hover {
  background-image: url(../img/tab_txt_msg_ov.png);
  border-color: #0096d9;
  background-color: #0096d9
}

@media screen and (min-width:768px) {
  .sort-wrapper .sort-list .tab .btn.btn-msg {
    border-bottom: 4px solid ##e5e5e5;
    background-size: auto 15px
  }
}

.sort-wrapper .sort-list .tab .btn.btn-list {
  background-image: url(../img/tab_txt_list_sp.png);
  border-bottom: 3px solid ##e5e5e5;
  background-size: auto 20px
}

.sort-wrapper .sort-list .tab .btn.btn-list.active, .sort-wrapper .sort-list .tab .btn.btn-list:hover {
  background-image: url(../img/tab_txt_list_ov_sp.png);
  border-color: #0096d9;
  background-color: #0096d9
}

@media screen and (min-width:768px) {
  .sort-wrapper .sort-list .tab .btn.btn-list {
    background-image: url(../img/tab_txt_list.png);
    border-bottom: 4px solid ##e5e5e5;
    background-size: auto 15px
  }
  .sort-wrapper .sort-list .tab .btn.btn-list.active, .sort-wrapper .sort-list .tab .btn.btn-list:hover {
    background-image: url(../img/tab_txt_list_ov.png);
  }
}

.sort-wrapper .sort-list .tab .btn.btn-faq {
  background-image: url(../img/tab_txt_faq_sp.png);
  border-bottom: 3px solid ##e5e5e5;
  background-size: auto 20px
}

.sort-wrapper .sort-list .tab .btn.btn-faq.active, .sort-wrapper .sort-list .tab .btn.btn-faq:hover {
  background-image: url(../img/tab_txt_faq_ov_sp.png);
  border-color: #0096d9;
  background-color: #0096d9
}

@media screen and (min-width:768px) {
  .sort-wrapper .sort-list .tab .btn.btn-faq {
    background-image: url(../img/tab_txt_faq.png);
    border-bottom: 4px solid ##e5e5e5;
    background-size: auto 15px
  }
  .sort-wrapper .sort-list .tab .btn.btn-faq.active, .sort-wrapper .sort-list .tab .btn.btn-faq:hover {
    background-image: url(../img/tab_txt_faq_ov.png);
  }
}
.guideline-container-wrapper {
  padding: 0 10px;
  overflow: hidden
}
.guideline-detail-wrapper {
  padding: 0 15px;
  overflow: hidden
}

@media screen and (min-width:896px) {
  .guideline-detail-wrapper,.guideline-container-wrapper {
    padding: 0 40px;
    max-width: 1280px;
    margin: 0 auto
  }
}

.guideline-container {
  border:1px solid #0096d9;
  border-top:3px solid #0096d9;
  padding:0 15px;
  margin-bottom:30px;
  min-height:100vh;
}
@media screen and (min-width:640px) {
  .guideline-container {
    padding:0 30px;
  }
}

.guideline-detail-container {
  padding: 20px 0 40px 0
}

@media screen and (min-width:640px) {
  .guideline-detail-container {
    padding: 30px 0 80px 0
  }
}

.guideline-detail-wrapper {
  padding: 0 15px;
  overflow: hidden
}

@media screen and (min-width:896px) {
  .guideline-detail-wrapper {
    padding: 0 40px;
    max-width: 1280px;
    margin: 0 auto
  }
}

.guideline-detail-wrapper .detail-head-wrapper {
  position: relative
}

.guideline-detail-wrapper .detail-head {
  width: 100%;
  border-bottom: 1px solid #d4d4d4;
  margin-top: 10px
}

@media screen and (min-width:896px) {
  .guideline-detail-wrapper .detail-head {
    margin-top: 14px
  }
}

.guideline-detail-wrapper .detail-head {
  margin: 0;
  vertical-align: top;
  text-align: left;
  padding: 10px
}

@media screen and (min-width:640px) {
  .guideline-detail-wrapper .detail-head {
    margin: 0;
    text-align: center;
    padding: 10px
  }
}

.title {
  padding: 3px 0 .5em 0;
  font-size: 1.13rem;
  color: #000;
  font-weight: 700;
  line-height: 1.3
}

@media screen and (min-width:640px) {
  .title {
    font-size: 1.88rem
  }
}

.text {
  padding: 3px 0 0 0;
  font-size: .94rem
}

@media screen and (min-width:640px) {
  .text {
    font-size: 1.13rem
  }
}
.general-container .text-cell{
  position: relative;
}
.general-container .text{
    padding-bottom:5em;
}
@media screen and (min-width:640px) {
  .general-container .text{
    width: 70%;
    margin:0 auto;
    padding-bottom:0;
  }
}

.general-container .text-cell::before {
bottom: 0;
left: 0;
width: 50%;
height: 4em;
position: absolute;
content: "";
background: url("../img/slime.png") top left no-repeat;
background-size: contain;
transform:rotateZ(-5deg)
}
@media screen and (min-width:640px) {
  .general-container .text-cell::before{
top: 1em;
left: 1em;
width: 15%;
height: 5em;
  }
}

.general-container .text-cell::after {
position: absolute;
content: "";
bottom: 0;
right: 0;
width: 50%;
height: 5em;
background: url("../img/drakee.png") top right no-repeat;
background-size: contain;
transform:rotateZ(5deg)
}
@media screen and (min-width:640px) {
  .general-container .text-cell::after{
top: 0;
right: 0;
width: 15%;
height: 6em;
  }
}

.detail-body {
  text-align: left;
  word-break: break-all;
  word-wrap: break-word
  margin: 0;
  padding: 20px 0;
  font-size: .94rem;
}

@media screen and (min-width:640px) {
  .detail-body {
    padding: 40px 0;
    font-size: 1.13rem
  }
}

.detail-body a {
  color: #0077ca
}

.detail-body a:hover {
  text-decoration: underline
}

.detail-body p a:not(.button){
	text-decoration: underline;
}

.detail-body ul li::before {
  display: inline-block;
  white-space: nowrap;
  content: "\2022";
  margin-right: .3em;
  text-align: right;
}
.detail-body ul {
    text-indent: -.4em;
    margin-left: 1em;
}

.detail-body h1,.detail-body h2,.detail-body h3,.detail-body h4,.detail-body h5,.detail-body h6 {
  margin-bottom: .5em;
}

.detail-body h1 {
	font-weight: 600;
	font-size: 1.13rem
}
@media screen and (min-width:640px) {
	.detail-body h1 {
		font-size: 1.69rem
	}
}
.detail-body h2 {
	font-weight: 600;
	font-size: 1.02rem
}
@media screen and (min-width:640px) {
	.detail-body h2 {
		font-size: 1.52rem
	}
}
.detail-body h3 {
	font-weight: 400;
	font-size: .92rem
}
@media screen and (min-width:640px) {
	.detail-body h3 {
		font-size: 1.37rem
	}
}
.detail-body h4 {
	font-weight: 400;
	font-size: .82rem
}
@media screen and (min-width:640px) {
	.detail-body h4 {
		font-size: 1.23rem
	}
}
.detail-body h5 {
	font-weight: 400;
	font-size: .75rem
}
@media screen and (min-width:640px) {
	.detail-body h5 {
		font-size: 1.11rem
	}
}
.detail-body h6 {
	font-weight: 400;
	font-size: .68rem
}
@media screen and (min-width:640px) {
	.detail-body h6 {
		font-size: 1rem
	}
}
.detail-body p,.detail-body ul {
	margin-bottom: 1em
}

.detail-body li {
	margin-bottom: .5em
}

.detail-body .box-gray {
    padding: .5em;
    font-size:.8em;
    text-indent:0;
    border: double 3px #cecece
}


.detail-body .ep-title-type1 {
  display: block;
  padding: .4em 15px .4em 15px;
  font-size: 1.38rem;
  line-height: 1.3;
  font-weight: 700;
  text-align: left;
  background-color: #dceafb;
  border-left: 3px solid #3a77bc
}

@media screen and (min-width:640px) {
  .detail-body .ep-title-type1 {
    font-size: 1.5rem
  }
}

.detail-body .ep-title-type2 {
  display: block;
  padding: 0 0 3px 15px;
  font-size: 1.19rem;
  line-height: 1.3;
  font-weight: 700;
  text-align: left;
  border-bottom: 4px solid #3a77bc
}

@media screen and (min-width:640px) {
  .detail-body .ep-title-type2 {
    font-size: 1.25rem
  }
}

.detail-body .ep-title-type3 {
  display: block;
  padding: .2em 15px .2em 8px;
  font-size: 1.19rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #3a77bc
}

@media screen and (min-width:640px) {
  .detail-body .ep-title-type3 {
    font-size: 1.25rem
  }
}

.detail-body .ep-title-type4 {
  display: block;
  padding: 2px 0 1px 15px;
  font-size: .94rem;
  line-height: 1.3;
  font-weight: 700;
  text-align: left;
  position: relative
}

@media screen and (min-width:640px) {
  .detail-body .ep-title-type4 {
    font-size: 1.13rem
  }
}

.detail-body .ep-title-type4:before {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 6px;
  height: 100%;
  font-size: 1px;
  background-color: #3a77bc;
  padding: 0 0 0 .5em;
  border-radius: 3px
}

.detail-body .ep-quote-type1 {
  display: block;
  padding: 8px;
  line-height: 1.3;
  text-align: left;
  background-color: #efecec;
  border: 2px solid #b8b6b6
}

.detail-body .icon-type1-blue {
  display: block;
  padding: 4px 0 2px 0;
  min-height: 26px;
  line-height: 1.3;
}

@media screen and (min-width:640px) {
  .detail-body .icon-type1-blue {
  }
}

.detail-body .icon-type1-blue:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 26px;
  vertical-align: middle;
  margin-right: 5px;
  background: url(https://cache-www.dragonquest.jp/img/cms/editor/icon_cp_title_slime_blue.png) top center no-repeat;
  background-size: 24px auto
}
@media screen and (min-width:905px) {
.detail-body .icon-type1-blue.text-center:after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 26px;
  vertical-align: middle;
  margin-left: 5px;
  background: url(https://cache-www.dragonquest.jp/img/cms/editor/icon_cp_title_slime_blue.png) top center no-repeat;
  background-size: 24px auto
}
}

.detail-body .icon-type1-orange {
  display: block;
  padding: 4px 0 2px 0;
  min-height: 26px;
  line-height: 1.3;
}

@media screen and (min-width:640px) {
  .detail-body .icon-type1-orange {
  }
}

.detail-body .icon-type1-orange:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 26px;
  vertical-align: middle;
  margin-right: 5px;
  background: url(https://cache-www.dragonquest.jp/img/cms/editor/icon_cp_title_slime_orange.png) top center no-repeat;
  background-size: 24px auto
}

.detail-body .icon-type1-gray {
  display: block;
  padding: 4px 0 2px 0;
  min-height: 26px;
  line-height: 1.3;
}

@media screen and (min-width:640px) {
  .detail-body .icon-type1-gray {
  }
}

.detail-body .icon-type1-gray:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 26px;
  vertical-align: middle;
  margin-right: 5px;
  background: url(https://cache-www.dragonquest.jp/img/cms/editor/icon_cp_title_slime_gray.png) top center no-repeat;
  background-size: 24px auto
}


.detail-body .button, .detail-body a.button, .detail-body span.button {  display: inline-block;
  font-size: .9rem;
  margin: 0 0 .5em 0;
  padding: .5em .5em .4em .5em;
  border-radius: 6px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer
}

@media screen and (min-width:640px) {
  .detail-body .button, .detail-body a.button, .detail-body span.button {
  }
}

.detail-body .button:hover, .detail-body a.button:hover, .detail-body span.button:hover {
  text-decoration: none
}

.detail-body .button.button-blue, .detail-body a.button.button-blue, .detail-body span.button.button-blue {
  background-color: #0096d9
}

.detail-body .button.button-lightgray, .detail-body a.button.button-lightgray, .detail-body span.button.button-lightgray {
  background-color: #cecece
}

.detail-body .button.button-gray, .detail-body a.button.button-gray, .detail-body span.button.button-gray {
  background-color: #909090
}

.text-center {
  text-align: center
}

.text-left {
  text-align: left
}

.text-right {
  text-align: right
}

.mb-1 {
  margin-bottom: 1.3em!important
}
.mb-2 {
  margin-bottom: 2.6em!important
}
.pb-1 {
  padding-bottom: 1.3em!important
}
.px-1 {
  padding-left: 1em!important;
  padding-right: 1em!important
}
.bb-gray{border-bottom:1px solid #909090;}
small{font-size:.75em}