/*! Writen  by SCSS */
.sec_main {
  position: relative;
  overflow: hidden;
  background: #b5d7e6;
  height: calc(80vh - 110px);
  min-height: 600px;}
  .sec_main .cap{
    position: absolute;
    bottom: 10px;
    color: #fff;
    right: 10px;
    font-size: 12px;
    z-index: 1;
  }
  .swiper-pagination-bullet{
    background: #ffffff;
  }
  .swiper-pagination-bullet-active{
    background: #ffffff;
  }
  @media screen and (max-width: 480px) {
    .sec_main {
      min-height: unset;}
      .sec_main .cap {
        position: absolute;
        bottom: 4px;
        color: #fff;
        right: 4px;
        font-size: 10px;
    }}
  .sec_main .main_sky_box {
    position: absolute;
    inset: 0; }
    .sec_main .twentytwenty-container img {
      height: calc(80vh - 110px);
      object-fit: cover;
    }
    .sec_main .swiper-slide img {
      height: calc(80vh - 110px);
      object-fit: cover;
    }
    .sec_main .main_sky_box .main_sky_image {
      position: absolute;
      inset: 0;
      background: url("../images/top/main_sky.jpg") center/cover no-repeat;
      opacity: 0;
      filter: brightness(2) blur(30px);
      overflow: hidden;
      transition: opacity 2s ease-in-out,filter 2s ease-in-out; }
      @media screen and (max-width: 480px) {
        .sec_main .main_sky_box .main_sky_image {
          background: url("../images/top/main_sky_sp.jpg") center/cover no-repeat; } }
      .s1 .sec_main .main_sky_box .main_sky_image {
        opacity: 1;
        filter: brightness(1) blur(0); }
      .sec_main .main_sky_box .main_sky_image .line {
        position: absolute;
        inset: 0;
        mix-blend-mode: screen;
        width: 100%;
        opacity: 0;
        transform: translateY(100%) rotate(0.001deg);
        transition: transform 1.5s;
        overflow: hidden; }
        .sec_main .main_sky_box .main_sky_image .line .line_in {
          transform: translateY(-100%) rotate(0.001deg);
          overflow: hidden;
          transition: transform 1.5s }
          .sec_main .main_sky_box .main_sky_image .line .line_in img {
            width: 100%; }
        .s1 .sec_main .main_sky_box .main_sky_image .line {
          transform: translateY(0);
          opacity: 1;
          animation: grow 6s ease-in-out infinite; }
          .s1 .sec_main .main_sky_box .main_sky_image .line .line_in {
            transform: translateY(0); }
      .sec_main .main_sky_box .main_sky_image .plot {
        position: absolute;
        inset: 0;
        z-index: 1; }
        .sec_main .main_sky_box .main_sky_image .plot img {
          width: 100%; }
  .sec_main .main_outer_box {}
    .sec_main .main_outer_box .main_head {
      opacity: 0.8;
      position: absolute;
      text-align: center;
      top: 3.2%;
      right: 0;
      left: 0;
      color: #fff;
      z-index: 2;
      font-size: 7.5vw;
      line-height: 1;
      overflow: hidden;}
      @media screen and (max-width: 480px) {
        .sec_main .main_outer_box .main_head {
          line-height: 0.8;
          top: 5px;
          right: 5px;
          text-align: right;
          font-size: 13.04vw;
          text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6), 0px 0px 1px rgba(0, 0, 0, 0.6), 0px 0px 2px rgba(0, 0, 0, 0.6), 0px 0px 3px rgba(0, 0, 0, 0.6), 0px 0px 4px rgba(0, 0, 0, 0.6), 0px 0px 5px rgba(0, 0, 0, 0.6); } }
      .sec_main .main_outer_box .main_head .text_in {
        display: block;
        transition-property: transform;
        transition-duration: 1.2s;
        transition-timing-function: ease-in-out;
        overflow: hidden;
        transition-delay: 0s;}
      .s2 .sec_main .main_outer_box .main_head {
        transform: translateX(0); }
        .s2 .sec_main .main_outer_box .main_head > .text_in {
          transform: translateX(0); }
      .sec_main .main_outer_box .main_head .mincho {
        display: inline-block;
        font-size: 0.8em; }
    .sec_main .main_outer_box .main_lead {
      position: absolute;
      width: 47.5%;
      z-index: 1;
      line-height: 0;
      top: 28%;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      transition-property: transform,opacity;
      transition-duration: 0s;
      transition-timing-function: ease-in-out;
      transition-delay: 2.4s; }
      @media screen and (max-width: 480px) {
        .sec_main .main_outer_box .main_lead {
          text-align: center;
          width: 100%;
          left: 0;
          right: 0;
          top: auto;
          bottom: 6.4%;
          transform: translateY(20px); } }
      .s2 .sec_main .main_outer_box .main_lead {
        opacity: 1;
        transform: translateY(0px); }
      .sec_main .main_outer_box .main_lead img {
        width: 100%; }
    .sec_main .main_outer_box .main_image {
      position: absolute;
      inset: 0;
      background: url("../images/top/main6.jpg") center/cover no-repeat;
      opacity: 0;
      filter: brightness(2) blur(30px);
      overflow: hidden;
      transition: opacity 2s ease-in-out,filter 2s ease-in-out; }
      @media screen and (max-width: 480px) {
        .sec_main .main_outer_box .main_image {
          background: url("../images/top/main6_sp.jpg") center/cover no-repeat; } }
      .s2 .sec_main .main_outer_box .main_image {
        opacity: 1;
        filter: brightness(1) blur(0); }
      @media screen and (max-width: 480px) {
        .sec_main .main_outer_box .main_image {
          background: url("../images/top/main3_sp.jpg") center/cover no-repeat; } }

