@charset "utf-8";



/* =========================== ローディング =========================== *


  * { margin:0; padding:0; box-sizing:border-box; }
  /* 2回目以降（intro-played のとき）の見え方調整 */
html.intro-played body {
  /* ブラウザの自動スクロールアニメを殺しておくとより安全 */
  scroll-behavior: auto;
}

/* イントロ用の .top と loader を最初から描画しない */
html.intro-played .top,
html.intro-played #loader {
  display: none !important;
}

/* body に no-scroll が付いていてもスクロールできるようにしておく */
html.intro-played body.no-scroll {
  overflow: auto;
}


/* 本編を見せている間やローディング中にスクロールさせたくないときに付ける */
body.no-scroll {
  overflow: hidden;
  /* position: fixed;  ← 削除 */
  /* width: 100%;      ← 削除（固定レイアウトをやめる） */
}

  .header { position:fixed; top:0; left:0; width:100%; transform:translateY(-100%); opacity:0; transition:transform 0.4s ease, opacity 0.4s ease; z-index:1000; }
  .header.is-visible { transform:translateY(0); opacity:1; }

    /* ==============================
      ローディングレイヤー（画面にピン留め）
    ============================== */
    #loader { position:fixed; inset:0; z-index:9999; background:#f7f1d3; overflow:hidden; opacity:1; pointer-events:auto; transition:opacity 0.6s ease; }
    #loader.is-finished { opacity:0; pointer-events:none; }

    .loader-inner { position:relative; width:100%; height:100%; }

    .top { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; background:#f7f1d3; }

    /* 背景側のスクロール演出用画像（6枚） */
    .top img.fade-item { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:1; transform:translate3d(0,0,0) scale(1); transform-origin:center center; will-change:transform,opacity; transition:none; z-index:1; }
    .top img.fade-item.first { z-index:10; }
    .top img.fade-item.last { z-index:0; }
    @media (max-width:768px) {
 .top img.fade-item {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%; /* ← 見せたいところに合わせて調整 */
  transform:translate3d(0,0,0) scale(1);
  transform-origin:center center;
  will-change:transform,opacity;
  transition:none;
  z-index:1;
}

    }


/* 共通レイアウト */
.top {
  position: relative;
  width: 100%;
  overflow: hidden;
}



/* スマホ：1080x1920 のカンプ比率に固定（9:16） */
@media (max-width: 768px) {
  .top {
    aspect-ratio: 1080 / 1920;  /* ← ここがポイント（= 9 / 16） */
    /* 必要なら max-height つけてもOK */
    /* max-height: 100vh; */
  }
  .top {
    height: 85vh;  /* ← ここが超重要！100vh より小さくする */
    max-height: 900px; /* 任意：最大高さの上限を入れても良い */
  }
}

/* 背景画像（スクロールで拡大するやつ） */
.top img.fade-item {
  position: absolute;
  inset: 0;            /* top:0; right:0; bottom:0; left:0; と同じ */
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 枠（.top）の中をカンプ比率で埋める */
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: center center;
  will-change: transform, opacity;
  transition: none;
  z-index: 1;
}

    

    /* 雲 */
    .top img.loading_kumo_left,
    .top img.loading_kumo_right {
      position:absolute; top:0; left:0; width:40%; height:auto; object-fit:contain; z-index:0; pointer-events:none; transition:opacity 0.6s ease; opacity:1;
    }
    .top img.loading_kumo_left,.top img.loading_kumo_right {animation: fluffy 3s ease-in-out infinite alternate;}
    @keyframes fluffy {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-10px); /* 振れ幅は調整可能 */
      }
    }


    /* 初期状態：画面の上の外にいて、透明 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-16px); /* ちょっと上から */
  opacity: 0;
  filter: blur(6px);            /* ふわっと感 */
  transition:
    transform 0.7s cubic-bezier(0.19, 1, 0.22, 1),
    opacity   0.45s ease-out,
    filter    0.7s ease-out;
  z-index: 1000;
}

