/* =================================
   PLAN FV
================================= */

.plan-fv .fv-title{
  font-size:clamp(38px,4.8vw,82px);
  letter-spacing:.08em;
  line-height:1;
}

.plan-fv .fv-title-bg{
  width:min(800px,70vw);
}


/* =================================
   PLAN INTRO
================================= */

.plan-intro{
  padding:120px 20px 110px;
}

.plan-intro-inner{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

.plan-intro-title{
  position:relative;
  display:inline-block;
  margin:0;
  padding-right:26px;

  color:#111;
  font-family:"Noto Serif JP", serif;
  font-size:clamp(30px,3.2vw,52px);
  font-weight:500;
  letter-spacing:.12em;
  line-height:1.7;
}

.plan-intro-square{
  position:absolute;
  right:0;
  bottom:.4em;

  width:16px;
  height:16px;
  border:2px solid #5677b8;
  box-sizing:border-box;
}

.plan-intro-copy{
  margin:34px auto 0;

  color:#333;
  font-size:clamp(21px,3vw,28px);
  font-weight:400;
  letter-spacing:.12em;
  line-height:2.2;
}


/* =================================
   PLAN INTRO MOTION
================================= */

.plan-intro-title,
.plan-intro-copy{
  transform:translateY(20px);
  transition:transform 1s ease-out;
}

.plan-intro.is-show .plan-intro-title,
.plan-intro.is-show .plan-intro-copy{
  transform:translateY(0);
}

.plan-intro-copy{
  transition-delay:.25s;
}

/* =========================
   SP
========================= */

@media screen and (max-width:767px){

  .plan-fv .fv-title{
    font-size:clamp(25px,4vw,46px);
    letter-spacing:.06em;
  }

  .plan-fv .fv-title-bg{
    width:100%;
  }

  .plan-intro{
    padding:80px 20px 70px;
  }

  .plan-intro-title{
    padding-right:18px;
    font-size:28px;
    line-height:1.8;
    letter-spacing:.08em;
  }

  .plan-intro-square{
    width:12px;
    height:12px;
    border-width:1.5px;
  }

  .plan-intro-copy{
    margin-top:24px;
    font-size:16px;
    line-height:2;
  }

}


/* =================================
   PANORAMA
================================= */

.panorama-section{
  width:100%;
  background:#fff;
}

.panorama-wrap{
  position:relative;
  overflow:hidden;
  width:100%;
}

.panorama-window{
  overflow:hidden;
  width:100%;
}

.panorama-img{
  display:block;
  width:180%;
  max-width:none;
  height:auto;

  transform:translateX(0);
}

/* 矢印 */
.panorama-arrow{
  position:absolute;
  top:50%;
  z-index:5;

  width:54px;
  height:80px;

  transform:translateY(-50%);

  border:0;
  background:rgba(255,255,255,.02);
  color:#fff;
  font-size:80px;
  line-height:1;
  cursor:pointer;
}

.panorama-arrow-left{
  left:10px;
}

.panorama-arrow-right{
  right:10px;
}

/* 注釈 */
.panorama-note{
  margin:8px 12px 0;
  text-align:right;
  font-size:12px;
  color:#333;
  line-height:1.6;
}

/* SP */
@media screen and (max-width:767px){

  .panorama-img{
    width:240%;
  }

  .panorama-arrow{
    width:44px;
    height:64px;
    font-size:64px;
  }

  .panorama-note{
    font-size:10px;
  }

}

.js-scroll-fade{
  transform:translateY(20px);
  transition:transform 1s ease-out;
}

.js-scroll-fade.is-show{
  transform:translateY(0);
}


/* =================================
   PLAN LIST
================================= */

.plan-list{
  padding:90px 20px 120px;
  background:#fff;
}

.plan-list-inner{
  max-width:1200px;
  margin:0 auto;
}

.plan-list-title{
  margin:0 0 44px;
  text-align:center;
  color:#004b93;
  font-family:"Noto Serif JP", serif;
  font-size:clamp(34px,4vw,54px);
  font-weight:400;
  letter-spacing:.22em;
}

.plan-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:48px 44px;
}

.plan-card{
  display:block;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}

.plan-card img{
  display:block;
  width:100%;
  height:auto;
}

.plan-card:hover img{
  opacity:.75;
}


/* =================================
   PLAN MODAL
================================= */

.plan-modal{
  position:fixed;
  inset:0;

  z-index:999999;

  overflow-y:auto;

  background:rgba(245,245,242,.24);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .65s cubic-bezier(.22,.61,.36,1),
    visibility .65s;
}

.plan-modal.is-open{
  opacity:1;
  visibility:visible;
}


/* 中身 */

