/*! Writen  by SCSS */
.madori-a {
  background-image: url("../img/plan/p_btn_a.jpg"); }

.madori-b {
  background-image: url("../img/plan/p_btn_b.jpg"); }

.madori-c {
  background-image: url("../img/plan/p_btn_c.jpg"); }

.madori-d {
  background-image: url("../img/plan/p_btn_d.jpg"); }

.madori-e {
  background-image: url("../img/plan/p_btn_e.jpg"); }

.main .inn .img {
  background: url("../img/plan/main.jpg") center center/cover; }
  @media screen and (max-width: 767px) {
    .main .inn .img {
      background: url("../img/plan/main_sp.jpg") center center/cover; }
      .main .inn .img .cap {
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        text-align: left; } }

.container_bg {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  padding-bottom: 80px; }
  @media screen and (max-width: 767px) {
    .container_bg {
      padding-bottom: 40px; } }

.container_bg .bg {
  background: url("../img/plan/bg.jpg") top center; }
  @media screen and (max-width: 767px) {
    .container_bg .bg {
      background: url("../img/plan/bg_sp.jpg") top center;
      background-size: cover; } }

.msn-bodyCopy ul,
.msn-bodyCopy ul li {
  list-style-type: square !important;
  letter-spacing: 0; }

.sec0 {
  padding-top: 80px; }
  @media screen and (max-width: 767px) {
    .sec0 {
      padding-top: 30px; } }

@media screen and (max-width: 767px) {
  .msn-madori__fig {
    margin-top: 20px !important; } }

.p_main {
  position: relative;
  overflow: hidden; }
  .p_main .bg {
    position: relative;
    overflow: hidden;
    opacity: 0;
    filter: blur(20px);
    transition: filter 2s ease, opacity 1s ease; }
    body.loaded .p_main .bg {
      opacity: 1;
      filter: blur(0); }
    .p_main .bg img {
      filter: brightness(1.5) grayscale(1);
      transform: scale(1.05);
      transition: filter 2.4s ease 1s, transform 2s ease; }
      body.loaded .p_main .bg img {
        filter: brightness(1) grayscale(0);
        transform: scale(1); }
  .p_main .copy {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    padding-top: calc(150% / 16);
    text-align: center;
    color: #fff;
    transition: all 1.6s ease 1.6s;
    filter: blur(20px);
    opacity: 0; }
    @media screen and (max-width: 480px) {
      .p_main .copy {
        padding-top: 30%; } }
    body.loaded .p_main .copy {
      opacity: 1;
      filter: blur(0); }
    .p_main .copy .m1 {
      font-size: clamp(24px, calc(60vw / 16), 60px);
      line-height: 1;
      letter-spacing: 0.1em;
      margin-bottom: 0.4em; }
      @media screen and (max-width: 480px) {
        .p_main .copy .m1 {
          font-size: calc(30vw / 3.9); } }
    .p_main .copy .m2 {
      font-size: clamp(14px, calc(20vw / 16), 20px);
      line-height: 1;
      letter-spacing: 0.1em;
      font-weight: 600; }
      @media screen and (max-width: 480px) {
        .p_main .copy .m2 {
          font-size: calc(14vw / 3.9); } }

.msn-madori__legend {
  margin-top: 25px; }
  @media screen and (max-width: 480px) {
    .msn-madori__legend {
      margin-top: 15px; } }

.msn-bodyCopy ul li + li, .msn-bodyCopy ol li + li {
  margin-top: 0.6em;
  margin-top: 1em; }
  @media screen and (max-width: 767px) {
    .msn-bodyCopy ul li + li, .msn-bodyCopy ol li + li {
      margin-top: 0.6em; } }

.msn-headlineCopy {
  /*@include mq($br_sp){
  	font-size: 1.3125rem;
  }*/ }
  @media (min-width: 768px) {
    .msn-headlineCopy {
      font-size: 1.5rem;
      font-size: 1.8rem; } }

.msn-headlineCopy__inner {
  text-align: center; }
  @media screen and (max-width: 767px) {
    .msn-headlineCopy__inner {
      text-align: center; } }

