@charset "UTF-8";
@import url("https://use.typekit.net/aob0oor.css");
html {
  overflow-y: scroll; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

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

fieldset, img {
  border: 0; }

img {
  vertical-align: bottom; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal; }

li {
  list-style: none; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

q:before, q:after {
  content: ''; }

abbr, acronym {
  border: 0;
  font-variant: normal; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit; }

/*to enable resizing for IE*/
input, textarea, select {
  *font-size: 100%; }

/*because legend doesn't inherit in IE */
legend {
  color: #000; }

del, ins {
  text-decoration: none; }

/******************************************************

base

******************************************************/
.information {
  background: #fff;
  padding-bottom: 20rem;
  position: relative;
  z-index: 0; }
  .information .inner {
    display: flex;
    align-items: flex-start;
    max-width: 1100px;
    padding: 6rem 0 4rem; }
    .information .inner .info-text {
      flex: 1;
      box-sizing: border-box;
      padding: 0 6rem 0 5rem; }
      .information .inner .info-text .title {
        text-align: left;
        padding-bottom: 2rem;
        color: #1293b5;
        font-size: 1.8rem;
        line-height: 1.5;
        font-family: "big-caslon-fb", "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-weight: 700;
        font-style: normal; }
      .information .inner .info-text .txt-l {
        font-size: 3rem;
        letter-spacing: 0.2rem;
        line-height: 1.5;
        color: #282828;
        font-family: "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-weight: 300;
        -webkit-font-smoothing: antialiased;
        font-feature-settings: "palt"; }
      .information .inner .info-text .txt-s {
        font-size: 1.7rem;
        line-height: 1.5;
        color: #282828;
        margin-top: 1rem; }
      .information .inner .info-text .info-con {
        font-family: "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-weight: 300;
        -webkit-font-smoothing: antialiased;
        font-feature-settings: "palt";
        color: #222;
        padding: 2rem 0 2.4rem;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        display: block;
        text-decoration: none; }
        .information .inner .info-text .info-con .event-txt {
          font-size: 2.7rem;
          line-height: 1.4;
          font-weight: lighter; }
          .information .inner .info-text .info-con .event-txt b {
            font-weight: lighter;
            font-size: 2.6rem; }
          .information .inner .info-text .info-con .event-txt.new {
            position: relative; }
            .information .inner .info-text .info-con .event-txt.new:before {
              content: "NEW";
              position: absolute;
              left: 0;
              top: 1.5rem;
              transform: translateX(-130%);
              color: #fff;
              background: #a24049;
              font-size: 1.1rem;
              padding: 0.3rem 0.5rem;
              line-height: 1.2;
              border-radius: 0.3rem;
              display: inline-block;
              vertical-align: middle;
              margin-top: -0.5rem; }
              @media screen and (max-width: 768px) {
                .information .inner .info-text .info-con .event-txt.new:before {
                  position: relative;
                  left: inherit;
                  top: inherit;
                  transform: translateX(0%);
                  margin-right: 1rem; } }
        .information .inner .info-text .info-con .text01 {
          margin-top: 0.8rem;
          font-size: 1.5rem;
          line-height: 1.5; }
        .information .inner .info-text .info-con .info-btn {
          display: block;
          max-width: 14rem;
          background: #3fa0b9;
          width: 100%;
          height: 2rem;
          position: relative;
          margin-top: 0.7rem;
          padding: 0 1rem;
          transition: opacity 0.5s;
          border-radius: 0.3rem; }
          .information .inner .info-text .info-con .info-btn .txt {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 1.2rem;
            line-height: 1;
            transform: translateX(-50%) translateY(-50%);
            color: #fff;
            white-space: nowrap; }
          .information .inner .info-text .info-con .info-btn:hover {
            opacity: 0.5; }
          @media screen and (max-width: 768px) {
            .information .inner .info-text .info-con .info-btn {
              margin: auto;
              margin-top: 1rem; } }
    .information .inner .conver-btn {
      width: 36rem; }
      .information .inner .conver-btn .event {
        margin-top: 2rem; }
    @media screen and (max-width: 900px) {
      .information .inner .conver-btn {
        width: 28rem; } }
    @media screen and (max-width: 700px) {
      .information .inner {
        display: block; }
        .information .inner .info-text {
          flex: auto;
          padding: 0 0rem 0 0rem;
          text-align: center; }
          .information .inner .info-text .title {
            text-align: center; }
        .information .inner .conver-btn {
          width: 100%;
          max-width: 40rem;
          margin: auto;
          margin-top: 4rem; } }

.concept-area {
  position: relative;
  z-index: 1;
  margin-top: -18rem; }
  .concept-area > .note {
    position: absolute;
    font-family: "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt";
    z-index: 3;
    bottom: 9rem;
    left: 1rem;
    color: #fff;
    text-shadow: 0 0 0.5rem #000, 0 0 0.5rem #000; }
    @media screen and (max-width: 700px) {
      .concept-area > .note {
        bottom: 50%; } }
  .concept-area:before {
    content: "";
    position: absolute;
    background: url("../images/top/concept-photo.jpg") top center no-repeat;
    background-size: cover;
    left: -10%;
    top: 0;
    right: -10%;
    bottom: 8rem;
    z-index: 2;
    border-top-left-radius: 1000px 200px;
    border-top-right-radius: 1000px 200px; }
  .concept-area .con-inner {
    position: relative;
    z-index: 3;
    padding: 1rem 0; }
  .concept-area .concept-txt {
    text-align: center;
    margin: auto;
    margin-top: 20%;
    width: 80%; }
    .concept-area .concept-txt img {
      max-width: 82rem;
      width: 100%;
      height: auto; }
  .concept-area .con-en {
    text-align: center;
    position: relative;
    color: #fff;
    text-shadow: 0 0 2rem rgba(0, 0, 0, 0.7);
    font-family: "big-caslon-fb", "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 700;
    font-style: normal;
    font-size: 4.6rem;
    /**margin-top: 60%;**/
    margin-top: 50%;
    margin-bottom: 8%;
    padding-bottom: 3rem;
    overflow: hidden;
    /**&:after{
    	position: absolute;
    	content: "";
    	width: 30rem;
    	height: 2px;
    	background: #fff;
    	bottom: 0;
    	left: 50%;
    	transform: translateX(-50%);
    	transition: 1.5s cubic-bezier(0.2, 0.7, 0.6, 1) 0s width;
    }**/ }
    .concept-area .con-en .txt {
      display: inline-block;
      letter-spacing: -0.75em;
      transition: 1.5s cubic-bezier(0.2, 0.7, 0.6, 1) 0s letter-spacing; }
    .concept-area .con-en.aos-animate .txt {
      letter-spacing: 0.05em; }
    .concept-area .con-en.aos-animate:after {
      width: 4rem; }
  @media screen and (max-width: 700px) {
    .concept-area .con-en {
      font-size: 3.8rem; }
    .concept-area:before {
      bottom: 30%; } }

.main-contents {
  background: #ddd; }

.contents-bana {
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 12rem; }
  .contents-bana:after {
    background: #fff;
    content: "";
    position: absolute;
    z-index: 1;
    top: -8rem;
    left: 0;
    right: 0;
    bottom: 8rem;
    display: none; }
  .contents-bana .photo {
    width: 55%;
    order: 1;
    position: relative;
    z-index: 3; }
  .contents-bana .copy {
    order: 2;
    width: 45%;
    box-sizing: border-box;
    position: relative;
    z-index: 4;
    padding: 0 5%; }
    .contents-bana .copy .copy-inner {
      padding-bottom: 12rem;
      margin: auto;
      max-width: 45rem;
      text-align: left; }
      .contents-bana .copy .copy-inner .ttl-kana {
        font-size: 1.5rem;
        line-height: 1.5; }
      .contents-bana .copy .copy-inner .ttl-en {
        font-family: "big-caslon-fb", "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-weight: 700;
        font-style: normal;
        font-size: 5rem;
        line-height: 1;
        color: #007b9f;
        margin-top: 2rem; }
      .contents-bana .copy .copy-inner .con-midashi {
        font-size: 2.5rem;
        line-height: 1.5;
        letter-spacing: 0.6rem;
        margin-top: 3rem; }
      .contents-bana .copy .copy-inner .bana-btn {
        width: 100%;
        max-width: 30rem;
        margin-top: 4rem; }
        .contents-bana .copy .copy-inner .bana-btn a {
          width: 100%;
          height: 5rem;
          background: linear-gradient(to right, #3384c3, #61a8b7); }
          .contents-bana .copy .copy-inner .bana-btn a .txt {
            left: 10%;
            transform: translateX(0) translateY(-50%);
            font-size: 1.6rem;
            font-family: "big-caslon-fb", "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
            font-weight: 700;
            font-style: normal; }
  @media screen and (max-width: 960px) {
    .contents-bana {
      padding-top: 8rem; }
      .contents-bana .copy .copy-inner {
        padding-bottom: 12rem;
        margin: auto;
        max-width: 45rem;
        text-align: left; }
        .contents-bana .copy .copy-inner .ttl-kana {
          font-size: 1.6vw; }
        .contents-bana .copy .copy-inner .ttl-en {
          font-size: 5vw;
          margin-top: 1.5vw; }
        .contents-bana .copy .copy-inner .con-midashi {
          font-size: 2.1vw;
          letter-spacing: 0.6vw;
          margin-top: 3vw; }
        .contents-bana .copy .copy-inner .bana-btn {
          margin-top: 3vw; } }
  @media screen and (max-width: 700px) {
    .contents-bana {
      display: block;
      padding-top: 2rem; }
      .contents-bana:after {
        display: none; }
      .contents-bana .photo {
        width: 100%; }
      .contents-bana .copy {
        width: 100%; }
        .contents-bana .copy .copy-inner {
          padding-top: 3rem;
          padding-bottom: 5rem;
          width: 88%;
          max-width: none; }
          .contents-bana .copy .copy-inner .ttl-kana {
            font-size: 3vw; }
          .contents-bana .copy .copy-inner .ttl-en {
            font-size: 8vw;
            margin-top: 3vw; }
          .contents-bana .copy .copy-inner .con-midashi {
            font-size: 4.8vw;
            letter-spacing: 1vw;
            margin-top: 3.8vw; }
          .contents-bana .copy .copy-inner .bana-btn {
            margin-top: 4vw; } }

.contents-bana.white:after {
  display: block; }
.contents-bana.white .photo {
  order: 2; }
.contents-bana.white .copy {
  order: 1; }
@media screen and (max-width: 700px) {
  .contents-bana.white:after {
    display: none; } }

.concept-area .contents-bana .photo {
  order: 2; }
.concept-area .contents-bana .copy {
  order: 1; }
  .concept-area .contents-bana .copy .copy-inner .ttl-kana {
    color: #fff; }
  .concept-area .contents-bana .copy .copy-inner .ttl-en {
    color: #fff; }
  .concept-area .contents-bana .copy .copy-inner .con-midashi {
    color: #fff; }
  .concept-area .contents-bana .copy .copy-inner .bana-btn a {
    background: #fff;
    transition: 0.5s background; }
    .concept-area .contents-bana .copy .copy-inner .bana-btn a .txt {
      color: #3384c3; }
    .concept-area .contents-bana .copy .copy-inner .bana-btn a:before, .concept-area .contents-bana .copy .copy-inner .bana-btn a:after {
      background: #3384c3; }
    .concept-area .contents-bana .copy .copy-inner .bana-btn a:hover {
      background: #dbf3fa;
      filter: brightness(1); }
@media screen and (max-width: 700px) {
  .concept-area .contents-bana .copy .copy-inner .ttl-kana {
    color: #000; }
  .concept-area .contents-bana .copy .copy-inner .ttl-en {
    color: #007b9f; }
  .concept-area .contents-bana .copy .copy-inner .con-midashi {
    color: #000; }
  .concept-area .contents-bana .copy .copy-inner .bana-btn a {
    background: -webkit-linear-gradient(left, #3384c3, #61a8b7);
    background: -o-linear-gradient(left, #3384c3, #61a8b7);
    background: linear-gradient(to right, #3384c3, #61a8b7);
    transition: 0.5s all; }
    .concept-area .contents-bana .copy .copy-inner .bana-btn a .txt {
      color: #fff; }
    .concept-area .contents-bana .copy .copy-inner .bana-btn a:before, .concept-area .contents-bana .copy .copy-inner .bana-btn a:after {
      background: #fff; }
    .concept-area .contents-bana .copy .copy-inner .bana-btn a:hover {
      background: -webkit-linear-gradient(left, #3384c3, #61a8b7);
      background: -o-linear-gradient(left, #3384c3, #61a8b7);
      background: linear-gradient(to right, #3384c3, #61a8b7);
      filter: brightness(1.4); } }

.contents-bana {
  z-index: 2; }
  .contents-bana.white {
    z-index: 1; }
  .contents-bana .ttl-kana {
    translate: 0% 4rem;
    opacity: 0;
    transition: 0.5s ease 0s translate, 0.2s ease 0s opacity; }
  .contents-bana .con-midashi {
    translate: 0% 2rem;
    opacity: 0;
    transition: 0.5s ease 0s translate, 0.2s ease 0s opacity; }
  .contents-bana .copy-effect {
    display: flex;
    justify-content: flex-start; }
    .contents-bana .copy-effect li {
      display: inline-block;
      opacity: 0;
      scale: 1 3;
      margin-right: 0.05em;
      transition: 0.2s cubic-bezier(0.15, 0.63, 0.25, 1) 0s scale, 0.2s ease 0s opacity; }
  .contents-bana .photo .img {
    overflow: hidden;
    opacity: 0;
    transition: 0.5s cubic-bezier(0.15, 0.63, 0.25, 1) 0s opacity; }
    .contents-bana .photo .img::before, .contents-bana .photo .img::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transition: 0s cubic-bezier(0.15, 0.63, 0.25, 1) 0.5s translate; }
    .contents-bana .photo .img::before {
      z-index: 1;
      backdrop-filter: blur(10px);
      background-color: rgba(255, 255, 255, 0.2); }
    .contents-bana .photo .img::after {
      opacity: 0.5;
      mix-blend-mode: color-dodge;
      z-index: 2;
      background-color: rgba(255, 255, 255, 0.5); }
  .contents-bana.aos-animate .ttl-kana {
    opacity: 1;
    translate: 0% 0rem;
    transition-duration: 1s;
    transition-delay: 0s; }
  .contents-bana.aos-animate .con-midashi {
    opacity: 1;
    translate: 0% 0rem;
    transition-duration: 1s;
    transition-delay: 1s; }
  .contents-bana.aos-animate .copy-effect li {
    opacity: 1;
    scale: 1 1;
    transition-duration: 1s;
    transition-delay: 0s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(1) {
      transition-delay: 0.1s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(2) {
      transition-delay: 0.2s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(3) {
      transition-delay: 0.3s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(4) {
      transition-delay: 0.4s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(5) {
      transition-delay: 0.5s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(6) {
      transition-delay: 0.6s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(7) {
      transition-delay: 0.7s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(8) {
      transition-delay: 0.8s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(9) {
      transition-delay: 0.9s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(10) {
      transition-delay: 1s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(11) {
      transition-delay: 1.1s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(12) {
      transition-delay: 1.2s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(13) {
      transition-delay: 1.3s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(14) {
      transition-delay: 1.4s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(15) {
      transition-delay: 1.5s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(16) {
      transition-delay: 1.6s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(17) {
      transition-delay: 1.7s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(18) {
      transition-delay: 1.8s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(19) {
      transition-delay: 1.9s; }
    .contents-bana.aos-animate .copy-effect li:nth-child(20) {
      transition-delay: 2s; }
  .contents-bana.aos-animate .photo .img {
    opacity: 1;
    transition-delay: 0s; }
    .contents-bana.aos-animate .photo .img::before, .contents-bana.aos-animate .photo .img::after {
      translate: 100% 0%;
      transition-duration: 1s; }
    .contents-bana.aos-animate .photo .img::before {
      transition-duration: 1.5s;
      transition-delay: 0.5s; }
    .contents-bana.aos-animate .photo .img::after {
      transition-delay: 0.3s; }