#kitamae-bune body {
	background-image:url("kitamae-images/DSCF7557.jpg");
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}


.lp-mono div.container{
	max-width:1400px!important;
}

body {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.kitamae06, .kitamae07, .kitamae08{
padding-top:13em!important;
padding-bottom:13em!important;
}

@media (max-width: 767px) {
.kitamae06, .kitamae07, .kitamae08{
padding-top:5em!important;
padding-bottom:5em!important;
}
}

header#lp-mono{
	background: transparent!important;
	position: fixed; /* または sticky */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* transition: padding 0.3s; 動きを滑らかにするなら */
}

header#lp-mono .nav-button span{
	background-color:#FFFF00!important;
}

@media screen and (max-width: 3000px) {
header#lp-mono .nav-button span{
	background-color:#FFFF00!important;
	}
	
header#lp-mono a.nav-button.active span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #FFF;
    border-radius: 2px;
  }	
	
	}

section#kitamae01 div.main-bg{
background-image: url("kitamae-images/kitamae01.png");
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
        z-index:1;
height:90vh;
margin-top: -5em;
}

@media (max-width: 767px) {
section#kitamae01 div.main-bg{
background-image: url("kitamae-images/kitamae01.png");
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
        z-index:1;
height:90vh;

}
}

section#kitamae01 div.main-h1{
  display: flex;
  justify-content: center; /* 左右中央 */
  align-items: center;     /* 上下中央 */
  height: 100vh;           /* 親の高さ（例：画面全体） */
flex-direction: column;
}

#kitamae01 .title-wrapper {
 display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5em;
  margin-top: -5em;
  padding-bottom: 14em;
}


.tate-gaki {
    writing-mode: vertical-rl; /* 縦書き（右から左へ、通常の日本語設定） */
    -ms-writing-mode: tb-rl;   /* IE用 */
    -webkit-writing-mode: vertical-rl;
    
    display: inline-block;
    letter-spacing: 0.1em;     /* 文字の間隔を少し空けるときれいです */
    text-orientation: upright;  /* 文字を正立（回転させない）させる設定 */
}

/* h2全体の調整（必要に応じて） */
#kitamae01 h2 {
    font-weight: 700!important;
    line-height: 1.5;
    padding-bottom:.5em!important;
margin-left: .4em;
font-size:clamp(40px, 8vw, 100px);
}

#kitamae01 .sub-h2 {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
  margin: 0 auto;       
  line-height: 1;     
  width: 1em;
letter-spacing: 0.2em;
  font-size: clamp(16px, 6.0vw, 40px);
font-weight:700;
}

#kitamae01 .sub-title {
font-family:"trajan-pro-3", serif!important;
font-weight:700;
  margin-top: 2.5em;
  margin-bottom: 2.5em;
  font-size:clamp(14px, 4vw, 40px);
white-space: nowrap;
}

#kitamae01 .sub-text,footer p {
  font-weight: 700;
  font-size: 1.5em;
  font-family: "kozuka-mincho-pro", serif!important;
}


footer#lp-mono-footer{
	background-image: url('kitamae-images/kitamae09.png');
	background-position:center;
	background-size: cover;
	background-repeat: no-repeat;
	padding:0!important;
}


.footer-image img {
    width: 100vw;
    height: auto;
}

#mono015{
	background-image: url('images-lp-mono/bg_footer.png');
	background-position:top center;
	background-size: cover;
	background-repeat: no-repeat;
}


.lp-mono-footer-logo{
	float:none!important;
	margin:auto!important;
	text-align: center!important;
}


@media screen and (max-width:767px){
.lp-mono-footer-logo img{
	max-width: 130px;
}
	}


section#footer-last {
  padding: clamp(60px, 15vw, 250px) 50px;
}


@media screen and (max-width: 1110px) {
    footer#lp-mono-footer ul li a {
        background: transparent!important;
        color: #231815;
        font-size: .8em;
        display: block;
        padding: 1em;
        box-sizing: border-box;
        border-top: 1px solid #231815;
    }
}

@media screen and (max-width: 1110px) {
    footer#lp-mono-footer ul li a {
        background: transparent !important;
        color: #231815;
        font-size: .8em;
        display: block;
        padding: 1em;
        box-sizing: border-box;
        border: none!important;
    }
}

footer#lp-mono-footer ul li {
    float: left;
    width: 50%!important;
    margin-left: 0;
}


