@charset "UTF-8";



/*========= 背景動画設定のCSS ===============*/

/*header設定*/
#header{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh;/*高さを全画面にあわせる*/
} 

#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;

    opacity: 1;
    transition: opacity 1s ease; /* フェード時間（1秒） */
}

 #video.fade-out {
    opacity: 0;
  }

/*見出し設定*/
h1{
    /*要素の配置*/
    position:;
    /*要素を天地中央寄せ*/
    top: ;
    left: ;
    /*見た目の調整*/
    color:#fff;
    text-shadow: 0 0 15px #666;
}




/* --- セカンドメニュー初期状態 --- */

/* SERVICE に hover で表示 */
.has-sub:hover > .second-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- 1つずつ遅れて表示エフェクト --- */
.second-menu li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.has-sub:hover .second-menu li {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延 */
.second-menu li:nth-child(1) { transition-delay: .05s; }
.second-menu li:nth-child(2) { transition-delay: .15s; }
.second-menu li:nth-child(3) { transition-delay: .20s; }
.second-menu li:nth-child(4) { transition-delay: .25s; }



/* -------------------------
   
-------------------------- */

/* 全体を2分割 */
.container {
  display: flex;
  height: 100vh;
}

/* 左側（固定） */
.left {
  width: 20%;
  padding: 20px;
  background: #f0f0f0;
  overflow: hidden; /* ← スクロールしない */
}

/* 右側（スクロール） */
.right {
  flex: 1;
  padding: 20px;
  overflow-y: auto; /* ← 縦スクロールだけ */
  background: #fff;
}

/* スマホ時：縦並びに切り替え */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    height: 60vh;
  }
  .left, .right {
    width: 100%;
    height: auto;
  }
  .right {
    max-height: 50vh;
    overflow-y: auto;
  }
}




/* 右側だけスクロールバーをカスタム */
.right::-webkit-scrollbar {
  width: 12px;              /* スクロールバー全体の幅 */
}

.right::-webkit-scrollbar-track {
  background: #9e9e9e;     /* トラック部分 */
  border-radius: 4px;
}

.right::-webkit-scrollbar-thumb {
  background: #000000;         /* つまみ部分 */
  border-radius: 4px;
}

.right::-webkit-scrollbar-thumb:hover {
  background: #666;         /* ホバー時 */
}

/* Firefox 用 */
.right {
  scrollbar-width: thin;           /* auto / thin / none */
  scrollbar-color: #000000 #ededed;   /* thumb track */
}

/* 動き
-------------------------------------------------------------- */



/* ライン
--------------------------- */

.line-with {
  position: relative;
  height: 1px;
  background: #000;
  width: 100%;
  margin: 60px auto;
}


.line-with-triangle {
  position: relative;
  height: 1px;
  background: #000;
  width: 100%;
  margin: 60px auto;
}

/* ▼ 下向きの三角 */
.line-with-triangle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
  animation: blinkTriangle 1.2s ease-in-out infinite;
}

/* ▼ 点滅アニメーション */
@keyframes blinkTriangle {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 0.1;
    transform: translateX(-50%) translateY(2px); /* 少し動きをつけても◎ */
  }
}




.headline {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 25px;
  font-weight: bold;
  overflow: hidden;
}

.headline .line {
  display: inline-block;
  height:3px;
  background: #000;
  flex-grow: 1;
  margin-left: 1em;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s ease;
}

/* ---- 追加：終点の丸 ---- */
.headline .dot {
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  margin-left: 10px;  /* 線との間隔 */
  opacity: 0;
  transform: scale(0);
  transition: 
    opacity 0.4s ease 1.5s,   /* 線が描かれた後に表示 */
    transform 0.4s ease 1.5s;
}

/* 表示されたとき */
.headline.show .line {
  transform: scaleX(1);
}

.headline.show .dot {
  opacity: 1;
  transform: scale(1);
}


/* 詳細へ */
.detail-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;                 /* テキストと矢印の間隔 */
  position: relative;
  padding-bottom: 6px;       /* 下線分の余白 */
  color: #000;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;           /* 必要に応じて調整 */
  transition: color .2s;
}

