@charset "UTF-8";
/* CSS Document */

/* ============================================================
   基本設定
   ============================================================ */

html {
	scroll-behavior: auto; /* smoothを削除してJSで完全制御 */
	font-size: 16px; /* 基準：1rem = 16px */
}

body {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	background: #EDEDE8;
	background-color: transparent;
	background-image: -webkit-radial-gradient(#EAEAE5 36%, transparent 37%);
	background-image: radial-gradient(#EAEAE5 36%, transparent 37%);
	background-position: 0 0, 15px 15px;
	background-size: 4px 4px;
}

img {
	width: 100%;
	height: auto;
	vertical-align: bottom; 
	display: block
}

a {
	text-decoration: none;
}

a:hover img {
	opacity: 0.85;
	filter: alpha(opacity=85);
}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ============================================================
   背景画像
   ============================================================ */

.site-bg {
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* ============================================================
   メインコンテナ（中央寄せ・幅制限）
   ============================================================ */

.lp-container {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	background-color: #fff;
}
.content-main{
	padding: 0 10%;
}
/* ============================================================
   ヘッダー
   ============================================================ */

.site-header {
	border-top: #00A040 solid 10px;
}

.site-header .logo {
	width: 63.87%;
	margin: 2% 31.43% 0 4.7%;
}

/* ============================================================
   メイン画像
   ============================================================ */

#main-visual .mv-inner {
	width: 90%;
	margin: 0 auto;
}

/* ============================================================
   コンセプト紹介
   ============================================================ */

#concept .concept-img {
	width: 100%;
}

/* ============================================================
   カテゴリーブロック：共通
   ============================================================ */

.category-section {
	margin-top: 13%;
}

/* 各セクション内の shop-item 間隔 */
#fashion article.shop-item,
#service article.shop-item {
	margin-top: 12%;
}

#fashion article:nth-of-type(2).shop-item,
#service article:nth-of-type(2).shop-item {
	margin-top: 18%;
}

/* ショップ紹介アニメーションエリア */
.shop-animation-area {
	position: relative;
	width: 100%;
	/* overflow: hidden; */
	margin-top: 7%;
}

/* ベースとなるショップ説明画像 */
.shop-desc-bg {
	position: relative;
	z-index: 1;
}

/* ============================================================
   アニメーション定義
   ============================================================ */

/* 左右に揺れる（heartdance） */
@keyframes leanGuide {
	0%, 100% { transform: rotate(5deg); }
	50%       { transform: rotate(-5deg); }
}

/* ふわふわ上下（SAGAMI・クリニカエステ花蔵） */
@keyframes floatUp {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(-15px); }
	100% { transform: translateY(0); }
}

/* くるっと回転（ヴィアンジュ） */
@keyframes spinPose {
	0%   { transform: rotateY(0deg); }
	10%  { transform: rotateY(0deg); }
	40%  { transform: rotateY(360deg); }
	100% { transform: rotateY(360deg); }
}

@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes beckoning {
  0%, 100% { transform: rotate(-3deg); }
  50%       { transform: rotate(3deg); }
}
@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes gentleFloat {
  0%   { transform: translateY(0) rotate(-1deg); }
  50%  { transform: translateY(-8px) rotate(1deg); }
  100% { transform: translateY(0) rotate(-1deg); }
}
@keyframes leanIn {
  0%   { transform: rotate(-8deg) scale(0.95); }
  50%  { transform: rotate(4deg) scale(1.05); }
  100% { transform: rotate(-8deg) scale(0.95); }
}
/* ============================================================
   アンバサダーアイコン：heartdance（揺れ）
   ============================================================ */

#fashion .shop-item:nth-of-type(1) .shop-moving-img {
    position: absolute;
    z-index: 2;
    bottom: -7%;
    right: -4%;
    width: 22%;
    transform-origin: bottom center;
    animation: leanGuide 3s ease-in-out infinite;
}

/* ============================================================
   アンバサダーアイコン：SAGAMI（ふわふわ）
   ============================================================ */

#fashion .shop-item:nth-of-type(2) .shop-animation-area {
	overflow: visible;
	z-index: 10;
}

#fashion .shop-item:nth-of-type(2) .shop-moving-img {
	position: absolute;
    z-index: 2;
    bottom: 6%;
    right: 1%;
    width: 23%;
	transform-origin: bottom center;
	animation: leanIn 3s ease-in-out infinite;
}

/* ============================================================
   アンバサダーアイコン：クリニカエステ花蔵（ふわふわ）
   ============================================================ */

#service .shop-item:nth-of-type(1) .shop-animation-area {
	overflow: visible;
	z-index: 10;
}

#service .shop-item:nth-of-type(1) .shop-moving-img {
    position: absolute;
    z-index: 2;
    bottom: -5%;
    right: -7.5%;
    width: 32%;
	animation: floatUp 1.5s ease-in-out infinite;
}