section h4,section h3,section p,section h2,section h2 span{
	color: var(--text-color)!important;
	text-align:center;
	background-color:inherit!important;
}


#kitamae-bune section#mono01, 
#kitamae-bune section#mono04,
#kitamae-bune section#mono05,
#kitamae-bune section#mono05-1,
#kitamae-bune section#mono06,
#kitamae-bune section#mono07,
#kitamae-bune section#mono08,
#kitamae-bune section#mono012,
#kitamae-bune section#mono015,
#kitamae-bune div.yellow,
#kitamae-bune p,
#kitamae-bune footer,
#kitamae-bune h2
{
  --text-color: #00FFC2!important;
 font-family: "kozuka-mincho-pro", serif!important;
}

section#mono03, 
section#mono013,
div.blue{
  --text-color: #00FFC2!important;
}





section#mono05,section#mono05-1,section#mono06,section#mono07 {
    position: relative;
    display: flex;
}

#kitamae05{
padding-top:13em;
padding-bottom:13em;
background-image: url("kitamae-images/DSCF7557.jpg") !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.inner-bg {
  background-color: rgba(160, 136, 119, 0.75)!important;
padding-top: 1em;
  padding-bottom: 1em;
}

section.kitamae06{
background-image:url("kitamae-images/DSCF4281.jpg")!important;
}

section.kitamae07{
background-image:url("kitamae-images/kitamae07.jpg")!important;
}

section.kitamae08{
background-image:url("kitamae-images/kitamae08.jpg")!important;
}


h2{
	font-family: "trajan-pro-3", serif,!important;
	font-weight: 500!important;
	letter-spacing: 0.4em!important;
	font-size: clamp(24px, 7.0vw, 60px)!important;
}


.h2other{
	font-family: "trajan-pro-3", serif;
	font-weight: 700;
	font-size: clamp(12px, 6.0vw, 19.5px);
	letter-spacing: normal;
	margin-left:-1em;
}


.h2ja{
	font-family: "kozuka-mincho-pro", serif;;
	font-weight: 700;
	font-style: normal;
	font-size: clamp(18px, 6.0vw, 40px);
}


@media screen and (max-width: 767px) {
h2 img {
  width: 80%;
	}
	
	div.vertical-bg{
	position:relative;
	z-index: 1;
	width: 100%;
		height: 50vh;
		overflow: hidden;
}

.vertical-bg img {
    height: 100%!important;
    width: 100%!important;
	object-fit: cover; /* これが重要！画像が歪まずに枠を埋めます */
    object-position: center; /* 画像の中央を基準に配置 */
    display: block;
}

}


div.vertical-bg{
	position:relative;
	z-index: 1;
	width: 100%;
}

.vertical-bg img {
    height: 100%;
    width: stretch;
}

div.vertical-text{
	position:absolute;
	font-size: clamp(18px, 6.0vw, 60px);
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	left:0;
	right:0;
	width:100%;
	height:100%;
}



h3.vertical{
font-family: "kozuka-mincho-pro", serif;
font-weight: 700;
font-style: normal;
letter-spacing: 0.6em;
font-size: clamp(16px, 6.0vw, 40px);
writing-mode: vertical-rl;
text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
margin:0;
}

.sub-title{
font-family: "trajan-pro-3", serif;
    font-weight: 600;
    font-style: normal;
    margin: 0;
    font-size: clamp(14px, 5.0vw, 40px);
    writing-mode: initial;
    letter-spacing: normal;
    margin-top: 0.5em;
}

.sub-title-blue{
	font-family: "trajan-pro-3", serif;
    font-weight: 600;
    font-style: normal;
    margin: 0;
    font-size: clamp(12px, 5.0vw, 30px);
    writing-mode: initial;
    letter-spacing: normal;
    margin-top: 0.5em;
	color: var(--text-color)!important;
}

.artwork{
font-family: "kozuka-mincho-pro", serif;
font-weight: 700;
font-style: normal;
font-size: clamp(14px, 4.0vw, 40px);
white-space:nowrap;
}

.artwork span{
font-family: "kozuka-mincho-pro", serif;
font-weight: 400;
font-style: normal;
font-size: clamp(12px, 4vw, 20px);
}

h3.artwork .title {
  font-size: 1.3em;
  font-weight: 700;
}

.sub-title-text{
	font-family: "trajan-pro-3", serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(14px, 5.0vw, 35px);
    writing-mode: initial;
    letter-spacing: normal;

}