@keyframes hikari {
  0% {
    opacity: 0;
    transform: translateY(0%); }
  10% {
    opacity: 1; }
  85% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-25%); } }
@keyframes arrowmove {
  0% {
    bottom: 1%; }
  50% {
    bottom: 3%; }
  100% {
    bottom: 1%; } }
@keyframes grow {
  0% {
    filter: brightness(100%) blur(0px); }
  50% {
    filter: brightness(180%) blur(2px); }
  100% {
    filter: brightness(100%) blur(0px); } }
@media screen and (max-width: 480px) {
  .obi_outer {
    display: flex;
    flex-direction: column-reverse; } }

.obi_wrap {
  padding: 0 20px;
  background: #404040; }
  @media screen and (max-width: 480px) {
    .obi_wrap {
      padding: 0 20px; } }

.obi_price {
  padding-top: 25px;
  padding-bottom: 20px;
  position: relative;
  background: #740c06; }
  @media screen and (max-width: 480px) {
    .obi_price {
      padding-top: 15px;
      padding-bottom: 15px; } }
  .obi_price::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    mix-blend-mode: soft-light;
    background: url("../images/top/bg_pattern.png") top left/80px 80px repeat; }
    @media screen and (max-width: 768px) {
      .obi_price::before {
        background: url("../images/top/bg_pattern.png") top left/40px 40px repeat; } }
  .obi_price .obi_price_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 5%; }
    @media screen and (max-width: 480px) {
      .obi_price .obi_price_wrap {
        flex-direction: column;
        gap: 30px; } }
    .obi_price .obi_price_wrap .price {
      position: relative;
      max-width: 540px;
      width: 45%; }
      @media screen and (max-width: 480px) {
        .obi_price .obi_price_wrap .price {
          width: 100%; } }
      .obi_price .obi_price_wrap .price:first-child::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(0deg, #d3aa5f 0%, #ede0b4 50%, #d3aa5f 100%);
        right: -5.55%; }
        @media screen and (max-width: 480px) {
          .obi_price .obi_price_wrap .price:first-child::after {
            top: auto;
            left: 0;
            right: 0;
            width: 100%;
            height: 1px;
            bottom: -15px;
            background: linear-gradient(90deg, #d3aa5f 0%, #ede0b4 50%, #d3aa5f 100%); } }

@media screen and (max-width: 480px) {
  .main_price {
    background: #000; } }

.lead {
  font-size: clamp(16px, 1.85vw, 24px); }

.read {
  font-size: clamp(13px, 1.29vw, 16px);
  letter-spacing: 0.1em;
  line-height: 2.5; }
  @media screen and (max-width: 768px) {
    .read {
      letter-spacing: 0.05em; } }
  @media screen and (max-width: 480px) {
    .read {
      line-height: 1.6; } }

.merit_text {
  font-size: clamp(12px, 1.12vw, 14px);
  letter-spacing: 0.1em;
  line-height: 2.86; }
  @media screen and (max-width: 768px) {
    .merit_text {
      letter-spacing: 0.05em; } }
  @media screen and (max-width: 480px) {
    .merit_text {
      line-height: 1.8; } }

.lead_wrap {
  padding-top: clamp(80px, 13.34%, 160px);
  padding-bottom: clamp(80px, 13.34%, 160px);
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #000; }
  .lead_wrap .lead_inner {
    position: relative;
    z-index: 2; }
  .lead_wrap .lead_en {
    font-size: clamp(30px, 5vw, 64px);
    line-height: 1.06;
    letter-spacing: 0.2em;
    margin-bottom: clamp(45px, 7.5%, 90px); }
    @media screen and (max-width: 480px) {
      .lead_wrap .lead_en {
        line-height: 1.2; } }
  .lead_wrap .lead {
    line-height: 1;
    margin-bottom: clamp(35px, 5.84%, 70px);
    letter-spacing: 0.2em; }
    @media screen and (max-width: 480px) {
      .lead_wrap .lead {
        letter-spacing: 0.05em;
        line-height: 1.6; } }
  .lead_wrap .read {
    letter-spacing: 0.25em;
    line-height: 4; }
    @media screen and (max-width: 960px) {
      .lead_wrap .read {
        letter-spacing: 0.1em;
        line-height: 3; } }
    @media screen and (max-width: 480px) {
      .lead_wrap .read {
        line-height: 2; } }
  .lead_wrap .lead_movie_box {
    position: absolute;
    inset: 0;
    opacity: 0.5; }
    .lead_wrap .lead_movie_box video {
      object-fit: cover;
      width: 100%;
      height: 100%; }

.merit_wrap {
  padding-top: clamp(25px, 3.34%, 40px);
  padding-bottom: clamp(40px, 6.67%, 80px);
  position: relative;
  color: #fff; }
  @media screen and (max-width: 480px) {
    .merit_wrap {
      padding-top: 70px;
      padding-bottom: 70px; } }
  .merit_wrap::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    mix-blend-mode: soft-light;
    background: url("../images/top/bg_pattern.png") top left/80px 80px repeat; }
    @media screen and (max-width: 768px) {
      .merit_wrap::before {
        background: url("../images/top/bg_pattern.png") top left/40px 40px repeat; } }
  .merit_wrap .flex {
    align-items: flex-start;
    position: relative;
    z-index: 2; }
    @media screen and (max-width: 480px) {
      .merit_wrap .flex {
        display: block; } }
  .merit_wrap .text_box {
    position: relative;
    z-index: 3;
    margin-top: 2.5%;
    width: 50%;
    display: flex;
    flex-direction: column; }
    @media screen and (max-width: 480px) {
      .merit_wrap .text_box {
        margin-top: 0;
        width: 100%;
        margin-bottom: 40px; } }
    .merit_wrap .text_box .merit_head {
      font-size: clamp(80px, 12.9vw, 160px);
      font-style: italic;
      line-height: 1;
      margin-bottom: 3.75%; }
    .merit_wrap .text_box .lead {
      line-height: 2;
      letter-spacing: 0.2em;
      font-size: clamp(13px, 1.29vw, 16px); }
      @media screen and (max-width: 768px) {
        .merit_wrap .text_box .lead {
          letter-spacing: 0.1em; } }
  .merit_wrap .btn_content {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    font-size: clamp(13px, 1.29vw, 16px);
    line-height: 1;
    letter-spacing: 0.2em; }
    .merit_wrap .btn_content a {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.8em 1.5em;
      border: 1px solid #fff;
      transition: background 0.3s ease-in-out; }
      @media (hover: hover) {
        .merit_wrap .btn_content a:hover {
          background: rgba(255, 255, 255, 0.3); } }
  .merit_wrap .image_wrap {
    max-width: 500px;
    width: 41.67%;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap; }
    @media screen and (max-width: 480px) {
      .merit_wrap .image_wrap {
        width: 100%; } }
    .merit_wrap .image_wrap .image_box_01 {
      position: relative; }
    .merit_wrap .image_wrap .image_box_02 {
      max-width: 350px;
      width: 70%;
      position: absolute;
      z-index: 2;
      top: 58.83%; }
      @media screen and (max-width: 480px) {
        .merit_wrap .image_wrap .image_box_02 {
          top: 80%; } }

.merit_wrap_01,
.merit_wrap_03 {
  background: #666; }
  .merit_wrap_01 .text_box .merit_head,
  .merit_wrap_03 .text_box .merit_head {
    color: rgba(255, 255, 255, 0.5); }
  .merit_wrap_01 .image_wrap,
  .merit_wrap_03 .image_wrap {
    margin-left: 20px;
    margin-right: -20px; }
    .merit_wrap_01 .image_wrap .image_box_02,
    .merit_wrap_03 .image_wrap .image_box_02 {
      right: 60%; }
      @media screen and (max-width: 480px) {
        .merit_wrap_01 .image_wrap .image_box_02,
        .merit_wrap_03 .image_wrap .image_box_02 {
          right: auto;
          left: -20px; } }

.merit_wrap_01 .text_box .merit_head {
  text-align: left;
  margin-left: -20px; }

.merit_wrap_02,
.merit_wrap_04 {
  background: #333; }
  .merit_wrap_02 .text_box .merit_head,
  .merit_wrap_04 .text_box .merit_head {
    color: rgba(255, 255, 255, 0.5); }
  .merit_wrap_02 .image_wrap,
  .merit_wrap_04 .image_wrap {
    margin-left: -20px; }
    .merit_wrap_02 .image_wrap .image_box_02,
    .merit_wrap_04 .image_wrap .image_box_02 {
      left: 60%; }
      @media screen and (max-width: 480px) {
        .merit_wrap_02 .image_wrap .image_box_02,
        .merit_wrap_04 .image_wrap .image_box_02 {
          left: auto;
          right: -20px; } }

.contents_wrap::before {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../images/common/bg.png") center top/cover no-repeat; }

.merit_wrap_02 .image_wrap {
  max-width: 540px;
  width: 45%; }
  @media screen and (max-width: 480px) {
    .merit_wrap_02 .image_wrap {
      width: 100%; } }

.merit_wrap_04 {
  padding-bottom: clamp(80px, 10%, 120px); }
  @media screen and (max-width: 480px) {
    .merit_wrap_04 {
      padding-bottom: 150px; } }

.sec_lifeinfo {
  position: relative;
  background: url("../images/top/bg_lifeinfo.jpg") center/cover no-repeat; }
  @media screen and (max-width: 480px) {
    .sec_lifeinfo {
      display: block; } }
  .sec_lifeinfo .map {
    width: 50%;
    position: sticky;
    top: 90px;
    left: 0;
    height: 100%; }
    @media screen and (max-width: 768px) {
      .sec_lifeinfo .map {
        top: 70px; } }
    @media screen and (max-width: 480px) {
      .sec_lifeinfo .map {
        display: block;
        position: relative;
        top: 0;
        width: 100%; } }
    .sec_lifeinfo .map img {
      width: 100%; }
  .sec_lifeinfo .lifeinfo_outer {
    width: 50%;
    padding-top: clamp(60px, 8.34%, 100px);
    padding-bottom: clamp(80px, 20.84%, 250px); }
    @media screen and (max-width: 480px) {
      .sec_lifeinfo .lifeinfo_outer {
        width: 100%;
        padding-top: 40px; } }
    .sec_lifeinfo .lifeinfo_outer .lifeinfo_head {
      font-size: clamp(24px, 2.74vw, 36px);
      line-height: 1;
      padding-left: 0.5em;
      padding-right: 0.5em;
      margin-bottom: clamp(25px, 11.25%, 90px);
      color: #666; }
      @media screen and (max-width: 480px) {
        .sec_lifeinfo .lifeinfo_outer .lifeinfo_head {
          font-size: 24px;
          margin-bottom: 25px; } }
    .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap {
      max-width: 720px;
      width: calc(100% - 40px);
      margin-left: auto;
      margin-right: auto;
      align-items: flex-start; }
      @media screen and (max-width: 960px) {
        .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap {
          display: block; } }
      .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box {
        width: 47.23%; }
        @media screen and (max-width: 960px) {
          .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box {
            width: 100%; } }
        @media screen and (max-width: 960px) {
          .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box:first-child {
            margin-bottom: 30px; } }
        @media screen and (max-width: 480px) {
          .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box:first-child {
            margin-bottom: 20px; } }
        .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item:not(:last-child) {
          margin-bottom: 17.65%; }
          @media screen and (max-width: 960px) {
            .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item:not(:last-child) {
              margin-bottom: 30px; } }
          @media screen and (max-width: 480px) {
            .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item:not(:last-child) {
              margin-bottom: 20px; } }
        .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item .item_head {
          color: #3f3d58;
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          line-height: 1;
          font-size: clamp(18px, 1.73vw, 26px);
          position: relative;
          padding-bottom: 15px;
          border-bottom: 1px solid;
          margin-bottom: 10px; }
          @media screen and (max-width: 480px) {
            .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item .item_head {
              font-size: 20px; } }
          .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item .item_head .jp {
            font-size: 0.57em; }
          .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item .item_head::after {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 2px;
            height: 2px;
            background: #3f3d58; }
        .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item .lifeinfo_list {
          font-size: clamp(10px, 0.9vw, 13px);
          line-height: 1.6; }
          @media screen and (max-width: 960px) {
            .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item .lifeinfo_list {
              font-size: 12px; } }
          .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item .lifeinfo_list .item {
            display: flex;
            justify-content: space-between;
            align-items: baseline; }
            .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item .lifeinfo_list .item:not(:last-child) {
              margin-bottom: 1.4em; }
            .sec_lifeinfo .lifeinfo_outer .lifeinfo_wrap .lifeinfo_box .lifeinfo_item .lifeinfo_list .item dt {
              margin-right: 0.5em; }

.yokoku_outer {
  border-top: 1px dotted #eee;
  padding-top: 20px;
  padding-bottom: 20px; }

.yokoku_wrap {
  display: flex;
  align-items: center; }
  @media screen and (max-width: 480px) {
    .yokoku_wrap {
      display: block; } }
  .yokoku_wrap dt {
    text-align: center;
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
    padding: 0.8em 1em;
    margin-right: 15px;
    border: 1px solid; }
    @media screen and (max-width: 768px) {
      .yokoku_wrap dt {
        font-size: 14px; } }
    @media screen and (max-width: 480px) {
      .yokoku_wrap dt {
        padding: 0.5em;
        margin-bottom: 10px; } }
  .yokoku_wrap dd {
    font-size: 12px;
    line-height: 1.6; }
    @media screen and (max-width: 768px) {
      .yokoku_wrap dd {
        font-size: 10px; } }

.cap_wrap {
  padding-top: clamp(25px, 3.34%, 40px);
  padding-bottom: clamp(25px, 3.34%, 40px);
  background: #eee;
  margin-bottom: 1px; }
  @media screen and (max-width: 480px) {
    .cap_wrap {
      padding-top: 15px;
      padding-bottom: 15px; } }

/*# sourceMappingURL=top.css.map */