// front-pageのスタイル

.topMain {
  .exhibition,
  .selection,
  .events,
  .membershipProgram,
  .news {
    &_heading {
      margin-bottom: 40px;
      text-align: center;
      span {
        display: block;
        font-size: 1rem;
      }
    }
    &_btn {
      a {
        display: block;
        width: 250px;
        margin: 0 auto;
        padding: 10px 0;
        text-align: center;
        border: 1px solid $mainColorDark;
      }
    }
  }
  .pickup {
    margin-top: 0;
    &_item {
      padding: 40px 0;
      position: relative;
      @include flex;
      align-items: center;
      z-index: 0;
      overflow: hidden;

      &::after{
        content: '';
        background: rgba(255,255,255,.8);
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        z-index: -1;
        transform: translateZ(0);
      }
      &::before{
        content: '';
        background: inherit;
        -webkit-filter: blur(15px);
        filter: blur(15px);
        will-change: filter;
        transform: translateZ(0);
        position: absolute;
        top: -15px;
        left: -15px;
        right: -15px;
        bottom: -15px;
        z-index: -2;
      }
    }
    &_inner {
      position: relative;
      z-index: 2;
      padding: 0 5%;
      width: 100%;
      a{
        display: block;
      }
    }
    &_head {
      margin-bottom: 20px;
    }
    &_subTitle,
    &_title,
    &_desc,
    &_date,
    &_venue,
    &_gate,
    &_countdown {
      text-align: center;
      
    }
    &_subTitle {
      font-size: $smallFontSize;
    }
    &_desc {
      margin-bottom: 20px;
      text-align: left;
    }
    &_img {
       margin: 0 auto 20px;
      img {
        width: 100%;
        margin: 0 auto;
      }
      figcaption{
        font-size: $xSmallFontSize;
        margin-top: 10px;
        i{
          font-style: italic;
        }
      }
    }
    &_date {
      font-size: $smallFontSize;
    }
    &_venue {
      margin-bottom: 30px;
      font-size: $smallFontSize;
    }
    &_block {
      @include flex;
      justify-content: center;
      align-items: center;
    }
    &_countdown {
      margin-right: 8px;
      padding: 5px 8px;
      background: #C1C1C1;
      border: 1px solid $mainColorMid;
    }
    &_gate {
      a,span{
        padding: 5px 9px;
        text-align: center;
        color: white;
        background: $mainColorDark;
        border: 1px solid $mainColorDark;
        position: relative;
        display: block;
      }
      a{
        em{
          display: inline-block;
          width: 10px;
          margin-left: 3px;
          svg{
            width: 10px;
            height:10px;
            .ico_blank{
              fill: white;
            }
          }
        }
        &:hover{
          em{
            .ico_blank{
              fill: $mainColorDark;
            }
          }
        }
      }
    }
    .events_today{
      font-size: $mediumFontSize;
    }
  }
  .exhibition {
    margin: 50px 0;
    &_img {
      margin-bottom: 10px;
      width: 100%;
      overflow: hidden;
      a{
        width: 100%;
        img {
          object-fit: cover;

          width: 100%;
          height: 360px;
        }
      }
    }
    &_statusBlock {
      @include flex;
      align-items: center;
      margin-bottom: 10px;
    }
    &_countdown {
      margin-right: 8px;
      padding: 5px 8px;
      font-size: 1.1rem;
      background: white;
      border: 1px solid $mainColorMid;
    }
    &_gate {
      a,span{
        padding: 5px 9px;
        text-align: center;
        color: white;
        background: $mainColorDark;
        border: 1px solid $mainColorDark;
        font-size: 1.1rem;
        display: block;
      }
      a{
        em{
          display: inline-block;
          width: 8px;
          margin-left: 3px;
          svg{
            width: 8px;
            height:8px;
            .ico_blank{
              fill: white;
            }
          }

        }
        &:hover{
          em{
            .ico_blank{
              fill: $mainColorDark;
            }
          }
        }
      }
    }
    &_title {
      margin-bottom: 10px;
      font-size: $xLargeFontSize;
    }
    &_categoryList {
      @include flex;
      align-items: center;
      margin-bottom: 5px;
    }
    &_categoryItem {
      @include flex;
      font-size: $xSmallFontSize;
      &::after {
        content: '|';
        display: block;
        margin: 0 10px;
      }
      &:last-child {
        &::after {
          content: none;
          margin: 0;
        }
      }
    }
    &_date {
      font-size: $smallFontSize;
    }
    &_venue {
      margin-bottom: 30px;
      font-size: $smallFontSize;
    }
    &_btn {
      &:first-child {
        margin-bottom: 20px;
      }
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      width: 70%;
    }
  }
  .selection {
    padding: 50px 0;
    background: #C83C1E;
    &_img {
      margin-bottom: 20px;
    }
    &_heading {
      margin-bottom: 20px;
      color: white;
    }
    &_desc {
      margin-bottom: 30px;
      padding: 0 5%;
      color: white;
    }
    &_btn {
      a {
        display: table;
        width: auto;
        padding: 10px 20px;
        color: white;
        border: 1px solid white;
      }
    }
  }
  .events {
    padding: 50px 0;
    background: $mainColorXLight;
    &_img {
      margin-bottom: 20px;
      a{
        display: block;
        height: 140px;
        overflow: hidden;
        img {
          object-fit: cover;

          width: 100%;
          height: 100%;
        }
      }
    }
    &_statusBlock {
      @include flex;
      align-items: center;
      margin-bottom: 10px;
    }
    &_today {
      margin-right: 10px;
      padding: 5px 9px;
      font-size: 1.1rem;
      background: white;
      border: 1px solid $mainColorMid;
    }
    &_gate {
      a,span{
        padding: 5px 9px;
        text-align: center;
        color: white;
        background: $mainColorDark;
        border: 1px solid $mainColorDark;
        font-size: 1.1rem;
        display: block;
      }
      a{
        em{
          display: inline-block;
          width: 8px;
          margin-left: 3px;
          svg{
            width: 8px;
            height:8px;
            .ico_blank{
              fill: white;
            }
          }
        }
        &:hover{
          em{
            .ico_blank{
              fill: $mainColorDark;
            }
          }
        }
      }
    }
    &_category {
      margin-bottom: 5px;
      font-size: $xSmallFontSize;
    }
    &_title {
      margin-bottom: 10px;
      font-size: $mediumFontSize;
    }
    &_date {
      font-size: $smallFontSize;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
      margin-bottom: 30px;
    }
    .swiper-slide {
      width: 200px;
    }
  }
  .membershipProgram {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    padding: 50px 0;
    background-image: url("../../assets/images/membershipprogram_sp.jpg");
    background-size: cover;
    &::before {
      content: '';
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, .7);
    }
    &_desc {
      margin-bottom: 30px;
      padding: 0 5%;
    }
    &_btn {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .news {
    margin: 50px 0;
	  padding-top: 120px;
    &_list {
      margin-bottom: 30px;
      padding: 0 5%;
    }
    &_item {
      margin-bottom: 30px;
      position: relative;
      a{
        padding-left: 30px;
      }
    }
    &_block {
      @include flex;
      align-items: center;
      margin-bottom: 5px;
    }
    &_date {
      margin-right: 10px;
      width: 110px;
      font-size: $xSmallFontSize;
      color: $mainColorMid;
    }
    &_category {
      padding: 2px 10px;
      font-size: $xSmallFontSize;
      color: $mainColorMid;
      border: 1px solid $mainColorMid;
    }
    &_title {
      font-size: $mediumFontSize;
      flex: 1;
    }
    .special_item::before,
    .imp_item::before{
      display: block;
      content: '';
      height:20px;
      width: 20px;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top:12px;
      margin-top: -10px;
    }
    .special_item::before{
      background: $accentColor01Dark;
    }
    .imp_item::before{
      background: $mainColorDark;
    }
    .special_item::after,
    .imp_item::after{
      font-size: $smallFontSize;
      display: block;
      content: '!';
      height:14px;
      position: absolute;
      left: 8px;
      top:12px;
      margin-top: -8px;
      color: white;
      line-height: 1;
      text-align: center;
    }

  }
}
// ------------------------------------------------
// ボタン  
// ------------------------------------------------
.malinky-load-more{
  font-size: $mediumFontSize;
  margin-left: auto;
  margin-right: auto;
  @include ff_japanese_thin_gothic_bold;
  a {
    position: relative;
    width: 260px;
    margin: 0 auto 80px;
    display: block;
    padding: 10px 0;
    text-align: center;
    border: 1px solid $mainColorDark;
  }
}
.btn{
  &_base {
    font-size: $mediumFontSize;
    margin-left: auto;
    margin-right: auto;
    @include ff_japanese_thin_gothic_bold;
    a,strong {
      position: relative;
      width: 260px;
      margin: 0 auto 80px;
      display: block;
      padding: 10px 0;
      text-align: center;
      border: 1px solid $mainColorDark;
    }
  }
  &_back {
    a {
      span{
        content:'';
        display: block;
        position: absolute;
        top:50%;
        left: 5%;
        width: 12px;
        height: 12px;
        margin-top: -6px;
        border: 1px solid;
        border-color: $mainColorDark $mainColorDark transparent transparent;
        transform: rotate(-135deg);
      }
    }
  }
  &_prev,
  &_next{
    width: 46%;
    a{
      width: 100%;
    }
  }
  &_prev a span{
    content:'';
    display: block;
    position: absolute;
    top:50%;
    left: 8%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 1px solid;
    border-color: $mainColorDark $mainColorDark transparent transparent;
    transform: rotate(-135deg);
  }
  &_next a span{
    content:'';
    display: block;
    position: absolute;
    top:50%;
    right: 8%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 1px solid;
    border-color: $mainColorDark $mainColorDark transparent transparent;
    transform: rotate(45deg);
  }
  &_block_pagination {
    @include flex;
    justify-content: center;
    align-items: center;
  }
  &_pdf a{
    span{
      content:'';
      display: block;
      position: absolute;
      top:50%;
      left: 5%;
      margin-top: -9px;
      width: 16px;
      height: 18px;
      .ico{
        &_pdf{
         fill:$mainColorDark;
        }
      }
    }
  }
  &_blank a{
    span{
      display: block;
      position: absolute;
      top:50%;
      right: 5%;
      margin-top: -7px;
      width: 14px;
      height: 14px;
      svg{
        width: 14px !important;
        height: 14px !important;
        .ico{
          &_blank{
           fill:$mainColorDark;
          }
        }
      }
    }
  }
  &_search{
    font-size: $mediumFontSize;
    color: white;
    background: $mainColorDark;
    border: 1px solid $mainColorDark;
    position: relative;
    width: 200px;
    margin: 0 auto;
    display: block;
    padding: 10px 0;
    text-align: center;
    transition: $transition_c5s;
    input{
      display: inline;
    }
  }
}

// ------------------------------------------------
//リンク
// ------------------------------------------------
.link{
  @include ff_japanese_thin_gothic_bold;
  &_box{
    border-top: $mainColorLight solid 1px;
    border-bottom: $mainColorLight solid 1px;
    padding: 20px;
    a{
      display: block;
      width: 100%;
      margin-top: 20px;
      &:first-child{
        margin-top: 0;
      }
    }
  }
  &_blank{
    @include textEffect($mainColorDark);
    margin-right: 40px;
    span{
      display: inline-block;
      width:14px;
      height: 14px;
    }
  }
  &_pdf{
    @include textEffect($mainColorDark);
    span{
      display: inline-block;
      width:14px;
      height: 14px;
    }
    i{
      font-style:normal;
      font-size: $xSmallFontSize;
    }
  }
}


@include mq(middle) {
  .topMain {
    padding-left: 4vw;
    .exhibition,
    .selection,
    .events,
    .membershipProgram,
    .news {
      &_heading {
        margin-bottom: 50px;
        font-size: $h1FontSize;
        span {
          font-size: $smallFontSize;
        }
      }
    }
    .pickup {
      margin-top: 11vh;
      &_item {
        padding: 80px 0;
      }
      &_inner {
        @include  flex;
        flex-wrap: nowrap;
        width: 100%;
      }
      &_left {
        width: 50%;
        &_inner {
          max-width: 400px;
          width: 100%;
          > a{
            &:hover{
              opacity: .5;
            }
          }
        }
      }
      &_head {
        margin-bottom: 70px;
      }
      &_subTitle,
      &_title,
      &_desc,
      &_date,
      &_venue,
      &_gate,
      &_countdown {
        text-align: left;
      }
      &_subTitle {
        font-size: $mediumFontSize;
      }
      &_title {
        font-size: 3.6rem;
      }
      &_desc {
        margin-bottom: 50px;
      }
      &_date,
      &_venue {
        font-size: $mediumFontSize;
      }
      &_gate {
        a{
          @include btnEffect($mainColorDark, white);
        }
        /* @include btnEffect($mainColorDark, white); */
      }
      &_block {
        @include flex;
        justify-content: flex-start;
        align-items: center;
      }
      &_right {
        @include flex;
        align-items: center;
        width: 50%;
        a{
          &:hover{
            opacity: .5;
          }
        }
      }
      &_img {
        margin-bottom: 0;
        img {
          width: 100%;
        }
      }
    }
    .exhibition {
      margin: 100px 0;
      &_categoryItem {
        &::after {
          content: '|';
          display: block;
          margin: 0 5px;
        }
      }
      .swiper-container {
        @include maxWidth;
        margin-bottom: 60px;
      }
      .swiper-slide {
        width: 22.75%;
        margin-right: 3%;
        &:last-child {
          margin-right: 0;
        }
        > a{
          &:hover{
            opacity: .5;
          }
        }
      }
      &_img {
        a{
        height: 320px;
          img {
            width: 100%;
            height: 100%;
          }
          &:hover{
            opacity: .5;
          }
        }
      }
      &_btnBlock {
        @include flex;
        justify-content: center;
        align-items: center;
      }
      &_venue {
        margin-bottom: 0;
      }
      &_gate {
        a{
          @include btnEffect($mainColorDark, $mainColorXLight);
        }
      }
      &_btn {
        &:first-child {
          margin-right: 30px;
          margin-bottom: 0;
        }
        a {
          @include btnEffect(white, $mainColorDark);
        }
      }
    }
    .selection {
      position: relative;
      z-index: 0;
      @include flex;
      align-items: center;
      margin: 100px 0 0;
      padding: 0;
      &_left {
        width: 60%;
      }
      &_img {
        margin-bottom: 0;
      }
      &_right {
        width: 40%;
        &_inner {
          max-width: 300px;
          width: 100%;
          margin: 0 auto;
        }
      }
      &_heading {
        text-align: left;
      }
      &_desc {
        padding: 0;
        text-align: left;
      }
      &_btn {
        a {
          @include btnEffect($mainColorDark, white);
          &:link,
          &:visited {
            display: inline-block;
          }
        }
      }
    }
    .events {
      padding: 100px 0;
      .swiper-container {
        @include maxWidth;
        margin-bottom: 60px;
        max-width: 1080px;
      }
      .swiper-slide {

        margin-right: 2%;
        &:last-child {
          margin-right: 0;
        }
        > a{
          &:hover{
            opacity: .5;
          }
        }
      }
      &_img {
        a{
          &:hover{
            opacity: .5;
          }
          img {
          }
        }
      }
      &_gate {
        a{
          @include btnEffect($mainColorDark, $mainColorXLight);
        }
      }
      &_btn {
        a {
          @include btnEffect(white, $mainColorDark);
          z-index: 100;
        }
      }
    }
    .membershipProgram {
      background-image: url("../../assets/images/membershipprogram_pc.jpg");
      padding: 100px 0;
      &_btnBlock {
        @include flex;
        justify-content: center;
        align-items: center;
      }
      &_desc {
        max-width: 370px;
        width: 100%;
        margin: 0 auto 60px;
        padding: 0;
        text-align: center;
      }
      &_btn {
        a {
          @include btnEffect(white, $mainColorDark);
        }
      }
    }
    .news {
      margin: 100px 0;
		 padding-top: 60px;
      &_inner {
        @include flex;
        align-items: center;
      }
      &_heading {
        width: 30%;
      }
      &_list {
        width: 70%;
        margin-bottom: 60px;
        padding: 0;
        padding-right: 4vw;
      }
      &_item {
        a{
          @include flex;
          flex-wrap: nowrap;
          align-items: center;
          &:hover{
            opacity: .5;
          }
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
      &_block {
        margin: 0 20px 0 0;
        width: 260px;
      }
      &_btn {
        a {
          @include btnEffect(white, $mainColorDark);
        }
      }
      .special_item::before,
      .imp_item::before{
        top:50%;
        margin-top: -10px;
      }
      .special_item::after,
      .imp_item::after{
        top:50%;
        margin-top: -8px;
      }

    }
  }
  // ------------------------------------------------
  //リンク
  // ------------------------------------------------
  .link{
    &_box{
      a{
        display: inline-block;
        width: auto;
        margin-top: 0;
      }
    }
    &_blank{
      @include textEffect($mainColorDark);
      margin-right: 40px;
      span{
        display: inline-block;
        width:14px;
        height: 14px;
      }
    }
    &_pdf{
      @include textEffect($mainColorDark);
      span{
        display: inline-block;
        width:14px;
        height: 14px;
      }
      i{
        font-style:normal;
        font-size: $xSmallFontSize;
      }
    }
  }
  .btn{
    &_base {
      a,strong {
        @include btnEffect(white, $mainColorDark);
        z-index: 100;
        cursor: pointer;
      }
    }
    &_prev,
    &_next{
      width: auto;
      a{
        width: 200px;
      }
    }

    &_block {
      @include flex;
      justify-content: center;
      align-items: center;
      .btn_base{
        margin-left: 0;
        margin-right: 0;
        a{
          margin:0 10px 80px;
        }
      }
    }
    &_search{
      @include btnEffect($mainColorDark, $mainColorLight);
      width: 160px;
      margin-top: 40px;
    }

  }
}

/* 初回モーダル */
.modal {
	position:fixed;
	z-index:3000;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background:rgba(0,0,0,0.6);
	display:none;
  @include flex;
  justify-content: center;
  align-items: center;
  &_inner{
    background: #FFF;
    padding: 20px;
    max-width: 1000px;
    width: 90%;
    max-height: 80vh;
    overflow: auto;
    z-index: 0;
    h3{
      margin-bottom: 20px;
      text-align: left;
      font-size:1.7rem;
    }
    p{
      font-size:$smallFontSize;
      strong{
        color:$accentColor01Dark;
      }
    }
    a{
      word-break: break-all;
    }
    .close_modal{
      a {
        display: block;
        width: 250px;
        margin: 20px auto 0;
        padding: 10px 0;
        text-align: center;
        border: 1px solid $mainColorDark;
      }
    }
  }
  &_btn {
    margin-bottom: 20px;
    margin-top: 20px;
    a {
      display: block;
      width: 250px;
      margin: 0 auto;
      padding: 10px 0;
      text-align: center;
      border: 1px solid $mainColorDark;
    }
  }
}

@include mq(middle) {
  .modal {
    &_inner{
      padding: 80px;
      h3{
        text-align: center;
        margin-bottom: 30px;
        font-size: $xLargeFontSize;
      }
      p{
        font-size: $mediumFontSize;
      }
      .close_modal {
      margin-top: 40px;
        a {
          @include btnEffect(white, $mainColorDark);
        }
      }
    }
    &_btn {
      margin-top: 40px;
      a {
        @include btnEffect(white, $mainColorDark);
      }
    }
  }
}

//20210212追加イベントカテゴリ,タグ
.e_cat_list{
	li{
		display: inline-block;
		margin-right: 10px;
		
		margin-bottom: 10px;
		font-size: 1.2rem;
		color: $mainColorMid;
		border: 1px solid #c1c1c1;
		padding:5px 10px;
	}
}
.e_tag_list {
  @include flex;
  justify-content: start;
  margin-top: 10px;

  li {
    margin-right: 10px;

	  font-size: $xSmallFontSize;
	  color: $mainColorMid;

	  &::before {
		position: relative;
		content: '#';
		display: inline-block;
		margin-right: 3px;
	  }
  }

  @include mq(middle) {
    li {
      margin-right: 20px;
    }
  }
}