/* 下線（初期は縮んでいる） */
.detail-link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;                 /* テキスト直下にライン */
  height: 1px;               /* 線の太さ */
  background: currentColor;  /* テキスト色に合わせる */
  width: calc(70% + 24px);  /* 矢印ぶんも含めて伸ばす（調整可） */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .36s cubic-bezier(.2,.8,.2,1);
}

/* 矢印（三角形） */
.arrow02{
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid currentColor; /* 矢印の色とサイズ */
  transform: translateX(0);
  transition: transform .36s cubic-bezier(.2,.8,.2,1);
  margin-left: -6px; /* 下線の幅調整に合わせ微調整 */
  margin-top: 2px;
}

/* ホバー（またはフォーカス）時のアニメーション */
.detail-link:hover,
.detail-link:focus {
  color: #000; /* ホバー時に色を変えたいときはここを調整 */
}

.detail-link:hover::after,
.detail-link:focus::after{
  transform: scaleX(1); /* 左→右 に伸びる */
}

.detail-link:hover .arrow02,
.detail-link:focus .arrow02{
  transform: translateX(6px); /* 矢印が少し右にスライド */
}

/* アクセシビリティ：キーボード操作でフォーカスしたときにも動くように */
.detail-link:focus {
  outline: 3px solid rgba(0,0,0,0.08);
  outline-offset: 4px;
}



.arrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 20px;
  margin-top: 10px;
}

/* 矢印1本 */
.arrows {
  position: relative;
  width: 30px;
  height: 15px;
  opacity: 0.2;
  animation: fade 1.5s infinite;
}

/* 左線・右線 */
.arrows::before,
.arrows::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background: #000;
    border-radius: 5px;
    top: 0px;
}

/* 左 */
.arrows::before {
  left: 0;
  transform: rotate(40deg);
  transform-origin: left center;
}

/* 右 */
.arrows::after {
  right: 0;
  transform: rotate(-40deg);
  transform-origin: right center;
}

/* アニメーション遅延 */
.a1 { animation-delay: 0s; }
.a2 { animation-delay: 0.3s; }
.a3 { animation-delay: 0.6s; }

@keyframes fade {
  0%   { opacity: 0.2; }
  30%  { opacity: 1; }
  60%  { opacity: 0.2; }
  100% { opacity: 0.2; }
}




/* ---- 下へのライン---- */



/* タイムライン作成：要素が画面に入ったらアニメ開始 */
@scroll-timeline lineTimeline {
  source: auto;
  orientation: block; /* 縦スクロール */
}

/* 全体 */
.line-trigger {
  width: 2px;
  margin:0 auto; /* テスト用。スクロールで見える位置へ */
  display: flex;
  flex-direction: column;
  align-items: center;
  view-timeline-name: lineTimeline;  /* ← ここ重要 */
  view-timeline-axis: block;
}

/* 線（scaleY で下へ伸びる） */
.line-vertical {
  width: 5px;
  height: 200px;
  background: #000;
  transform-origin: top;
  transform: scaleY(0);
  animation: growDown 1s ease forwards;
  animation-timeline: lineTimeline; /* ← スクロール開始時に発火 */
}

/* 矢印（線が伸びた後で出る） */
.line-arrow {
  opacity: 0;
  font-size: 20px;
  margin-top: 0px;
  transform: translateY(-5px);
  animation: arrowAppear 0.6s ease forwards;
  animation-timeline: lineTimeline;
  animation-delay: 1s; /* 線の後に出す */
}

