@charset "UTF-8";
.id-bann {
  background: #E96466;
  padding: 3vw 6vw; }
  .id-bann ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1.5%; }
  .id-bann li {
    width: 30.333%;
    margin: 0 1.5%;
    color: #fff;
    background: rgba(0, 0, 0, 0);
    /*border:1px solid #E96466;border-width:1px 1px 0 0;*/
    border: 1px solid #fff;
    border-width: 1px 0;
    font-weight: bold;
    margin-bottom: -1px; }
  .id-bann a {
    display: block;
    padding: 1rem 1rem;
    position: relative;
    padding-right: 3rem; }
    .id-bann a::after {
      content: 'Ｌ';
      font-family: 'Icons';
      font-weight: normal;
      position: absolute;
      right: 1rem;
      top: 1rem; }
  @media screen and (max-width: 1800px) {
    .id-bann li {
      width: 47%; } }
  @media screen and (max-width: 1280px) {
    .id-bann li {
      width: 100%;
      font-size: 0.9rem; } }
  @media screen and (max-width: 960px) {
    .id-bann {
      padding: 6vw; }
      .id-bann a {
        padding: 1rem 0.1rem;
        padding-right: 1.25rem; }
        .id-bann a::after {
          right: 0.1rem; } }

/*
.id-hero {background-image:url(../img/_sample.jpg);height:100vh;background-size:cover;background-repeat:no-repeat;
    @media screen and (max-width: $BP2 - 1px) {
        height:calc(100vh - 75px);
    }
}
*/
.id-hero img {
  width: 100%; }
@media screen and (min-width: 560px), print {
  .id-hero .-pc {
    display: block !important; }
  .id-hero .-sp {
    display: none !important; } }
@media screen and (max-width: 560px) {
  .id-hero .-sp {
    display: block !important; }
  .id-hero .-pc {
    display: none !important; } }

.id-hero-a img {
  width: 100%; }
@media screen and (min-width: 560px), print {
  .id-hero-a .-pc {
    display: block !important; }
  .id-hero-a .-sp {
    display: none !important; } }
@media screen and (max-width: 560px) {
  .id-hero-a .-sp {
    display: block !important; }
  .id-hero-a .-pc {
    display: none !important; } }

.id-hero-b {
  background: #005D91; }
  .id-hero-b video {
    width: 100%;
    vertical-align: bottom; }

.id-hero-c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #003E74; }
  .id-hero-c .-img {
    width: 30%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0 2vw; }
  .id-hero-c .-mov {
    width: 70%; }
  .id-hero-c video {
    width: 100%;
    vertical-align: bottom; }
  @media screen and (max-width: 960px) {
    .id-hero-c {
      flex-flow: column-reverse; }
      .id-hero-c .-img {
        width: 100%;
        padding: 1rem 6vw; }
        .id-hero-c .-img img {
          width: 450px; }
      .id-hero-c .-mov {
        width: 100%; } }

#Id {
  text-align: left;
  overflow-x: hidden;
  padding-bottom: 6vw; }
  #Id img {
    max-width: 100%; }
  @media screen and (min-width: 960px), print {
    #Id {
      margin-left: 240px; } }