.header.is-visible {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}



    /* タイトル */
    .top img.title_animation {
      position:absolute; top:50%; left:50%; width:50%; height:auto; object-fit:contain;
      transform:translate(-50%, -50%); transform-origin:center center;
      z-index:100; opacity:1; pointer-events:none; transition:opacity 0.5s ease;
    }

    /* PCレイアウト */
    @media (min-width:768px) {
      .top img.loading_kumo_left { width:30%; left:21%; top:18vw; }
      .top img.loading_kumo_right { width:20%; right:20%; left:auto; top:29vw; }
    }
  .top img.title_animation { width:45%; }
    @media (min-width:768px) and (max-width:1024px) {
     .top img.title_animation { width:25%; }
    } 


    @media (min-width:768px) and (max-width:1024px) {
     .illust_schoolchild { display:none; }
     .illust_kayak { display:none; }
     .illust_shika1 { display:none; }
    .illust_man_naname { display:none; }
     

    }
    @media (min-width:1025px) {
      .top img.title_animation { width:18%; }
    }




    /* ==============================
      本編コンテンツ
    ============================== */
    main.page-content { background:#fff; min-height:200vh; padding:40px 20px; }
    main.page-content h1 { font-size:2rem; margin-bottom:1rem; }
    main.page-content p { max-width:36rem; line-height:1.7; font-size:0.95rem; }




/* 既存 */
main {margin-top: 0;}




/* =========================== ページ内共通部分 =========================== */
.contents_bg_gradation {position: relative;background: #F7F1D3;}
.contents_bg_gradation {
  background: linear-gradient(
    to bottom,
    #fff 0%,          
    #abdcac 10%,      
    #529535 100%       
  );
}

@media (min-width: 768px){
  .contents_bg_gradation {
    background: linear-gradient(
      to bottom,
      #fff 0%,            
      #abdcac 10%,       
      #529535 100%      
    );

  }



}


.h2_wrap { width:100%; margin-bottom:32px; color:#fff; font-weight:bold; }
.h2_wrap strong { width:100%; font-size:60px; margin-bottom:20px; } 
.h2_wrap h2 { width:100%; font-size:16px; margin-top:10px; }
.dot{position:relative;display:inline-flex;}
.dot span{position:relative;display:inline-block;}
.dot span::before{content:"";position:absolute;top:-1vw;left:50%;transform:translateX(-50%);width:6px;height:6px;background:#fff;border-radius:50%;}
@media (min-width: 768px){
  .dot span::before{top:0.6vw;left:120%;transform:translateX(-50%);}
}

/*縦のタイトル*/
.tate_title{ display:flex; flex-wrap:wrap; color: #fff;font-weight: bold;margin-bottom: 30px; flex-direction:column-reverse;}
.tate_title_e{font-size: 63px;line-height: initial; margin-bottom:20px; }
.tate_title_j h2 { font-size:16px; letter-spacing:0.08em; }
.tate_title .illust_plane { display:none; }
@media (min-width: 768px){
    .tate_title { gap: 10px;flex-direction: row-reverse; position:relative; }
    .tate_title_j {writing-mode: vertical-rl;text-orientation: upright;white-space: nowrap;}
    .tate_title_j h2 { font-size: 24px;  line-height:1.5em; }
    .service .tate_title_j h2 { margin-top:-20px; margin-left:30px;}
    .tate_title_e {writing-mode: vertical-rl;text-orientation: sideways;white-space: nowrap;letter-spacing: 0.1em;font-size: 100px;line-height: 70px;}
    .tate_title .illust_plane { width:120px; position:absolute; bottom:0; right:-60%; display:block; } 
}
@media (min-width:1024px) {
    .tate_title_e {font-size: min(6vw,100px);}

}

.pc-space::after {
  content: "　"; /* 全角スペース1つ */
}

@media screen and (max-width: 1023px) {
  .pc-space {
    display: none; /* スマホでは非表示 */
  }
}


/* =========================== トップビジュアル =========================== */
#intro .top {background: url(/img/top/leftp2_bg.jpg) no-repeat center/cover;}
.top { width:100%; height:100vh; position:relative; z-index:2; isolation: isolate; /* opacityの影響を遮断 */;  }
.top .prologue { width:auto; margin:0 auto; display:block; position:relative; z-index:10; }
.top .prologue span { width:100%; font-size:18px; text-align:center; color:#343330; font-weight:bold; letter-spacing:0.08em; margin-top:200px; margin-bottom:10px; } 
.top .prologue strong { width:100%; font-size:24px; text-align:center; color:#343330; margin-bottom:16px; } 
.top .prologue small { width:100%; font-size:18px; text-align:center; color:#529535; letter-spacing:0.1em; } 
.top_sp { width:100%; display:block; position:absolute; bottom:30px; }
.top_pc { display:none; }
@media (min-width:768px) {
    .top { /*height:100vh; */background:none; position: relative;}
    .top .prologue span { font-size:25px; margin-bottom:26px; margin-top:120px;}
    .top .prologue strong { font-size:35px;  margin-bottom:24px; }
    .top .prologue small { font-size:16px;}



    .top_pc { width:100%; position:absolute; top:0; display:block; }
    .top_sp { display:none; }

}





/* =========================== トップビジュアルアニメーション =========================== */
html,body{margin:0;padding:0;overflow-x:hidden;}

.intro{position:relative;overflow:hidden;touch-action:pan-y;z-index:2; isolation:isolate;}
#intro{ position:relative; overflow:hidden; }
/*#intro .obj img{width:100%;height:auto;max-width:100%;}*/

#intro .obj{position:absolute;transform:translate3d(0,0,0);will-change:transform;}
.left.p1{width:50%;bottom:0;left:0;z-index:3;}
.right.p1{width:54%;bottom:0;right:0;z-index:3;}
#intro .obj.left.p1 img.kumo_fuwa { width:40vw; left:5vw; bottom:60vw; z-index:0; }
#intro .obj.right.p1 img.kumo_fuwa { width:20vw; right:-5vw; bottom:50vw; z-index:0; }
#intro .obj.right.p1 img.kumo_fuwa2 { width:30vw; right:10vw; bottom:40vw; z-index:0;}
@media (min-width: 768px){
  #intro .obj.left.p1 img.kumo_fuwa { width:25vw; left:10vw; bottom:45vw; }
  #intro .obj.right.p1 img.kumo_fuwa { width:20vw; right:-5vw; bottom:40vw;  }
  #intro .obj.right.p1 img.kumo_fuwa2 { width:30vw; right:10vw; bottom:20vw;}

}


.text_prologue {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width:768px) {
.text_prologue { width: 18%; }
}










canvas {display: block; position:relative; z-index:1;}
.content{background:#fafafa;}


.bg_before {width:100%; position:relative; }
.bg_before .bg_before_sp { width: 100%;height: auto; display: block; }
@media (min-width: 768px){
  .bg_before { height:auto; background:none; top:0; }
  .bg_before .bg_before_sp { display:none; }
}


.bg_before .h1_wrap { width:90%; position:absolute; top:100px; left:5%; z-index:10; }
.bg_before .h1_wrap h1 { font-size:28px; line-height:42px; margin-bottom:20px; letter-spacing:0.08em; }
.bg_before .h1_wrap h1 small { font-size:22px; display:inline; }
.bg_before .h1_wrap h1 span { font-size:22px; }
.bg_before .h1_wrap p {/*opacity: 0;*/transform: translateY(10px); }
@media (min-width:768px) {
  .bg_before .h1_wrap { width:auto; top:initial; top:100px; left:5%; }
  .bg_before .h1_wrap h1 { font-size:32px; margin-bottom:10px; }
  .bg_before .h1_wrap h1 small { font-size:24px;}
  .bg_before .h1_wrap h1 span { font-size:24px; line-height:1.7em; }
  .bg_before .h1_wrap p { font-size:14px; line-height:1.7em;}
  .kv-img_pad {width: 100%;height: auto;display: block;}
  .kv-img { display:none; }

}
@media (min-width:1025px) {
 .bg_before .h1_wrap { top:100px; }
 .kv-img {width: 100%;height: auto;display: block;}
 .kv-img_pad { display:none; }
}
@media (min-width:1401px) {
 .bg_before .h1_wrap { top:170px; }
}



/* ===== 鹿アニメーション ===== */
.shika_hidari {
  width:2vw; 
  position: absolute;
  bottom:20vw;
  right:20vw;
  transform-origin: center bottom;
  animation: shikaWalk 20s ease-in-out infinite;
  z-index:8; 
}

/* 鹿の往復 + 立体っぽいターン */
@keyframes shikaWalk {
  0% {
    transform: translateX(0) scaleX(1) scaleY(1);
  }
  25% {
    transform: translateX(-3vw) scaleX(1) scaleY(1); /* 左端に到達（まだ左向き） */
  }
  30% {
    transform: translateX(-3vw) scaleX(0.35) scaleY(1.08);
  }
  35% {
    transform: translateX(-3vw) scaleX(-1) scaleY(1);
  }
  75% {
    transform: translateX(3vw) scaleX(-1) scaleY(1); /* 右端に到達（右向きのまま） */
  }
  80% {
    transform: translateX(3vw) scaleX(-0.35) scaleY(1.08);
  }
  85% {
    transform: translateX(3vw) scaleX(1) scaleY(1);
  }
  100% {
    transform: translateX(0) scaleX(1) scaleY(1); /* 中央に戻って左向き */
  }
}

/*散歩*/
.illust_sanpo { animation: sanpoWalk 70s ease-in-out infinite;}
@keyframes sanpoWalk {
  0% {
    transform: translateX(-1vw);
  }
  100% {
    transform: translateX(110vw);
  }

}





/*斜めの人*/
.illust_man_naname{ width:4vw; position:absolute; top:37vw; right:38vw; transform-origin: center bottom; animation: surpriseTilt 4s ease-in-out infinite;
}

@keyframes surpriseTilt{
  0%, 60%{
    transform: rotate(0deg);
  }
  65%{
    transform: rotate(-10deg);
  }
  70%{
    transform: rotate(-4deg);
  }
  75%{
    transform: rotate(-10deg);
  }
  85%, 100%{
    transform: rotate(0deg);
  }
}

.shika_janp {
  transform-origin: center bottom;
  animation: shikaQuickJump 3.5s cubic-bezier(0.25, 0.7, 0.5, 1.3) infinite;
}

/* 素早くぴょんと跳ねる動き */
@keyframes shikaQuickJump {
  /* 通常立ち姿 */
  0%, 70%, 100% {
    transform: translateY(0) scaleY(1);
  }

  /* 一瞬しゃがむ（ため） */
  72% {
    transform: translateY(6%) scaleY(0.9);
  }

  /* ピョンッと上昇 */
  75% {
    transform: translateY(-20%) scaleY(1.05);
  }

  /* 空中 */
  77% {
    transform: translateY(-18%) scaleY(1);
  }

  /* 着地して少し沈む */
  80% {
    transform: translateY(2%) scaleY(0.95);
  }

  /* 安定 */
  85% {
    transform: translateY(0) scaleY(1);
  }
  




}

/*カヤック*/
.illust_kayak { width:5vw; position:absolute; top:21vw; right:20vw;   animation: kayakFloat 4s ease-in-out infinite;
transform-origin: center bottom; }
@keyframes kayakFloat {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-3px) rotate(-1deg);
  }
  50% {
    transform: translateY(0) rotate(1deg);
  }
  75% {
    transform: translateY(-2px) rotate(-0.5deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/*鹿*/
.illust_shika1 { width:2.6vw; position:absolute; top:32vw; right:16vw; }






/* 雲が上下にふわふわする動き */
.kumo_fuwa {
  position: absolute;
  animation: kumoFloat 6s ease-in-out infinite;
}
@keyframes kumoFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5vw); /* ↑ 少し上へ */
  }
  100% {
    transform: translateY(0); /* 戻る */
  }
}

.kumo_fuwa2 {
  position: absolute;
  animation: kumoFloat 8s ease-in-out infinite;
}
@keyframes kumoFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1.5vw); /* ↑ 少し上へ */
  }
  100% {
    transform: translateY(0); /* 戻る */
  }
}

.sky {position: relative;width: 100%;height: 100vh;perspective: 1000px; /* ★ 3D奥行き */overflow: hidden;}

.hikouki {
  position: absolute;
  top:10vw;
  right:33vw;
  width:6vw;
  z-index: 5;
  transform-origin: center center;
  animation: flyAway 8s ease-in-out infinite;
}

/* ===== 飛行 ===== */
@keyframes flyAway {
  0% {
    transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(0deg) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate3d(-5vw, -5vw, 100px) rotateZ(-5deg) rotateY(-10deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate3d(-60vw, -40vw, -800px) rotateZ(15deg) rotateY(25deg) scale(0.3);
    opacity: 0;
  }
}











.reveal-square{opacity:0;transform:scale(.5);will-change:opacity,transform;}



.pickup { width:80%; border:1px solid #FA5117; background:#fff; border-radius:10px;  position:absolute; top:140vw; margin-left:22%; padding:0 15px; }
.pickup .jisseki { margin-top:-100px; margin-left:-80px; }
.pickup .jisseki .fukidashi { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.fukidashi_jisseki { margin-left:5%; margin-top:40px;}
.pickup a { width:100%; font-weight:bold; display:flex; font-size:14px; margin-bottom:10px; align-items:center;}
.pickup a strong { font-size:32px; color:#FA5117;}
.pickup a em { font-size:16px; color:#FA5117; font-weight:bold; }
.pickup .symbol { height:24px; margin-left:5px; }
.text_picktup { display:none; }
.icon_check { margin-right:5px; }
.icon_check.numberone { margin-top:-30px; }
@media (min-width:480px) and (max-width:767px) {
 .pickup { width:65%; margin-left:41%; padding:0px 30px 10px 30px; z-index:3; position:absolute; top:140vw;  }
}
@media (min-width:768px) {  
    .pickup { width:62%; margin-left:39%; top:54vw; padding:40px 30px 10px 30px; z-index:10; }
    .pickup .jisseki { margin-top:-100px; margin-left:-80px; display:block; }
    .pickup a strong { font-size:32px; }
    .pickup .symbol { height:initial; margin-left:10px; }
    .fukidashi_jisseki { margin-left:10%; margin-top:0; }
    .text_picktup { display:block; position:absolute; top:-25px; left:100px; }
    .pickup a em { font-size:20px; }
    .icon_check.numberone { margin-top:initial; }
} 
@media (min-width:1025px) { 
    .pickup { width:50%; margin-left:51%; padding:40px 30px 10px 30px; z-index:3; position:absolute; top:54vw;  }

}
@media (min-width:1401px) { 
    .pickup { width:38%; margin-left:63%; padding:40px 30px 10px 30px; z-index:3; position:absolute; top:54vw;  }

}


/* =========================== about =========================== */
.contents.aboutus .card_link_row { padding-left:24px; }


/* =========================== サービス =========================== */
.contents.service { width: min(90%, 1200px); margin: 0 auto; padding:40px 0; position:relative; z-index:1; }
.service_box { width:100%; background:#fff; border-radius:10px; margin:0 auto 0 auto; display:flex; flex-wrap:wrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding:30px 6%; position:relative; }
.h3_wrap { width:100%; border-bottom:1px solid #529535; padding-bottom:16px; display:flex; flex-wrap:wrap; align-items:center;}
.h3_wrap h3 { font-size:24px; line-height:1.5em; color:#529535; letter-spacing:0.08em; }
.service_list { width:100%; display:flex; flex-wrap:wrap; justify-content: space-between;}
.service_list li { width:100%; border-bottom:1px solid #529535; padding:16px 0; }
.service_list li a { width:100%; height:100%; display:block; }
.service_list li a dl { width:100%; display:flex; justify-content: space-between; }
.service_list li a dl dt { width:auto; font-size:20px; letter-spacing:0.08em; font-weight:bold; }
.h3_wrap img { width:80px; }
.h3_wrap img.illust_service1 { width:80px; height:81px; margin-left:auto; }
.h3_wrap img.illust_service2 { width:81px; height:86px; margin-top:-160px; margin-left:auto; }
.h3_wrap img.illust_service3 { width:64px; height:82px; margin-top:-120px; margin-left:auto; }
.service_list li a span  { font-size:14px; color:#797979; /*line-height:1.2em;*/ }
@media (min-width:480px) and (max-width:767px) {
 .service_box { width:75%;}
}
@media (min-width:768px) {  
    .contents.service { margin-top:initial; display:flex; flex-wrap:wrap; justify-content:space-between; padding:20px 0 40px 0; }
    .contents.service .tate_title { width:auto; }
    .contents_service_wrap .illust_tree_left1 { width:5vw; position:absolute; top:-2vw; left:27vw; z-index:4; }
    .contents_service_wrap .illust_tree_left2 { width:3vw; position:absolute; top:-2vw; left:33vw; z-index:4; }
    .service_box { width:71%; margin:60px 0 60px auto; padding-left:5%; padding-right:5%; position:relative; z-index:2; }
    .service_box.lifestyle { width:80%; margin:0 auto 60px auto;}
    .service_list li { width:47%; }
    .service_list li a dl { margin-bottom:0; align-items:center;}
    .service_list li a dl dt { line-height:1.5em; }

    .h3_wrap h3 { font-size:24px; margin-right:20px; }
    .h3_wrap img.illust_service1 { margin-left:initial; }
    .h3_wrap img.illust_service2 { margin-left:initial; margin-top:initial; }
    .h3_wrap img.illust_service3 { margin-left:initial; margin-top:initial; }
    .service_list li a span { font-size:14px; /*font-weight:bold;*/  }

}
@media (min-width:798px) {  
 .service_box { margin-top:60px; }
}
@media (min-width:1025px) {  
 .service_box { margin-top:100px; }
.service_box.lifestyle { width:65%; }
}
@media (min-width:1401px) {  
 .service_box { width:65%;}
  .h3_wrap h3 { font-size:32px;}
}




/*道*/
.contents_service_wrap { position:relative; }
.contents_service_wrap .road.sp { width:112%; height:210vh; position:absolute; top:80vw; left:-12%; z-index:0; }
.contents_service_wrap::before { content:none; }
@media (min-width:768px) {  

.contents_service_wrap::before {content: "";position: absolute;left: 0;width: 100%;background-image: url("/img/top/road_service_new.png");background-repeat: no-repeat;background-size: cover;background-position: top center;z-index:1;pointer-events: none;height:10vw; }

}

.contents_service_wrap .road.pad { display:none; }
@media (min-width:768px) and (max-width:1400px) {
.contents_service_wrap .road.pad { width:100%; height:auto; position:absolute; top:0; right:0; display:block; }
.contents_service_wrap .road.pc { display:none; }
}
@media (min-width:1401px) {  
  .contents_service_wrap .road.pc { width:100%; height:auto; position:absolute; top:0; right:0; display:block; }
  .contents_service_wrap .road.pad  { display:none; }

}



/*ライフスタイル*/
.lifestyle_wrap { width:100%; display:flex; flex-wrap:wrap; position:relative; }
.illust_school_wrap { width:22%; margin-right:78%; }
.illust_school_wrap .illust_school { width:100%; }
.illust_biwako_sp { width:90%; display:block; }
.illust_shop_sp { width:30%; display:block; margin-left:70%; margin-top:-50px; }
.illust_lifestyle_sp { width:111%; display:flex; margin-left:-5%; margin-bottom:30px; }
.illust_lifestyle_sp img { width:101%; }
.illust_tree_left_sp { width:20vw; display:block; margin-top:20px; }
@media (min-width:768px) {  
    .illust_biwako_sp { display:none; }
    .illust_shop_sp{ display:none; }
    .lifestyle_wrap::before {content: "";position:absolute; top:45vw; left:-10vw; width:25vw; aspect-ratio: 1 / 1;  background: url("/img/top/illust_lifestyle_left.png") no-repeat center / contain;pointer-events: none; z-index:3; }
    .lifestyle_wrap::after {content: "";position:absolute; top:15vw; right:-5vw; width:17vw; aspect-ratio: 1 / 1;  background: url("/img/top/illust_lifestyle_right.png") no-repeat center / contain;pointer-events: none; z-index:3; }
    .illust_lifestyle_sp { display:none; }
    .illust_tree_left_sp { width:10vw; display:none; }
  }
@media (min-width:1025px) {  
  .lifestyle_wrap::before{ top:20vw; }
}
@media (min-width:1401px) {  
  .lifestyle_wrap::before{ top:10vw;}
}



/* =========================== フロンティアのこと =========================== */
#aboutus .lifeconsultant { width:100%; background:#fff; border-radius:10px; margin:0 auto 40px auto; display:flex; flex-wrap:wrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding:30px 6%; position:relative; }
.lifeconsultant h3 { font-size:23px; color:#529535; margin-bottom:24px; }
.lifeconsultant p { font-size:14px; margin-bottom:20px; color:#797979;}
.photo_wrap { width:100%; height:140px; border-radius:10px; overflow:hidden; position:relative; margin-bottom:20px; }
.photo_wrap img { width:100%; height:100%; object-fit:cover; object-position: center; display: block;}
.link_detail { width:auto; display:flex; align-items:center; justify-content: center; }
.link_detail .symbol { margin-left:10px; }
.lifeconsultant a .photo_wrap img { transform: scale(1); transition: transform 0.6s ease;}
.lifeconsultant a:hover .photo_wrap img { transform: scale(1.05);}
#aboutus .color_g { font-size:14px;  }

@media (min-width:768px) {  
  #aboutus { width:70%; }
    #aboutus { display:flex; flex-wrap:wrap; position:relative; z-index:2; padding-top:0; }
    #aboutus .lifeconsultant { width:100%; margin-left:0; margin-right:40px; margin-bottom:40px; padding:50px 5%; }
    .lifeconsultant h3 { font-size:24px; line-height:1.7em; margin-bottom:10px; }
    #aboutus .card_link_wrap  { width:94%; flex-wrap:wrap; gap:28px; margin-left:0; }
    #aboutus .lifeconsultant .photo_wrap { height:250px; }
    #aboutus .tate_title { width:165px; height:auto; position:absolute; right:-100px; }
    #aboutus .color_g { color:#797979; font-size:14px; /*font-weight:bold; */}
    .lifeconsultant p { color:#797979;  line-height:1.75em; }
    .aboutus_right { margin-left:auto;  }
    .card_link.card_link_row_text:hover .card_link_title { opacity:0.5; }
    .card_link.card_link_row_text:hover .symbol { opacity:0.5; }
    .card_link.card_link_row_text:hover .card_link_img { opacity:0.5; }

}

@media (min-width:1025px) {  
    #aboutus .card_link_wrap  { width:95%; }
    #aboutus .card_link_wrap .card_link.card_link_row_text { width:100%; }
    #aboutus .card_link_row_text .card_link_text_wrap { width:100%; }
   
}

@media (min-width:1220px) {  
    #aboutus { width:80%; }
    #aboutus .lifeconsultant { width:45%; margin-left:0; margin-right:40px; margin-bottom:0; padding:50px 5%; }
    #aboutus .card_link_wrap  { width:45%; flex-wrap:wrap; gap:28px; margin-left:0; }
    #aboutus .tate_title { right:-60px; }
    #aboutus .card_link:hover { opacity:1; }


}
@media (min-width:1401px) {  
    #aboutus { width:80%; }
    .lifeconsultant h3 { font-size:32px;}
}


/* =========================== ページ下部のイラスト =========================== */
.illust_wrap_about { width:100%; display:flex; flex-direction: column-reverse; position:relative; z-index:0; }
.illust_wrap_about .illust_about_shop {width:90%; height:auto; display:block; margin-left: auto;margin-right: 5%; flex:0 0 auto;}
.illust_wrap_about .illust_about_boy { width:4vw; position:absolute; right:20vw; top:15vw; }
.illust_wrap_about .illust_about_girl { width:10%; animation: girlWalk 60s ease-in-out infinite;}
@keyframes girlWalk {
  0% {
    transform: translateX(-1vw);
  }
  100% {
    transform: translateX(110vw);
  }

}
@media (min-width:768px) {  
    .illust_wrap_about { margin-top:-150px; }
    .illust_wrap_about .illust_about_shop {width:32%; }
    .illust_wrap_about .illust_about_shop { width:30vw; margin-top:10vw; }
    .illust_wrap_about .illust_biwako_wrap { width:47%; margin-top:-20vw; position:relative; }
    .illust_wrap_about .illust_biwako_wrap .illust_biwako { width:100%; }
    .illust_wrap_about .illust_about_girl { width:3.5vw; position:absolute; bottom:0; }

    .illust_wrap_about .illust_biwako_wrap .illust_kayak { width:10vw; position:absolute;  z-index:10; top:7vw; left:5vw; right:initial; }
    
  .illust_sanpo_service  { width:6vw; animation: sanpoWalk 70s ease-in-out infinite; padding-top:50px; }
}


/* =========================== ページ下部のリンク =========================== */

.card_link_row { width:100%; padding:24.5px 0 24.5px 24px; }
.card_link_row .card_link_title { font-size:24px; letter-spacing:0.08em; }
.card_link_row .symbol_external { margin-right:27px; }
.card_link_row .symbol{ margin-right:27px; }
@media (min-width:768px) {
    .card_link_wrap { width:100%; justify-content:space-between; }
    .card_link_row { width: calc(calc(100% - 60px) / 3); }
    .card_link_wrap.pagebottom .card_link_row { padding:38px 32px; }
    .contents.bottom { padding-bottom:120px; position:relative; z-index:10; }
    .card_link_row .symbol_external { margin-right:0; }
    .card_link_row .symbol{ margin-right:0; }


}

@media (max-width: 767px) {
  #intro .top {
    height: calc(var(--vh) * 100);
    max-height: calc(var(--vh) * 100);
    overflow: hidden; /* ← はみ出させない */
  }
}

br.pad { display:none; }
@media (min-width:768px) and (max-width:1024px) {
  br.pad { display:block; }
}
@media (min-width:1025px) {
  br.pad { display:none; }
}


/* ローディング中（初回）のスクロールロック */
html.scroll-lock,
html.scroll-lock body {
  overflow: hidden;
}

.contents_bg_gradation {
  position: relative;
}

@media (min-width:1025px) {
 footer { background:#fff; position:relative; z-index:10; }
}