@charset "utf-8";
body:not(#top-page):not(#location-page) .contents-property-innerWrap {
  padding-top: 0;
}
.contents-property-innerWrap p, .contents-property-innerWrap .caption, #captionArea {
  color: #fff;
}


html.no-scroll { overflow: hidden; }
/*.bc {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  overflow: hidden;
  img {
    width: 100%;
    max-width: none;
    height: auto;
  }
  @media screen and (max-width:768px) {
    height: 100svh;
    img {
      object-fit: cover;
      height: 100%;
    }
  }
}*/
.text_b01 {
  display: inline-block;
}
/*.ttl02 {
  position: relative;
  z-index: 0;
  margin: 0 auto 113px;
  width: fit-content;
  position: relative;
  z-index: 0;
  font-weight: normal;
  font-size: 58px;
  line-height: 1;
  letter-spacing: .05em;
  color: #c8a770;
  background: linear-gradient(90deg, #c59850 0%, #fffff9 27%, #c8a770 69%, #ab773b 100%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  box-decoration-break: clone; 
  -webkit-box-decoration-break: clone; 
  display: flex;
  flex-flow: column;
  gap: 50px;
}
.ttl02::before {
  content: "";
  display: block;
  content: "";
  display: block;
  background-image: url("../../../img/pages/view/dec_ttl.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 30px;
  aspect-ratio: 300 / 1592;
  place-self: center;
  inset: 0;
}
.ttl02 + p {
  text-align: center;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .2em;
  color: #fff;
}
@media screen and (max-width:768px) {
  .ttl02 {
    margin: 0 auto min(calc(24 / 375 * 100vw), 24px);
    padding-bottom: min(calc(32 / 375 * 100vw), 32px);
    font-size: min(calc(32 / 375 * 100vw), 32px);
  }
  .ttl02::after {
    height: min(calc(4 / 375 * 100vw), 4px);
  }
  .ttl02 + p {
    text-align: center;
    font-size: min(calc(20 / 375 * 100vw), 20px) !important;
    line-height: 2;
  }
}*/
.contents-property .text00 {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  line-height: calc(46 / 16);
  letter-spacing: .1em;
  color: #fff;
  @media screen and (max-width: 768px) {
    text-align: left;
    font-size: calc(16 / 375 * 100vw);
  }
}
.contents-property-innerWrap figure figcaption {
  background: rgba(255, 255, 255, .2);
}

