/*這裡是桌機版設定*/
@charset "UTF-8";
/*
$p-color-white: #fff;
$p-color-lightGray: #f7f7f7;
$p-color-gray: #767676;
$p-color-darkGray: #222222;
$p-color-yellow: #f2f0e6;
$p-color-gold: #bfa480;
*/
/* html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
} */

.all {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

#sqexHeader-white {
  height: 38px;
}
  #sqexlogo {
    position: relative;
    top: 12px;
    left: 10px;
  }
  .ffxiv_pr_cross_menu_button_jp {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

/*敬請期待*/
.a-column.coming_soon{position: relative; cursor: default;}

.a-column.coming_soon::after {
    content: "敬請期待";
    color: #fff;
    position: absolute;
    z-index: 10;
    font-weight: 500;
    letter-spacing: 0.2rem;
    width: 100%;
    height: 100%;
    background: #4b402c6e;
    top: 0;
    left: 0;
    text-shadow: 0px 0px 3px rgba(60, 60, 60, 0.8),
        /* 第一層：較小、較淺 */
        0px 0px 15px rgb(66, 66, 66);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in;
    opacity: 0;
    font-size: clamp(1.1rem, 1.3vw, 1.3rem);
}

  .a-column.coming_soon::after {opacity: 1;}
  @media (max-width: 414px) {
    .ffxiv_pr_cross_menu_button_jp {
      left: auto;
      right: 1rem;
    }
  }
a {
  text-decoration: none;
}

.all .main { 
  position: relative;
  background-color: #f9f3dc;

  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  color: #5c3f35;
  line-height: 1.5;
   font-family: "Noto Sans TC",'Microsoft JhengHei', Helvetica, 'Maven Pro', 'Droid Sans','Myriad Pro', Verdana, Geneva, sans-serif;
  padding-bottom: 100px;
  overflow: hidden;
}
.all .main.movie {
  background-image: url('../../images/yakata/bg_head.png'), url('../../images/yakata/bg.png');
  background-position: center top, center bottom;
  background-repeat: repeat-x, repeat-x;
  background-size: 1125px 500px, 1125px 300px;
}
.all .main.read {
  background-color: #97dcff;
  background-image: url('../../images/yakata/read/bg_s.jpg'), url('../../images/yakata/bg.png');
  background-position: center 0, center bottom;
  background-repeat: repeat-x, repeat-x;
  background-size: contain, 1125px 300px;
}

.title {
  width: 100%;
  position: relative;
  line-height: 0;
  text-align: center;
}
.title img{
  width: 100%;
  height: auto;
  max-width: 600px;
}

.pagetop {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 51px;
  height: 67px;
  line-height: 0;
}
.pagetop img {
  width: 100%;
}

.trialbanner {
  position: relative;
  border-top: solid 1px #333333;
  background: #fff;
  padding: 20px 0;
  line-height: 0;
  padding: 10px;
}
.trialbanner a {
  display: block;
  box-sizing: border-box;
  border: solid 1px #bdbdbd;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.trialbanner a img {
  width: 100%;
}

.readbox {
  position: relative;
  margin: 1.5vw;
  background: url('../../images/yakata/read/board_s.png') repeat-y center top;
  background-size: 100% 117px;
  border-bottom: solid 1px #6a473c;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.readbox--1 {
  margin-top: 0;
}
.readbox__outer {
  margin: 15px 8px;
  padding-top: 30px;
  padding-bottom: 30px;
  background-image: url('../../images/yakata/movie/bg_top.png'), url('../../images/yakata/movie/bg_btm.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center bottom;
  background-size: 100% 30px, 100% 30px;
}
.readbox__inner {
  background-image: url('../../images/yakata/movie/bg.png');
  background-repeat: repeat-y;
  background-position: center bottom;
  background-size: 100% 300px;
}
.readbox__ttl {
  position: relative;
  margin-left: 4%;
  margin-right: 4%;
  background-image: url('../../images/yakata/movie/stl_l.png'), url('../../images/yakata/movie/stl_r.png');
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  background-size: 25px 70px, 50px 70px;
  padding: 0 25px;
}
.readbox__ttl p {
  position: relative;
  width: 100%;
  height: 70px;
  background-image: url('../../images/yakata/movie/stl.png');
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 186px 70.5px;
  line-height: 70px;
  text-align: center;
}
.readbox__ttl span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 70px;
  text-indent: -9999px;
  background: url('../../images/yakata/read/ttl0.png') no-repeat center center;
  background-size: 260px 30px;
}
.readbox__ttl--1 span {
  background-image: url('../../images/yakata/read/ttl1.png');
}
.readbox__ttl--2 span {
  background-image: url('../../images/yakata/read/ttl2.png');
}

.nav {
  position: relative;
  margin-top: 10px;
  padding-bottom: 10px;
}
.nav__item {
  position: relative;
  background: url('../../images/yakata/read/bdr.png') repeat-x left bottom;
  background-size: 300px 2px;
  margin: 0 5%;
  padding: 5px 0;
}
.nav__item a {
  display: table;
  position: relative;
  width: 100%;
  text-decoration: none;
  color: #5c3f35;
  padding: 5px 0 5px 30px;
  box-sizing: border-box;
  background: url('../../images/yakata/read/arw.png') no-repeat left center;
  background-size: 26px 27px;
  cursor: pointer;
}
.nav__item p {
  display: table-cell;
  vertical-align: middle;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2;
  font-size: 12px;
}
.nav__item p small {
  font-weight: normal;
}
.nav__item span {
  display: table-cell;
  vertical-align: middle;
  width: 10px;
  font-size: 11px;
  padding-left: 5px;
}
.nav__item img {
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  cursor: pointer;
  background: rgba(255, 0, 0, 0.5);
}

.imageViewer {
  display: none;
}

.viewer-toolbar {
  width: 100% !important;
  text-align: center;
  margin: 0 0 15px  !important;
  padding: 0  !important;
  letter-spacing: -0.4em;
}

.viewer-toolbar > li {
  float: none !important;
  background-color: transparent !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  width: 41px !important;
  height: 42px !important;
  display: inline-block !important;
  background-size: 41px 42px;
}
.viewer-toolbar > li.viewer-one-to-one, .viewer-toolbar > li.viewer-reset, .viewer-toolbar > li.viewer-play, .viewer-toolbar > li.viewer-invisible {
  display: none !important;
}
.viewer-toolbar > li:hover {
  background-color: transparent !important;
}

.viewer-toolbar > li + li {
  margin-left: 0 !important;
}

.viewer-toolbar > li::before {
  display: none;
  margin: 0 !important;
  content: "" !important;
  background: none !important;
}

.viewer-button.viewer-close {
  display: none !important;
}

.viewer-zoom-in, .viewer-zoom-out, .viewer-prev, .viewer-next {
  background-repeat: no-repeat;
  background-position: center center;
  letter-spacing: normal;
}

.viewer-zoom-out {
  background-image: url('../../images/yakata/read/vw_zo.png');
  margin-right: 6px;
}

.viewer-zoom-in {
  background-image: url('../../images/yakata/read/vw_zi.png');
  margin-right: 36px;
}

.viewer-prev {
  background-image: url('../../images/yakata/read/vw_prev.png');
  margin-right: 6px;
}

.viewer-next {
  background-image: url('../../images/yakata/read/vw_next.png');
  margin-right: 36px;
}

.viewer-myclose {
  background-image: url('../../images/yakata/read/vw_cls.png');
}

.md\:block {
  display: none;
}


.goto-twitterbtn {
  margin-top: 4%;
  margin-right: auto;
  margin-left: auto;
  width: 69%;
  text-align: center;
}
  .goto-twitterbtn img {
    width: 100%;
    transform: translateX(-4%);
  }

.anchor-nav {
  display: flex;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 15px;
}
  .anchor-nav a {
    width: 48%;
  }
    .anchor-nav a img {
      width: 100%;
    }

.decoline,
.subttl,
.subttl-text {
  padding: 0 3vw 1vw;
}
  .decoline img,
  .subttl img {
    width: 100%;
  }

.subttl-text {
  color: #5c3f35;
  font-size: 3vw;
  font-weight: normal;
  /* text-align: center; */
  font-weight: 500;
}
@media (max-width: 430px) {
  .subttl-text {
    font-size: clamp(16px, 3.3vw, 22px);
  }
}
.subttl-text span {
  display: inline-block;
}

.column-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
  padding: 3vw 2vw;
  gap: 2vw;
}
.column-list::after {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../../images/yakata/read/column_image.png);
  background-position: center center;
  width: 49%;
  padding-top: 60%;
}

