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

html {
	scroll-behavior: smooth;
	font-size: 16px; /* 基準：1rem = 16px */
}


body {
	margin: 0;
  	padding: 0;
	/*background-color: #FFFBAD;*/
	/*background-color: #ffffff;*/
	font-size: 1rem;      /* 16px */
  	line-height: 1.5;     /* 目安：1.4〜1.6 */
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

/*img{vertical-align: middle;}*/

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;
}

/*header{
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
}*/


/*背景画像*/
/*.site-bg {
  background: url("../img/banner_line.png") repeat center top;
  background-attachment: fixed; 
  background-size: cover;*/
	

.site-bg {
  background-image: url("../img/bg.jpg");
  background-attachment: fixed; /* 背景固定 */
  background-position: center center; /* 中央基準で左右の余白も調整可能 */
  background-repeat: no-repeat;
  background-size: cover; /* コンテンツ幅に合わせて自動拡大/縮小 */
}

/*---ここまで---*/

/* メインコンテンツを中央寄せ・幅制限 */
.lp-container {
  width: 100%;
  max-width: 560px; /* ここは好み。480〜640あたりが標準 */
	/*max-width: 480px;*/
  margin: 0 auto;
  background-color: #fff;
}
/*---ここまで---*/

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

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

/*---ここまで---*/

/*---メイン画像---*/
.mv-inner{
	width: 89.8%;
	margin: 2% 5.1%;
}
/*---ここまで---*/

/*---コンセプト紹介---*/
.concept-img{
	width: 84.8%;
	margin: 5% 7.55% 0 7.65%;
}
/*---ここまで---*/

/*---カテゴリーブロック：共通---*/
.category-section{
	margin-top: 13%;
}

#fashion article.shop-item,
#zakka article.shop-item{
	margin-top: 12%;
}

#fashion article:nth-of-type(2).shop-item,
#zakka 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;
}


/* 上に被って動く画像 shop:mick*/
.shop-moving-img {
    position: absolute;
    z-index: 2;
   /* 配置位置：デザインに合わせて調整してください（例：右下） */
    bottom: 32%; 
    right: 5%;
    width: 16.94%; /* 重ねる画像のサイズ */
            
/* アニメーション適用 */
    transform-origin: bottom center; /* 足元中心に回転 */
    animation: leanGuide 3s ease-in-out infinite;
}

/* 「こちらへどうぞ」の傾き */
@keyframes leanGuide {
    0%, 100% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); } /* 左へ3度だけ傾く */
}
/*---mickはここまで---*/

/* アニメーションエリアは、はみ出しを表示させる shop:takara stone*/
#fashion .shop-item:nth-of-type(2) .shop-animation-area {
    overflow: visible; /* はみ出し部分を表示する設定 */
    z-index: 10;       /* 必要に応じて、他の要素より手前に表示させる */
}
/* 上に被って動く画像 shop:takara stone*/
#fashion .shop-item:nth-of-type(2) .shop-moving-img{
    position: absolute;
    z-index: 2;
   /* 配置位置：デザインに合わせて調整してください（例：右下） */
    bottom: -33%; 
    right: 5%;
    width: 17.04%; /* 重ねる画像のサイズ */
            
/* アニメーション適用 */
    animation: floatUp 2s ease-in-out infinite;
}

/* ふわふわ動くアニメーション定義 */
@keyframes floatUp {
	0% { transform: translateY(0); }
    50% { transform: translateY(-15px); } /* 15px浮き上がる */
    100% { transform: translateY(0); }
}
/*---ここまで---*/

/* アニメーションエリアは、はみ出しを表示させる shop:urawa-hanataro*/
#zakka .shop-item .shop-animation-area {
    overflow: visible; /* はみ出し部分を表示する設定 */
    z-index: 10;       /* 必要に応じて、他の要素より手前に表示させる */
}
/* 上に被って動く画像 shop:urawa-hanataro*/
#zakka .shop-item .shop-moving-img{
    position: absolute;
    z-index: 2;
   /* 配置位置：デザインに合わせて調整してください（例：右下） */
    bottom: -10%; 
    right: 6.5%;
    width: 16.83%; /* 重ねる画像のサイズ */
            
/* アニメーション適用 */
    animation: floatUp 1.5s ease-in-out infinite;
}

/* ふわふわ動くアニメーション定義 */
@keyframes floatUp {
	0% { transform: translateY(0); }
    50% { transform: translateY(-15px); } /* 15px浮き上がる */
    100% { transform: translateY(0); }
}
/*---ここまで---*/


/* 上に被って動く画像 shop:makulab*/
#zakka .shop-item:nth-of-type(2) .shop-moving-img{
    position: absolute;
    z-index: 2;
   /* 配置位置：デザインに合わせて調整してください（例：右下） */
    bottom: 35%; 
    /*right: 5.3%;*/
	right: 2.5%;
    width: 25.61%; /* 重ねる画像のサイズ */
            
/* アニメーション適用 */
   /* 足元を軸にする */
    transform-origin: center center;
    animation: spinPose 5s ease-in-out infinite;
}