/* ============================================================
   アンバサダーアイコン：パーツビューティーサロンヴィアンジュ（回転）
   ============================================================ */

#service .shop-item:nth-of-type(2) .shop-animation-area {
	overflow: visible;
	z-index: 10;
}

#service .shop-item:nth-of-type(2) .shop-moving-img {
	position: absolute;
	z-index: 2;
    bottom: 17%;
    right: -7.5%;
    width: 33.61%;
	/* transform-origin: bottom center;
	animation: gentleFloat 4s ease-in-out infinite; */
	transform-origin: center center;
	animation: spinPose 5s ease-in-out infinite;
}
#service .shop-item .viange {
	position: relative;
}
#service .shop-item .viange .icon_viange2 {
    position: absolute;
    z-index: 2;
    bottom: 0%;
    left: 1.5%;
    width: 25.61%;
    transform-origin: bottom center;
    animation: gentleFloat 4s ease-in-out infinite;
}

/* ============================================================
   パサルガード
   ============================================================ */
#movie.special-bg-section {
	background-color: #FFFCDB;
	padding: 2% 10% 9%;
}
#movie.special-bg-section .shop-animation-area img.shop-desc-bg{
	width: 55%;
}
#movie .shop-item .shop-name {
    width: 70%;
    margin: 20px 0;
}

#movie .shop-item.shop-animation-area {
	overflow: visible;
	z-index: 10;
}

#movie .shop-item .shop-moving-img.last {
    position: absolute;
    z-index: 2;
    bottom: -85px;
    right: 6.5%;
    width: 30%;
    transform-origin: bottom center; 
  animation: beckoning 2s ease-in-out infinite;
}
#movie .shop-item .shop-txt-img{
	position: absolute;
    z-index: 2;
    bottom: 50%;
    right: -7%;
    width: 17.61%;
}
.pasaru_dec{
	width: 66%;
}
/* YouTube埋め込み */
.youtube-wrapper {
	width: 90%;
	margin: 8% auto 0;
	aspect-ratio: 16 / 9;
}

.youtube-wrapper iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* ============================================================
   カテゴリー：ファッション（heartdance / SAGAMI）
   ============================================================ */

#fashion .category-header {
	width: 80%;
	margin: 0 auto;
}

#fashion .shop-item .shop-name {
	width: 77%;
	margin: 0 auto;
}

#fashion .shop-item:nth-of-type(2) .shop-name {
    width: 62%;
    margin: 0 auto;
}

#fashion .shop-interior {
	margin-top: 12%;
}

#fashion .shop-item:nth-of-type(2) .shop-interior {
	margin-top: 6%;
}

/* ============================================================
   カテゴリー：雑貨（現在ショップなし・カテゴリーヘッダーのみ）
   ============================================================ */

#zakka .category-header {
	width: 47.14%;
	margin: 0 26.43% 0 26.43%;
}

/* ※ショップ追加時は以下のブロックのコメントを外して使用してください

#zakka .shop-item .shop-name {
	width: 60.0%;
	margin: 0 21.53% 0 18.47%;
}

#zakka .shop-item:nth-of-type(2) .shop-name {
	width: 46.23%;
	margin: 0 28.16% 0 25.61%;
}

#zakka .shop-interior {
	margin-top: 12%;
}

#zakka .shop-item:nth-of-type(1) .shop-animation-area {
	overflow: visible;
	z-index: 10;
}

#zakka .shop-item:nth-of-type(1) .shop-moving-img {
	position: absolute;
	z-index: 2;
	bottom: -10%;
	right: 6.5%;
	width: 16.83%;
	animation: floatUp 1.5s ease-in-out infinite;
}

#zakka .shop-item:nth-of-type(2) .shop-animation-area {
	overflow: visible;
	z-index: 10;
}

#zakka .shop-item:nth-of-type(2) .shop-moving-img {
	position: absolute;
	z-index: 2;
	bottom: 35%;
	right: 2.5%;
	width: 25.61%;
	transform-origin: center center;
	animation: spinPose 5s ease-in-out infinite;
}

*/

/* ============================================================
   カテゴリー：サービス（クリニカエステ花蔵 / ヴィアンジュ）
   ============================================================ */

#service .category-header {
	width: 80%;
	margin: 0 auto;
}

#service .shop-item .shop-name {
	width: 77%;
	margin: 0 auto;
}

#service .shop-item:nth-of-type(2) .shop-name {
	width: 77%;
	margin: 0 auto;
}

#service .shop-interior {
	margin-top: 12%;
}


/* ============================================================
   フッター
   ============================================================ */

footer {
	width: 100%;
	padding: 2% 10%;
	text-align: center;
	color: #1F1C1C;
	border-bottom: #0b318f solid 4px;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	box-sizing: border-box;
}

