@charset "UTF-8";

/* GitHub Pages等で画像に出る枠線を根こそぎ消す */
* {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

img {
    border-style: none !important;
    border: 0 !important;
}

a {
    outline: 0 !important;
    border: 0 !important;
    text-decoration: none !important;
}
/* サイト全体でテキスト選択とドラッグを禁止 */
body {
    -webkit-user-select: none;   /* Safari */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;           
    -webkit-touch-callout: none; /* iOSで長押しメニューを出さない */
}

/* 画像専用の設定 */
img {
    pointer-events: none;        /* クリックや右クリックを無効化 */
    -webkit-user-drag: none;     /* ドラッグによる保存を禁止 */
}

/* このクラスをつけた要素だけはクリックできるようにする */
.allow-click {
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* --- 1. 基本設定 --- */
*, *::before, *::after {
    box-sizing: border-box;
}
/* 全ての画像に対して */
img {
    user-select: none;         /* テキスト選択を禁止 */
    -webkit-user-select: none; /* Safari用 */
    -webkit-touch-callout: none; /* スマホでの長押しメニュー禁止 */
    vertical-align: bottom; /* これで下の謎の隙間が消えます */
    display: block;        /* これも隙間撃退に効果アリです */
}



body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #fffafb;
    overflow-x: hidden;
}

/* --- 2. 土台（ここが全ての基準！） --- */
.stack-box {
    position: relative; /* 文字の配置基準をここに固定 */
    width: 100%;
    display: block; /* 高さを画像に合わせるためにblockに戻します */
    line-height: 0;
	background-color: transparent;/* 画像の下に謎の隙間ができるのを防ぐ */
	font-size: 0;
	margin: 0;
	padding: 0;
}

/* --- 3. 重なる画像レイヤー --- */
.layer1, .layer3, .layer5, .layer4, .layer6, .layer8, .title_3, .contact_base {
    width: 100% !important;
    height: auto !important;
}

/* 背景画像（これが土台の高さを作る） */

.layer1 {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: bottom;
    position: relative !important; 
    z-index: 1;
	margin: 0;
	padding: 0;
	border: none;
	line-height: 0;
	font-size: 0;
}

/* タイトルロゴ（背景にピタッと重ねる） */
.layer3 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 20 !important;
}

.layer4 {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 25 !important;
}

.layer5 {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 23 !important;
}

/*トップ*/
.welcome {
	white-space: nowrap;
    color: white;
    font-size: 3vw;
    position: absolute !important;
    left: 24px !important;
    z-index: 100 !important;
    margin: 0 !important;
    line-height: 1.2;
    top: 15% !important;
    font-family: "lores-21-serif", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* 1文字ずつの設定 */
.welcome span {
    display: inline-block; /* 浮くために必要な設定 */
    animation: huwafuwa 3s ease-in-out infinite;
}
	.welcome span:nth-child(1)  { animation-delay: 0.0s; }
	.welcome span:nth-child(2)  { animation-delay: 0.1s; }
	.welcome span:nth-child(3)  { animation-delay: 0.2s; }
	.welcome span:nth-child(4)  { animation-delay: 0.3s; }
	.welcome span:nth-child(5)  { animation-delay: 0.4s; }
	.welcome span:nth-child(6)  { animation-delay: 0.5s; }
	.welcome span:nth-child(7)  { animation-delay: 0.6s; }
	.welcome span:nth-child(8)  { animation-delay: 0.7s; }
	.welcome span:nth-child(9)  { animation-delay: 0.8s; }
	.welcome span:nth-child(10) { animation-delay: 0.9s; }
	.welcome span:nth-child(11) { animation-delay: 1.0s; }
	.welcome span:nth-child(12) { animation-delay: 1.1s; }
	.welcome span:nth-child(13) { animation-delay: 1.2s; }
	.welcome span:nth-child(14) { animation-delay: 1.3s; }
	.welcome span:nth-child(15) { animation-delay: 1.4s; }
	.welcome span:nth-child(16) { animation-delay: 1.5s; }
	.welcome span:nth-child(17) { animation-delay: 1.6s; }
	.welcome span:nth-child(18) { animation-delay: 1.7s; }
	.welcome span:nth-child(19) { animation-delay: 1.8s; }

@keyframes huwafuwa {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.4em); } /* 浮き具合（お好みで調整） */
}