/*
.id-sub {background:$ColorCpL;padding:$WU $WU;
    ul {margin-left:30%;}
    li {color:$ColorCp;font-weight: bold;font-size:0.9rem;margin:0.5rem 0;
        a {display: block;padding:1rem;background:#fff;position:relative;padding-right:2.5rem;
            &::after {content:'Ｌ';font-family:'Icons';font-weight:normal;position:absolute;right:1rem;top:1rem;}
        }
        figure {display: none;}
    }
    @media screen and (min-width: $BP2),print {display: none;
        
    }
}
*/
.id-sub {
  background: #38A0DB;
  padding: 1.5rem 6vw; }
  .id-sub ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -0.5%; }
  .id-sub li.-emphasis {
    color: #fff;
    background: #003E74; }
  .id-sub li {
    color: #005D91;
    font-weight: bold;
    font-size: 0.9rem;
    width: 49%;
    margin: 0.5%;
    background: #fff; }
    .id-sub li a {
      display: block;
      padding: 1rem;
      position: relative;
      padding-right: 2.5rem; }
      .id-sub li a::after {
        content: 'Ｌ';
        font-family: 'Icons';
        font-weight: normal;
        position: absolute;
        right: 1rem;
        top: 1rem; }
    .id-sub li figure {
      display: none; }
  @media screen and (min-width: 960px), print {
    .id-sub {
      display: none; } }
  @media screen and (max-width: 559px) {
    .id-sub li {
      margin: 0 0 1px 1px;
      font-size: 0.8rem;
      text-align: center; }
      .id-sub li a {
        padding: 0.75rem; }
        .id-sub li a::after {
          display: none; } }

.id-hl,
.id-news,
.id-evnt,
.id-topi,
.id-facu,
.id-open,
.id-pick {
  padding: 0 6vw; }

.id-more {
  text-align: center; }
  .id-more a {
    display: block;
    width: 60px;
    line-height: 60px;
    background: #005D91;
    color: #fff;
    border-radius: 50%;
    font-size: 0.9rem; }
  @media screen and (max-width: 559px) {
    .id-more a {
      width: 50px;
      line-height: 50px;
      font-size: 0.8rem; } }

.id-hl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 7rem 0 2rem;
  justify-content: space-between; }
  .id-hl h2 {
    font-size: 2.8rem; }
  @media screen and (max-width: 559px) {
    .id-hl {
      margin: 3.5rem 0 2rem; }
      .id-hl h2 {
        font-size: 1.9rem; } }

.id-news {
  background: #005D91;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;
  flex-flow: nowrap; }
  .id-news > p {
    background: #fff;
    padding: 2rem 3.5vw;
    margin-left: -3.5vw;
    margin-right: 3.5vw;
    border-radius: 45px;
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: bold;
    color: #005D91;
    white-space: nowrap; }
  .id-news ul {
    margin-right: 3.5vw; }
  .id-news li {
    position: relative;
    color: #fff; }
    .id-news li a {
      padding: 0.5rem 0;
      display: block; }
    .id-news li time, .id-news li p {
      line-height: 1.25rem; }
    .id-news li time {
      position: absolute;
      font-family: 'Roboto', sans-serif;
      font-size: 0.8rem;
      width: 6rem; }
    .id-news li p {
      padding-left: 6rem;
      font-weight: bold; }
  .id-news .id-more {
    margin-left: auto; }
    .id-news .id-more a {
      background: #fff;
      color: #005D91; }
  @media screen and (max-width: 1280px) {
    .id-news > p {
      font-size: 1rem; }
    .id-news li p {
      padding: 0px;
      padding-top: 1.5rem; } }
  @media screen and (max-width: 959px) {
    .id-news {
      display: block;
      padding: 6vw;
      position: relative; }
      .id-news > p {
        font-size: 1rem;
        padding: 1rem 3.5vw;
        margin-left: -14vw;
        padding-left: 14vw;
        max-width: 270px;
        height: 50px;
        margin-bottom: 1rem; }
      .id-news .id-more {
        position: absolute;
        right: 6vw;
        top: 6vw; } }

.id-evnt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -1.5%; }
  .id-evnt > div {
    width: 30.333%;
    margin: 0 1.5%; }
    .id-evnt > div figure {
      position: relative;
      overflow: hidden;
      width: 100%;
      background: #f8f8f8; }
      .id-evnt > div figure::before {
        content: "";
        display: block;
        padding-top: 61.8%;
        /* 高さを幅の75%に固定 */ }
      .id-evnt > div figure img {
        width: auto !important;
        height: auto !important;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        object-fit: cover;
        /*min-width:100%;min-height:100%;*/
        width: 100% !important; }
      .id-evnt > div figure img.-tall {
        width: auto !important;
        height: 100% !important; }
    .id-evnt > div p {
      margin: 1rem 0;
      line-height: 1.5;
      font-weight: bold; }
    .id-evnt > div time {
      font-family: 'Roboto', sans-serif;
      font-size: 0.85rem;
      color: #808080; }
  @media screen and (max-width: 959px) {
    .id-evnt {
      overflow-x: scroll;
      flex-wrap: nowrap;
      margin: 0px; }
      .id-evnt > div {
        min-width: 300px;
        width: 300px;
        margin: 0 1.5rem 0 0; } }

.id-topi__tab {
  margin-bottom: 1rem;
  margin-top: -1rem; }
  .id-topi__tab ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -0.5rem; }
  .id-topi__tab li {
    border: 1px solid #eee;
    font-weight: bold;
    margin: 0.5rem; }
    .id-topi__tab li a {
      display: block;
      padding: 1rem; }
  @media screen and (max-width: 559px) {
    .id-topi__tab li {
      margin: 0.25rem;
      font-size: 0.9rem; }
      .id-topi__tab li a {
        padding: 0.5rem; } }

/*
.id-topi__list {
    ul {border-top:1px solid #999;}
    li {border-bottom:1px solid #999;position:relative;
        a {padding:1.5rem 0;display: block;}
        time,b,p {line-height:1.5rem;}
        time {position:absolute;left:0px;top:1.5rem;font-family: 'Roboto', sans-serif;font-size:0.85rem;color:#808080;}
        b {position:absolute;left:4.5rem;top:1.25rem;border:1px solid #ddd;border-radius:30px;font-size:0.6rem;padding:0.25rem;text-align: center;width:5rem;margin:0 1rem;}
        p {padding-left:12rem;}
    }
    @media screen and (max-width: $BP - 1px) {
        li {
            time {}
            b {padding:0.15rem;}
            p {padding:0;padding-top:2.5rem;font-size:0.95rem;}
        }
    
    }
}

.id-topi__list {
    ul {border-top:1px solid #999;}
    li {border-bottom:1px solid #999;
        a {padding:1.5rem 0;display: block;}
        time,b,p,span {line-height:1.5rem;display: inline-block;margin-right:1rem;vertical-align: middle;}
        time {font-family: 'Roboto', sans-serif;font-size:1rem;color:#808080;}
        b {border:1px solid #ddd;border-radius:30px;font-size:0.8rem;text-align: center;width:6rem;}
        p {display: block;padding-top:0.5rem;margin:0px;
            .new::before {content:'NEW';color:#FA0F00;font-family: 'Roboto', sans-serif;margin-left:0.5rem;}
        }
        .-tag {font-weight: bold;font-size:0.95rem;
            &::before {content:'#';}
        }
    }
    @media screen and (max-width: $BP - 1px) {
        li {
            time {font-size:0.85rem;}
            b {font-size:0.75rem;}
            p {font-size:0.95rem;}
            .-tag {display: block;margin-top:0.5rem;}
        }
    }
}
*/
.id-topi__list ul {
  border-top: 1px solid #999; }
.id-topi__list li {
  border-bottom: 1px solid #999;
  position: relative; }
  .id-topi__list li a {
    padding: 1.5rem 0;
    display: block; }
  .id-topi__list li time, .id-topi__list li b, .id-topi__list li p, .id-topi__list li span {
    line-height: 1.5rem;
    display: inline-block;
    margin-right: 1rem;
    vertical-align: middle; }
  .id-topi__list li b {
    position: absolute;
    left: 0px;
    top: 1.5rem; }
    .id-topi__list li b.-topi {
      color: #F48300; }
    .id-topi__list li b.-info {
      color: #38A0DB; }
  .id-topi__list li time {
    padding-left: 6.5rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem; }
  .id-topi__list li p {
    display: block;
    padding-top: 0.5rem;
    margin: 0px; }
    .id-topi__list li p .new::before {
      content: 'NEW';
      color: #FA0F00;
      font-family: 'Roboto', sans-serif;
      margin-left: 0.5rem; }
  .id-topi__list li .-tag {
    border: 1px solid #ccc;
    border-radius: 30px;
    font-size: 0.9rem;
    text-align: center;
    padding: 0 1rem;
    font-weight: bold; }
@media screen and (max-width: 559px) {
  .id-topi__list li b {
    top: 1rem; }
  .id-topi__list li time, .id-topi__list li .-tag {
    margin-top: 1.5rem; }
  .id-topi__list li time {
    padding: 0px;
    font-size: 0.9rem; }
  .id-topi__list li p {
    font-size: 0.9rem; }
  .id-topi__list li .-tag {
    font-size: 0.75rem; } }

.id-facu {
  background-color: #005D91;
  background-image: url("../img/common/bg_wave.png");
  background-size: 100%;
  background-position: top center;
  padding-bottom: 0.001rem; }
  .id-facu > div {
    margin: 60px 0 120px; }
    .id-facu > div figure {
      position: relative;
      overflow: hidden;
      margin-left: -6vw; }
      .id-facu > div figure::before {
        content: "";
        display: block;
        padding-top: 33.333%;
        /* 高さを幅の75%に固定 */ }
      .id-facu > div figure img {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        object-fit: cover;
        min-width: 100%;
        min-height: 100%; }
    .id-facu > div h3 {
      background: #38A0DB;
      color: #fff;
      font-size: 2rem;
      font-weight: bold;
      display: inline-block;
      padding: 2rem;
      margin-top: -3rem;
      position: relative;
      line-height: 1.25; }
    .id-facu > div p {
      color: #fff;
      margin: 2rem 0;
      font-size: 1.1rem;
      line-height: 2; }
    .id-facu > div ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
    .id-facu > div li {
      width: 33.333%;
      color: #005D91;
      font-size: 1.05rem;
      line-height: 1.25;
      background: #fff;
      position: relative; }
      .id-facu > div li a {
        display: block;
        width: 100%;
        height: 100%;
        padding: 1.5rem 3rem 1.5rem 2rem;
        font-weight: bold;
        border: 1px solid #005D91;
        border-width: 0 1px 1px 0; }
        .id-facu > div li a::after {
          content: 'Ｌ';
          font-family: 'Icons';
          font-weight: normal;
          position: absolute;
          right: 2rem;
          top: 1.5rem; }
  .id-facu > div:nth-child(2n) {
    text-align: right; }
    .id-facu > div:nth-child(2n) figure {
      margin-left: 0;
      margin-right: -6vw; }
    .id-facu > div:nth-child(2n) h3 {
      margin-left: auto; }
    .id-facu > div:nth-child(2n) p, .id-facu > div:nth-child(2n) li {
      text-align: left; }
  @media screen and (max-width: 959px) {
    .id-facu {
      background-size: 125%; }
      .id-facu > div li {
        width: 100%;
        font-size: 1rem; }
        .id-facu > div li a {
          padding: 1.5rem 3rem 1.5rem 1.5rem; }
          .id-facu > div li a::after {
            top: 1.5rem; } }
  @media screen and (max-width: 559px) {
    .id-facu {
      background-size: 150%; }
      .id-facu > div h3 {
        font-size: 1.25rem;
        padding: 1.5rem 6vw;
        margin-left: -6vw;
        margin-right: -6vw; }
      .id-facu > div p {
        font-size: 0.95rem; } }

.id-open {
  background: #f8f8f8;
  padding-bottom: 90px; }
  .id-open > figure {
    position: relative;
    overflow: hidden;
    margin-left: -6vw;
    margin-right: -6vw; }
    .id-open > figure::before {
      content: "";
      display: block;
      padding-top: 33.333%;
      /* 高さを幅の75%に固定 */ }
    .id-open > figure img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      object-fit: cover;
      min-width: 100%;
      min-height: 100%; }
  .id-open > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 60px 0; }
    .id-open > div h3 {
      font-family: 'Roboto', 'Zen Kaku Gothic Antique', sans-serif;
      font-size: 2.5rem; }
  .id-open > p {
    font-size: 1.05rem;
    line-height: 2; }
  @media screen and (max-width: 959px) {
    .id-open > div {
      margin: 45px 0; }
      .id-open > div h3 {
        font-size: 2rem; }
    .id-open > p {
      font-size: 1rem; } }
  @media screen and (max-width: 559px) {
    .id-open {
      padding-bottom: 45px; }
      .id-open > figure::before {
        padding-top: 61.8%; }
      .id-open > div {
        margin: 30px 0; }
        .id-open > div h3 {
          font-size: 1.5rem; }
      .id-open > p {
        font-size: 0.95rem; } }

.id-pick__list {
  margin: 2rem 0 4rem; }
  .id-pick__list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -1.5%; }
  .id-pick__list li {
    width: 30.333%;
    margin: 0 1.5%;
    border: 1px solid #ddd;
    border-width: 1px 0;
    margin-bottom: -1px; }
    .id-pick__list li a {
      display: block;
      padding: 1.5rem 2rem 1.5rem 1rem;
      position: relative;
      font-weight: bold; }
      .id-pick__list li a::after {
        content: 'Ｌ';
        font-family: 'Icons';
        font-weight: normal;
        position: absolute;
        right: 1rem;
        top: 1.5rem; }
  @media screen and (max-width: 959px) {
    .id-pick__list li {
      width: 100%; } }
  @media screen and (max-width: 559px) {
    .id-pick__list {
      margin-left: -6vw;
      margin-right: -6vw; }
      .id-pick__list li {
        font-size: 0.9rem; }
        .id-pick__list li a {
          padding-left: 6vw; } }

.id-pick__thumb {
  margin: 2rem 0 4rem; }
  .id-pick__thumb ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .id-pick__thumb li {
    width: 33.333%;
    margin-bottom: 2rem; }
    .id-pick__thumb li a {
      display: block; }
    .id-pick__thumb li figure {
      position: relative;
      overflow: hidden; }
      .id-pick__thumb li figure::before {
        content: "";
        display: block;
        padding-top: 50%;
        /* 高さを幅の75%に固定 */ }
      .id-pick__thumb li figure img {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        object-fit: cover;
        min-width: 100%;
        min-height: 100%; }
    .id-pick__thumb li p {
      display: block;
      padding: 1.5rem 3rem 1.5rem 1rem;
      position: relative;
      font-weight: bold; }
      .id-pick__thumb li p::after {
        content: 'Ｌ';
        font-family: 'Icons';
        font-weight: normal;
        position: absolute;
        right: 2rem;
        top: 1.5rem; }
  @media screen and (max-width: 959px) {
    .id-pick__thumb li {
      width: 50%; } }
  @media screen and (max-width: 559px) {
    .id-pick__thumb {
      margin-left: -6vw;
      margin-right: -6vw; }
      .id-pick__thumb li {
        margin-bottom: 1rem; }
        .id-pick__thumb li figure::before {
          padding-top: 75%; }
        .id-pick__thumb li p {
          font-size: 0.8rem;
          padding: 1rem 2rem 1rem 0.5rem; }
          .id-pick__thumb li p::after {
            right: 1rem;
            top: 1rem; } }

.tab-content {
  display: none; }
  .tab-content.appear {
    display: block; }

.id-topi__tab ul li a.current {
  color: #fff;
  background-color: #005D91; }