/* --------------------------------------------- */
/* ▼● */
/* --------------------------------------------- */

@media screen and (min-width: 768px) {
    #main {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
    }
}


/* --------------------------------------------- */
/* ▼左 (中身)*/
/* --------------------------------------------- */
  /* ▼共通 */
.section-L .box h2 {position: absolute; top: 15vh; left: 5vw;}
.section-L .box {height: 100vh;background-size: cover;}
.section-L .box h2 {font-size: 4rem;color: #FFF;font-weight: 300;letter-spacing: 0.2em;}
.section-L .SubTtl {color: #FFF;position: absolute; bottom: 8vh; right: 0;  left: 0;  margin: 0 auto;text-align: center; font-size: 2.6rem;letter-spacing: 0.25em;}

  /* ▼section01 */
.section-L .box01 {background: url(../img/01_left_bg.jpg);background-size: cover;}

  /* ▼section02 */
.section-L .box02 {background: url(../img/02_left_bg.jpg);background-size: cover;}

/* ▼section03 */
.section-L .box03 {background: url(../img/03_left_bg.jpg);background-size: cover;}

/* ▼section04 */
.section-L .box04 {background: url(../img/04_left_bg.jpg);background-size: cover;}

  /* ▼スマホ */
@media screen and (max-width: 767px) {
.section-L .box01 .SubTtl {font-size: 2rem;}
}

  /* ▼PC */
@media screen and (min-width: 768px) {

}

  /* ▼1250px以下 */
@media screen and (max-width: 1250px) {
  .section-L .box04 h2 {letter-spacing:0;}
}


/* --------------------------------------------- */
/* ▼中央 (中身)*/
/* --------------------------------------------- */
  /* ▼共通 */
#main .spContent img {width: 100%;}  

#main .spContent .pad-v10,
#main .spContent > section {padding-top: 10vh; /*padding-left: 5%;padding-right: 5%;*/padding-bottom:calc(10vh - 4rem);}  
#main .spContent .boxTxt{padding: 0 11% 0; }

.LSp0{letter-spacing: 0em!important;}

#main .spContent {
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: .12em;
  position: relative;
}

#main .spContent p {
  margin-bottom: 4rem;
}

#main .spContent .TxtS {font-size: 1rem;line-height: 1.4rem;display: block;}

#main .spContent img {
  margin-bottom: 3.6rem;
}

#main .spContent h2 {
  margin-bottom: 6rem;
  line-height: 3.6rem;
  font-size: 2.4rem;
  text-align: center;
  position: relative;
  letter-spacing: .2em;
  font-weight: 500;
}

#main .spContent h2 span{
  display: block;
}

#main .spContent h2 span.subTtl{
  font-size: 0.8rem;
  display: block;
}
#main .spContent h2:before {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -10px;
  margin: 0 auto;
  width: 20%;
  height: 2px;
  background-color: #131313;
}

.raiseImg25{margin-top: -2.5vh;}
.raiseImg50{margin-top: -5.0vh;}

  /* ▼画像の横並び */
.image-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px; /* 画像間のスペース */
  overflow-x: auto; /* スクロール可能にして安全策 */
}

#main .spContent .image-row img {
  width: 48%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

  /* ▼ギャラリー */
.gallery {
  overflow-x: scroll;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}

.gallery-track {
  display: flex;
  white-space: nowrap;
}


  /* ▼ギャラリー */
.slider-container {
  overflow: hidden;
  width: 100%;
}

.slider-track {
  display: flex;
  width: max-content;
}

.slide {
  flex: 0 0 auto;
  width: 200px; /* スライドの幅を指定 */
  margin-right: 20px; /* スライド間の間隔 */
}
#main .spContent .slider-container img{
  border-radius: 6px;
}


  /* ▼section01 */
  /* ▼section02 */
  /* ▼section03 */

  /* ▼PC */
@media screen and (min-width: 768px) {

}


/* --------------------------------------------- */
/* ▼右 (中身)*/
/* --------------------------------------------- */
  /* ▼共通 */