.plan-modal-inner{
  position:relative;
  z-index:2;

  max-width:1100px;
  margin:0 auto;
  padding:70px 20px 80px;

  transform:translateY(40px);
  opacity:0;

  transition:
    transform .9s cubic-bezier(.22,.61,.36,1),
    opacity .9s cubic-bezier(.22,.61,.36,1);
}

.plan-modal.is-open .plan-modal-inner{
  transform:translateY(0);
  opacity:1;
}


.plan-modal-title{
  margin:0 0 50px;
  text-align:center;
  color:#004b93;
  font-family:"Noto Serif JP", serif;
  font-size:clamp(34px,4vw,54px);
  font-weight:400;
  letter-spacing:.22em;
}

.plan-modal-img{
  display:block;
  width:min(900px,78vw);
  height:auto;
  margin:0 auto;
}

.plan-modal-note{
  margin:38px 0 0;
  color:#111;
  font-size:12px;
  line-height:1.9;
}


/* 閉じる */

.plan-modal-close{
  position:fixed;
  top:24px;
  right:30px;

  z-index:100000;

  border:0;
  background:none;
  color:#004b93;
  font-size:68px;
  line-height:1;
  cursor:pointer;

  opacity:.8;
  transition:opacity .3s ease;
}

.plan-modal-close:hover{
  opacity:1;
}


/* 矢印 */

.plan-modal-arrow{
  position:fixed;
  top:50%;

  z-index:100000;

  transform:translateY(-50%);

  border:0;
  background:none;

  color:#004b93;
  font-size:90px;
  line-height:1;

  cursor:pointer;

  opacity:.75;

  transition:
    opacity .3s ease,
    transform .3s ease;
}

.plan-modal-arrow:hover{
  opacity:1;
  transform:translateY(-50%) scale(1.06);
}

.plan-modal-prev{
  left:24px;
}

.plan-modal-next{
  right:24px;
}


/* =========================
   SP
========================= */

@media screen and (max-width:767px){

  .plan-modal-inner{
    padding:60px 14px 70px;
  }

  .plan-modal-title{
    margin-bottom:34px;
    font-size:34px;
  }

  .plan-modal-img{
    width:92vw;
  }

  .plan-modal-note{
    font-size:10px;
  }

  .plan-modal-close{
    top:16px;
    right:18px;
    font-size:50px;
  }

  .plan-modal-arrow{
    font-size:60px;
  }

  .plan-modal-prev{
    left:4px;
  }

  .plan-modal-next{
    right:4px;
  }

}


/* =================================
   PLAN CARD HOVER
================================= */

.plan-card{
  position:relative;
  display:block;
  overflow:hidden;

  padding:0;
  border:0;
  background:none;

  cursor:pointer;
}

.plan-card img{
  display:block;
  width:100%;
  height:auto;

  transition:
    transform 1.2s cubic-bezier(.22,.61,.36,1),
    filter .6s ease,
    opacity .6s ease;
}

/* 黒 overlay */
.plan-card::after{
  content:"";

  position:absolute;
  inset:0;
  z-index:2;

  background:rgba(0,0,0,.38);

  opacity:0;

  transition:
    opacity .45s ease,
    backdrop-filter .45s ease;

  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
}

/* VIEW PLAN ボタン */
.plan-card::before{
  content:"MORE";

  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  z-index:3;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:10px 38px;

  border:1px solid rgba(255,255,255,.8);
 border-radius:999px; 
  color:#fff;
  font-family:"Noto Serif JP", serif;
  font-size:clamp(16px,1.4vw,22px);
  letter-spacing:.18em;

  opacity:0;

  transition:
    opacity .45s ease,
    transform .45s ease;
}
.plan-card:hover::after,
.plan-card:hover::before{
  opacity:1;
}


.plan-card:hover::before{
  transform:translate(-50%,-50%);
}
/* hover */

.plan-card:hover img{
  transform:scale(1.03);
  filter:brightness(.78);
}

.plan-card:hover::after{
  opacity:1;

  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}


/* SP */
@media screen and (max-width:767px){

  .plan-card::after{
    opacity:1;

    background:rgba(0,0,0,.08);

    font-size:14px;
    letter-spacing:.12em;
  }

}

.panorama-window{
  overflow:hidden;
  width:100%;
  position:relative;
}

.panorama-track{
  display:flex;
  width:max-content;

}

.panorama-img{
  display:block;
  width:auto;
  height:720px;
  flex-shrink:0;
  max-width:none;
}

@media screen and (max-width: 767px) {

  .plan-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

}
/* Responsive SVG copy in the plan first view. */
.plan-fv .fv-title-bg{
  padding:0;
  background:none;
}
.plan-fv .fv-title{
  font-size:0;
  line-height:0;
  letter-spacing:0;
  text-shadow:none;
}
.plan-fv .fv-title picture{
  position:static;
  display:block;
  width:100%;
  height:auto;
}
.plan-fv .fv-title img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}