.helloguys {
    color: #fcd9e0;
    position: absolute !important;
    top: 10% !important;
    right: 5% !important;
    z-index: 1000 !important;
	font-family: "avenir-lt-pro", sans-serif;
font-weight: 300;
font-style: italic;
	font-size: clamp(8px, 1.6vw, 50px);
	white-space: nowrap; /* 折り返し防止 */
}
.helloguys span {
    display: inline-block;
    animation: hellotereren 4s ease-in-out infinite;
}

/* 1文字ずつの遅延設定 (Hello, guys! の11文字分) */
.helloguys span:nth-child(1)  { animation-delay: 0.0s; } /* H */
.helloguys span:nth-child(2)  { animation-delay: 0.1s; } /* e */
.helloguys span:nth-child(3)  { animation-delay: 0.2s; } /* l */
.helloguys span:nth-child(4)  { animation-delay: 0.3s; } /* l */
.helloguys span:nth-child(5)  { animation-delay: 0.4s; } /* o */
.helloguys span:nth-child(6)  { animation-delay: 0.5s; } /* , */
.helloguys span:nth-child(7)  { animation-delay: 0.6s; } /* (スペース) */
.helloguys span:nth-child(8)  { animation-delay: 0.7s; } /* g */
.helloguys span:nth-child(9)  { animation-delay: 0.8s; } /* u */
.helloguys span:nth-child(10) { animation-delay: 0.9s; } /* y */
.helloguys span:nth-child(11) { animation-delay: 1.0s; } /* s */
.helloguys span:nth-child(12) { animation-delay: 1.1s; } /* ! */

/* アニメーションの内容（共通なら1つ書いてあればOK） */
@keyframes hellotereren {
    0% { transform: translateY(0); }
    5% { transform: translateY(-0.2em); } /* 少し高さを抑えめに調整しました */
    10% { transform: translateY(0); }
    100% { transform: translateY(0); }
}
/* SNSlinks */
.sns_links {
    color: white;
    position: absolute !important;
    top: 26.5% !important;    /* これは上から配置 */
    left: 3% !important;
	font-size: clamp(8px, 1vw, 50px);
	font-family: "avenir-lt-pro", sans-serif;
font-weight: 150;
font-style: italic;
	line-height: 1.5;
	z-index: 30;
	text-decoration: none !important; /* 下線を消す */
}
.line_C {
	margin-bottom: 1.2vw;
}
.top_links {
	color: #ffcfdd;
    position: absolute !important;
    top: 14.5% !important;
    right: 2.5% !important;
	font-size: clamp(10px, 1.1vw, 50px);
	font-family: 'kodenma';
	line-height: 1.5;
	z-index: 3000;}

.top_links a, 
.top_links a:visited, 
.top_links a:hover, 
.top_links a:active {
    color: #ffcfdd !important; /* 文字色を強制固定 */
    text-decoration: underline; /* 下線を常に表示（不要ならここをnoneに） */
}
.top_links a:hover {
    opacity: 0.8;
}



