@charset "utf-8";
@import url("bootstrap-4.3.1.css");
@import url("reset.css");
@import url("sp.css");
@import url("magnific-popup.css");
@import url("news_style_scss.scss");
/*　FONT
====================================================================================================== */
body {
  font-family: "wanpaku-rera", sans-serif;
  font-weight: 400;
  font-style: normal;
  background: #FFFBF4 url("../images/bg_news.jpg")no-repeat center top;
  background-color: #f4f4f4;
  background-attachment: fixed;
}
.main {
  overflow: hidden;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #211E1C;
  border-left: solid 1px #1f1f1f;
}
::-webkit-scrollbar-thumb {
  background: #211E1C;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #dac59f;
}
.bg_fixed {
  width: 100%;
  height: 100%;
  background-image: url("../images/bg_news_u.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block;
}
/*　./FONT
====================================================================================================== */
/*　pc/sp
====================================================================================================== */
@media only screen and (max-width: 1024px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
@media only screen and (min-width: 1025px) {
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
}
/*　./pc/sp
====================================================================================================== */
/*　Loading
====================================================================================================== */
.loading {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: auto;
  background: #f9f3e4;
  z-index: 999999999;
  overflow: hidden;
}
.loading img {
  position: absolute;
  width: 250px;
  height: 150px;
  margin-top: -12vh;
  margin-left: -4vw;
  z-index: 99999999;
}
@media only screen and (max-width: 823px) {
  .loading img {
    width: 80%;
    max-width: 250px;
    top: 40%;
    left: 40%;
  }
}
@media only screen and (max-width: 568px) {
  .loading img {
    width: 70%;
    top: 32%;
    left: 32%;
  }
}
@media only screen and (max-width: 414px) {
  .loading img {
    top: 32%;
    left: 25%;
  }
}
/*　./Loading
====================================================================================================== */
/*　nav
====================================================================================================== */
.nav-link span, .nav-item span {
  display: block;
  text-align: center;
}
.nav-item.no_l {
  padding: 0.9rem 1rem 0.8rem 1rem;
  color: #B8B8B8;
}
.nav-link span.jp, .nav-item span.jp {
  font-family: "yomogi", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
}
.nav-link span.day, .nav-item span.day {
  font-family: "catseye", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.05rem;
}
.dropdown-item {
  text-align: center;
}
.dropdown-menu a {
  font-family: "yomogi", sans-serif;
  font-weight: 700;
}
/*　./nav
====================================================================================================== */
/*　news
====================================================================================================== */
.news_c {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 800px;
  height: auto;
}
.news_c .container {
  height: auto;
  margin-top: 2rem;
  background: rgba(255, 255, 255, 0.9);
}
/* 画像表示 */
.bn_nt img {
  margin: auto;
  display: block;
  width: 100%;
  height: auto;
}
.col-12.bn img {
  margin: auto;
  display: block;
  width: 90%;
}
/* Title */
.news_title {
  margin: auto;
  width: 90%;
  display: block;
  border-bottom: solid 2px #61524b;
}
.news_title_sp {
  display: block;
  padding-bottom: 0.4rem;
  font-family: "yomogi", sans-serif;
  font-weight: bold;
  font-size: 3rem;
  color: #61524b;
}
.news_title_sp.fs_s {
  display: inline-block;
  font-size: 2rem !important;
  padding-bottom: 0;
}
.news_title_spe {
  display: block;
  font-size: 1rem;
  color: #61524b;
  font-family: catseye, sans-serif;
  float: right;
  margin-top: -1.4rem;
}
/* h3各種 */
.news_h3 {
  margin: auto;
  width: 90%;
  display: block;
  font-weight: bold;
  border-bottom: solid 2px #61524b;
}
.news_h3 span {
  display: block;
  padding-bottom: 0.4rem;
  font-size: 2rem;
  color: #61524b;
}
.news_h3_cau {
  margin: auto;
  width: 90%;
  display: block;
  border-bottom: solid 2px #cc0000;
}
.news_h3_cau span {
  display: block;
  padding-bottom: 0.4rem;
  font-size: 2rem;
  font-weight: bold;
  color: #cc0000;
}
@media only screen and (max-width: 767px) {
  .news_title_sp {
    font-size: 2.2rem;
  }
  .news_title_sp.fs_s {
    font-size: 1.6rem !important;
  }
  .news_h3 span {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 600px) {
  .news_title, .news_h3, .news_h3_cau, .col-12.bn img {
    width: 96%;
  }
}
@media only screen and (max-width: 414px) {
  .news_title_spe.fs_s {
    float: left;
    margin-top: -3.6rem !important;
  }
}
@media only screen and (max-width: 375px) {
  .news_title_spe {
    font-size: 1rem;
    float: left;
    margin-top: -3.3rem;
    margin-left: 0.2rem;
  }
  .news_title_spe.fs_s {
    margin-top: -5.6rem !important;
  }
}
/* 横幅 */
.w100 {
  width: 100%;
}
.w99 {
  width: 99%;
}
.w98 {
  width: 98%;
}
.w97 {
  width: 97%;
}
.w90 {
  width: 90%;
}
.w80 {
  width: 80%;
}
.w50 {
  width: 50%;
}
.w45 {
  width: 45%;
}
.w33 {
  width: 33%;
}
.w31 {
  width: 31%;
}
.w30 {
  width: 30%;
}
.w25 {
  width: 25%;
}
.w20 {
  width: 20%;
}
.w10 {
  width: 10%;
}
.w7 {
  width: 7%;
}
.w120p {
  width: 120px;
}
.w36p {
  width: 50px;
  background: #ffffff59;
}
.bb_b {
  border-bottom: solid 2px !important;
}

ul.v3_i1_item.ull_skill li
{
	font-size: 0.8rem;
	padding: 0.2rem 0.4rem;
}
/* textarea */
.text-area_w80 {
  margin: auto;
  width: 80%;
}
.text-area p {
  font-size: 1rem;
  color: #61524b;
}
/* table */
.table_Area_w80 {
  margin: auto;
  width: 80%;
}
@media only screen and (max-width: 600px) {
  .text-area_w80 {
    width: 92%;
  }
  .table_Area_w80 {
    width: 100%;
  }
}
table {
  width: 100%;
  margin: auto;
  border: 1px solid #382f2b;
  border-spacing: 0;
  overflow: hidden;
  border-collapse: collapse;
  font-size: 0.8rem;
  color: #61524b;
  background: #ffffff57;
  transition: all 1s ease-in-out;
}
tr {
  border: 1px solid #443a35;
}
th {
  padding: 0.4rem;
  color: #f5f5f5;
  background: #443a35;
  border: 1px solid #382f2b;
}
td {
  padding: 0.4rem;
  color: #61524b;
  border: 1px solid #382f2b;
}
td.ts_top {
  vertical-align: top;
}
td p {
  padding: 0;
}
@media only screen and (max-width: 600px) {
  table, li.caution p, li.ul_list_on p {
    font-size: 0.7rem !important;
  }
  th {
    padding: 0.2rem;
  }
  td {
    padding: 0.2rem;
  }
}
/* table border */
.t_bl {
  border-left: none !important;
}
.t_br {
  border-right: none !important;
}
.t_bt {
  border-top: none !important;
}
.t_bb {
  border-bottom: none !important;
}
td.t_bbb {
  border-bottom: solid !important;
}
/* table bg */
.bg_sd {
  background: #443a3512;
}
.bg_sr {
  background: #ff000026;
}
.bg-dk {
  background: #443a353b;
}
.bg_red {
  background: #963434;
}
.bg_blue {
  background: #384469;
}
/* フォント */
.fc_red {
  color: #cc0000 !important;
}
.fc_p {
  color: #FFC6C6 !important;
}
.fc_blue {
  color: #001d6f !important;
}
.fc_w {
  color: #fff !important;
}
.bold {
  font-weight: bold;
}
.ft_delete {
  text-decoration: line-through;
}
/* 通常時 注意書き */
p.caution {
  font-size: 0.8rem;
  font-size: bold;
}
/* リンク色 */
a {
  color: #e63d56;
  transition: all 1s ease-in-out;
}
a:hover {
  color: lightpink;
}
/* 注意事項 */
ul.Text_Area.caution {
  width: 100%;
  padding-left: 1.2rem;
}
li.caution {}
li.caution p {
  font-size: 0.8rem;
  font-size: bold;
  padding: 0;
}
li.caution::before {
  display: block;
  content: "※";
  font-size: 0.7rem !important;
  margin-left: -0.9rem !important;
  margin-bottom: -1.1rem !important;
}
/* --- リスト設定 --- */
ul.ul_list_on, ol.ol_list_on {
  width: 100%;
  padding-left: 1.2rem;
}
li.ul_list_on {
  list-style: square;
}
li.ol_list_on {
  list-style: decimal;
}
.ml--2 {
  margin-left: -0.5rem !important;
}
li.ul_list_on p, li.ol_list_on p {
  font-size: 0.8rem;
  font-size: bold;
  padding: 0;
}
ul.v3_i1_item {
  display: flex;
  justify-content: center;
  width: 100%;
}
ul.v3_i1_item li {
  padding: 0.2rem 1.4rem;
  margin: 0.4rem;
  color: #f5f5f5;
  background: #443a35;
}
ul.v3_i1_item a li {
  color: #f5f5f5;
  background: #443a35;
  transition: all 1s ease-in-out;
}
ul.v3_i1_item a li:hover {
  background: #735d54;
  transition: all 1s ease-in-out;
}
ul.v3_i1_item a:hover {
  text-decoration: none !important;
}
@media only screen and (max-width: 414px) {
  ul.v3_i1_item li {
    padding: 0.2rem 0.8rem;
  }
}
@media only screen and (max-width: 320px) {
  ul.v3_i1_item li {
    padding: 0.2rem 0.6rem;
  }
}
/* --- table内 popup img --- */
.table_img_ss {
  background: #ffffff59;
}
.table_img_ss img {
  display: block;
  margin: auto;
  width: 100%;
  max-width: 120px;
}
.table_img_sb {
  background: #ffffff59;
}
.table_img_sb img {
  display: block;
  margin: auto;
  width: 100%;
  max-width: 600px;
}
.table_img_sb.usa_ss img {
  display: block;
  margin: auto;
  width: 100%;
  max-width: 170px;
}
.table_img_sb.cloth_ss img {
  display: block;
  margin: auto;
  width: 100%;
  max-width: 120px;
}
/* --- popup Gallery 矢印指定 --- */
.mfp-arrow {
  width: 50px;
  height: 50px;
}
.mfp-arrow.mfp-arrow-left.mfp-prevent-close {
  margin-left: 2%;
  background: url(../images/nav_pre.png)no-repeat;
}
.mfp-arrow.mfp-arrow-right.mfp-prevent-close {
  margin-right: 2%;
  background: url("../images/nav_next.png")no-repeat;
  animation: anime_c1b 3s linear infinite;
}
/*　./news
====================================================================================================== */
/*　Title各種
====================================================================================================== */
/* h3 table上Title各種 */
/* 王冠 */
.news_h3_table1 {
  margin: auto;
  width: 100%;
  display: block;
  background: url("../images/icon_t1.png")no-repeat;
  background-size: contain;
}
.news_h3_table1 span {
  display: block;
  padding-left: 1.8rem;
  font-size: 1.2rem;
  color: #61524b;
}
.news_h3_table1_s {
  margin: auto;
  width: 100%;
  display: block;
  background: url("../images/icon_t1_s.png")no-repeat;
  background-size: contain;
}
.news_h3_table1_s span {
  display: block;
  padding-left: 1.8rem;
  font-size: 1.2rem;
  color: #61524b;
}
/* アイテムボックス */
.news_h3_table2 {
  margin: auto;
  width: 100%;
  display: block;
  background: url("../images/icon_t5.png")no-repeat;
  background-size: contain;
}
.news_h3_table2 span {
  display: block;
  padding-left: 1.8rem;
  font-size: 1.2rem;
  color: #61524b;
}
.news_h3_table2_s {
  margin: auto;
  width: 100%;
  display: block;
  background: url("../images/icon_t5_s.png")no-repeat;
  background-size: contain;
}
.news_h3_table2_s span {
  display: block;
  padding-left: 1.4rem;
  font-size: 1rem;
  color: #61524b;
}
/* アイテム */
.news_h3_table3 {
  margin: auto;
  width: 100%;
  display: block;
  background: url("../images/icon_t2.png")no-repeat;
  background-size: contain;
}
.news_h3_table3 span {
  display: block;
  padding-left: 1.8rem;
  font-size: 1.2rem;
  color: #61524b;
}
.news_h3_table3_s {
  margin: auto;
  width: 100%;
  display: block;
  background: url("../images/icon_t2.png")no-repeat;
  background-size: contain;
}
.news_h3_table3_s span {
  display: block;
  padding-left: 1.4rem;
  font-size: 1rem;
  color: #61524b;
}
/* 防具武器 */
.news_h3_table4 {
  margin: auto;
  width: 100%;
  display: block;
  background: url("../images/icon_t3.png")no-repeat;
  background-size: contain;
}
.news_h3_table4 span {
  display: block;
  padding-left: 1.8rem;
  font-size: 1.2rem;
  color: #61524b;
}
.news_h3_table4_s {
  margin: auto;
  width: 100%;
  display: block;
  background: url("../images/icon_t3_s.png")no-repeat;
  background-size: contain;
}
.news_h3_table4_s span {
  display: block;
  padding-left: 1.4rem;
  font-size: 1rem;
  color: #61524b;
}
/* モンスター */
.news_h3_table5 {
  margin: auto;
  width: 100%;
  display: block;
  background: url("../images/icon_t4.png")no-repeat;
  background-size: contain;
}
.news_h3_table5 span {
  display: block;
  padding-left: 1.8rem;
  font-size: 1.2rem;
  color: #61524b;
}
.news_h3_table5_s {
  margin: auto;
  width: 100%;
  display: block;
  background: url("../images/icon_t4_s.png")no-repeat;
  background-size: contain;
}
.news_h3_table5_s span {
  display: block;
  padding-left: 1.4rem;
  font-size: 1rem;
  color: #61524b;
}
/* table th title */
/* ☆-gold_ssmall */
th.th_t_item_1 {
  background: #443a35 url("../images/icon_th_1.png")no-repeat center left;
  background-position-x: 0.1rem;
  background-position-y: 0.3rem;
}
.th_t_item_1 span {
  display: block;
  padding-left: 1rem;
  font-size: 0.8rem;
  color: #f5f5f5;
}
/* ☆-gold_ssmall */
th.th_t_item_1s {
  background: #443a35 url("../images/icon_th_1.png")no-repeat center left;
  background-position-x: 1px;
  background-position-y: 1px;
  padding: 0.1rem;
}
.th_t_item_1s span {
  display: block;
  padding-left: 1.2rem;
  font-size: 0.8rem;
  color: #f5f5f5;
}
/* item_ssmall */
th.th_t_item_2 {
  background: #443a35 url("../images/icon_th_6.png")no-repeat;
  background-position-x: 0.1rem;
  background-position-y: 0.3rem;
}
.th_t_item_2 span {
  display: block;
  padding-left: 1rem;
  font-size: 0.8rem;
  color: #f5f5f5;
}
@media only screen and (max-width: 600px) {
  th.th_t_item_1, th.th_t_item_2 {
    background-position-y: 0.2rem !important;
  }
}
/* item_icon無し */
th.th_t_item_3 {
  background: #443a35;
  padding: 0.1rem;
}
.th_t_item_3 span {
  color: #f5f5f5;
}
/* ☆-s_ssmall */
th.th_t_item_s1 {
  background: #443a35 url("../images/icon_th_2.png")no-repeat;
  background-position-x: 1px;
  background-position-y: 1px;
  padding: 0.1rem;
}
.th_t_item_s1 span {
  display: block;
  padding-left: 1.2rem;
  font-size: 0.8rem;
  color: #f5f5f5;
}
/* ☆-red_ssmall */
th.th_t_item_s2 {
  background: #443a35 url("../images/icon_th_3.png")no-repeat;
  background-position-x: left;
  background-position-y: center;
  padding: 0.1rem;
}
.th_t_item_s2 span {
  display: block;
  padding-left: 1.2rem;
  font-size: 0.8rem;
  color: #f5f5f5;
}
/* ☆-blue_ssmall */
th.th_t_item_s3 {
  background: #443a35 url("../images/icon_th_4.png")no-repeat;
  background-position-x: left;
  background-position-y: center;
  padding: 0.1rem;
}
.th_t_item_s3 span {
  display: block;
  padding-left: 1.2rem;
  font-size: 0.8rem;
  color: #f5f5f5;
}
/* ☆-green_ssmall */
th.th_t_item_s4 {
  background: #443a35 url("../images/icon_th_5.png")no-repeat;
  background-position-x: left;
  background-position-y: center;
  padding: 0.1rem;
}
.th_t_item_s4 span {
  display: block;
  padding-left: 1.2rem;
  font-size: 0.8rem;
  color: #f5f5f5;
}
/*　./Title各種
====================================================================================================== */
/*　readmore
====================================================================================================== */
readmore .readmore {
  position: relative;
  box-sizing: border-box;
  /*以下お好み*/
  /* ボーダーを付ける場合 */
  padding: 10px;
  border: 1px solid #CCC;
}
.readmore-content {
  position: relative;
  overflow: hidden;
  /*以下お好み*/
  /*高さの初期値*/
  height: 100px;
}
.readmore-content::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
  /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
  height: 50px;
  background: -webkit-linear-gradient(top, rgba(241, 242, 243, 0.03) 0%, rgba(244, 245, 246, 0.6) 50%, rgba(244, 245, 246, 0.87) 50%, #f1eee9 100%);
  background: linear-gradient(top, rgba(241, 242, 243, 0.03) 0%, rgba(244, 245, 246, 0.6) 50%, rgba(244, 245, 246, 0.87) 50%, #f1eee9 100%);
}
/* 続きを読むボタン */
.readmore-label {
  display: table;
  bottom: 5px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  margin: 0 auto;
  z-index: 2;
  padding: 0 2rem;
  background-color: #443a35;
  color: #FFF;
}
.readmore-label:before {
  content: '続きを読む';
}
.readmore-check {
  display: none;
}
/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label {
  position: static;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
  /* display: none; */
}
.readmore-check:checked ~ .readmore-label:before {
  content: '閉じる';
}
/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content {
  height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
  display: none;
}
/*　./readmore
====================================================================================================== */
/*　cp_tab_panel
====================================================================================================== */
.tab-group {
  display: flex;
  justify-content: center;
}
.tab {
  flex-grow: 1;
  padding: 5px;
  list-style: none;
  border: solid 1px #382f2b;
  text-align: center;
  cursor: pointer;
  color: #f5f5f5;
  background: #584c46;
  transition: all 1s ease-out;
}
.tab:hover {
  color: #f5f5f5;
  background: #382f2b;
  transition: all 1s ease-out;
}
.panel-group {
  border: none;
  border-top: none;
  width: 100%;
  height: auto;
}
.panel {
  display: none;
}
.tab.is-active {
  color: #f5f5f5;
  background: #382f2b;
  transition: all 1s ease-out;
}
.panel.is-show {
  display: block;
  animation: anime_ps_fin 1s linear;
}
@keyframes anime_ps_fin {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*　./cp_tab_panel
====================================================================================================== */
/*　POPUP_news
====================================================================================================== */
.in_news_p {
  background: #ffffffd9;
}
.container.in_news_p {
  max-width: 800px;
}
span.inline-link {
  cursor: pointer;
  color: #e63d56;
  transition: all 1s ease-in-out;
}
span.inline-link:hover {
  color: lightpink;
  text-decoration: underline !important;
}
.mfp-bg.mfp-with-zoom.mfp-img-mobile, .mfp-wrap.mfp-auto-cursor.mfp-with-zoom.mfp-img-mobile {
  opacity: 0;
}
.mfp-bg.mfp-with-zoom.mfp-img-mobile.mfp-ready {
  animation: anime_ps_fin 1s linear;
  opacity: 0.8;
}
.mfp-wrap.mfp-auto-cursor.mfp-with-zoom.mfp-img-mobile.mfp-ready {
  animation: anime_ps_fin 1s linear;
  opacity: 1;
}
/*　POPUP_news
====================================================================================================== */
/* アコーディオン表示
====================================================================================================== */
tr.acd {
  cursor: pointer;
}
/*　./アコーディオン表示
====================================================================================================== */
/*　pt
====================================================================================================== */
.pt_area {
  position: fixed;
  width: 100%;
  height: 50px;
  margin: auto;
  left: 0;
  bottom: 0;
  z-index: 99;
}
.pt_btn {
  margin: auto;
  width: 100%;
  right: 20px;
  cursor: pointer;
  transition: all .6s ease-in-out;
}
.pt_btn img {
  opacity: 1;
}
.pt_btn img:hover {
  opacity: 0.5;
}
/*　./pt
====================================================================================================== */
/*　footer
====================================================================================================== */
.footer {
  position: relative;
  width: 100%;
  bottom: 0;
  background: #171514;
  border-top: #ffdc9b solid 1px;
  z-index: 999;
}
.f_logo {
  position: relative;
  margin: auto;
  width: 80%;
}
.f_logo img {
  display: block;
  width: 100%;
  max-width: 380px;
}
.footer_cc p {
  color: #b3b3b3;
  font-size: 0.8rem;
  font-family: catseye, sans-serif;
}
/*　./footer
====================================================================================================== */
/*　animation
====================================================================================================== */
.f-in {
  transition: all 1s;
  transform: translate(0, 100px);
  opacity: 0;
}
.f-in.move {
  transform: translate(0, 0);
  opacity: 1;
}
.f-in_u {
  transition: all 1s;
  transform: translate(0, -100px);
  opacity: 0;
}
.f-in_u.move {
  transform: translate(0, 0);
  opacity: 1;
}
.f-in_l {
  transition: all 1s;
  transform: translate(-100px, 0);
  opacity: 0;
}
.f-in_l.move {
  transform: translate(0, 0);
  opacity: 1;
}
.f-in_r {
  transition: all 1s;
  transform: translate(100px, 0);
  opacity: 0;
}
.f-in_r.move {
  transform: translate(0, 0);
  opacity: 1;
}
/*　./animation
====================================================================================================== */