@charset "UTF-8";
/* ------------------------------------- */
/* 新聞ファン */
/* ------------------------------------- */
.fan .inner {
  color: #000;
  max-width: 890px;
  width: 89%;
  margin: 0 auto;
}
.fan .fanttl {
  padding: 13.8rem 0 15rem;
}
.fan .inner h2.main-ttl {
  margin: 0 auto 8rem;
}
.fan.detail .inner h2.main-ttl .ttl-caps {
  font-size: clamp(1.9rem, 2vw + 1rem, 2.4rem);
  letter-spacing: 1.2rem;
}
.fan .inner h2.main-ttl img {
  max-width: 323px;
}
.fan .inner ol {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  list-style: none;
  list-style-type: none;
  padding: 0;
}
.fan .inner ol li {
  width: calc(100% / 3 - 14px);
  position: relative;
  z-index: 2;
  border: 2px solid #000;
  background: #fff;
  padding: 2.5% 0 14%;
}
.fan .inner ol li:not(:nth-child(3n)) {
  margin-right: 2rem;
}
.fan .inner ol li:not(:last-child), .fan .inner ol li:not(:nth-last-child(2)), .fan .inner ol li:not(:nth-last-child(3)) {
  margin-bottom: 4rem;
}
.fan .inner ol li figure {
  width: 85%;
  margin: 0 auto;
}
.fan .inner ol li figure img {
  width: 100%;
}
.fan .inner ol li p.num-bd {
  font-size: 5.2rem;
  font-weight: 700;
  position: absolute;
  top: -1%;
  right: 5%;
  color: #FFF38E;
  margin: 0;
  z-index: 5;
}
.fan .inner ol li .label {
  position: absolute;
  width: 90%;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 5%;
}
.fan .inner ol li .label p {
  margin: 0;
}
.fan .inner ol li .label p.shozoku, .fan .inner ol li .label p.catch {
  font-size: 1.3rem;
  line-height: 2.2rem;
  background: #fff;
  display: inline-block;
  padding: 2% 5%;
}
.fan .inner ol li .label p.shozoku {
  text-align: left;
  float: left;
  position: relative;
  top: 1px;
}
.fan .inner ol li .label p.shozoku.small {
  font-size: 1.2rem;
  padding: 2% 3%;
}
.fan .inner ol li .label p.catch {
  text-align: right;
  float: right;
  position: relative;
  top: -1px;
}
.fan .inner ol li .label h2.name {
  font-size: 2.5rem;
  background: #FFF38E;
  padding: 3% 2%;
  width: 100%;
  text-align: center;
}
.fan .inner ol li .label h2.name span {
  font-size: 2.1rem;
}
.fan.detail {
  background: linear-gradient(180deg, #dcdddd 0%, #dcdddd 470px, #fff 470px, #fff 100%);
}
.fan.detail .inner {
  padding: 0;
}
.fan.detail .fanBox {
  background: #fff;
  border: 2px solid #000;
  padding: 6% 5% 8%;
  position: relative;
}
.fan.detail .fanBox .btnarrow {
  float: right;
}
.fan.detail .index {
  margin-bottom: 5.5rem;
  text-align: left;
  width: 59%;
  max-width: 461px;
}
.fan.detail .index h2 {
  background: #fff;
  padding: 0 4%;
  display: flex;
  align-items: center;
  width: max-content;
}
.fan.detail .index h2 span {
  display: inline-block;
}
.fan.detail .index h2 .archivo {
  font-size: 1.4rem;
  line-height: normal;
  position: relative;
  top: 2px;
}
.fan.detail .index h2 .num-bd {
  font-size: 3.8rem;
  line-height: 5rem;
  font-weight: 700;
  color: #FFF38E;
  margin-left: .5rem;
}
.fan.detail .index h3 {
  font-size: 2.8rem;
  background: #FFF38E;
  padding: 4% 8%;
  position: relative;
  top: -1px;
  line-height: 3.9rem;
  letter-spacing: .2rem;
}
.fan.detail .fanCon {
  max-width: 790px;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 auto 5.5rem;
  text-align: justify;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.fan.detail .fanCon .txt {
  width: 59%;
  max-width: 461px;
}
.fan.detail .fanCon .txt p {
  letter-spacing: .08rem;
}
.fan.detail .fanCon figure.main {
  position: absolute;
  top: 7%;
  right: 5%;
  text-align: center;
  width: 33%;
  max-width: 280px;
}
.fan.detail .fanCon figure.main .speech {
  padding: 2% 10% 4%;
  margin: -3.5rem auto 0;
  text-align: left;
}
.fan.detail .fanCon figure.main .speech span {
  display: inline-block;
  font-size: 2.1rem;
}
.fan.detail .fanCon figure.main .speech .small {
  font-size: 1.4rem;
}
.fan.detail .fanCon figure.main .speech .large {
  font-size: 2.5rem;
}
.fan.detail .fanCon figure.main .speech::after {
  top: -17px;
  right: 16%;
}
.fan.detail .fanCon:nth-of-type(odd) {
  flex-direction: row-reverse;
}
.fan.detail .fanCon:nth-of-type(odd) .txt {
  width: 68%;
  max-width: 536px;
}
.fan.detail .fanCon:nth-of-type(odd) figure {
  width: 26%;
  max-width: 205px;
}
.fan.detail .more-arw {
  position: relative;
  display: inline-block;
  transition: all .3s;
  float: right;
  padding: 0;
  font-size: 1.4rem;
}
.fan.detail .more-arw::after, .fan.detail .more-arw::before {
  display: none;
}
.fan.detail .more-arw span {
  position: relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
  outline: none;
  padding-right: 55px;
  font-weight: 700;
  letter-spacing: .3rem;
  padding: 0.5em 9rem 0.5em 0;
}
.fan.detail .more-arw span::before {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 71%;
  width: 20%;
  height: 1px;
  background: #000;
  transition: all .3s;
}
.fan.detail .more-arw span::after {
  content: '';
  position: absolute;
  bottom: 23px;
  right: 9%;
  width: 10px;
  height: 1px;
  background: #000;
  transform: rotate(35deg);
  transition: all .3s;
}
.fan.detail .more-arw span:hover::before {
  width: 25%;
}
.fan.detail .more-arw span:hover::after {
  right: 4%;
}
@media all and (-ms-high-contrast: none) {
  /* --- IEのみ --- */
  .fan.detail .inner h2.main-ttl .ttl-caps {
    font-size: 2.4rem;
  }
  .fan.detail .index h2 {
    width: 200px;
  }
}
@supports (-ms-ime-align: auto) {
  /* --- Edgeのみ --- */
  .fan.detail .inner h2.main-ttl .ttl-caps {
    font-size: 2.4rem;
  }
  .fan .inner ol li {
    min-height: 380px;
    padding: 2rem 0 3rem;
  }
  .fan.detail .index h2 {
    width: 200px;
  }
}
@media only screen and (max-width: 768px) {
  /* --- タブレット縦 / スマートフォン横 --- */
  .fan .inner ol {
    justify-content: space-between;
  }
  .fan .inner ol li {
    padding: 4% 0 28%;
    width: 49.5%;
    margin: 0 0 3rem;
  }
  .fan .inner ol li:not(:nth-child(3n)) {
    margin-right: 0;
  }
  .fan .inner ol li:not(:last-child), .fan .inner ol li:not(:nth-last-child(2)), .fan .inner ol li:not(:nth-last-child(3)) {
    margin-bottom: 3rem;
  }
  .fan.detail .fanCon figure.main {
    position: relative;
    top: 0;
    right: 0;
  }
  .fan.detail .fanCon:nth-of-type(2) {
    flex-direction: row-reverse;
  }
}
@media only screen and (max-width: 599px) {
  /* --- スマートフォン縦 --- */
  .fan.detail {
    background: linear-gradient(180deg, #dcdddd 0%, #dcdddd 329px, #fff 329px, #fff 100%);
  }
  .fan .fanttl {
    padding: 10.3rem 0 6.5rem;
  }
  .fan.detail .inner h2.main-ttl .ttl-caps {
    letter-spacing: .5rem;
  }
  .fan .inner ol {
    line-height: normal;
  }
  .fan .inner ol li {
    padding: 4% 0 30%;
  }
  .fan .inner ol li p.num-bd {
    font-size: 4rem;
  }
  .fan .inner ol li .label p.shozoku, .fan .inner ol li .label p.catch {
    font-size: 1.2rem;
    text-align: justify;
    line-height: normal;
    max-width: 95%;
  }
  .fan .inner ol li .label p.shozoku.small {
    font-size: 1.1rem;
  }
  .fan .inner ol li .label h2.name {
    font-size: 1.4rem;
  }
  .fan .inner ol li .label h2.name span {
    font-size: 1.3rem;
  }
  .fan .inner h2.main-ttl {
    margin: 0 auto 5.3rem;
  }
  .fan.detail h2.main-ttl img {
    max-width: 217px;
  }
  .fan.detail .fanBox {
    padding: 11% 5% 16%;
  }
  .fan.detail .fanBox .btnarrow {
    float: left;
  }
  .fan.detail .fanCon {
    flex-direction: column;
    margin: 0 auto 4rem;
  }
  .fan.detail .fanCon:nth-of-type(2) {
    display: block;
  }
  .fan.detail .fanCon:nth-of-type(odd) {
    flex-direction: column-reverse;
  }
  .fan.detail .fanCon:nth-of-type(odd) .txt {
    width: 100%;
    max-width: 100%;
  }
  .fan.detail .fanCon:nth-of-type(odd) figure {
    width: 100%;
    max-width: 195px;
    margin-bottom: 3.5rem;
  }
  .fan.detail .fanCon figure.main {
    text-align: center;
    margin: 0 auto 4.3rem;
    width: 100%;
    max-width: 90%;
  }
  .fan.detail .fanCon figure.main .speech {
    padding: 2% 8% 3%;
  }
  .fan.detail .fanCon figure.main .speech .small {
    font-size: 1.4rem;
    line-height: 2.6rem;
  }
  .fan.detail .fanCon figure.main .speech .large {
    font-size: 1.8rem;
  }
  .fan.detail .fanCon figure.main img {
    max-width: 195px;
  }
  .fan.detail .fanCon .txt {
    width: 100%;
    max-width: 100%;
  }
  .fan.detail .fanCon .txt p {
    font-size: 1.5rem;
    line-height: 2.3rem;
  }
  .fan.detail .index {
    width: auto;
    max-width: 100%;
    font-size: 2.8rem;
    margin: 0 auto 4rem;
  }
  .fan.detail .index h3 {
    font-size: 1.8rem;
    letter-spacing: .15rem;
    line-height: 2.7rem;
    display: block;
    text-align: center;
  }
  .fan.detail .index h2 {
    padding: 0 5%;
  }
  .fan.detail .index h2 .archivo {
    font-size: 1.4rem;
  }
  .fan.detail .index h2 .num-bd {
    font-size: 2.2rem;
    line-height: normal;
    font-weight: 400;
  }
  .fan.detail .more-arw {
    float: none;
  }
}