/* 下へ伸びる */
@keyframes growDown {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ふわっと矢印 */
@keyframes arrowAppear {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}





svg { width: 50%; height: auto; }
.stroke-text {
  font-size: 120px;
  font-weight: 700;
}
.stroke-only { 
  fill: none;            /* 中身を塗らない（線だけ） */
  stroke: #000;          /* 線の色 */
  stroke-width: 2;       /* 線の太さ */
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* アニメーション：線が描かれていく */
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2.2s ease forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}


/*====== スクロール =======*/

  .scroll-text {
    font-size: ;
    display: inline-block;
    white-space: pre-wrap; /* 改行を尊重 */
    overflow: visible;
  }

  /* 各文字（span） */
  .scroll-text .char {
    display: inline-block;
    transform: translateY(3.0rem); /* 下にずらしておく */
    opacity: 0;
    will-change: transform, opacity;
    /* トランジション時間はお好みで */
    transition: transform 1.5s cubic-bezier(.2,.9,.2,1), opacity 0.45s ease;
    /* 遅延は --i を使って JS から設定 */
    transition-delay: calc(var(--i) * 0.1s);
  }

  /* ビューに入ったら各文字を上に移動して表示 */
  .scroll-text.in-view .char {
    transform: translateY(0);
    opacity: 1;
  }

  /* オプション：小さくフェードインしてから文字を拡大（表情付け） */
  /* .scroll-text .char { transform: translateY(1rem) scale(.95); }
     .scroll-text.in-view .char { transform: translateY(0) scale(1); } */




.blur{
    animation-name: blurAnime;
    animation-duration: 1.1s;
    animation-fill-mode: forwards;
}

.blur02{
    animation-name: blurAnime02;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.blur04{
    animation-name: blurAnime04;
    animation-duration: 2s;
    animation-fill-mode: both;
}



@keyframes blurAnime{
    from {
        filter: blur(15px);
        transform: translateY(40px); /* 下から */
        opacity: 0;
    }
    to {
        filter: blur(0);
        transform: translateY(0); /* 元の位置 */
        opacity: 1;
    }
}

@keyframes blurAnime02{
    from {
        filter: blur(20px);
        transform: translateY(60px); /* 下から（少し大きく） */
        opacity: 0;
    }
    to {
        filter: blur(0);
        transform: translateY(0);
        opacity: 1;
    }
}


.blur03 {
    animation-name: blurAnime03;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

@keyframes blurAnime03 {
    0% {
        filter: grayscale(100%) blur(15px);
        transform: translateY(60px);
        opacity: 0;
    }


    100% {
        filter: grayscale(0%) blur(0);
        transform: translateY(0);
        opacity: 1;
    }
}


.blur04 {
    animation-name: blurAnime04;
    animation-duration: 1.5s;
    animation-fill-mode:both ;
    animation-timing-function: ease-out;
}

@keyframes blurAnime04 {
    0% {
        filter: grayscale(100%) blur(15px);
        transform: translateY(-50px);
        opacity: 0;
    }


    100% {
        filter: grayscale(0%) blur(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.blurTrigger,
.blurTrigger02,
.blurTrigger03,
.blurTrigger04{
    opacity: 0;
}







/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==========================
  基本ナビゲーション
==========================*/
.m-nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: ; /* 子 li を横並びに */
}

.m-nav > ul > li {
    display: inline-block; /* 横並び */
    position: relative;
    margin-right: 45px;
}

.m-nav > ul > li:last-child {
    margin-right: 0; /* 最後の余白を消す */
}

.m-nav > ul > li > a {
    display: block; /* 縦方向の padding を効かせる */
    text-decoration: none;
    padding: 20px 0;
    letter-spacing: 1px;
    transition: opacity .4s ease-out;
}

.m-nav > ul > li > a:hover {
    opacity: 0.25;
}

/*==========================
  2階層目 second-menu
==========================*/

.m-nav > ul {
    display: flex;
    list-style: none;
    justify-content: center;
    margin: 0;
    padding: 0;
}
/* 2階層目 second-menu */
.second-menu {
    display: block !important;  /* 縦並び確実 */
    flex-direction: column !important;
    position: absolute;
    left: 0;
    top: 100%;
    width: 200px;
    background: #ffffff;
    padding: 0px 5px 10px 5px;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease;
}

/* li 項目も縦積み + animation */
.second-menu li {
    display: block !important;
    opacity: 0;
    transform: translateY(8px);
    animation-name: fadeUp;
    animation-duration: .35s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    animation-play-state: paused;
}

.second-menu li a {
    display: inline;
    padding: 0px 5px; /* これが効く */
    color: #000000;
    text-decoration: none;
}

.m-nav ul li .second-menu li a {
    font-size: 15px !important;
    font-weight: 500; /* 必要なら */
}



/* animation keyframes */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* hoverで表示 + li animation実行 */
.has-child:hover > .second-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.has-child:hover .second-menu li {
    animation-play-state: running;
}

.second-menu li:nth-child(1) { animation-delay: .05s; }
.second-menu li:nth-child(2) { animation-delay: .12s; }
.second-menu li:nth-child(3) { animation-delay: .19s; }
.second-menu li:nth-child(4) { animation-delay: .26s; }

/*==========================
  スマホ対応
==========================*/
@media screen and (max-width:768px){
    /* メインメニュー縦並び */
    .m-nav ul { display: block; }

    /* second-menu は最初非表示、JSで toggle */
    .second-menu {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        visibility: visible;
        opacity: 1;
        transform: none;
        display: none;
        transition: none;
    }

    nav ul li.has-child::before {
        left: 20px;
    }
}



/*========================================
  スマホ（768px以下）
========================================*/
@media screen and (max-width:768px) {

    /* 1階層目も縦積みに */
    .m-nav ul {
        display: block;
    }

    /* second-menu は JS の toggle で動かすためいったん非表示 */
    .second-menu {
        position: relative;
        width: 100%;
        left: 0;
        top: 0;

        visibility: visible;
        opacity: 1;
        transform: none;

        display: none;     /* ← スマホでは最初非表示 */
        transition: none;  /* ← アニメ止める */
    }

    nav ul li.has-child::before {
        left: 20px;
    }
}




/*==================================================
スライダーのためのcss
===================================*/
    /*画像の横幅を100%にしてレスポンシブ化*/
    img{
        width: 100%;
        height: auto;
        vertical-align: ;/*画像の下にできる余白を削除*/
        object-fit: cover;
    }

    /*メイン画像下に余白をつける*/

    .gallery{
        margin:0 0 5px 0;
    }

    .gallery li{
    list-style:none;
    }

    /*矢印の設定*/

    /*戻る、次へ矢印の位置*/
    .slick-prev, 
    .slick-next {
        position: absolute;/*絶対配置にする*/
        z-index: 3;
        top: 50%;
        cursor: pointer;/*マウスカーソルを指マークに*/
        outline: none;/*クリックをしたら出てくる枠線を消す*/
        border-top: 1px solid #ccc;/*矢印の色*/
        border-right: 1px solid #ccc;/*矢印の色*/
        height: 25px;
        width: 25px;
    }

    .slick-prev {/*戻る矢印の位置と形状*/
        left:2.5%;
        transform: rotate(-135deg);
    }

    .slick-next {/*次へ矢印の位置と形状*/
        right:2.5%;
        transform: rotate(45deg);
    }

    /*選択するサムネイル画像の設定*/

    .choice-btn li{
        cursor: pointer;
        outline: none;
        background:;
        width: 25%!important;
        list-style: none;
    }


    .choice-btn li img{
        opacity: 0.4;/*選択されていないものは透過40%*/
    }

    .choice-btn li.slick-current img{
        opacity: 1;/*選択されているものは透過しない*/
    }




/*=== 丸が動いてスクロールを促す ====*/

.scrolldown{
	position:fixed;
	left:50%;
    top:35%;
}

.scrolldown02{
  position:absolute;
  left:50%;
  top:;
}

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
	left:15px;
	bottom:45px;
    /*テキストの形状*/
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: ;
    -webkit-writing-mode:;
    writing-mode: ;
}

.scrolldown02 span{
    /*描画位置*/
	position: absolute;
	left:15px;
	bottom:45px;
    /*テキストの形状*/
	color: #000000;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: ;
    -webkit-writing-mode:;
    writing-mode: ;
}

/* 丸の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:9px;
	height:9px;
	border-radius: 50%;
	background:#fff;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}


.scrolldown02:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:9px;
	height:9px;
	border-radius: 50%;
	background:#000000;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove02 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:95px;}
     100%{bottom:-5px;}
 }

 @keyframes circlemove02{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }


/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:1px;
	height: 100px;
	background:#eee;
}



/* 線の描写 */
.scrolldown02:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:1px;
	height: 50px;
	background:#0e0e0e;
}



.scroll-wrap {
  position: absolute;
  top: 15%;
  left: 0;
  width: 200%;
  display: flex;
  white-space: nowrap;
  opacity: 1;
  transform: translateY(-50%);
  font-size: 80px;
  font-weight: 900;
  pointer-events: none;
}

.scroll-text02 {
  padding-right: 50px; /* 文字間余白 */
  animation: scrollLoop 30s linear infinite;
}

@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}




/*==================================================
dot
===================================*/

.dots {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  height: 150px;
}

.dots span {
  width: 5px;
  height: 5px;
  background: #000000;
  border-radius: 50%;
  opacity: 1;
  animation: fade 1.8s infinite ease-in-out;
}

/* 下向き三角形 */
.dots .triangle {
  width: 0;
  height: 0;
  background: none;
  border-radius: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #000;
}

/* アニメーション遅延：上 → 中 → 下 → 三角 */
.dots span:nth-child(1) { animation-delay: 0s; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }
.dots span:nth-child(4) { animation-delay: 0.6s; }

/* 完全に透明までフェードアウト */
@keyframes fade {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}




    /*==================================================
ページ遷移
===================================*/

/* ------------------------------------
 小円（カーソル）
------------------------------------ */
.hover-circle {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  background: #000;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .25s ease, opacity .25s ease;
  z-index: 9998;
}

/* 波紋（小円 → 大円に繋がる） */
.hover-circle.ripple {
  animation: rippleExpand .6s ease forwards;
}

@keyframes rippleExpand {
  0% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0.4;
  }
  60% {
    transform: translate(-50%, -50%) scale(8);
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, -50%) scale(14);
    opacity: 0;
  }
}