.description{
	font-family: "kozuka-mincho-pro", serif;
	font-size: clamp(12px, 4.0vw, 25px);
font-weight: 400;
font-style: normal;
	letter-spacing: normal;
}

.artwork02{
	font-family: "kozuka-mincho-pro", serif;
font-weight: 700;
font-style: normal;
	font-size: clamp(12px, 4.0vw, 25px);
	letter-spacing: normal;
}

section#mono013 h4,section#mono03 h4,section#mono01 h4{
	font-family: "trajan-pro-3", serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: normal;
	font-size: clamp(15px, 6.0vw, 30px);
	margin-top:1.5em;
}

div.main-wrapper00{
	background-image:url("images-lp-mono/bg00.png");
	background-position: top center;
	background-size: cover;
	background-repeat: repeat-y;
}

div.main-wrapper01{
	background-image:url("images-lp-mono/image004.png");
	background-position: top center;
	background-size: cover;
	background-repeat: repeat-y;
}

section#mono08{
	background-image:url("images-lp-mono/image0013.png");
	background-position:center;
	background-size: cover;
	background-repeat: repeat-y;
}

.bg0014{
	background-image:url("images-lp-mono/image0014.png");
	background-position:center;
	background-size: cover;
	background-repeat: repeat-y;
}

.bg0015{
	background-image:url("images-lp-mono/image0015.png");
	background-position:top center;
	background-size: cover;
	background-repeat: repeat-y;
	padding-bottom: 10em;
}

.bg0028{
	background-image:url("images-lp-mono/image0028.png");
	background-position:top center;
	background-size: cover;
	background-repeat: repeat-y;
	padding-bottom: 10em;
}

.bg0025{
	background-image:url("images-lp-mono/image0025.png");
	background-position:top center;
	background-size: cover;
	background-repeat: repeat-y;
}

.serial-number{
 background-color:rgba( 255, 255, 255, 0.45 );
 margin-top:2em;
 margin-bottom:2em;
}

.serial-number-title{
 color:#000000!important;
 margin:0;
	font-size: clamp(15px, 5.0vw, 30px);
	font-family: "trajan-pro-3", serif;
	font-weight: 400;
}

.serial-number-text{
		font-size: clamp(13px, 4.0vw, 20px);
	font-family: "trajan-pro-3", serif;
	 margin:0;
	line-height: 1;
}

@media screen and (max-width: 767px) {
	.mono01-1,.mono01-2,.mono01-3{
    height:  50vh!important;
    display: flex;
    align-items: center;
    justify-content: center;
	background-repeat: no-repeat;
        width: 100%;
        background-size: cover;
}
	}

@media screen and  (min-width: 768px) {
	.mono01-1,.mono01-2,.mono01-3{
    height:  90vh!important;
    display: flex;
    align-items: center;
    justify-content: center;
	background-repeat: no-repeat;
        width: 100%;
        background-size: cover;
}
}

.inner-wrapper {
    padding-top: 12vh;
    padding-bottom: 18vh;
}

.inner{
	padding-top:14vh;
	padding-bottom:14vh;
}

.mt-14v{
	padding-top:14vh;
}

.mb-14v{
	padding-bottom:14vh;
}

section#mono01 .inner-wrapper img{
	margin:4em;
}

.toukousen-left{
	z-index:1;
	position:absolute;
	top:50;
	right:0;
	opacity: 0.4;
}

@media screen and ( max-width: 767px){
	.toukousen-left{
	z-index:1;
	position:absolute;
	top:50;
	right:0;
	opacity: 0.4;
	max-height: 5vh;
	height:100%;
}
	
	.toukousen-left img{
	max-width:250px;
	object-fit: cover;
	margin-top: -23em;
}
}

.z-2{
	z-index: 2;
	position:relative;
}

.monosolum-wrapper{
    position: relative;
	width: 100%;
	overflow-y: hidden;
}


.monosolum-bg01, .monosolum-bg02, .monosolum-bg03, .monosolum-bg08, .monosolum-bg09, .monosolum-bg010{
    width: 100%;    /* 横幅いっぱい */
    height: 90vh;  /* 適切な高さを指定 */
    background-size: cover;
    background-position: center;
}