footer ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0;
	list-style: none;
	margin: 0;
	gap: 20px;
}
footer ul li{
	width: calc(100% / 2 - 20px);
}
/* footer ul li:nth-child(1) {
	width: 90%;
	margin: 3% 5% 0;
}

footer ul li:nth-child(2) {
	width: 90%;
	margin: 5% 5% 0;
}

footer ul li:nth-child(3) {
	width: 18%;
	margin: 5% 8% 0 0;
}

footer ul li:nth-child(4) {
	width: 18%;
	margin: 5% 3% 0 0%;
	padding-left: 5%;
	border-left: #019e40 solid 2px;
} */

footer .access {
	width: 94%;
	margin: 4% 3% 0;
	border-top: #019e40 solid 1px;
}

footer .access p {
	margin-top: 3%;
}

footer .logo img {
	width: 28%;
	margin: 8% 36% 0%;
}

footer div.logo p {
	margin-top: 3%;
	text-align: center;
	font-size: 14px;
}

/* ============================================================
   改行タグ制御（SP/PC）
   ============================================================ */

br.sp {
	display: block;
}

br.pc {
	display: none;
}

@media (min-width: 980px) {
	br.sp {
		display: none;
	}
	br.pc {
		display: block;
	}
}

/* ============================================================
   スクロール & ページTOPへ戻るボタン（統合版）
   ============================================================ */

.scroll-top {
	position: fixed;
	right: 20px;
	bottom: 10px;
	z-index: 101;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s, visibility .5s;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	white-space: nowrap;
	animation: arrowmove 1s ease-in-out infinite;
	will-change: transform;
}

@keyframes arrowmove {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(-6px); }
	100% { transform: translateY(0); }
}

.scroll-top.scroll-view {
	opacity: 1;
	visibility: visible;
}

.scroll-top a {
	position: relative;
	text-decoration: none;
	color: #666;
	text-transform: uppercase;
	font-size: 0.7rem;
	display: block;
}

/* 下向き矢印（Scrollモード） */
.js-scroll-toggle a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 50px;
	background: #666;
}

.js-scroll-toggle a::before {
	content: "";
	position: absolute;
	top: 30px;
	right: -6px;
	width: 1px;
	height: 20px;
	background: #666;
	transform: skewX(-31deg);
	transition: top 0.3s ease, transform 0.3s ease;
}

/* 上向き矢印（Page Topモード） */
.js-scroll-toggle.is-top a::before {
	top: 0;
	transform: skewX(31deg);
}

@media (max-width: 979px) {
	.scroll-top {
		bottom: 80px !important;
	}
	.scroll-top a {
		font-size: 0.8rem;
	}
}

@media (min-width: 980px) {
	.scroll-top a {
		font-size: 1rem;
	}
}

/* ============================================================
   フローティングカテゴリーナビ
   ============================================================ */

.category-nav {
	background: url(../img/nav.png);
	background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.category-nav.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .4s, visibility .4s;
}

/* スマホ：横並び */
.category-nav:not(.vertical) {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	margin: 20px 0;
}

.category-nav:not(.vertical) a {
    flex: 1;
    text-align: center;
    width: calc(100% / 3);
    height: 41px;
}

.category-nav:not(.vertical) a img {
	width: 100%;
	max-width: 170px;
	height: auto;
	transition: transform 0.3s, outline 0.3s;
}

.category-nav a.active img {
	outline: 2px solid #ffffff;
	border-radius: 8px;
	transform: scale(1.01);
}

/* PC：縦並び（右側） */
.category-nav.vertical {
	top: 50%;
	left: auto;
	right: 10%;
	bottom: auto;
	transform: translateY(-50%);
	flex-direction: column;
	width: auto;
	background: transparent;
	padding: 0;
	justify-content: flex-start;
	align-items: center;
}

.category-nav.vertical a {
	flex: 0 0 auto;
	display: block;
	width: 150px;
	margin: 50px 0;
}

.category-nav.vertical a img {
	width: 100%;
	height: auto;
	display: block;
}

.category-nav.vertical a.active img {
	transform: scale(1.25);
}

/* ============================================================
   画像フェードイン（スクロール表示時）
   ※ .shop-moving-img は既存animationと競合するため除外
   ※ JS無効時も画像が表示されるよう、デフォルトはopacity: 1
   ============================================================ */

/* デフォルト：画像は表示状態 */
img.lazy:not(.shop-moving-img):not(.icon_viange2):not(.shop-txt-img) {
	opacity: 1;
	transition: opacity 0.5s ease;
}

/* JSが有効な場合のみフェードイン効果を適用 */
.js-fade-enabled img.lazy:not(.shop-moving-img):not(.icon_viange2):not(.shop-txt-img) {
	opacity: 0;
}

.js-fade-enabled img.lazy:not(.shop-moving-img):not(.icon_viange2):not(.shop-txt-img).is-visible {
	opacity: 1;
}

/* loading.gif（透明GIF）のサイズ制御 */
/* img.lazy:not(.is-visible) {
	max-width: 50px;
	max-height: 50px;
	margin: 0 auto;
	object-fit: contain;
} */
.to-top{
	display: none!important;
}