/* ------------------------------------
 ページ遷移 大円
------------------------------------ */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

/* page-transition.css */

.page-transition::before {
  content: "";
  position: absolute;
  /* クリック位置が優先され、指定がない場合は50%が適用される */
  top: var(--y, 50%); 
  left: var(--x, 50%);
  width: 100vmax;
  height: 100vmax;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 1s cubic-bezier(0.5, 0, 0.1, 1), opacity 0.5s linear; /* opacityも追加 */
}

/* クリック → 大円が開く */
.page-transition.active::before {
  transform: translate(-50%, -50%) scale(40);
  /* 開くときはクリック位置から拡大 */
}

/* 読み込み時 → 大円が閉じる */
.page-transition.open {
  /* 親要素でopacityを操作 */
  opacity: 0;
  transition: opacity 0.25s 0s; 
}

.page-transition.open::before {
  /* ここで --x と --y をリセットし、画面中央を基点にする */
  /* これが最も重要 */
  --x: 50%; 
  --y: 50%;

  /* 閉じる時専用のよりドラマチックなイージング（例: 急速に減速） */
  transition: transform 1s cubic-bezier(0.5, 0, 0.1, 1);
  transform: translate(-50%, -50%) scale(0);
}

/* 黒い円（最初は画面全体を覆うサイズ） */
#loader-circle {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300vw;
  height: 300vw;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  transition:
    width 0.8s ease,
    height 0.8s ease,
    top 0.8s ease,
    left 0.8s ease;
}