/*ハートボタン横スライド*/
	.right_side_heart {
			position: absolute;
		right: 0;
		width: 60.248%;
		height: 110px;
		z-index: 1000 !important;
		display: flex;
		justify-content: center;
		top: 25%;
	}
	.heart_item {
		display: flex;
		flex-direction: column;/*縦に並べる*/
		align-items: center;
		margin: 0 2.4vw;
		flex-shrink: 0;
		position: relative;
		z-index: 100;
	}
	.heart_text {
		font-size: clamp(8px, 0.8vw, 11px);
		margin-bottom: 5px;
		font-family: 'kodenma';
		color: #FFA4C1;
	}
	.heart_icon {
		width:  7.2vw;
		height: auto;
		pointer-events: auto !important; /* 画像のクリックを有効にする */
		cursor: pointer !important;                 /* マウスを乗せた時に指マークにする */
		position: relative;
		z-index: 1002;
	}
	.heart_track {
		display: flex;
		width: max-content;
	}
	.heart_slider {
		position: relative;
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		padding: 100px 0;
		margin-top: -100px;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.heart_link {
		position: relative;
		z-index: 1001 !important;
		display: inline-block;
		pointer-events: auto !important;
	}
/* 1ページ目のハートと3ページ目のハート両方に適用 */
.heart_icon:hover, 
.heart_icon_3:hover {
    animation: purun_mini 0.6s ease-in-out 1 !important;
    display: inline-block !important;
    transform-origin: center bottom;
    cursor: pointer;
}

/* リンク（aタグ）自体にマウスが乗った時も中身を動かす */
.heart_link:hover .heart_icon,
.heart_link_3:hover .heart_icon_3 {
    animation: purun_mini 0.6s ease-in-out 1 !important;
    display: inline-block !important;
    transform-origin: center bottom;
}


/*2ページ目*/
/* SNSlinks */
.sns_links {
    color: white;
    position: absolute !important;
    top: 26.5% !important;    /* これは上から配置 */
    left: 3% !important;
	font-size: clamp(6px, 1vw, 50px);
	font-family: "avenir-lt-pro", sans-serif;
font-weight: 150;
font-style: italic;
	line-height: 1.5;
	z-index: 30;
	text-decoration: none !important; /* 下線を消す */
}
.line_C {
	margin-bottom: 1.2vw;
}


.layer6 {
	position: absolute !important;
	top: 16.7% !important;
	left: 0 !important;
	bottom: auto;
	z-index: 22 !important;

}
.right_side_all {
	position: absolute;
	right: 0;
	width: 61%;
	z-index: 30;
	display: flex;
	justify-content: flex-start;
	top: 16.8%;
}
.aboutme {
	position: relative;
	margin-left: 5%;
	width: 50%;
	height: auto;
	top: 0;	
}

/* 親要素：位置を決める */
.right_side_profile_group {
    position: absolute;
    right: 0;
    width: 61%;
    z-index: 30;
    top: 20.5%; /* まとめて配置 */
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: flex-start;
}

/* 日本語の設定 */
.pro {
    font-size: clamp(8px, 1.2vw, 50px);
    font-family: 'kodenma';
    color: #ffc2d1;
    line-height: 1.1;
    margin-left: 5%;
    margin-bottom: 0.5vw; /* これで英語との隙間が作れる！ */
}

/* 英語の設定 */
.proeng {
    font-size: clamp(8px, 1.2vw, 50px);
    font-family: "lores-21-serif", sans-serif;
    color: #ffc2d1;
    line-height: 1.1;
    margin-left: 5%;
}

.right_side_links2 {
	position: absolute;
	right: 0;
	width: 61%;
	z-index: 30;
	display: flex;
	justify-content: flex-start;
	top: 22%;
}
.links2 {
	position: relative;
	font-size: 5.7vw;
	font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 600;
font-style: normal;
	color: #fcd9e0;
	z-index: 1000;
	margin-left: 5%;
	top: 0;
}

.page2_rightside {
	position: absolute;
	right: 0;
	width: 61%;
	z-index: 30;
	display: flex;
	justify-content: flex-start;
	top: 30.5%;
}
.page2_check_me {
	position: relative;
	font-size: 4.5vw;
	font-family: "lores-21-serif", sans-serif;
    font-weight: 400;
    font-style: normal;
	color: #fcd9e0;
	z-index: 1000;
	margin-left: 42%;
	top: 0;
}

.page2_check_me a, 
.page2_check_me a:visited, 
.page2_check_me a:hover, 
.page2_check_me a:active {
    color: #fcd9e0 !important; /* 文字色を強制固定 */
    text-decoration: none; /* 下線を常に表示（不要ならここをnoneに） */
}
/* マウスを乗せた時に「ぷるん」とさせる */
.page2_check_me a:hover {
    /* 以前作ったぷるんアニメーションを再利用 */
    animation: purun_mini 0.6s ease-in-out 1 !important;
    
    /* 動きを反映させるために必要 */
    display: inline-block;
    
    /* 軸を足元に固定 */
    transform-origin: center bottom;
    
    /* ホバー時の見た目（少し明るくするなどお好みで） */
    opacity: 0.8;
}

.right_side_myfave {
	position: absolute;
	right: 0;
	width: 61%;
	z-index: 30;
	display: flex;
	justify-content: flex-start;
	top: 28%;
}
.myfave {
	position: relative;
	font-size: 5.7vw;
	font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 600;
font-style: normal;
	color: #fcd9e0;
	z-index: 1000;
	margin-left: 30%;
	top: 0;
	white-space: nowrap;}
.myfave span {
    display: inline-block;
    /* 4秒周期で動く（動き自体は一瞬） */
    animation: tereren 4s ease-in-out infinite;
}
@keyframes tereren {
    0% { transform: translateY(0); }
    5% { transform: translateY(-0.3em); } /* 跳ね上がる */
    10% { transform: translateY(0); }   /* 戻る */
    100% { transform: translateY(0); }  /* 残りの時間は静止 */
}
.myfave span:nth-child(1)  { animation-delay: 0.0s; }
.myfave span:nth-child(2)  { animation-delay: 0.1s; }
.myfave span:nth-child(3)  { animation-delay: 0.2s; } /* スペース */
.myfave span:nth-child(4)  { animation-delay: 0.3s; }
.myfave span:nth-child(5)  { animation-delay: 0.4s; }
.myfave span:nth-child(6)  { animation-delay: 0.5s; }
.myfave span:nth-child(7)  { animation-delay: 0.6s; }
.myfave span:nth-child(8)  { animation-delay: 0.7s; } /* スペース */
.myfave span:nth-child(9)  { animation-delay: 0.8s; }
.myfave span:nth-child(10) { animation-delay: 0.9s; }
.myfave span:nth-child(11) { animation-delay: 1.0s; }
.myfave span:nth-child(12) { animation-delay: 1.1s; }
.myfave span:nth-child(13) { animation-delay: 1.2s; }

.right_side_scroll {
	position: absolute;
	right: 0;
	width: 61%;
	z-index: 30;
	display: flex;
	justify-content: flex-start;
	top: 27.5%;
}
.scroll_guide {
	position: relative;
	font-size: clamp(8px, 1.1vw, 50px);
	font-family: 'kodenma';
	color: #FFA4C1;
	z-index: 1000;
	margin-left: 5%;
	top: 0;}

/*3ページ*/
/*3ページ目*/
.whats {
	position: relative;
	font-size: 5.7vw;
	font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 600;
font-style: normal;
	color: #fcd9e0;
	z-index: 1000;
	top: 0;
}

.new {
	position: relative;
	font-size: 5.7vw;
	font-family: 'kodenma';
	color: #fcd9e0;
	z-index: 1000;
	top: 0;
}
	
.right_side_whatsnew {
	position: absolute;
	right: 0;
	width: 61%;
	height: auto;
	z-index: 30;
	display: flex;
	justify-content: center;
	top: 34%;
	
}
.title_3 {
    position: absolute;
    top: 33.4% !important;
    left: 0 !important;
    z-index: 3000 !important;}

.fanworks_title {
	position: absolute;
    /* leftを一度リセットしてから再設定 */
    right: auto !important; 
    width: 22%; /* サイズを微調整 */
    height: auto;
    z-index: 5000 !important; /* 他のレイヤーより確実に前に出す */
    left: 1.5% !important;  /* 左からの位置 */
    top: 38% !important;  /* 上からの位置（画像に合わせて調整） */
}

.list_3 {
	color: #fcd9e0;
    position: absolute !important;
    top: 40% !important;
    left: 3% !important;
	font-size: clamp(6px, 1vw, 50px);
	font-family: "avenir-lt-pro", sans-serif;
font-weight: 100;
font-style: italic;
	line-height: 1.5;
	z-index: 30;}

.original_title {
	position: absolute;
    /* leftを一度リセットしてから再設定 */
    right: auto !important; 
    width: 19%; /* サイズを微調整 */
    height: auto;
    z-index: 5000 !important; /* 他のレイヤーより確実に前に出す */
	left: 18% !important;  /* 左からの位置 */
    top: 43.5% !important; /* Fanworksの下に来るように調整 */
}
.list_3_original {
	color: #fcd9e0;
	font-size: clamp(6px, 1vw, 50px);
	font-family: "avenir-lt-pro", sans-serif;
	font-weight: 100;
	font-style: italic;
	line-height: 1.5;
		position: absolute;
		/* leftを一度リセットしてから再設定 */
		right: auto !important; 
		width: 18%; /* サイズを微調整 */
		height: auto;
		z-index: 5000 !important; /* 他のレイヤーより確実に前に出す */
		left: 20% !important;  /* 左からの位置 */
		top: 45.5% !important; /* Fanworksの下に来るように調整 */}


.maste {
	position: absolute !important;
	top: 47.5% !important;
	left: 23%;
	bottom: auto;
	z-index: 50;
	width: 16vw;}

/*ハートボタン3ページ目*/
.right_side_heart_3 {
			position: absolute;
			right: 3%;
			width: auto;
			top: 36.5%; /* 位置はここで調整 */
			height: auto;
			z-index: 6000 !important;
			display: flex;
			flex-direction: column; /* 縦に並べる */
			align-items: center;    /* センター揃え */
			justify-content: center;}
.heart_item_3 {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 2.4vw; /* ハート同士の上下の隙間 */
			position: relative;
			z-index: 6001;
		}
.heart_text_3 {
			font-size: clamp(8px, 0.8vw, 11px);
			margin-bottom: 5px;
			font-family: 'kodenma';
			color: #FFA4C1;}
.heart_icon_3 {
			width: 7.2vw;
			height: auto;
			pointer-events: auto !important;
			cursor: pointer !important;
		}
.heart_link_3 {
			display: inline-block;
			pointer-events: auto !important;
		}

.heart_text_3 a, 
.heart_text_3 a:visited, 
.heart_text_3 a:hover, 
.heart_text_3 a:active {
		color: #FFA4C1 !important; /* 文字色を強制固定 */
		text-decoration: none; /* 下線を常に表示（不要ならここをnoneに） */
	}



.top_links a:hover {
		opacity: 0.8;
	}

@keyframes dokidoki {
    0%   { scale: 1; }
    5%   { scale: 1.15; } /* 1回目のドクッ（少し大きく） */
    10%  { scale: 1.05; } /* 少し戻る */
    15%  { scale: 1.25; } /* 2回目のドクン！（もっと大きく） */
    20%  { scale: 1; }    /* 完全に元に戻る */
    100% { scale: 1; }    /* 残りの時間は静止（これで不定期感を出す） */
}
.il_01 {
	position: absolute;
	z-index: 2;
	right: 6%;
	top: 32.5%;
	width: 14%;
	opacity: 0.5;
	/* 4秒に1回、ドクドクさせる */
    animation: dokidoki 4s ease-in-out infinite;
    /* 動きの軸を中央にする */
    transform-origin: center;
}
.il_02 {
	position: absolute;
	z-index: 5500;
	right: 46%;
	top: 34.5%;
	width: 15%;
	
	  /* アニメーション時間はそのまま、中身を修正 */
    animation: fuwa_hikari 5s ease-in-out infinite;
    /* will-changeはここに1回書くだけでOKです */
    will-change: transform;
}
/* il_03, 04 周りの線を徹底的に殺す設定 */
.il_03, .il_04 {
    position: absolute;
    z-index: 2;
    /* 枠線・背景・影をすべてリセット */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    /* 下にできる隙間を消す */
    display: block;
    vertical-align: bottom;
}

.il_03 {
    right: 50%;
    top: 45%;
    width: 12%;
}

.il_04 {
    right: 3%;
    top: 45%;
    width: 26%;
}

/*4ページ*/
.title_4 {
    position: absolute;
    top: 50.1% !important;
    left: 0 !important;
    z-index: 3000 !important;
	width: 100%;
	height: auto;}

.right_side_closet_text {
			position: absolute;
		right: 0;
		width: 60.428%;
		height: 30vw;
		z-index: 1000 !important;
		display: flex;
		justify-content: flex-start;
		top: 62%;
	}
.my_fave_looks {
	font-family: "lores-21-serif", sans-serif;
    font-weight: 400;
    font-style: normal;
	color: #abc5ce;
	position: relative;
	right: -5%;
	font-size: 6vw;
	
}


.about_closet {
	font-family: "lores-21-serif", sans-serif;
    font-weight: 400;
    font-style: normal;
	color: black;
	line-height: 1.2;
	vertical-align: baseline;
	font-size: clamp(8px, 1vw, 50px);
	width: 15%;           /* ここがイラレのテキストボックスの横幅に相当 */
    white-space: normal;    /* 自動改行を許可 */
	
	position: absolute;
	right: auto !important;
	bottom: 34% !important;
	left: 3% !important;
	z-index: 50;
	display: inline-block;
}
.my_little_wardraobe {
	font-size: clamp(10px, 1.4vw, 50px);
}

/*服横スライド*/
	.right_side_closet {
			position: absolute;
		right: 0;
		width: 60.428%;
		height: 30vw;
		z-index: 1000 !important;
		display: flex;
		justify-content: center;
		bottom: 37%;
	}
@media screen and (max-width: 480px) {
    .right_side_closet {
        top: 56% !important; /* スマホで見ながら数値を微調整 */
    }
}

	.mc_icon {
		width:  auto;
		height: 30vw;
		pointer-events: auto !important; /* 画像のクリックを有効にする */
		cursor: pointer !important;                 /* マウスを乗せた時に指マークにする */
		position: relative;
		z-index: 1002;
	}
	/* --- 修正版 mc_track --- */
.mc_track {
    display: flex;
    width: max-content;
    gap: 5vw;
    /* PCはゆったり 60秒 */
    animation: loop-scroll 60s linear infinite;
    
    /* iPad/スマホの描画バグ防止 */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 2. スマホ（画面幅 480px 以下）の時だけ速度を上書き */
@media screen and (max-width: 480px) {
    .mc_track {
        /* スマホは距離が短いので、20s〜30sくらいが「きもくない」速さになります */
        animation: loop-scroll 25s linear infinite; 
    }
}
/* 3. iPadなどの中間サイズも速くしたい場合はここも追加 */
@media screen and (min-width: 481px) and (max-width: 1024px) {
    .mc_track {
        animation: loop-scroll 35s linear infinite;
    }
}

@keyframes loop-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* -50% だと隙間1つ分ズレて消えることがあるので、
           もしガタつくなら画像1セット分の正確な距離が必要ですが、
           まずはこれで滑らかになるはずです */
        transform: translateX(-50%);
    }
}
	.mc_slider {
    position: relative;
    width: 100%;
    /* overflow-x: scroll が animation と喧嘩してガタつくので hidden にします */
    overflow-x: hidden; 
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* 不要なマージンをカット */
    margin-top: 0; 
}
	.mc_link {
		position: relative;
		z-index: 1001 !important;
		display: inline-block;
		pointer-events: auto !important;
	}
	
.back_stars_4 {
	position: absolute;
	top: 60%;
	z-index: 4;
	left: auto;
	right: -10%;
	width: 35%;
	height: auto;
	mix-blend-mode: multiply;
	opacity: 0.3;
}

.stars_4page {
	position: absolute;
	z-index: 3000;
	top: 47%;
	width: 100%;
	right: 0;
	opacity: 0.5;
}

/*5ページ*/
.title_5 {
    position: absolute;
    top: 66.8% !important;
    left: 0 !important;
    z-index: 3000 !important;
	width: 100%;
	height: auto;}

.right_side_top5 {
   	position: absolute;
    width: 60.5%;
	height: auto;
	right: 0;
    display: flex;           /* 横並びではなくFlexボックスにする */
    flex-direction: column;  /* 中身を「縦」に並べる */
    align-items: center;     /* 中身を「水平方向の中央」に寄せる */
    justify-content: center;
	z-index: 30;
	top: 66.7%;
	pointer-events: none;
}
.recent {
	font-size: 5.4vw;
	font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 600;
font-style: normal;
	color: #eae1da;
	order: 0; margin-bottom: 2.2vw;
}
.live_title {
	font-family: "lores-21-serif", sans-serif;
    font-weight: 400;
    font-style: normal;
	color: #dbccc3;
	position: relative;
	font-size: 3.5vw;
	order: 1; margin-bottom: 1.8vw;
}
.live_about {
	font-family: 'kodenma';
	font-size: clamp(8px, 1.1vw, 50px);
	color: #dbccc3;
	order: 2;
	margin-bottom: 2.2vw;
}
.live_im {
	position: relative;
	width: 55%;
	height: auto;
	order: 3;
	margin-bottom: 1.7vw;

}
.live_com {
	font-family: 'kodenma';
	font-size: clamp(8px, 1.2vw, 50px);
	color: #dbccc3;
	order: 4;
	margin-bottom: 0.8vw;
}

.read_more {
	font-family: 'kodenma';
	font-size: clamp(8px, 1.1vw, 50px);
	color: #dbccc3;
	order: 5;
}

.live_list {
    color: black;
    position: absolute !important;
    top: 79% !important;    /* これは上から配置 */
    left: 3% !important;
	font-size: clamp(6px, 1vw, 50px);
	font-family: "avenir-lt-pro", sans-serif;
font-weight: 150;
font-style: italic;
	line-height: 1.5;
	z-index: 30;
	text-decoration: none !important; /* 下線を消す */
}
.line_E {
	margin-bottom: 1.2vw;
}



/*コンタクト*/
/* --- Contact全体の設定 --- */
.contact_base {
    position: relative !important;
    z-index: 54 !important;
    width: 100% !important;
    display: block;
}

.contact {
    font-family: "itc-avant-garde-gothic-pro", sans-serif;
    font-weight: 200;
    font-style: italic;
    font-size: 10vw;
    color: black;
    position: absolute;
    top: 5%;
    left: 10%;
    z-index: 105;
}

.email {
    font-family: "itc-avant-garde-gothic-pro", sans-serif;
    font-weight: 200;
    font-style: italic;
    font-size: 4.7vw;
    position: absolute;
    top: 28%;
    left: 6%;
    z-index: 104;
}

.email a {
    color: black !important;
    text-decoration: none;
}

/* --- 注意書きグループ：ここで位置を固定 --- */
.chui_group {
    position: absolute;
    top: 46%;
    left: 10%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.chui {
    color: black;
    font-family: "avenir-lt-pro", sans-serif;
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    font-size: clamp(8px, 1.2vw, 50px);
    /* 英語と日本語の間隔：PCで1.1vw、スマホ最小0.5vw */
    margin-bottom: clamp(0.5vw, 1.1vw, 20px); 
}

.chui_jp {
    color: black;
    font-family: 'kodenma';
    line-height: 1.5;
    font-size: clamp(8px, 1.2vw, 50px);
    /* 日本語だけ少し右にずらす（元々の指定 left: 15% に合わせる） */
    margin-left: 5vw; 
	margin-bottom: clamp(1vw, 2vw, 40px);
}

.back_top {
	position: absolute;
	margin-left: 0; /* 中央揃えにするのでマージンは消す */
	left: 50%;
	font-size: clamp(8px, 1.1vw, 50px);
    font-family: 'kodenma';
    color: #FFA4C1;
	z-index: 3000;
}
.back_top a, 
.back_top a:visited, 
.back_top a:hover, 
.back_top a:active {
    color: #FFA4C1 !important; /* 文字色を強制固定 */
}
.back_top a:hover {
    opacity: 0.8;
}


/*スライダー*/
.image-slider {
    position: absolute;
    width: 61%;
	height: auto;
	right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
	z-index: 3001;
	top: 37%;
	pointer-events: none;
}
.slider-images {
    position: relative;
    width: 60%;
	min-width: 180px;
    height: auto;
	pointer-events: auto;
    /* 画像の縦横比に合わせて調整 */
	overflow: hidden; /* ←追加 */
}
.slider-image {
	/* --- 縁の線を消す設定 --- */
    border: none !important;        /* 枠線を完全に消す */
    outline: none !important;       /* クリックした時の線を消す */
    -webkit-user-drag: none;        /* ドラッグ禁止を再徹底 */
	
    width: 100%;
    height: auto;
	position: absolute; /* ←追加 */
	opacity: 0; /* ←追加 */
    transition: opacity 3s ease; /* ←追加(滑らかさの秒数) */
	object-fit: contain; /* ←画像を枠内に収める */
	display: block; /* ←戻す */
}
.slider-image.active {
    display: block;
	opacity: 1; /* ←追加 */
    position: relative; /* ←追加 */
}
.slider-arrow {
    background: transparent;
    border: none;
    font-size: 2.6vw;
    color: #ffc2d1;
	font-family: 'kodenma';
    cursor: pointer;
    padding: 10px 20px;
    margin: 0 20px;
    border-radius: 50%;
    z-index: 100;
	pointer-events: auto;
	transition: transform 0.3s ease; /* ←アニメーションを滑らかに */
}
.slider-arrow:hover {
    transform: scale(1.2); /* ←1.2倍に拡大(お好みで調整可能) */
}
.slider-dots {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
	pointer-events: auto;
	z-index: 100; /* ←追加 */
}
.dot {
    width: 0.6vw;
    height: 0.6vw;
    background: #ddd;
    cursor: pointer;
	border-radius: 50%; /* ←これで丸くなる */
}
.dot.active {
    background: #fcd9e0;
}

/*デコレーション*/
.deco_1 {
    position: absolute;
    z-index: 10;
    top: 13%;
    right: -5%;
    
	font-family: 'kodenma';
    color: white;
    font-size: 10vw;
    margin: 0;
    line-height: 1;

    /* アニメーション時間はそのまま、中身を修正 */
    animation: fuwa_hikari 5s ease-in-out infinite;
    /* will-changeはここに1回書くだけでOKです */
    will-change: transform;
}

.deco_2 {
    position: absolute;
    z-index: 10;
    top: 0.5%;
    left: -5%;
    
	font-family: 'kodenma';
    color: white;
    font-size: 5vw;
    margin: 0;
    line-height: 1;

    /* アニメーション時間はそのまま、中身を修正 */
    animation: fuwa_hikari 5s ease-in-out infinite;
    /* will-changeはここに1回書くだけでOKです */
    will-change: transform;
}

.deco_3 {
    position: absolute;
    z-index: 10;
    top: 17%;
    left: 72%;
    
	width: 6%;
	height: auto;

    /* アニメーション時間はそのまま、中身を修正 */
    animation: fuwa_hikari 5s ease-in-out infinite;
    /* will-changeはここに1回書くだけでOKです */
    will-change: transform;
}

.deco_4 {
    position: absolute;
    z-index: 10;
    top: 21%;
    left: 2%;
    
	font-family: 'kodenma';
    color: white;
    font-size: 4vw;
    margin: 0;
    line-height: 1;

    /* アニメーション時間はそのまま、中身を修正 */
    animation: fuwa_hikari 5s ease-in-out infinite;
    /* will-changeはここに1回書くだけでOKです */
    will-change: transform;
}

.deco_5 {
    position: absolute;
    z-index: 10;
    top: 85%;
    right: 4%;
    
	font-family: 'kodenma';
    color: white;
    font-size: 6vw;
    margin: 0;
    line-height: 1;

    /* アニメーション時間はそのまま、中身を修正 */
    animation: fuwa_hikari 5s ease-in-out infinite;
    /* will-changeはここに1回書くだけでOKです */
    will-change: transform;
}

.deco_6 {
    position: absolute;
    z-index: 10;
    top: 48%;
    left: 48%;
    
	width: 5%;
	height: auto;
	transform: rotate(-10deg);
    /* アニメーション時間はそのまま、中身を修正 */
    animation: fuwa_hikari 5s ease-in-out infinite;
    /* will-changeはここに1回書くだけでOKです */
    will-change: transform;
}
.deco_7 {
    position: absolute;
    z-index: 10;
    top: 30%;
    left: 44%;
    
	width: 5%;
	height: auto;
    /* アニメーション時間はそのまま、中身を修正 */
    animation: fuwa_hikari 5s ease-in-out infinite;
    /* will-changeはここに1回書くだけでOKです */
    will-change: transform;
}
.deco_8 {
    position: absolute;
    z-index: 10;
    top: 32.3%;
    left: 3%;
    
	width: 5%;
	height: auto;
}
.deco_9 {
    position: absolute;
    z-index: 10;
    top: 20%;
    left: 90%;
    
	width: 5%;
	height: auto;
	transform: rotate(30deg);
}
.deco_10 {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 35%;
    
	width: 3%;
	height: auto;
}
.deco_11 {
    position: absolute;
    z-index: 10;
    top: 90%;
    left: 80%;
    
	width: 3%;
	height: auto;
}

/* おとなしめの「ぷるん」動き */
@keyframes purun_mini {
  0%   { transform: scale(1.0, 1.0); }
  20%  { transform: scale(1.05, 0.95); } /* 横に少しぷにっと広がる */
  40%  { transform: scale(0.98, 1.05); } /* 縦に少しだけ伸びる */
  60%  { transform: scale(1.02, 0.98); } /* 小さく跳ね返る */
  100% { transform: scale(1.0, 1.0); }   /* 元に戻る */
}

/* JSで付与されるクラス */
.is-shaking {
  /* 秒数を少し短く（0.4秒）して、キレを良くします */
  animation: purun_mini 0.4s ease-in-out 1 !important;
  /* 念のため動きの軸を下に固定（地面に置いてある感じが出る） */
  transform-origin: center bottom;
}

@keyframes fuwa_hikari {
    /* 0%から100%まで、text-shadowをすべて同じ値に固定します */
    0%, 50%, 100% {
        text-shadow: 
            0 0 20px #fff,
            0 0 40px #fff,
            0 0 60px #fcd9e0;
    }
    
    /* 動き(transform)の差分だけを残します */
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.8vh);
    }
}