.btn00 {
  margin: 0 auto;
  width: calc(400 / 1920 * 100vw);
  height: calc(80 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(22 / 1920 * 100vw);
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1;
  color: #fff !important;
  @media screen and (min-width: 1920px) {
    width: 400px;
    height: 80px;
    font-size: 22px;
  }
  @media screen and (max-width: 1024px) {
    width: 300px;
    height: 60px;
    font-size: 16px;
  }
  @media screen and (max-width: 768px) {
    width: calc(260 / 380* 100vw);
    height: calc(50 / 380* 100vw);
    font-size: calc(14 / 380* 100vw);
  }
  &.btn_vw {
    background: linear-gradient(-40deg, #c59850 10%, #f6cf8d 50%, #ab773b 90%)
  }
  &.btn_reservation {
    background: linear-gradient(to right, #717171 10%, #9f9f9f 50%, #717171 90%)
  }
}
.mv {
  position: relative;
  z-index: 0;
  aspect-ratio: 1750 / 950;
}
.mv .mv_ttl {
  position: absolute;
  z-index: 1;
  top: calc(490 / 1920 * 100vw);
  left: calc(180 / 1920 * 100vw);
  font-size: calc(54 / 1920 * 100vw);
  letter-spacing: .17em;
  color: #000;
  color: #fbeec8;
  background: linear-gradient(90deg, #256d69 0%, #67bccd  100%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  @media screen and (max-width: 768px) {
	  background: linear-gradient(90deg, #256d69 0%, #4bb9cf 100%); 
	  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    text-align: left;
    top: calc(150 / 380 * 100vw);
    left: calc(26 / 380 * 100vw);
    font-size: calc(25 / 380 * 100vw);
  }
}
.mv .mv_img {
  position: relative;
  z-index: 0;
}
.mv .mv_img img {
  max-width: none;
}
.mv .mv_img figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  background: rgba(0, 0, 0, .2);
}
@media screen and (max-width:1200px) {
  .mv {}
}
@media screen and (max-width:768px) {
  .mv {}
}
@media screen and (max-width:1200px) {
  .header-property-top {
  /*  background: rgba(255, 255, 255, 1);*/
    &.movie_off {
      background: rgba(255, 255, 255, 0);
    }
  }
}
.merit_box {
  position: relative;
  z-index: 1;
  color: #fff;
  .list_merit {
    position: absolute;
	  z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*background:linear-gradient(to bottom, rgba(99, 125, 122,0) 0%, rgba(99, 125, 122,.9) 85%);*/
    height: fit-content;
    padding-bottom: calc(100 / 1920 * 100vw);
    width: 1920px;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	  flex-flow: wrap;
    gap: calc(16 / 1920 * 100vw) 0;
	  &::after{
		  	content: "";
	display: block;
	position: absolute;
	z-index:-1;
	    background:linear-gradient(to bottom, rgba(99, 125, 122,0) 0%, rgba(99, 125, 122,.9) 85%);

	top: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height:100%;
	  }
	  
	  
    @media screen and (min-width: 1920px) {
      padding-bottom: 100px;
      gap: 16px 0;
    }
    @media screen and (max-width: 768px) {
      padding: 0 calc(30 / 380 * 100vw);
      background: none;
      &::after {
        background: linear-gradient(to bottom, rgba(99, 125, 122, .4) 0%, rgba(99, 125, 122, .9) 80%);
        width: 100%;
        filter: blur(3px);
      }
    }
		
    .card_merit {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-self: stretch;
      position: relative;
      z-index: 0;
      font-size: calc(27 / 1920 * 100vw);
      line-height: 1.3;
		letter-spacing: .03em;
      padding: 0 2.29em;
		
      @media screen and (min-width: 1920px) {
        font-size: 27px;
      }
		    @media screen and (max-width: 768px) {
      font-size: calc(16 / 380 * 100vw);
      padding:  calc(20 / 380 * 100vw) 0;
width:100%;
				border-bottom:1px solid #fff;
							.inner{
					 padding:calc(10 / 380 * 100vw) calc(12 / 380 * 100vw) ;
								
			}

		&:nth-of-type(n + 3){
			width:50%;
			border-bottom:0;
		}
		&:last-of-type{
			.inner{
					border-left:1px solid #fff;
			}


		}
    }

      &::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 0;
        background: rgba(255, 255, 255, 3);
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
		  		    @media screen and (max-width: 768px) {
            display: none;

    }

      }
      .size_s {
        font-size:.81em;
      }
      .size_m {
          font-size: 1.33em;
      }
      .size_m02 {
          font-size: 1.11em;
      }
      .size_m03 {
          font-size:1.6em;
		          @media screen and (max-width: 768px) {
          font-size:1.17em;
        }

      }
      .size_l {
        font-size: calc(54 / 27 * 1em);
        @media screen and (max-width: 768px) {
           font-size:2.0em;
        }
      }
      &:last-of-type {
        &::after {
          display: none;
        }
      }
    }
  }
  @media screen and (max-width:768px) {}
}
/* メリットボックスのパララクス */
/* ===== top.css より抜粋（.p-top-commitment 部分はそのまま） ===== */
.p-top-commitment {
  position: relative;
  color: var(--white)
}
.p-top-commitment .p-top-commitment__inner {
  position: relative
}
.p-top-commitment .p-top-commitment__img {
  position: relative;
  overflow: hidden
}
/*.p-top-commitment .p-top-commitment__img:after{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0000005c;content:""}*/
.p-top-commitment .p-top-commitment__img .p-top-commitment__img1, .p-top-commitment .p-top-commitment__img .p-top-commitment__img2, .p-top-commitment .p-top-commitment__img .p-top-commitment__img3 {
  height: 100%;
  overflow: hidden
}
.p-top-commitment .p-top-commitment__img .p-top-commitment__img1 img, .p-top-commitment .p-top-commitment__img .p-top-commitment__img2 img, .p-top-commitment .p-top-commitment__img .p-top-commitment__img3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%
}
.p-top-commitment .p-top-commitment__img .p-top-commitment__img1 {
  position: relative
}
.p-top-commitment .p-top-commitment__img .p-top-commitment__img2, .p-top-commitment .p-top-commitment__img .p-top-commitment__img3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.p-top-commitment .p-top-commitment__img .img-inner {
  width: 100%;
  height: 100%;
  transform-origin: 50% 40%
}
.p-top-commitment .p-top-commitment__txt {
  position: absolute;
  height: fit-content;
  margin: auto auto 0 auto
}
.p-top-commitment .p-top-commitment__txt.is-show h2 span i {
  transform: translateZ(0);
  transition: transform .75s cubic-bezier(.23, 1, .32, 1);
  transition-delay: .15s
}
.p-top-commitment .p-top-commitment__txt.is-show .desc span {
  clip-path: inset(0 0% 0 0);
  transition: clip-path .75s cubic-bezier(.23, 1, .32, 1)
}
.p-top-commitment .p-top-commitment__txt.is-show .desc span:nth-of-type(1) {
  transition-delay: .2s
}
.p-top-commitment .p-top-commitment__txt.is-show .desc span:nth-of-type(2) {
  transition-delay: .32s
}
.p-top-commitment .p-top-commitment__txt.is-show .desc span:nth-of-type(3) {
  transition-delay: .44s
}
.p-top-commitment .p-top-commitment__txt.is-show .desc span:nth-of-type(4) {
  transition-delay: .56s
}
.p-top-commitment .p-top-commitment__txt.is-show .c-btn-arrow {
  clip-path: inset(0 0% 0 0);
  transition: clip-path .75s .6s cubic-bezier(.23, 1, .32, 1)
}
.p-top-commitment .p-top-commitment__txt .desc {
  text-align: center
}
.p-top-commitment .p-top-commitment__txt .desc span {
  display: inline-block;
  clip-path: inset(0 100% 0 0)
}
.p-top-commitment .p-top-commitment__txt .c-btn-arrow {
  width: fit-content;
  margin: 0 auto;
  clip-path: inset(0 100% 0 0)
}
.p-top-commitment .p-top-commitment__num {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  font-style: normal;
  font-weight: 500;
  font-family: "Albert Sans", sans-serif;
  font-optical-sizing: auto;
  pointer-events: none
}
.p-top-commitment .p-top-commitment__num .p-top-commitment__num__inner {
  display: flex;
  position: absolute;
  align-items: center
}
.p-top-commitment .p-top-commitment__num .current {
  display: inline-block;
  position: relative;
  width: 1em;
  clip-path: inset(0 0 0 0)
}
.p-top-commitment .p-top-commitment__num .current[data-current-num="1"] i {
  transform: translateZ(0)
}
.p-top-commitment .p-top-commitment__num .current[data-current-num="2"] i {
  transform: translate3d(0, -100%, 0)
}
.p-top-commitment .p-top-commitment__num .current[data-current-num="3"] i {
  transform: translate3d(0, -200%, 0)
}
.p-top-commitment .p-top-commitment__num .current i {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: .7em;
  height: 1em;
  text-align: center;
  transition: transform .5s cubic-bezier(.77, 0, .175, 1)
}
.p-top-commitment .p-top-commitment__num .current i:nth-of-type(1) {
  position: relative
}
.p-top-commitment .p-top-commitment__num .current i:nth-of-type(2) {
  top: 1em
}
.p-top-commitment .p-top-commitment__num .current i:nth-of-type(3) {
  top: 2em
}
.p-top-commitment h2 {
  font-style: normal;
  font-weight: 400;
  font-family: Forum, serif;
  white-space: nowrap
}
.p-top-commitment h2 span {
  display: inline-block;
  clip-path: inset(0 -90% 0 -20%)
}
.p-top-commitment h2 span:nth-of-type(2) {
  letter-spacing: -.07em
}
.p-top-commitment h2 span i {
  display: inline-block;
  transform: translate3d(0, 100%, 0)
}



.p-top-commitment__img figure figcaption {
  bottom: calc(240 / 1920 * 100vw);
background: rgba(0,0,0,.2);
}

@media screen and (min-width:1920px) {
.p-top-commitment__img figure figcaption {
  bottom:240px;

}
  }@media screen and (max-width:768px) {
.p-top-commitment__img figure figcaption {
  /*bottom: calc(344 / 380 * 100vw);*/
  bottom: calc(384 / 380 * 100vw);
	

}
  }



@media screen and (min-width:900px) {
  .p-top-commitment .p-top-commitment__inner {
    width: 93.75%;
    margin-right: auto;
    margin-left: auto
  }
  .p-top-commitment .p-top-commitment__img {
    border-radius: .125rem
  }
  .p-top-commitment .p-top- /*commitment__txt{top:0;right:0;bottom:0;left:0;width:31.7777777778%;padding-bottom:.5em}*/
  .p-top-commitment .p-top-commitment__txt .desc {
    margin-top: 3.375em;
    margin-bottom: 2.375em;
    font-size: .875rem;
    line-height: 175%;
    letter-spacing: .05em
  }
  .p-top-commitment .p-top-commitment__num .p-top-commitment__num__inner {
    bottom: 2.5rem;
    left: 2.5rem;
    margin-top: .3125rem;
    font-size: .75rem;
    letter-spacing: .4em
  }
  .p-top-commitment h2 {
    font-size: 5.625rem;
    line-height: 93%;
    letter-spacing: -.06em
  }
}
@media screen and (max-width:899px) {
  .p-top-commitment .p-top-commitment__inner {
    height: 100dvh;
    height: 100lvh
  }
  .p-top-commitment .p-top-commitment__img {
    height: 100%
  }
  .p-top-commitment .p-top-commitment__txt {
    top: 0;
    right: 0;
    /*bottom: 3%;*/
    bottom: 0;
    left: 0;
    text-align: center
  }
  .p-top-commitment .p-top-commitment__txt .desc {
    margin-top: 8.25vw;
    margin-bottom: 6vw;
    font-size: 3.5vw;
    line-height: 175%;
    letter-spacing: .05em
  }
  .p-top-commitment .p-top-commitment__num {
    height: 13dvh
  }
  .p-top-commitment .p-top-commitment__num .p-top-commitment__num__inner {
    bottom: 7vw;
    left: 3.75vw;
    width: fit-content;
    font-size: 3vw;
    letter-spacing: .45em
  }
  .p-top-commitment .p-top-commitment__num .current {
    top: .075vw
  }
  .p-top-commitment h2 {
    font-size: 16vw;
    line-height: 93%;
    letter-spacing: -.045em
  }
  .p-top-commitment h2 br {
    display: none
  }
}
/* ===== 【追加】読込中の表示崩れ対策 =====
   JS（GSAP）が実行されるまでの間も、アニメ開始時と同じ見た目にしておく。
   html.js の時だけ効かせるので、JSが動かない環境では通常表示のまま。
   GSAP初期化の直前に .is-init を付けて外す（CSSのtransformが残るとGSAPが
   それを読み取って yPercent と二重にずれるため）。 */
html.js .p-top-commitment:not(.is-init) .p-top-commitment__img .img-inner {
  transform: scale(1.8) /* 各画像の中身：初期スケール 1.8 */
}
html.js .p-top-commitment:not(.is-init) .p-top-commitment__img .p-top-commitment__img2, html.js .p-top-commitment:not(.is-init) .p-top-commitment__img .p-top-commitment__img3 {
  transform: translateY(100%) /* img2 / img3：枠の下に待機 */
}
/* ===== 【追加】PC：スクロールに合わせて画像を画面幅いっぱいまで広げる =====
   --expand（0 → 1）を GSAP で動かし、clip-path の左右の余白と角丸を 0 にしていく。
   幅そのものを変えるとピン留めの位置計算が崩れるため、
   枠は最初から 100% 幅にして「見えている範囲」だけを広げている。 */
.p-top-commitment {
  --expand: 0
}
@media screen and (min-width:900px) {
  .p-top-commitment .p-top-commitment__inner {
    width: 100%
  }
  .p-top-commitment .p-top-commitment__img {
    /* 高さは元の見た目（幅 93.75% × 1620/2700）で固定 → 読込前から確定するのでピン位置もずれない */
    height: calc(93.75vw * 1620 / 2700);
    border-radius: 0;
    /* clip-path:inset(0 calc(3.125% * (1 - var(--expand))) round calc(.125rem * (1 - var(--expand))));*/
  }
  /* テキスト幅は元と同じ（93.75% × 31.777…%） */
  /* .p-top-commitment .p-top-commitment__txt{width:calc(93.75% * .3177777778)}*/
  /* 1/3 表示も画像の左端に合わせて動かす */
  .p-top-commitment .p-top-commitment__num .p-top-commitment__num__inner {
    /*left: calc(2.5rem + 3.125vw * (1 - var(--expand)))*/
	  left:3%;
  }
}
/* メリットボックスのパララクス ここまで*/
.movie {
  padding: calc(200 / 1920 * 100vw) 0;
  @media screen and (min-width: 1920px) {
    padding: 200px 0;
  }
	
	.caption{
		/*position: absolute;
		z-index: 1;
		bottom:-1.2em;
		right: 0;
		width: fit-content;*/
		margin: .4em auto 0;
		max-width: 60.5%;
		text-align: right;
		color:#000;
		  @media screen and (max-width: 768px) {
 	max-width: 84.21%;
  }

	}
	
	
  /*  &.movie_off {
    aspect-ratio: unset;
    iframe {
      display: none;
    }
    .img_mv {
      position: static;
      pointer-events: auto;
    }
    .btn_skip {
      display: none;
    }


    @media screen and (max-width:768px) {
      margin-top: 0;
    }
  }*/
  .box_movie {
    margin: 0 auto;
    width: 1140px;
    max-width: 75%;
	  height: auto;
    overflow: hidden;
    position: relative;
    z-index: 0;
    aspect-ratio: 1920 / 1080;
    @media screen and (max-width: 1920px) {
      max-width: 84.21%;
    }
    @media screen and (max-width: 768px) {
		&.sp-only{
   aspect-ratio: 1;

		}
    }
    iframe {
     /* pointer-events: none !important;*/
      top: 0;
      left: 0;
      z-index: 1;
      @media screen and (max-width: 768px) {
        pointer-events: auto !important;

      }
		
		
    }
  }
  .img_mv {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    img {
      width: 100%;
      max-width: none;
    }
  }
  .btn_skip {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    background: #fff;
    color: #000;
    padding: .7em 1em .5em;
    font-size: 16px;
    font-weight: 600;
    opacity: .8;
  }
  @media screen and (max-width:1200px) {
    .btn_skip {
      top: 62px;
    }
  }
  @media screen and (max-width:768px) {
    padding: calc(80 / 380 * 100vw) 0;
    aspect-ratio: 600 / 513;
    .btn_skip {
      top: auto;
      bottom: 0;
      font-size: 12px;
    }
  }
}
.ht_content00 {
	overflow: hidden;
  position: relative;
  z-index: 0;
  background-image: url("../../../img/pages/view/02/ht_c01_bc.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  aspect-ratio: 1920 / 1363;
  padding: calc(190 / 1920 * 100vw) 0;
  @media screen and (min-width: 1920px) {
    padding: 190px 0;
  }
	  @media screen and (max-width:768px) {
		    padding: calc(70 / 380 * 100vw) 0;
  background-image: url("../../../img/pages/view/02/ht_c01_bc_sp.jpg");
  /*aspect-ratio: 760 / 1930;*/
		    aspect-ratio: unset;
			  height:calc(1930 / 768 * 100vw);

  }

  .img00 {
    position: absolute;
    z-index: 1;
  }
  .caption {
    background: rgba(255, 255, 255, .2);
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 4px;
    font-size: 11px;
    line-height: 1.7;
  }
  .text_content {
    margin-left: calc(70 / 1920* 100vw);
    width: fit-content;
    text-align: left;
    font-size: calc(30 / 1920* 100vw);
    line-height: calc(80 / 30);
    letter-spacing: .19em;
    &.co_b {
      color: #353535;
    }
    @media screen and (min-width: 1920px) {
      margin-left: 70px;
      font-size: 30px;
    }
    @media screen and (max-width: 768px) {
      margin-left: 0;
      font-size: calc(18 / 380 * 100vw);
            line-height: 2.75;
            letter-spacing: 0.35em;
   }
  }
  &.ht_content01 {
    .img01 {
      top: calc(111 / 983 * 100%);
      left: calc(540 / 1660 * 100%);
      width: calc(800 / 1660 * 100%);
      aspect-ratio: 800 / 586;
		figcaption{
			background: rgba(0,0,0,.3);
			right:auto;
			left:0;
		}
    }
    .img02 {
      top: 0;
      right: 0;
      width: calc(240 / 1660 * 100%);
      aspect-ratio: 240 / 320;
    }
    .img03 {
      bottom: calc(81 / 983 * 100%);
      left: calc(170 / 1660 * 100%);
      width: calc(300 / 1660 * 100%);
      aspect-ratio: 300 / 400;
				figcaption{
			background: rgba(0,0,0,.3);
		}

    }
    .img04 {
      bottom: calc(81 / 983 * 100%);
      right: calc(180 / 1660 * 100%);
      width: calc(480 / 1660 * 100%);
      aspect-ratio: 480 / 320;
    }
	  	  @media screen and (max-width:768px) {
	  	    .img01 {
	  	                    top: calc(809 / 1930 * 100%);
                left: calc(77 / 760 * 100%);
                width: calc(740 / 760 * 100%);
						figcaption{
			right:0;
			left:auto;
		}

	  	    }
	  	    .img02 {
	  	      top: calc(267 / 1930 * 100%);
	  	      right: calc(-57 / 760 * 100%);
	  	      width: calc(278 / 760 * 100%);
	  	    }
	  	    .img03 {
	  	      bottom: calc(939 / 1930 * 100%);
	  	      left: calc(10 / 760 * 100%);
	  	      width: calc(344 / 760 * 100%);

	  	    }
	  	    .img04 {
	  	      bottom: calc(27 / 983 * 100%);
	  	      right: calc(261 / 760 * 100%);
	  	      width: calc(508 / 760 * 100%);
	  	    }
	  	  }

  }
  &.ht_content02 {
    background-image: url("../../../img/pages/view/02/ht_c02_bc.jpg");
    aspect-ratio: 1921 / 1246;
    .img01 {
      top: 0;
      right: 0;
      width: calc(900 / 1660 * 100%);
      aspect-ratio: 900 / 600;
    }
    .img02 {
      z-index: 2;
      top: calc(434 / 1056 * 100%);
      left: calc(48 / 1660 * 100%);
      width: calc(340 / 1660 * 100%);
      aspect-ratio: 340 / 220;
    }
    .img03 {
      bottom: calc(10 / 1056 * 100%);
      left: calc(186 / 1660 * 100%);
      width: calc(450 / 1660 * 100%);
      aspect-ratio: 450 / 300;
		figcaption{
			background: rgba(0,0,0,.3)		}
    }
	  
	  	  @media screen and (max-width:768px) {
    background-image: url("../../../img/pages/view/02/ht_c02_bc_sp.jpg");
  /*aspect-ratio: 760 / 1742;*/
  aspect-ratio: unset;
			  height:calc(1724 / 768 * 100vw);
			  
	.img01 {
                top: calc(517 / 1742 * 100%);
                right: calc(-57 / 760 * 100%);
                width: calc(789 / 760 * 100%);
    }
    .img02 {
                top: calc(1127 / 1742 * 100%);
                left: calc(-10 / 760 * 100%);
                /*width: calc(391 / 760 * 100%);*/
                width: calc(430 / 760 * 100%);
    }
    .img03 {
		bottom: calc(29 / 1742 * 100%);
		left: calc(148 / 760 * 100%);
		width: calc(525 / 760 * 100%);
    }
  }
  }
  &.ht_content03 {
    background-image: url("../../../img/pages/view/02/ht_c03_bc.jpg");
    aspect-ratio: 1920 / 1363;
    .img01 {
      top: 0;
      right: 0;
      width: calc(600 / 1660 * 100%);
      aspect-ratio: 600 / 800;
				figcaption{
			background: rgba(0,0,0,.3)		}

    }
    /*.img02 {
      top: calc(40 / 983 * 100%);
      left: calc(315 / 1660 * 100%);
      width: calc(480 / 1660 * 100%);
      aspect-ratio: 480 / 320;
    }*/
    .img03 {
      top: calc(265 / 983 * 100%);
      left: calc(545 / 1660 * 100%);
      width: calc(360 / 1660 * 100%);
      aspect-ratio: 360 / 240;
      z-index: 2;
				figcaption{
			background: rgba(0,0,0,.3)		}

    }
    .img04 {
      bottom: calc(150 / 983 * 100%);
      left: calc(190 / 1660 * 100%);
      width: calc(640 / 1660 * 100%);
      aspect-ratio: 640 / 400;
				figcaption{
			background: rgba(0,0,0,.3)		}

    }
	  	  	  @media screen and (max-width:768px) {
	  	  	    background-image: url("../../../img/pages/view/02/ht_c03_bc_sp.jpg");
	  	  	   /* aspect-ratio: 760 / 1840;*/
				    aspect-ratio: unset;
			  height:calc(1840 / 768 * 100vw);

	  	  	    .img01 {
	  	  	      top: calc(227 / 983 * 100%);
	  	  	      right: calc(31 / 760 * 100%);
	  	  	      width: calc(558 / 760 * 100%);
	  	  	    }
	  	  	    .img03 {
	  	  	      top: calc(657 / 983 * 100%);
	  	  	      left: calc(375 / 760 * 100%);
	  	  	      width: calc(375 / 760 * 100%);
	  	  	    }
	  	  	    .img04 {
	  	  	      bottom: calc(13 / 983 * 100%);
	  	  	      left: calc(14 / 760 * 100%);
	  	  	      width: calc(592 / 760 * 100%);
	  	  	    }
	  	  	  }

  }
  .inner {
    position: relative;
    z-index: 0;
    margin: 0 auto;
    width: 86.45%;
    height: 100%;
    @media screen and (min-width: 1920px) {
      width: 1660px;
    }
  }
}
.plan {
  position: relative;
  z-index: 0;
  padding:calc(200 / 1920 * 100%) 0;
    @media screen and (min-width: 1920px) {
  padding: 200px 0;    }
    @media screen and (max-width: 768px) {
  padding:calc(80 / 380 * 100%) 0;
    }
  &::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    background-image: url("../../../img/pages/view/02/plan_bc.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    top: 0;
    left: 0;
    width: calc(1177 / 1920 * 100%);
    aspect-ratio: 1177 / 543;
	  opacity: .4;
	      @media screen and (max-width: 768px) {
    width: calc(320 / 380 * 100%);
    }

  }
  .inner {
    margin: 0 auto;
    width: 78.125%;
    display: flex;
    justify-content: space-between;
	  flex-flow: wrap;
		 
    @media screen and (min-width: 1920px) {
      width: 1500px;
    }
	      @media screen and (max-width: 1024px) {
	  flex-flow: column;
			  	  align-items: center;
			  gap:calc(64 / 1920 * 100vw) 0;

    }
	      @media screen and (max-width: 768px) {
			  gap:calc(60 / 380* 100vw) 0;

    }
	  
	  .plan_ttl{
		  width:100%;
		  margin-bottom: calc(64 / 1920* 100vw);
    text-align: left;
    font-size: calc(48 / 1920* 100vw);
    line-height:1;
    letter-spacing: .19em;
		        color: #353535;
		    @media screen and (min-width: 1920px) {
						  margin-bottom:64px;
    font-size: 48px;    }
  	      @media screen and (max-width: 768px) {
			    font-size: calc(32 / 380* 100vw);
		  margin-bottom:0;

    }

	  }

    .plan_img {
      background: #fff;
      border: 1px solid rgba(31, 79, 39, .2);
      width: 60%;
      padding:2% 2%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      gap: calc(80 / 1920 * 100%);
      @media screen and (min-width: 1920px) {
        gap: 80px;
      }
      @media screen and (max-width: 1024px) {
        width: 80%;
        padding: calc(40 / 1024 * 100vw) calc(24 / 1024 * 100vw);
        gap: calc(32 / 1024 * 100vw) 0;
      }
      @media screen and (max-width: 768px) {
        width: calc(320 / 380 * 100vw);
        padding: calc(40 / 380 * 100vw) calc(24 / 380 * 100vw);
        gap: calc(32 / 380 * 100vw) 0;
      }
      .caption {
        color: #353535;
        text-align: center;
        line-height: 1.75;
      }
    }
    .plan_data {
      width: 35%;
      dl {
        margin-bottom: calc(100 / 1920 * 100vw);
        color: #353535;
        font-size: calc(16 / 1920 * 100vw);
        line-height: 1.7;
        text-align: left;
        .card00 {
          display: flex;
          border-bottom: 1px solid rgba(31, 79, 39, .2);
          dt {
            background: rgba(31, 79, 39, .05);
            width: 25%;
            padding: 1.96em 2em;
          }
          dd {
            flex: 1;
            padding: 1.96em 2.68em;
          }
        }
      }
      .ttl_vr {
        margin-bottom: calc(32 / 1920 * 100vw);
        font-size: calc(28 / 1920 * 100vw);
        font-weight: 500;
        line-height: 1;
        letter-spacing: .19em;
        color: #353535;
      }
      @media screen and (min-width: 1920px) {
        dl {
          margin-bottom: 100px;
          font-size: 16px;
        }
        .ttl_vr {
          margin-bottom: 32px;
          font-size: 28px;
        }
      }
      @media screen and (max-width: 1024px) {
        width: 80%;
        dl {
          margin-bottom: calc(100 / 1024 * 100vw);
          font-size: calc(16 / 1024 * 100vw);
        }
        .ttl_vr {
          margin-bottom: calc(32 / 1024 * 100vw);
          font-size: calc(28 / 1024 * 100vw);
        }
      }
      @media screen and (max-width: 768px) {
        width: calc(320 / 380 * 100vw);
        dl {
          margin-bottom:  calc(60 / 380 * 100vw);
          font-size: calc(14 / 380 * 100vw);
			        .card00 {
          dt {
            width: 34.37%;
            padding: 1.71em 1.35em;
          }
          dd {
            padding: 1.71em 1.35em;
          }
        }

        }
        .ttl_vr {
          margin-bottom: calc(20 / 380 * 100vw);
          font-size: calc(18 / 380 * 100vw);
        }
      }

    }
  }
}
.btn_area {
  padding: calc(100 / 1920 * 100vw) 0 calc(90 / 1920 * 100vw);
  @media screen and (min-width: 1920px) {
    padding: 100px 0 90px;
  }
	      @media screen and (max-width: 768px) {
  padding: calc(50 / 380 * 100vw) 0 ;
          }

}
.al li {
  color: #353535;
}