@charset "Shift_JIS";

/*===========================================

===========================================*/
.mv{
  display: grid;
  grid-template-columns: 1fr;
}
.mv__inner{
  overflow: hidden;
}
.mv__data {
  position: relative;
  user-select: none;
  cursor: pointer;
}
.mv__data:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.mv__data.active::after {
  content: normal;
}
.mv__data .tts_floatImg--wrap {
  padding-top: 56.3467%;
}
.mv__data img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  width: 100%;
}
.mv .tts_slide {
  visibility: hidden;
}
.mv .tts_slide.cmp {
  visibility: visible;
}
@media not screen and (min-width: 768px) {
  .mv .tts_slide__list {
    gap: var(--min8-sp);
  }
}
@media not screen and (min-width: 768px) {
  .mv .tts_slide__pagerList {
    gap: var(--min4-sp);
  }
}
.mv .tts_slide__pagerList li {
  width: var(--min27);
  height: var(--min5);
  text-indent: -9999px;
  background-color: #D9D9D9;
  overflow: hidden;
  cursor: pointer;
}
@media not screen and (min-width: 768px) {
  .mv .tts_slide__pagerList li {
    width: var(--min27-sp);
    height: var(--min5-sp);
  }
}
.mv .tts_slide__pagerList li.current {
  background-color: #999;
}

/*===========================================

===========================================*/
.important {
  display: grid;
  grid-template-columns: repeat(1, max(54.58vw, min(1048px, 100%)));
  justify-content: center;
  padding: var(--min25) var(--min20) 0;
}
@media not screen and (min-width: 768px) {
  .important {
    padding: var(--min8-sp) var(--min16-sp) 0;
  }
}
.important a {
  color: var(--black);
}
.important__list {
  display: flex;
  flex-direction: column;
  row-gap: var(--min8);
  column-gap: var(--min8);
}
.important__link {
  display: flex;
  row-gap: var(--min24);
  column-gap: var(--min24);
  border: 1px solid #DDD;
  padding: 1em;
}
.important__link:after {
  align-self: center;
}
.important__link:hover {
  text-decoration: none;
}
.important__link:hover .important__txt {
  text-decoration: underline;
}
@media not screen and (min-width: 768px) {
  .important__link {
    flex-wrap: wrap;
    gap: var(--min10-sp) var(--min24-sp);
  }
}
.important__date {
  font-weight: bold;
}
.important__txt {
  flex-grow: 1;
  font-size: var(--min12);
}
@media not screen and (min-width: 768px) {
  .important__txt {
    flex-basis: 100%;
    font-size: var(--min12-sp);
  }
}

/*===========================================

===========================================*/
@media not screen and (min-width: 768px) {
  .topix_bnr {
    padding-top: var(--min8-sp);
  }
}

.large_bnr {
  display: grid;
  grid-template-columns: repeat(1, max(54.58vw, min(1048px, 100%)));
  justify-content: center;
}
.large_bnr__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--min20);
  column-gap: var(--min20);
}
.large_bnr__inner > * {
  width: 100%;
  max-width: max(40.63vw, min(780px, 72.22vw));
}
@media not screen and (min-width: 768px) {
  .large_bnr__inner > * {
    max-width: 100%;
  }
}

/*===========================================

===========================================*/
.campaign .tts_campaign__btn {
  display: none;
}

/*===========================================

===========================================*/
.ranking {
  background: var(--lightGray);
}
.ranking__tab {
  display: flex;
  justify-content: space-between;
  column-gap: var(--min10);
  overflow: auto;
}
@media not screen and (min-width: 768px) {
  .ranking__tab {
    column-gap: var(--min10-sp);
  }
}
.ranking__tab a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--min35);
  border-radius: 100vw;
  padding: 0 1.2em;
  color: var(--black);
  font-size: var(--min12);
  line-height: 1.2;
  white-space: nowrap;
  background: transparent;
}
.ranking__tab a.active, .ranking__tab a:hover {
  background: #FFF;
}
@media not screen and (min-width: 768px) {
  .ranking__tab a {
    height: var(--min35-sp);
    font-size: var(--min14-sp);
  }
}
@media not screen and (min-width: 768px) {
  .ranking__inner {
    width: calc(100% + min(16px, 4.27vw));
    overflow: auto;
  }
}
.ranking__card {
  gap: var(--min24);
}
@media not screen and (min-width: 768px) {
  .ranking__card {
    grid-template-columns: repeat(5, min(156px, 41.6vw));
    gap: 0;
  }
}
@media not screen and (min-width: 768px) {
  .ranking .tts_card__data {
    padding-right: min(16px, 4.27vw);
  }
}
.ranking__itemList .tts_card__sub {
  font-weight: bold;
  color: var(--blue);
}