@media screen and ( max-width: 767px){
.monosolum-bg01, .monosolum-bg02, .monosolum-bg03, .monosolum-bg08, .monosolum-bg09, .monosolum-bg010{
    width: 100%;    /* 横幅いっぱい */
    height: 50vh!important;  /* 適切な高さを指定 */
    background-size: cover;
    background-position: center;
}
}

.monosolum-bg01{
	background-image:url("images-lp-mono/image001.png");
}

.monosolum-bg02{
		background-image:url("images-lp-mono/image002.png");
}

.monosolum-bg03{
			background-image:url("images-lp-mono/image003.png");
}


.monosolum-bg08{
	background-image:url("images-lp-mono/image0022.png");
}

.monosolum-bg09{
		background-image:url("images-lp-mono/image0023.png");
}

.monosolum-bg010{
			background-image:url("images-lp-mono/image0024.png");
}




.monosolum-title {
    position: absolute; /* 親要素に対して絶対配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;       /* 3枚の画像全体の高さをカバー */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; 
	will-change: transform, opacity; /* opacityも追加 */
	/* ★初期状態：透明で、少し下（50px）に配置 */
    opacity: 0;
    transform: translate3d(0, 50px, 0); 
    
    /* ★CSSアニメーションの設定（ふわんっとさせる質感） */
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s linear;
}

.monosolum-toukousen {
    position: absolute;
  	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* タイトルの下、背景の上に */
    display: flex;
    justify-content: center;
    pointer-events: none;
	will-change: transform;
	margin-top: 42em;
	
}

.monosolum-title.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0); /* 元の位置に戻る */
}

.monosolum-title img {
    max-width: 100%;
    max-height: 150vh;;  /* ★ここが重要！画面の高さ（または画像1枚分程度）に収める */
    object-fit: contain; /* アスペクト比を維持して収める */
    height: auto;
    width: auto;
	margin-top: 5vh;
}

/* 等高線も同様に調整 */
.monosolum-toukousen img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    height: auto;
	opacity: 0.6;
}

.monosolum-bg04, .monosolum-bg05{
    width: 100%;    /* 横幅いっぱい */
    height: 90vh;  /* 適切な高さを指定 */
    background-size: cover;
    background-position: center;
}

.monosolum-bg04{
	background-image:url("images-lp-mono/image005_1.png");
}

.monosolum-bg05{
		background-image:url("images-lp-mono/image005.png");
}

.toukousen-text {
    position: absolute; /* 親要素に対して絶対配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;       /* 3枚の画像全体の高さをカバー */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; 
}

.toukousen-text img {
    max-width: 100%;
    max-height: 80vh;  /* ★ここが重要！画面の高さ（または画像1枚分程度）に収める */
    object-fit: contain; /* アスペクト比を維持して収める */
    height: auto;
    width: auto;
	opacity: 0.6;
}

/* 下へ流れる要素の初期設定 */
.toukousen-text.js-parallax-down {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    will-change: transform;
	margin-top: -15em;
}

.toukousen-text.js-parallax-down img {
    max-width: 100%;
    height: auto;
    /* スクロールで下へ動いた時に画像が切れないよう、少し余裕を持たせるならscaleを調整 */
    transform: scale(1.05); 
    transition: none !important;
}

 .toukousen-yellow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
    pointer-events: none;
    display: flex;
    justify-content: center;
	 align-items: flex-start; /* 上端を基準にして動きを制御 */
	margin-top: 34em;
}



.toukousen-yellow img {
max-width: 100%;
max-height: 80vh; /* ★ここが重要！画面の高さ（または画像1枚分程度）に収める */
object-fit: contain; /* アスペクト比を維持して収める */
height: auto;
width: auto;

} 

@media (min-width: 768px) {
	.toukousen-yellow img {
max-width: 40%;
max-height: 80vh; /* ★ここが重要！画面の高さ（または画像1枚分程度）に収める */
object-fit: contain; /* アスペクト比を維持して収める */
height: auto;
width: auto;
} 
	
}



/* 黄色い等高線の配置設定 */
.toukousen-yellow.js-parallax-down {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 親の長いセクション全体をカバー */
    z-index: 5;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 上端を基準にして動きを制御 */
}

.toukousen-yellow.js-parallax-down img {
    width: 100%;
    max-width: none;
    height: auto;
    /* 初期位置を調整したい場合は margin-top で微調整 */
    margin-top: 10vh; 
}

.youtube-ratio {
  border-top: 100px solid rgba(0, 0, 0, 0.8);
  border-bottom: 100px solid rgba(0, 0, 0, 0.8);
}