.msn-madori__areaPrimary {
  font-size: 1.6875rem;
  font-size: 2rem; }
  @media (min-width: 768px) {
    .msn-madori__areaPrimary {
      font-size: 1.875rem;
      font-size: 2.4rem; } }
  .msn-madori__areaPrimary.ex {
    position: relative;
    margin-bottom: 0.35em;
    width: fit-content; }
    .msn-madori__areaPrimary.ex .s {
      position: absolute;
      right: 0;
      bottom: -0.7em;
      text-align: right;
      font-size: 0.675rem;
      font-size: 0.625rem;
      font-size: 0.7rem;
      letter-spacing: 0; }
      @media screen and (max-width: 767px) {
        .msn-madori__areaPrimary.ex .s {
          letter-spacing: -0.05em;
          font-size: 0.675rem;
          bottom: -0.9em; } }

.msn-madori__areaSecondary {
  font-size: 0.875rem;
  font-size: 1rem; }

.msn-planNav__items {
  justify-content: center; }

.msn-madori {
  position: relative; }
  .msn-madori .anq {
    position: absolute;
    top: -10px; }
    @media (min-width: 768px) {
      .msn-madori .anq {
        top: -60px; } }
  .msn-madori#a .anq {
    position: absolute;
    top: -30px; }
    @media (min-width: 768px) {
      .msn-madori#a .anq {
        top: -60px; } }

#sec-madori .msn-section__container .msn-madori.gr {
  margin-bottom: 3rem; }
#sec-madori .msn-section__container .msn-madori.f1 {
  margin-bottom: 3rem; }
#sec-madori .msn-section__container .msn-madori.f2 {
  margin-bottom: 3rem; }

@media (min-width: 768px) {
  #sec-madori .msn-section__container .msn-madori {
    max-width: 960px;
    margin-inline: auto; }
    #sec-madori .msn-section__container .msn-madori.gr {
      max-width: 1167px;
      max-width: 1248px;
      margin-bottom: 4rem; }
    #sec-madori .msn-section__container .msn-madori.f1 {
      max-width: 1000px;
      margin-bottom: 4rem; }
    #sec-madori .msn-section__container .msn-madori.f2 {
      max-width: 1000px;
      margin-bottom: 4rem; }

  .msn-madori--action_auto {
       /*display: -ms-grid;
       display: grid;
           -ms-grid-columns: 1fr 47%;
           grid-template-columns: 1fr 47%;
           -ms-grid-rows: 70px 1fr;
           grid-template-rows: 70px 1fr;
           grid-template-areas: 'header  fig'
'data    fig'
'actions fig';*/
    -ms-grid-columns: 36% 60%;
    grid-template-columns: 39% 60%;
    column-gap: 1%;
    padding: 3% 1% 3% 3%; }
    .msn-madori--action_auto.gr {
      grid-template-columns: 1fr 56.91%;
      -ms-grid-columns: 1fr calc(630% / 11.07);
      -ms-grid-columns: 1fr calc(710% / 11.88);
      grid-template-columns: 1fr calc(630% / 11.07);
      grid-template-columns: 1fr calc(710% / 11.88); }
    .msn-madori--action_auto.f1 {
      grid-template-columns: 1fr 56.91%;
      -ms-grid-columns: 1fr calc(630% / 9.47);
      -ms-grid-columns: 1fr calc(516% / 9.47);
      grid-template-columns: 1fr calc(630% / 9.47);
      grid-template-columns: 1fr calc(516% / 9.47); }
    .msn-madori--action_auto.f2 {
      grid-template-columns: 1fr 56.91%;
      -ms-grid-columns: 1fr calc(630% / 9.47);
      -ms-grid-columns: 1fr calc(516% / 9.47);
      grid-template-columns: 1fr calc(630% / 9.47);
      grid-template-columns: 1fr calc(516% / 9.47); } }
@media screen and (min-width: 768px) {
  .msn-madori--action_auto .msn-madori__data {
    padding-right: 0; }

  .msn-madori--action_auto.f1 > .msn-madori__data {
    padding-right: 0; }

  .swipe_f1 .swipe_inn figure {
    max-width: 512px; } }