/*フォント*/
@font-face {
	font-family: 'kodenma';
	src: url('KH-Dot-Kodenmachou-16.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* PNGの四角い枠を完全に抹殺する設定 */
img, 
a img, 
.heart_icon, 
.heart_icon_3, 
.slider-image, 
.il_03, 
.il_04 {
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
    /* 画像を囲むリンクの変な装飾も消す */
    text-decoration: none !important;
}

/* リンク自体の枠も消す */
a, a:hover, a:active, a:focus {
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

/* 1. スライダーとイラストの直接リセット */
.slider-image, 
.il_03, 
.il_04,
.slider-images,
.image-slider {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
    -webkit-appearance: none;
    /* 画像自体の「角」に出る謎の線を消す */
    -webkit-user-drag: none;
}

/* 2. 画像を囲んでいる「すべてのリンク」に対するリセット */
/* a:has を使わず、aタグ全体と、aの中にあるimgの両方を叩きます */
a {
    outline: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

a img {
    border: none !important;
    outline: none !important;
}

/* 3. それでも消えない「青い枠」や「ドット線」を強制削除 */
:focus {
    outline: none !important;
}

::-moz-focus-inner {
    border: 0 !important;
}

.slider-images {
    overflow: hidden !important; /* はみ出た枠を切り落とす */
}

.slider-image {
    width: calc(100% + 2px) !important; /* 左右1pxずつ大きくする */
    margin: -1px !important;            /* 位置を戻して枠を外に追い出す */
    max-width: none !important;
}