.section-R .box {height: 100vh;background-size: cover;color: #FFF;letter-spacing: 0.1em;}
.section-R .inner .PtImg{margin-bottom: 2vh; }
.section-R .box img {max-height: 50vh;}
.section-R .inner .ttl{font-size: 2.4rem;letter-spacing: 0.2em;margin-bottom: 1.4vh; line-height: 1;}
.section-R .inner .ttl span {font-size: 1.2rem;margin-bottom: 0.6vh; display:block;}
.section-R .inner .SubTtl {font-size: 1.2rem;border: 1px solid #fff;border-radius: 8px;padding: 3px 10px;margin-bottom: 1.4vh;}
.section-R .inner .specific {font-size: 1.05rem;text-align: left;display: inline-block;}
.section-R .inner .specific dl{margin-bottom: 1.0vh;}
.section-R .inner .specific dl dt,
.section-R .inner .specific dl dd,
.section-R .inner .specific dl li{display: inline-block;letter-spacing: 0.08em;}
.section-R .inner .specific a {display: inline-block;border: 1px solid #FFF;color: #FFF;border-radius: 3px;padding: 1px 5px 1px 12px; font-size: 1rem;margin-left: 10px;position: relative;}
.section-R .inner .specific a .detail::before{content:"▶";font-size:7px;position: absolute;left: 4px; top:3.4px;}



  /* ▼section01 */
.section-R .box01{ background-image: url(../img/01_right_bg.jpg);}

  /* ▼section02 */
.section-R .box02{ background-image: url(../img/02_right_bg.jpg);}
.section-R .inner .ttl { letter-spacing: 0.12em;}

  /* ▼section03 */
.section-R .box03{ background-image: url(../img/03_right_bg.jpg);}

  /* ▼section04 */
.section-R .box04{ background-image: url(../img/04_right_bg.jpg);}

  /* ▼PC */
@media screen and (min-width: 768px) {
.section-R .inner{margin: 0 auto 0; width: 75%;max-width: 320px;position: absolute;bottom: 7vh; left: 0;right: 0;}
.section-R .box02 .inner{margin: 12vh auto 0; }
}

  /* ▼スマホ */
@media screen and (max-width: 767px) {
  .section-R .box{height: auto;padding: 10vh 10%;}
  
}
/*  .PtImg {position: absolute;bottom: 30vh;}
  .PtTxt {position: absolute;bottom: 10vh;text-align: center;width: 100%;}
*/

/* --------------------------------------------- */
/* ▼左 (枠) */
/* --------------------------------------------- */
.section-L {
  position: absolute;
  overflow: hidden;
  left: 0;
  width:40%;
  height: 100vh;
}

.section-L .box{
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  z-index: 0;
}


body .section-L {
    position: fixed;
    top: 0;
}

.section-L .Lbg01,.section-L .Lbg02,.section-L .Lbg03 {z-index: 2; display: block; opacity: 1;visibility: visible;}

  /* ▼スマホ */
@media screen and (max-width: 767px) {
  .section-L .box{
  z-index: 1;
  display: block;
}

body .section-L {
  position:relative;
  top:auto;
}
  .section-L .box{position: relative;}

/*.section-L .Lbg01,.section-L .Lbg02,.section-L .Lbg03 {z-index: 1; display: block; opacity: 1;}
*/
}

/* --------------------------------------------- */
/* ▼真ん中 (枠) */
/* --------------------------------------------- */
#main .spContent {
  position: relative;
}

  /* ▼PC */
@media screen and (min-width: 768px) {
#main .spContent {
        width: 30%;
        margin-right: 30%;
    }
}


/* --------------------------------------------- */
/* ▼右 (枠)*/
/* --------------------------------------------- */
body.is-global-footer-pagetop-scrolled .section-R {
    position: fixed;
    top: 0;
}

.section-R {
    width:30%;
    position: fixed;
    top: 0;
}

.section-R .box{
  z-index: 1;
  display: block;
  text-align: center;
}

.section-R .Rbg01,.section-R .Rbg02,.section-R .Rbg03 {z-index: 2; display: block; opacity: 1;}


  /* ▼PC */
@media screen and (min-width: 768px) {
   .section-R .box  {height: 100vh;position: absolute;width: 100%;}
}

  /* --------------------------------------------- */
/* ▼スマホ　その他 */ 
/* --------------------------------------------- */
@media screen and (max-width: 767px) {

  /* ▼共通 */
  #main{display: flex;flex-direction: column;}
  .section-R .box{display: block;}
  

  body .section-L,body .spContent,body .section-R { position: relative;width: 100%;display: contents;height: auto;}
  body .section-L ,.section-L .box{height: 100vh;}

  /* ▼順番入れ替え */
  .section-L .box01{order: 2; }
  #sec01{order: 3; }
  .section-R .box01{order: 1; }
 
  .section-L .box02{order: 5; }
  #sec02{order: 6; }
  .section-R .box02{order: 4; }
  
  .section-L .box03{order: 8; }
  #sec03{order: 9; }
  .section-R .box03{order: 7;}
  
  .section-L .box04{order: 11; }
  #sec04{order: 12; }
  .section-R .box04{order: 10;}
  
}

/* --------------------------------------------- */
/* ▼アニメーション */
/* --------------------------------------------- */
.fI, .fIL, .fIR, .fIU {
  opacity: 0;
}

/* --------------------------------------------- */
/* ▼背景色 */
/* --------------------------------------------- */
  /* ▼紺 */
.BgNavy {
  background: #0d1a2b;
  color: #FFF;
}
#main .BgNavy h2:before {
  background-color: #fff;
}

  /* ▼ベージュ */
.BgBeige {
  background: #ffece2;
  color: #0d1a2b;
}
#main .BgBeige h2:before {
  background-color: #0d1a2b;}


  /* ▼薄い青緑 */
.BgLiteTeal {
  background: #e6f5f8;
  color: #0d1a2b;
}
#main .BgLiteTeal h2:before {
  background-color: #0d1a2b;
}

  /* ▼青緑 */
.BgTeal {
  background: #0c828e;
  color: #FFF;
}
#main .BgTeal h2:before {
  background-color: #FFF;}

  /* ▼青緑02 */
.BgTeal2 {
  background: #bff1ef;
  color: #0d1a2b;
}
#main .BgTeal2 h2:before {
  background-color: #0d1a2b;}



  /* ▼白 */
.BgWhite {
  background: #ffece2;
  color: #0d1a2b;
}
#main .BgWhite h2:before {
  background-color: #0d1a2b;}

  /* ▼スカイブルー */
.BgSky {
  background: #62a6cd;
  color: #FFF;
}
#main .BgSky h2:before {
  background-color: #fff;
}

/* --------------------------------------------- */
/* ▼● */
/* --------------------------------------------- */