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

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


/* --------------------------------------------- */
/* ▼共通 */
/* --------------------------------------------- */

button {
  background-color: #b99745; /* ゴールド系 */
  color: #fff;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #a5803b; /* 濃いゴールド（ホバー時） */
}


/* --------------------------------------------- */
/* ▼回転*/
/* --------------------------------------------- */

.circle { 
  width: auto;
  height: 14vh;
  border-radius: 50%;
  position: relative;
  padding: 10vh 0 15vh 2px; 
}

.circle-content {
  width: auto; /* 固定せず */
  height: auto;
  max-height: 20vh;
 /* position: absolute;*/
  top: -25%;
  left: -25%;
  transform: translate(-50%, -50%); /* 真ん中に配置 */
  border: none;
}

/* top */
.top { 
  animation: rotate_top 6s linear infinite;
  transform-origin: center center; /* 回転軸を中心に */

}
@keyframes rotate_top { 
  0% { 
   transform: rotate(0deg) translateY(-25%) rotate(0deg);
  }
  100% {  
    transform: rotate(360deg) translateY(-25%) rotate(-360deg);
  }
}


/* --------------------------------------------- */
/* ▼中央*/
/* --------------------------------------------- */
 /* ▼老い */
.concerns-box {
  background-color: #f3f3f3; /* ボックス全体の背景（薄いグレー） */
  border-radius: 10px;
  overflow: hidden;
  width: 300px; /* 必要に応じて調整 */
  margin: 2rem auto;
}

.concerns-box dt {
  background-color: #b99745; /* ゴールド系 */
  color: #fff;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 1rem;
}

.concerns-box dd {
  text-align: center;
  margin: 0;
  padding: 0.8rem 1rem;
  font-size: 1.2rem;
  color: #b99745; /* ゴールド系文字色 */
  border-top: 1px solid #e0e0e0; /* 区切り線 */
}

.concerns-box dd:first-of-type {
  border-top: none; /* 最初のddは区切り線を消す */
}

@media screen and (max-width: 768px) {
  .concerns-box {
    width: 90%;
  }
}

/* --------------------------------------------- */
/* ▼左 (中身)*/
/* --------------------------------------------- */
  /* ▼共通 */
.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.png);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;}
.section-L .box01 {background: url(../img/01_left_bg_sp.jpg);background-size: cover;}
}

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

}

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

  /* ▼追加 */
.section-L .box h2,
.section-L .SubTtl{ color: #FFF;}

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

#main .spContent .pad-v10 {padding-top: 10vh; padding-bottom:10vh;}
#main .spContent .pad-v5{padding-top: 5vh; padding-bottom:5vh;}

.boxTxt > p:last-child
{  margin-bottom: 0;}


#main .spContent .boxTxt{padding: 0 11% 0; }
#main .spContent .boxTxt_vr02 {padding: 0 5% 0; }

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

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

.spContent p {
  margin-bottom: 2rem;
}

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

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

#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;
  padding: 0 4%;
}

#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;
}

  /* ▼リスト */
.concerns-list {
  background: #fffaf5;
  padding: 10% 5%;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  list-style: none;
  margin: 0 auto 2rem;
  max-width: 500px;
  font-size: 1.2rem;
  line-height: 2;
  color: #0d1a2b;
}

.concerns-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 1em;
  border-bottom: 1px dotted #ccc; /* ← ドットの下線 */
  padding-bottom: 0.8em;
  line-height: 1;
}

.concerns-list li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: #b99745;
  font-size: 1rem;
  top: 0.1em;
}

  /* ▼強調文 */
#main .spContent .boxTxt_vr02.proverb {
  padding: 10% 5%;
  margin: 0 8%;
}

.boxTxt_vr02.proverb {
  text-align: center;
  padding: 4vh 2vw;
  background-color: #f8f8f8;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 680px;
  margin: 0 auto 5vh auto;
}

.boxTxt_vr02.proverb .quote-img {
  width: auto;
  margin-bottom: 2vh;
}

.boxTxt_vr02.proverb .quote-text {
  font-family: 'Noto Serif JP', serif;
  line-height: 1.8;
}

.boxTxt_vr02.proverb .quote-text .en {
  font-size: 1.6rem;
  font-weight: 500;
  color: #222;
  margin-bottom: 1vh;
}

.boxTxt_vr02.proverb .quote-text .jp {
  font-size: 1.2rem;
  color: #444;
  margin-bottom: 1vh;
}

.boxTxt_vr02.proverb .quote-text .author {
  font-size: 1rem;
  color: #888;
  font-style: italic;
}


/* --------------------------------------------- */
/* ▼右 (中身)*/
/* --------------------------------------------- */
  /* ▼共通 */
.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: right;
  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%;
    }
}

#main .spContent > section#sec01 {padding-top: 0; padding-bottom:0;}


/* --------------------------------------------- */
/* ▼右 (枠)*/
/* --------------------------------------------- */
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: 78vh;}

  /* ▼順番入れ替え */
  .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: #fff;
  color: #0d1a2b;
}
#main .BgWhite h2:before {
  background-color: #0d1a2b;}


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

  /* ▼黒 */
.BgBlack {
  background: #000;
  color: #FFF;
}
#main .BgBlack h2:before {
  background-color: #fff;
}

  /* ▼ダークグレー */
.BgDarkgray {
  background: #131f1f;
  color: #FFF;
}
#main .BgDarkgray h2:before {
  background-color: #fff;
}



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