@media screen and (max-width: 767px) {
  .gr .msn-madori__image {
    width: 100%; }

  .f1 .msn-madori__image {
    width: 100%; }

  .f2 .msn-madori__image {
    width: 100%; }

  .swipe_gr .swipe_inn figure {
    width: calc(630% / 4.233);
    width: calc(710% / 4.233); }

  .swipe_f1 .swipe_inn figure {
    width: calc(512% / 4.233); } }
.casbee {
  max-width: 480px;
  margin: 0 auto;
  width: calc(100% - 80px); }
  .casbee .cap {
    text-align: left;
    font-weight: bold;
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
    color: #999; }
    @media screen and (max-width: 767px) {
      .casbee .cap {
        padding-left: 8px; } }

.msn-madori__type small .l {
  font-size: 125%; }

@media screen and (max-width: 767px) {
  .swipe1 .swipe_inn figure {
    width: calc(710% / 4.233); }

  .swipe2 .swipe_inn figure {
    height: 240px;
    aspect-ratio: 251 / 30; }
    .swipe2 .swipe_inn figure img {
      height: 100%; }
  .swipe2 .cap {
    font-size: 8px;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: left; } }
.swipe_img {
  height: 300px; }
  @media screen and (max-width: 480px) {
    .swipe_img {
      height: 200px; } }
  @media screen and (min-width: 960px) {
    .swipe_img img {
      width: 100%;
      height: 100%;
      object-fit: cover; } }

div.view_box {
  overflow: hidden;
  position: relative; }
  div.view_box .view_ico {
    position: absolute;
    left: 40px;
    bottom: 10px; }
    @media screen and (max-width: 767px) {
      div.view_box .view_ico {
        width: 280px; } }
  div.view_box .move_left_btn,
  div.view_box .move_left_btn02 {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    left: 0;
    cursor: grabbing;
    background: rgba(0, 0, 0, 0.3); }
    div.view_box .move_left_btn .move_left,
    div.view_box .move_left_btn02 .move_left {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 12px;
      left: 6px;
      margin: auto;
      transition: opacity 0.3s ease-in-out; }
      body:not(.mobile) div.view_box .move_left_btn .move_left:hover,
      body:not(.mobile) div.view_box .move_left_btn02 .move_left:hover {
        opacity: 0.7; }
  div.view_box .move_right_btn,
  div.view_box .move_right_btn02 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 30px;
    cursor: grabbing;
    background: rgba(0, 0, 0, 0.3); }
    div.view_box .move_right_btn .move_right,
    div.view_box .move_right_btn02 .move_right {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 12px;
      right: 6px;
      margin: auto;
      transition: opacity 0.3s ease-in-out; }
      body:not(.mobile) div.view_box .move_right_btn .move_right:hover,
      body:not(.mobile) div.view_box .move_right_btn02 .move_right:hover {
        opacity: 0.7; }

div.mContents,
div.mContents02 {
  width: 100%;
  height: 300px;
  height: 250px;
  position: relative; }

.sp_m_content,
.sp_m_content02 {
  width: 100%;
  position: relative;
  text-align: center;
  overflow: auto;
  display: none; }
  @media screen and (max-width: 480px) {
    .sp_m_content,
    .sp_m_content02 {
      display: block;
      height: 200px; } }

.pano .cap {
  padding-right: calc(1.88% + 5px); }

.pano_image {
  /*
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease-in-out;
  */ }
  @media screen and (max-width: 480px) {
    .pano_image {
      width: 100%;
      height: 360px;
      height: 250px;
      height: 200px;
      position: relative;
      text-align: center;
      overflow: auto; } }
  .pano_image img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    height: 100%; }

@media screen and (max-width: 480px) {
  .view_swipe,
  .view_swipe02 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 1;
    animation: horizontal 1s ease-in-out infinite alternate; }
    .view_swipe img,
    .view_swipe02 img {
      display: block;
      max-width: 184px;
      margin: 0 auto; } }

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