/*========= ナビゲーションのためのCSS ===============*/


#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	top:0;
    right:0;
	width:40%;
    height: 90vh;/*ナビの高さ*/
	background:rgb(255, 255, 255);
    /*動き*/
	transition: all 0.6s;
    border-left: 3px solid #000;
    border-bottom: 3px solid #000;
    border-radius: 0 0 0 70px;
}

#g-nav.panelactive{
    opacity: 1;
	z-index:999;
}

#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: ;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10% 10%;
}


#g-nav li{
	list-style: none;
    text-align: left;
}

.mini-text{
    /* text-decoration: none; */
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    font-size: 1rem;
    /* margin: 10px 0 10px; */
    top: 35px;
    position: absolute;
}




.mini-text{
    /* text-decoration: none; */
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    font-size: 1rem;
    /* margin: 10px 0 10px; */
    top: 35px;
    position: absolute;
    font-weight: 600;
}

.sub-menu01 li{
    margin-bottom: 5%;
}

.sub-menu02 li{
    margin-bottom: 2%;
}

.sub-menu01 span{
    color: #333;
    /* text-decoration: none; */
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    font-size: 1rem;
    /* margin: 10px 0 10px; */
    top: 80px;
    position: absolute;
}

.sub-menu01-a01{
    font-size:3rem;
    font-weight: 600;
    letter-spacing:0.8px;
}

.sub-menu01-a02{
    font-size:1.1rem;
    font-weight: 600;
}






.sub-menu01 a {
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.5s ease;
}

.sub-menu01 a.fadein {
  opacity: 1;
  transform: translateY(0);
}