.a-column {
  display: block;
  padding-bottom: 2vw;
  width: 48.5%;
  position: relative;
  background-image: url(../../images/yakata/read/column_link_deco.png);
  background-position: 0 bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;  
  transition: .25s filter;  
  word-break: break-all;
  box-sizing: border-box;
}
@media(hover) {
  .a-column:hover {
    filter: brightness(1.07) drop-shadow(0 2px 4px rgba(45, 31, 26, 0.7));
  }
}


  /* .a-column:nth-of-type(n+3) {
    margin-top: 20px;
  } */
  /* 空 */
  .a-column.is-empty {
    margin-top: 0;
    height: 0;
    padding-bottom: 0;
  }
  .a-column-image {
    border: 2px solid rgba(98, 55, 42, .5);
    border-top: 1px solid rgba(104,75,66,.5);
    border-bottom: none;
    /* border: 2px solid rgba(104,75,66,1); */
    position: relative;
    top: -1px;
  }
  .a-column-image img {
    width: 100%;
  }
  .a-column-label {
    padding: 2vw;
    color: #5c3f35;
    font-size: 2.6vw;
    font-weight: 500;
  }
  .a-column-tags {
    width: 100%;
    padding: 1vw 2vw;
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;

  }
  .a-column-tags span {
    width: fit-content;
    /* margin-top: 1vw; */
    padding: 1px 6px 3px;
    display: inline-block;
    color: #fff;
    font-size: 2vw;
    background-color: #6a473c;
  }
  .a-column-tags span+span {
    margin-left: .5vw;
  }

@media screen and (max-width: 430px) {
  .column-list {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .a-column {
    width: 99%;   
  }

  .column-list::after {
    width: 90%;
  }

  .a-column-label {
    font-size: clamp(16px, 3.3vw, 22px);
  }

  .a-column-label,
  .a-column-tags {
    padding: 1vw 3vw;
  }

  .a-column-tags span {
    font-size: clamp(13px, 2.8vw, 19px);
  }
  
}