/*===========================================

===========================================*/
.recommend {
  background: #F4F0DF;
}
.recommend__itemList .tts_card__icon {
  top: var(--min5);
  left: var(--min8);
  width: var(--min22);
  height: var(--min21);
}
@media not screen and (min-width: 768px) {
  .recommend__itemList .tts_card__icon {
    top: var(--min5-sp);
    left: var(--min8-sp);
    width: var(--min22-sp);
    height: var(--min21-sp);
  }
}
.recommend__itemList .tts_card__icon:after {
  width: 100%;
  height: 100%;
  background-color: #F9BB00;
}
.recommend__itemList .tts_card__img img {
  box-shadow: 0 0 var(--min4) rgba(0, 0, 0, 0.1);
}
.recommend__itemList .tts_card__label {
  margin-bottom: var(--min4);
}
@media not screen and (min-width: 768px) {
  .recommend__itemList .tts_card__label {
    margin-bottom: var(--min4-sp);
  }
}
.recommend__itemList .tts_card__txt {
  margin-bottom: var(--min12);
}
@media not screen and (min-width: 768px) {
  .recommend__itemList .tts_card__txt {
    margin-bottom: var(--min12-sp);
  }
}

/*===========================================

===========================================*/
.topics__img figure {
  padding-top: 56.1475%;
}
.topics__btn {
  display: flex;
  justify-content: center;
  margin-top: var(--min24);
}
@media not screen and (min-width: 768px) {
  .topics__btn {
    margin-top: var(--min24-sp);
  }
}
.topics__btn > * {
  width: var(--min300);
}
@media not screen and (min-width: 768px) {
  .topics__btn > * {
    width: var(--min300-sp);
  }
}
@media not screen and (min-width: 768px) {
  .topics__list .tts_card__txt {
    display: none;
  }
}

/*===========================================

===========================================*/
.column__img figure {
  padding-top: 56.1475%;
}
.column__btn {
  display: flex;
  justify-content: center;
  margin-top: var(--min24);
}
@media not screen and (min-width: 768px) {
  .column__btn {
    margin-top: var(--min24-sp);
  }
}
.column__btn > * {
  width: var(--min300);
}
@media not screen and (min-width: 768px) {
  .column__btn > * {
    width: var(--min300-sp);
  }
}
@media not screen and (min-width: 768px) {
  .column {
    margin-top: var(--min60);
  }
  .column__list .tts_card__sub {
    display: none;
  }
}

/*===========================================

===========================================*/
.search {
  background: #E7F3F3;
}
.search__box {
  grid-template-columns: max(33.54vw, min(644px, 59.63vw)) 1fr;
}
@media not screen and (min-width: 768px) {
  .search__box {
    grid-template-columns: 1fr;
    gap: var(--min25-sp) 0;
  }
}
.search__ttl {
  display: flex;
  font-weight: bold;
  align-items: center;
  row-gap: 0.25em;
  column-gap: 0.25em;
}
.search__ttl span {
  row-gap: 0;
  column-gap: 0.5em;
}
.search__ttl--sub {
  font-size: var(--min12);
  font-weight: normal;
}
@media not screen and (min-width: 768px) {
  .search__ttl--sub {
    font-size: var(--min12-sp);
  }
}
* + .search__ttl {
  margin-top: var(--min48);
}
@media not screen and (min-width: 768px) {
  * + .search__ttl {
    margin-top: var(--min25-sp);
  }
}
.search__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--min16);
}
@media not screen and (min-width: 768px) {
  .search__list {
    gap: 0;
  }
}
.search__input {
  display: flex;
  align-items: center;
  position: relative;
  height: var(--min38);
  margin-top: var(--min12);
  border-radius: 100vw;
  border: 1px solid var(--gray);
  font-size: var(--min12);
  background: #FFF;
  overflow: hidden;
}
@media not screen and (min-width: 768px) {
  .search__input {
    height: var(--min38-sp);
    margin-top: var(--min12-sp);
    font-size: var(--min12-sp);
  }
}
.search__input input {
  flex-grow: 1;
  padding: 0 calc(2em + var(--min18)) 0 1.5em;
  font-size: var(--min12);
  height: 100%;
}
@media not screen and (min-width: 768px) {
  .search__input input {
    font-size: var(--min12-sp);
  }
}
.search__input button {
  position: absolute;
  right: 1.5em;
  cursor: pointer;
}
.search__btn {
  max-width: var(--min300);
  margin-top: var(--min48);
}
@media not screen and (min-width: 768px) {
  .search__btn {
    max-width: var(--min300-sp);
    margin: var(--min48-sp) auto 0 auto;
  }
}
.search__btn a {
  background-color: #fff;
}