.sub-menu01 a:hover {
  opacity: 0.25;
}


.sub-menu01-a01.active {
  position: relative;
  padding-left: 25px; /* 円の分だけ余白 */
}

.sub-menu01-a01.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;   /* 円の大きさ */
  height: 10px;
  background: #000;
  border-radius: 50%;
}



.gn-pr{
    display: inline-block;
    font-weight: 600;
    margin-right: 10%;
}



/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:53px;
	right: 3%;
	cursor: pointer;
    width: 65px;
    height:50px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 10px;
    height: 4px;
    border-radius: 2px;
    width: 100%;
  }

.openbtn span:nth-of-type(1) {
	top:5px;	
}

.openbtn span:nth-of-type(2) {
	top:19px;
}

.openbtn span:nth-of-type(3) {
	top:32px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 55%;
    background-color: #000;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 55%;
    background-color: #000;
}





/*========= ボタンのためのCSS ===============*/
.openbtn02{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:40px;
	right: 2%;
	cursor: pointer;
    width: 50px;
    height:50px;
}
	
/*×に変化*/	
.openbtn02 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 10px;
    height: 3px;
    border-radius: 2px;
    width: 90%;
  }

.openbtn02 span:nth-of-type(1) {
	top:15px;	
}

.openbtn02 span:nth-of-type(2) {
	top:23px;
}

.openbtn02 span:nth-of-type(3) {
	top:31px;
}

.openbtn02.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 55%;
    background-color: #fff;
}

.openbtn02.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn02.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 55%;
    background-color: #fff;
}

/*==768px以下の形状*/

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


  .right {
    flex: 1;
    padding: 0px;
}

  .line-vertical {
    width: 5px;
    height: 125px;
    background: #000;
    transform-origin: top;
    transform: scaleY(0);
    animation: growDown 1s 
ease forwards;
    animation-timeline: lineTimeline;
}

  .headline {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  overflow: hidden;
}


.line-with {
    position: relative;
    height: 1px;
    background: #000;
    width: 100%;
    margin: 35px auto;
}

.line-with-triangle {
    position: relative;
    height: 1px;
    background: #000;
    width: 100%;
    margin: 35px auto;
}

	.m-nav{
        display: none;
    }

    .m-sns{
        display: none;
    }

    .openbtn {
    position: fixed;
    z-index: 9999;
    top: 27px;
    right: 5%;
    cursor: pointer;
    width: 50px;
    height: 50px;
    }


    .openbtn02 {
    position: fixed;
    z-index: 9999;
    top: 5px;
    right: 5%;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

    .location-map iframe{
        width:100%;
        height:400px;
        margin:0 auto;
    }

    .title {
        font-size:0.8rem;
    }

    .title::after, .title::before {
        content: "";
        position: absolute;
        right: 0.25em;
        top: 1.75em;
        width: 2px;
        height: 0.75em;
        background-color: rgb(56, 56, 56);
        transition: all 0.3s;
    }

    .breadcrumbs_area {
        width: 50%;
    }


        .main {
        font-size: 2.5rem;
        letter-spacing: 2px;
        margin-bottom: 45px;
        color: #fff;
        font-weight: 800;
        width: 85%;
    }




    #g-nav {
    position: fixed;
    z-index: -1;
    opacity: 0;
    top: 0;
    right: 0;
    width: 70%;
    height: 85vh;
    background: rgb(255, 255, 255);
    transition: all 0.6s;
    }


    #g-nav.panelactive #g-nav-list {
    position: ;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 15% 5%;
}



    #g-nav02 {
    position: fixed;
    z-index: -1;
    opacity: 0;
    top: 0;
    right: 0;
    width: 90%;
    height: 100vh;
    background:#004e29;
    transition: all 0.6s;
    }


    #g-nav02.panelactive #g-nav-list {
    position: ;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 15% 5%;
}



    .sub-menu01-a01 {
        font-size: 2rem;
    }

    .sub-menu01-a02 {
        font-size: 0.8rem;
        /* line-height: 1.5rem; */
        margin-bottom: 5px;
    }



    .mini-text {
    /* text-decoration: none; */
    display: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    font-size: 1rem;
    /* margin: 10px 0 10px; */
    top: 50px;
    position: absolute;
}


    
}