@media (max-width: 767px) {
	.youtube-ratio {
	  border-top: 50px solid rgba(0, 0, 0, 0.8);
  border-bottom: 50px solid rgba(0, 0, 0, 0.8);
}
	}


.youtube-ratio iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
height: 40vh;
}


@media (min-width: 768px) {
	.youtube-ratio iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
height: 60vh;
}
}


/* ベースの箱設定 */
.zoom-fade-box {
    position: relative;
    overflow: hidden; /* ズームではみ出る分をカット */

    display: flex;
    align-items: center;
    justify-content: center;
}

/* 背景画像用のレイヤー */
.zoom-fade-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: inherit; /* HTMLのstyle属性から画像を引き継ぐ */
    background-size: cover;
    background-position: center;
    opacity: 0; /* 最初は透明 */
    transform: scale(1.2); /* 最初は少し大きくしておく（ズームアウトの場合） */
    transition: opacity 2.5s ease, transform 6s ease-out; /* ゆっくりズーム */
    z-index: 0;
}

/* 黒場から (#01-1) */
.mono01-1 { background-color: #000; }
/* 白場から (#01-2) */
.mono01-2 { background-color: #fff; }

/* --- アニメーション開始時 --- */
.zoom-fade-box.is-animated::before {
    opacity: 1;
    transform: scale(1); /* 定位置までゆっくりズームアウト */
}

/* 中の文字の演出 */
.zoom-fade-box .artwork, 
.zoom-fade-box .container {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.5s ease 1s, transform 1.5s ease 1s; /* 背景より少し遅れて出す */
}

.zoom-fade-box.is-animated .artwork, 
.zoom-fade-box.is-animated .container {
    opacity: 1;
    transform: translateY(0);
}


/* 共通設定：初期状態は透明 */
.vertical-bg {
    overflow: hidden;
    background-color: transparent;
    transition: background-color 1.5s ease;
	text-align: center;
}

.vertical-bg img {
    opacity: 0;
    transition: opacity 5s ease, transform 2.5s ease;
    transform: scale(1.1); 
	height:auto;
}


/* 黒場からフェードインするセクション*/
#mono05 .vertical-bg, 
#mono05-1 .vertical-bg,
#mono06 .vertical-bg,
#mono07 .vertical-bg,
#mono07 .vertical-bg{
    background-color: #000000;
}

/* 白場からフェードインするセクション 
#mono07 .vertical-bg {
    background-color: #ffffff;
}*/


/* アニメーション実行時の状態 */
.vertical-bg.is-animated {
    background-color: transparent !important;
}

.vertical-bg.is-animated img {
    opacity: 1;
    transform: scale(1); /* 元のサイズにぬるっと戻る */
}

/* --- 白場からフェードイン (#mono011の画像と背景08) --- */
#mono011 .text-center,
.monosolum-bg08 {
    background-color: #ffffff;
    overflow: hidden;
    transition: background-color 1.5s ease;
}

/* --- 黒場からフェードイン (背景09) --- */
.monosolum-bg09,
.monosolum-bg01{
    background-color: #000000;
    overflow: hidden;
    transition: background-color 1.5s ease;
}

/* --- 共通：画像の状態 --- */
#mono011 .text-center img,
.monosolum-bg08,
.monosolum-bg09,
.monosolum-bg01{
    opacity: 0;
    transition: opacity 6s ease, transform 2.5s ease;
    transform: scale(1.05); /* ぬるっと感を出すための拡大 */
}

/* --- アニメーション実行時 (is-animatedがついた時) --- */
.is-animated {
    background-color: transparent !important;
}

/* 背景画像(div)自体にクラスがつく場合と、中のimgに効かせる場合の両方に対応 */
.is-animated,
.is-animated img {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.sns-icon {
  max-width: 40px;
}

/* PC（デフォルト）では非表示にして改行させない */
.hidden-pc {
    display: none;
}

/* 特定の画面幅（例: 768px以下）になったら表示して改行させる */
@media screen and (max-width: 1070px) {
    .hidden-pc {
        display: block; /* または inline */
    }
}

.obfit-cover{
	object-fit: cover;
	height: 100%;
}

/* ヘッダー全体の設定 */
#lp-mono .d-flex.row {
    align-items: center; /* 縦方向を中央に揃える */
    padding: 0 15px;      /* 画面端との余白（必要に応じて調整） */
}

/* アイコン群を右へ押し出し、ハンバーガーメニューと並べる */
.header-btn-icon {
    margin-left: auto;    /* ロゴから離して右側に寄せる */
    margin-right: 15px;   /* ハンバーガーメニューとの間の余白 */
    display: flex;
    align-items: center;
    gap: 15px;            /* アイコン同士の隙間 */
}

.header-btn-icon a {
    display: inline-block;
    line-height: 1;
}

.header-btn-icon img {
    height: 2em;         /* アイコンのサイズ（お好みで調整） */
    width: auto;
    vertical-align: middle;
}

/* ハンバーガーメニュー側の余白をリセット */
#gnav.menu {
    margin-left: 0 !important;
}