/*===========================================

===========================================*/
.flow__list {
  gap: 0 var(--min37);
}
@media not screen and (min-width: 768px) {
  .flow__list {
    margin-top: var(--min30-sp);
    gap: var(--min50-sp) 0;
  }
}
.flow__data {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  position: relative;
  margin-top: var(--min40);
  padding: 0 0 var(--min36);
  border-radius: var(--min4);
  background: #E7F3F3;
}
@media not screen and (min-width: 768px) {
  .flow__data {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: var(--min2-sp) var(--min12-sp);
    margin-top: 0;
    padding: var(--min20-sp);
  }
}
.flow__data::after {
  content: "";
  transform: translate(-50%, -40%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 50%;
  width: max(4.84vw, min(93px, 8.61vw));
  height: max(4.84vw, min(93px, 8.61vw));
  border-radius: 100vw;
  background: #E7F3F3;
}
@media not screen and (min-width: 768px) {
  .flow__data::after {
    transform: translate(-50%, calc(var(--min30-sp) * -1));
    width: min(93px, 24.8vw);
    height: min(93px, 24.8vw);

  }
}
.flow__data:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(max(0.68vw, 13px) * -1);
  width: var(--min11);
  height: var(--min19);
  margin: auto 0;
  transform: translate(100%, 0);
  background-color: #E7F3F3;
  clip-path: polygon(var(--min11) 50%, 0% 0%, 0% var(--min19));
  z-index: 2;
}
@media not screen and (min-width: 768px) {
  .flow__data:before {
    transform: translate(0, calc(100% + var(--min2-sp))) rotate(90deg);
    width: var(--min10-sp);
    height: var(--min16-sp);
    top: auto;
    left: 0;
    right: 0;
    margin: auto;
    clip-path: polygon(var(--min10-sp) 50%, 0% 0%, 0% var(--min16-sp));
  }
}
.flow__data:last-child::before {
  content: normal;
}
.flow__no {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  color: #009CE1;
  font-size: var(--min24);
  font-weight: bold;
}
@media not screen and (min-width: 768px) {
  .flow__no {
    font-size: var(--min24-sp);
  }
}
.flow__no span {
  display: block;
  transform: translate(0, -1em);
  position: relative;
  z-index: 1;
}
@media not screen and (min-width: 768px) {
  .flow__no span {
    transform: translate(0, -0.75em);
  }
}
.flow__ttl {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: var(--min18);
  padding: 0 0.5em;
  font-size: var(--min16);
  font-weight: bold;
  word-break: break-all;
  z-index: 1;
}
@media not screen and (min-width: 768px) {
  .flow__ttl {
    grid-column: 2/3;
    grid-row: 1/2;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    font-size: var(--min16-sp);
  }
}
.flow__img {
  display: flex;
  justify-content: center;
  position: relative;
  width: var(--min80);
  height: var(--min80);
  margin: var(--min12) auto 0 auto;
  border-radius: 100vw;
  overflow: hidden;
  z-index: 1;
}
@media not screen and (min-width: 768px) {
  .flow__img {
    align-self: center;
    grid-column: 1/2;
    grid-row: 1/3;
    width: var(--min80-sp);
    height: var(--min80-sp);
    margin: 0;
  }
}
.flow__text {
  position: relative;
  margin: var(--min12) var(--min20) 0;
  font-size: var(--min12);
  word-break: break-all;
  z-index: 1;
}
@media not screen and (min-width: 768px) {
  .flow__text {
    grid-column: 2/3;
    grid-row: 2/3;
    margin: 0;
    font-size: var(--min14-sp);
  }
}
.flow__btn {
  display: flex;
  justify-content: center;
  margin-top: var(--min24);
}
@media not screen and (min-width: 768px) {
  .flow__btn {
    margin-top: var(--min24-sp);
  }
}
.flow__btn > * {
  width: var(--min300);
}
@media not screen and (min-width: 768px) {
  .flow__btn > * {
    width: var(--min300-sp);
  }
}

/*===========================================

===========================================*/
.information__data {
  margin-top: var(--min20);
  border-bottom: 1px solid #DDD;
  padding: 0 0 var(--min20) 0;
  font-size: var(--min12);
}
@media not screen and (min-width: 768px) {
  .information__data {
    margin-top: var(--min16-sp);
    padding: 0 0 var(--min16-sp) 0;
    font-size: var(--min12-sp);
  }
}
.information__data:first-child {
  margin-top: 0;
}
.information__data a {
  display: flex;
  row-gap: 0;
  column-gap: var(--min24);
  color: var(--black);
  text-decoration: none;
}
@media not screen and (min-width: 768px) {
  .information__data a {
    flex-wrap: wrap;
    row-gap: var(--min10-sp);
    column-gap: var(--min24-sp);
  }
}
.information__data a:hover .information__txt {
  text-decoration: underline;
}
.information__date {
  font-weight: bold;
}
.information__label span {
  font-size: var(--min10);
}
@media not screen and (min-width: 768px) {
  .information__label span {
    font-size: var(--min10-sp);
  }
}
@media not screen and (min-width: 768px) {
  .information__txt {
    flex-basis: 100%;
  }
}