/* ふわふわ動くアニメーション定義 */
@keyframes spinPose {
    0% { transform: rotateY(0deg); }
    10% { transform: rotateY(0deg); } /* 少し溜める */
    40% { transform: rotateY(360deg); } /* くるっと一回転 */
    100% { transform: rotateY(360deg); } /* 残りの時間はポーズを決めて静止 */
}
/*---ここまで---*/


/*---カテゴリー：ファッション---*/
#fashion .category-header{
	width: 61.5%;
	margin: 0 19.9% 0 18.6%; 
}

#fashion .shop-item .shop-name{
	width: 44.4%;
	margin: 0 27.85% 0 27.75%;
}

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

#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-interior{
	margin-top: 12%;
}

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


/*---カテゴリー：サービス（動画）---*/
/* 背景色変更エリア */
.special-bg-section {
	margin-top: 18%;
	background-color: #FFFCDB; /* 変更したい背景色 */
	padding:  8% 0 6%;
    padding-bottom: 40px; /* 上下の余白が必要な場合 */
}

#service .shop-item .shop-name{
	width: 70.0%;
	margin: 0% 14.90% 0 15.10%;
}

#service .special-shop-title{
	width: 78.16%;
	margin: 5% 10.82% 0 11.02%;
}


/* YouTube埋め込み用ラッパー */
.youtube-wrapper {
	width: 90%; /* 左右に少し余白を持たせる */
	margin: 8% auto 0;
	aspect-ratio: 16 / 9; /* アスペクト比を維持 */
}
        
.youtube-wrapper iframe {
 	width: 100%;
    height: 100%;
    border: none;
}
/*---ここまで）---*/




/*---footer---*/
footer{
	width: 100%;
    max-width: 980px;
	margin: 5% auto 0;
	padding: 2% 0;
	text-align: center;
	color: #1F1C1C;
	border-bottom: #019e40 solid 4px;
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
}

footer ul{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

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%;
	/*font-size: 1rem;*/
}

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

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

/*---ここまで---*/


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; /* PC時の標準位置 */
  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;
}

/* アニメーション（transformで上下に動かす） */
.scroll-top {
  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-viewクラスがついたら出現*/
.scroll-top.scroll-view {
  opacity: 1;
  visibility: visible;
}

/* リンク全体の aタグの形状 */
.scroll-top a {
  position: relative; /* 疑似要素の基準位置に */
  text-decoration: none;
  color: #666;
  text-transform: uppercase;
  font-size: 0.7rem;
  display: block;
}

/* スクロールリンクの形状 */
.js-scroll a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 50px;
  background: #666;
}

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

/* Edge IE11 hack */
_:-ms-lang(x), .js-scroll a::before {
  right: -11px;
}

/* ページトップリンクの形状 */
.js-pagetop a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 50px;
  background: #666;
}

.js-pagetop a::before {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  width: 1px;
  height: 20px;
  background: #666;
  transform: skewX(31deg);
}

/* Edge IE11 hack */
_:-ms-lang(x), .js-pagetop a::before {
  right: 0;
}

/*--------------------------------------
  スマホ・タブレット用位置調整
--------------------------------------*/
@media (max-width: 979px) {
  .scroll-top {
    bottom: 80px !important; /* ← 下部ナビと被らないように上げる */
  }
	
	.scroll-top a {
  	font-size: 0.8rem;
	}
}

/*--------------------------------------
  PC表示時の色調整・サイズ
--------------------------------------*/
@media (min-width: 980px) {
  .scroll-top a {
    font-size: 1rem;
  }

  /*.js-scroll a::after,
  .js-pagetop a::after {
    background: #000000;
  }

  .js-scroll a::before,
  .js-pagetop a::before {
    background: #000000;
  }*/
}








/* ==== 共通ナビスタイル（スマホ・PC共通） ==== */
.category-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(254, 227, 236, 0.7);
  backdrop-filter: blur(10px); /* ガラス効果（対応ブラウザのみ） */
  z-index: 100;
  opacity: 1;
  visibility: visible;
}

/* フッター侵入時だけ非表示 */
.category-nav.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s, visibility .4s;
}

/* ==== スマホ（横並び）用：.vertical が付いていない場合 ==== */
.category-nav:not(.vertical) {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; /* 端も含めて均等配置 */
  align-items: center;
  padding: 8px 0; /* 左だけの padding は削除 */
}

.category-nav:not(.vertical) a {
  flex: 1;               /* 行幅を要素数で等分 */
  text-align: center;    /* 中身を中央寄せ */
}

.category-nav:not(.vertical) a img {
  width: 100%;
  max-width: 75px;       /* アイコンの実サイズ調整（必要に応じて変更） */
  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: 40%;*/
	top: 50%;
  left: auto;
  /*right: 30px;*/
	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: 120px;*/
	width: 150px;
  /*margin: 20px 0;*/
	margin: 50px 0;
}

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

/* 縦並びのときだけスケールアップ */
.category-nav.vertical a.active img {
  transform: scale(1.25);
}