.header-btn-icon .lang-link {
    position: relative;
    padding-bottom: 5px; /* 下線とアイコンの間の距離 */
    display: inline-block;
}

/* 下線の基本スタイル（初期状態は透明または幅0） */
.header-btn-icon .lang-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #FEFF30;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

/* 現在の言語（activeクラス）がついた時のスタイル */
.header-btn-icon .lang-link.active::after {
    transform: scaleX(1);
}



@media screen and (min-width: 1112px) {
	.lp-mono-footer-sns li:not(:last-child) {
    margin-right: 0.5em;
}
}

@media screen and (max-width: 1111px) {
footer ul {
  width:auto!important;
}
	.lp-mono-footer-sns li a{
		padding:0.25em!important;
		
	}
}

/* 追加したテキストのスタイリング */
.title-text-overlay {
    margin-top: 20px; /* 画像との間隔 */
    color: #000;      /* サイトのデザインに合わせて調整 */
    font-family: 'Your-Elegant-Font', serif; /* フォント指定 */
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
    /* フェードインなどの演出を画像と合わせる場合 */
    opacity: 1; 
}

.title-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
	align-items: center;
  justify-content: center;
  display: flex;
	font-family: "trajan-pro-3", serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: normal;
  font-size: clamp(15px, 5.0vw, 30px);
	color:#FEFF30;
  text-align: center;
  margin-top: -0.5em;
white-space: nowrap;
}

@media screen and (max-width: 769px) {
	.title-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
	align-items: center;
  justify-content: center;
  display: flex;
	font-family: "trajan-pro-3", serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: normal;
  font-size: clamp(14px, 4.0vw, 30px);
	color:#FEFF30;
  text-align: center;
  margin-top: -0.5em;
white-space: nowrap;
}
}

.op-60 {
  opacity: 0.6;
}

.artist-name-box{
	font-size: clamp(16px, 6.0vw, 40px);!important
	}

@media screen and (max-width: 767px) {
.artist-name-box{
	margin-top:2.3em;
	}
}


#kitamae05 {
    position: relative;
    z-index: 1; /* コンテンツ全体の基準 */
}

/* パララックス画像のコンテナ */
.kitamae-bg-layer {
    position: absolute;
    top: -5em!important;
    left: 0;
    width: 100%;
    height: 120%; /* 動きの遊びを作るために少し高く設定 */
    z-index: -1;   /* コンテンツの背面に配置 */
    pointer-events: none; /* クリックを邪魔しない */
    opacity: 0.5;  /* 必要に応じて透明度を調整 */
}

.kitamae-bg-layer img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 前面のコンテンツが背景より上に来ることを保証 */
.inner-bg, p, .img-fluid {
    position: relative;
    z-index: 2;
}

h2 {
  /* clamp(最小サイズ, 推奨サイズ, 最大サイズ) */
  font-size: clamp(24px, 5vw, 48px);
}

.copy {
  font-family: "kozuka-mincho-pro", serif;
  font-size: clamp(10px, 2vw, 12px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5;
  padding-top: 5vw;
  white-space: nowrap;
  text-align: center;
}

.max-copy {
  max-width: 724px;
  margin: auto;
  display: block;
}

@media screen and (max-width:767px){
.max-copy {
  max-width: 73vw;
  margin: auto;
  display: block;
}

}

#kitamae01 .sub-h2-en {
  writing-mode: horizontal-tb;
  display: inline-block;
  margin: 0 auto;       
  line-height: 1;     
letter-spacing: 0.2em;
  font-size: clamp(16px, 6.0vw, 40px);
font-weight:700;
  white-space: nowrap;
}