/*html { font-size: 100%; overflow-x: hidden; -webkit-tap-highlight-color: transparent;}
body { margin: 0;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.mainframe p,.mainframe figure {margin: 0; max-width: 100%;height: auto;display:block;clear:both;font-weight: 300;}
.mainframe a { text-decoration: none; color: #333;  -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;display: inline-block;}
.mainframe a:hover { color: var(--color-link-hover); }
.mainframe a:hover, a:focus { text-decoration: none; }
*:before, *:after,*  {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
    border: 0;
}
*figure, footer, header, hgroup, main, menu, nav, section{
    display: block;
	margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}*/
.mainframe a:hover, a:focus { opacity: 1; }
.mainframe {font-family: "futura-pt","Noto Sans JP","Noto Sans TC", sans-serif;}
/* Page Loader */
#fade{
    display:none;
    width:100%;
    height:100%;
    background:#fff;
    position:fixed;
    top:0;
    left:0;
    z-index:99;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
}
#fade .load_img{
    width:100%;
    max-width:160px;
    margin:0 auto;
    padding-top:0;
}
#fade .loader-cat-love{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}
#fade .loader-cat-love .st0{ fill:#fff; }
#fade .loader-cat-love .st1{ fill:none; }
#fade .loader-cat-love .st2{ fill:#1c1617; }
#fade .loader-cat-love .st3{ fill:#2250a1; }
#fade .loader-cat-love .st4{ fill:#387fc1; }

#fade #cat-love,
#fade #pupil-group,
#fade #left-pupil,
#fade #right-pupil{
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

#fade .loading-text{
  display:flex;
  gap:.06em;
  align-items:center;
  justify-content:center;
  font-family:"futura-pt","Noto Sans JP","Noto Sans TC", sans-serif;
  font-size:20px;
  letter-spacing:.08em;
  color:#1c1617;
  font-weight:500;
}

#fade .loading-text span{
  display:inline-block;
  opacity:.25;
  animation: loader-letter 1.4s ease-in-out infinite;
}

#fade .loading-text span:nth-child(1){ animation-delay:0s; }
#fade .loading-text span:nth-child(2){ animation-delay:.08s; }
#fade .loading-text span:nth-child(3){ animation-delay:.16s; }
#fade .loading-text span:nth-child(4){ animation-delay:.24s; }
#fade .loading-text span:nth-child(5){ animation-delay:.32s; }
#fade .loading-text span:nth-child(6){ animation-delay:.40s; }
#fade .loading-text span:nth-child(7){ animation-delay:.48s; }
#fade .loading-text span:nth-child(8){ animation-delay:.56s; }
#fade .loading-text span:nth-child(9){ animation-delay:.64s; }
#fade .loading-text span:nth-child(10){ animation-delay:.72s; }

@keyframes loader-letter{
  0%, 100% { opacity:.25; transform:translateY(0); }
  40% { opacity:1; transform:translateY(-2px); }
}

.mainframe img{
	max-width: 100%;
	vertical-align:middle;
}
@media screen and (max-width: 760px) {
	#fade .load_img{
		max-width:130px;
	}
  #fade .loading-text{
    font-size:17px;
  }
}
#mainframe{
	overflow-x: hidden;
}
/*網站區塊設計*/
.p-container {
	position: relative;
	background: #e7e7e7;
	transition: background 1s ease
}
@media only screen and (min-width:1128px) {
	.p-container {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start
	}
}
.p-side {
    position: sticky;/*固定不捲動內容*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100svh;
    top: 0;
}
@media screen and (max-width: 1128px) {
	.p-side {
		/*position: relative;*/
		height: 75svh;
	}
}
.side-left {
    flex: 1 0;
}
.side-left-credit {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    font-size: 12px;
    line-height: 1.4;
    color: #0057a8;
    white-space: nowrap;
    text-align: center;
    z-index: 2;
}
.side-right {
    width: 13%;
}
.p-main {
	position: relative;
	background: #d6dddf;
	overflow: hidden
}
@media only screen and (min-width:1128px) {
	.p-main {
		width: 38%;
	}
}

/*主視覺動畫*/
:root {
	--intro-duration: 1800ms;
}

* {
	box-sizing: border-box;
}

.tittle-box {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.umao-hero {
	width: 70%;
	max-width: 360px;
	line-height: 0;
	margin: auto;
	z-index: 1;
	display: block;
	position: relative;
}

.umao-hero svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}
@media screen and (max-width: 1128px) {
	.tittle-box { margin:40px auto;}
	.umao-hero { width:50%;}

}
.umao-hero .st0 {
	fill: #fff;
}

.umao-hero .st1 {
	fill: #dfe0e0;
}

.umao-hero .st2 {
	fill: #0057a8;
}

.umao-hero .st3 {
	fill: #3ea9d3;
}
#blue-circle,
#mouse-group,
#text-umao,
#left-pupil-inner,
#right-pupil-inner {
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform, opacity;
}

#blue-circle {
	opacity: 0;
	transform: translateY(8px) scale(0.82);
}

#mouse-group {
	opacity: 0;
	transform: translateY(30px) scale(0.98);
}

#text-umao {
	opacity: 0;
	transform: translateY(14px);
}

@media (prefers-reduced-motion: reduce) {
	#blue-circle,
	#mouse-group,
	#text-umao {
		opacity: 1 !important;
		transform: none !important;
	}
}

/*中間內容區域*/
.sec-0,.sec-1,.sec-2,.sec-3,.sec-4,.sec-5,.sec-6,.sec-7,.sec-8,.sec-9,.sec-10,.sec-11,.sec-12{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
	justify-content: center;
}
.info {
    clear: both;
    width: 80%;
    max-width: 550px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.info .img{
	width: 100%;
	display: block;
}
.info .img img{
	border-radius: 18px;
}
/*共用文字*/
.info .text{
	width: 94%;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: left;
    margin: 17px auto 0 auto;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}
.info .text span{
	font-size:24px;
}
/*SHOP NOW 按鈕*/
.text .button {
	font-size: 13px;
    letter-spacing: 1px;
    display: inline-block;
    text-align: center;
    width: 60px;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    background-color: #0e3e8e;
    color: #ffffff;
    border: 1px #0e3e8e solid;
    padding: 8px 5px;
	border-radius: 10px;
}
.text .button:hover {
	background-color: #ffffff;
	 border: 1px #0e3e8e solid;
	color: #0e3e8e;
}
@media screen and (max-width: 640px) {
	.info{
		margin:20px auto;
	}
	.info .a{
	width: 60%;
	margin: 0 0 40px 40%;
	}
}
/*第一區貓咪動畫+前言*/
.sec-0{
	margin: 0 0 -5%;
	padding:0;
	background-color:#b3dbea;
	flex-direction: column;
}
/* 容器設定 */
    .umao-2-img{
	position: relative;
	width: 45%;
	max-width: 235px;
	margin: 10rem auto 0rem auto;
	line-height: 0;
}

.umao-2-img .umao-2-svg{
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.umao-2-img #cat-group,
.umao-2-img #cat-body,
.umao-2-img #front-paw,
.umao-2-img #cat-tail,
.umao-2-img #toy-group,
.umao-2-img #left-pupil,
.umao-2-img #right-pupil,
.umao-2-img #whiskers-blue{
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform, opacity;
}

.umao-2-img #cat-group{
	opacity: 0;
	transform: translateY(12px);
}

.umao-2-img #toy-group{
	opacity: 0;
	transform: translateY(8px);
}

.umao-2-img #cat-tail{
	transform-origin: 18% 82%;
}

.umao-2-img #left-pupil,
.umao-2-img #right-pupil{
	transform-origin: center;
}

@media (max-width: 1128px){
	.umao-2-img{
		width: 45%;
		max-width: 250px;
		margin: 8rem auto 0 auto;
	}
}

@media (max-width: 640px){
	.umao-2-img{
		width: 55%;
		max-width: 218px;
		margin: 8rem auto 0 auto;
	}
}

@media (prefers-reduced-motion: reduce){
	.umao-2-img #cat-group,
	.umao-2-img #toy-group{
		opacity: 1 !important;
		transform: none !important;
	}
}
.umao2-white {
	fill: #fff;
}

.umao2-black {
	fill: #1c1617;
}

.umao2-blue {
	fill: #36bdef;
}
/*前言*/
.foreword{
	width:70%;
	max-width:400px;
	margin:2rem auto 10rem;
	text-align:justify;
	line-height:2;
	letter-spacing:1px;
	color:#0e3e8e;
}
.foreword h4{
	font-weight:500;
	font-size:14px;	
}
.foreword h4 span{
	font-size:15px;
}
@media screen and (max-width: 1128px) {
	.foreword{
		margin:2rem auto 8rem auto;
	}
}
@media screen and (max-width: 640px) {
	.foreword{
		margin:2rem auto 8rem auto;
	}
}

/*ALL-ITEMS按鈕*/
.mainframe .p-main .all-items-link{
	display:block;
	width:100%;
	max-width:400px;
	margin:1rem auto 4rem auto;
	text-decoration:none;
	cursor:pointer;
}

.all-items{
	position: relative;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	line-height: 0;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.all-items svg{
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* ===== SVG 顏色（取代你原本 defs 裡的 .st0 ~ .st5）===== */
.all-items .st0{ fill:#fff; }
.all-items .st1{ fill:#d6e2e5; }
.all-items .st2{ fill:#90d0d1; }
.all-items .st3{ fill:#0e3e8e; }
.all-items .st4{ fill:#d1d1d1; }
.all-items .st5{ fill:#040000; }

/* 有些 path 沒有 class，保留原色即可，不另外覆蓋 */

/* ===== 動畫目標 ===== */
.all-items #button-group,
.all-items #vase-group,
.all-items #white-cat-group,
.all-items #black-mouse-group,
.all-items #plant-group,
.all-items #black-mouse-pupil-left,
.all-items #black-mouse-pupil-right{
	transform-box: fill-box;
	transform-origin: center;
	will-change: transform, opacity;
}

/* 進場初始狀態 */
.all-items #button-group{
	opacity: 0;
	transform: translateY(14px);
}

.all-items #vase-group{
	opacity: 0;
	transform: translateY(16px);
}

.all-items #white-cat-group{
	opacity: 0;
	transform: translateY(14px);
}

.all-items #black-mouse-group{
	opacity: 0;
	transform: translateX(12px) translateY(2px);
}

/* 讓老鼠從花瓶後探頭時比較自然 */
.all-items #black-mouse-group{
	transform-origin: center;
}

/* 白貓睡覺感：以身體中心微微搖 */
.all-items #white-cat-group{
	transform-origin: 55% 62%;
}

/* 植物微動的中心 */
.all-items #plant-group{
	transform-origin: 50% 100%;
}

/* 老鼠眼珠 */
.all-items #black-mouse-pupil-left,
.all-items #black-mouse-pupil-right{
	transform-origin: center;
}

@media (max-width: 1128px){
	.all-items{
		max-width: 760px;
	}
}

@media (max-width: 640px){
	.all-items{
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce){
	.all-items #button-group,
	.all-items #vase-group,
	.all-items #white-cat-group,
	.all-items #black-mouse-group{
		opacity: 1 !important;
		transform: none !important;
	}
}

/*PROFILE*/
.profile{
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
	justify-content: center;
	background-color:#0e3e8e;
	color:#fff;
	padding:4rem 0 8rem 0;
}
.profile h2{
	font-size:44px;
	font-weight:500;
	line-height:1;
	margin:2rem auto;
	text-align:center;
	width:100%;
	display:block;
	color:#b3dbea;
}
.profile .profile-img{
	width:45%;
	max-width:200px;
	margin:0 auto;
	display:block;
}
.profile .profile-logo{
	width:40%;
	max-width:120px;
	margin:2rem auto;
	display:block;
}
.profile p{
	font-weight:400;
	font-size:13px;
	text-align:center;
	letter-spacing:1px;
	line-height:2;
}
/*回到頁首*/
#page-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 1000;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.6s ease, opacity 0.6s ease, visibility 0.6s ease;
}
#page-top a {
	display: block;
}
#page-top img {
	width: 22px;
	height: auto;
}

#page-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

#page-top:hover {
    transform: translateY(-5px); /* 輕微往上飄，增加回饋感 */
    opacity: 0.8;
}
@media screen and (max-width: 600px) {
	#page-top {
		right: 10px;
		bottom: 10px;
	}
	#page-top img {width: 18px;}
}
/*scroll down 圖片*/
.scroll-down {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
}

.scroll-down.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
}
.p-side__scroll-ph {
    width: 70px;
    opacity: 0;
}
.p-side__scroll-ph,.p-side__scroll-txt {
	transition: opacity .8s ease 5s;
    opacity: 1;
}
.p-side__scroll-txt{
	font-size:12px;
	line-height:1.8;
	margin:10px auto;
}
/*滑鼠scroll*/
.mouse_scroll {
	display: block;
	margin: 0 auto;
	width: 24px;
	height: 100px;
}
.m_scroll_arrows
{
  display: block;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
   
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  margin: 0 0 6px 6px;
  width: 8px;
  height: 8px;
}
.unu
{
  margin-top: 1px;
}
.unu, .doi, .trei
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
  
}
.unu
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}
.doi
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .2s;
  animation-direction: alternate;
  
  margin-top: -6px;
}
.trei
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .3s;
  animation-direction: alternate;
  
  
  margin-top: -6px;
}
@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
/*END-滑鼠scroll*/

/*手機平板區塊隱藏*/
@media screen and (max-width: 1128px) {
    .dsk {
        display: none; 
	} 
}
.sp {
    display: none; 
}
@media screen and (max-width: 1128px) {
	.sp {
        display: block;
	} 
}

/*視窗移動接近圖片之後顯示*/
.lazy-load {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.show {
    opacity: 1;
}



/*Book cat*/
.book-cat{
  position: relative;
  width: 100%;
  max-width: 155px;
  margin: 0 4% -8% auto;
  line-height: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
@media screen and (max-width: 1128px) {
	.book-cat{ margin: 0 15% -8% auto;}
}
.book-cat .book-cat-svg{
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* 顏色外移 */
.book-cat .st0{ fill:#fff; }
.book-cat .st1{ fill:#194ea0; }
.book-cat .st2{ fill:#040000; }
.book-cat .st3{ fill:#f6c4da; }
.book-cat .st4{ fill:#5d9ad3; }

/* 動畫目標 */
.book-cat #book-group,
.book-cat #cat,
.book-cat #cat-face-group,
.book-cat #cat-face,
.book-cat #cat-tail,
.book-cat #whiskers-group,
.book-cat #left-pupil,
.book-cat #right-pupil{
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

/* 初始進場狀態 */
.book-cat #book-group{
  opacity: 0;
  transform: translateY(16px);
}

.book-cat #cat{
  opacity: 0;
  transform: translateY(18px);
}

/* 比較重要的 pivot */
.book-cat #cat-face-group{
  transform-origin: 26% 28%;
}

.book-cat #cat-face{
  transform-origin: 34% 32%;
}

.book-cat #whiskers-group{
  transform-origin: 28% 28%;
}

.book-cat #cat-tail{
  transform-origin: 18% 12%;
}

/* 眼睛 */
.book-cat #left-pupil,
.book-cat #right-pupil{
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce){
  .book-cat #book-group,
  .book-cat #cat{
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Reading Mouse */
.reading-mouse{
  position: relative;
  width: 100%;
  max-width: 180px;
  margin: 0 auto -10% 4%;
  line-height: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index:2;
}
@media screen and (max-width: 1128px) {
	.reading-mouse{margin: 0 auto -6% 20%;}
}
@media screen and (max-width: 768px) {
	.reading-mouse{margin: 0 auto -8% 8%;}
}

.reading-mouse svg{
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.reading-mouse .rm-black{ fill:#231815; }
.reading-mouse .rm-white{ fill:#fff; }
.reading-mouse .rm-gray{ fill:#dfe0e0; }
.reading-mouse .rm-orange{ fill:#ee7c00; }
.reading-mouse .rm-blue{ fill:#3ea9d3; }

.reading-mouse #pillow-group,
.reading-mouse #mouse-group,
.reading-mouse #book-group{
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.reading-mouse #pillow-group,
.reading-mouse #mouse-group,
.reading-mouse #book-group{
  opacity: 0;
  transform: translateY(-24px);
}

.reading-mouse #book-group{
  transform-origin: 48% 72%;
}

@media (prefers-reduced-motion: reduce){
  .reading-mouse #pillow-group,
  .reading-mouse #mouse-group,
  .reading-mouse #book-group{
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Inu Kuma */
.inu-kuma .st0 {
	fill: #fff;
}
.inu-kuma .st1 {
	fill: #1c1617;
}
.inu-kuma .st2 {
	fill: #8dd1eb;
}
.inu-kuma .st3 {
	fill: #ee7c00;
}
.inu-kuma{
  position: relative;
  width: 100%;
  max-width: 190px;
  margin: 0 10% -8% auto;
  line-height: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
@media screen and (max-width: 1128px) {
  .inu-kuma{ margin: 0 22% -6% auto; }
}
@media screen and (max-width: 768px) {
  .inu-kuma{ margin: 0 12% -8% auto; }
}

.inu-kuma svg{
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.inu-kuma #water,
.inu-kuma #dog-group,
.inu-kuma #bear-group{
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.inu-kuma #water{
  opacity: 0;
  transform: scale(.2);
}

.inu-kuma #dog-group,
.inu-kuma #bear-group{
  opacity: 0;
  transform: translateX(28px);
}

.inu-kuma #dog-group{
  transform-origin: 56% 62%;
}

.inu-kuma #bear-group{
  transform-origin: 50% 78%;
}

@media (prefers-reduced-motion: reduce){
  .inu-kuma #water,
  .inu-kuma #dog-group,
  .inu-kuma #bear-group{
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Hedgehog */
.hedgehog{
  position: relative;
  width: 100%;
  max-width: 160px;
  margin: 0 auto -8% 8%;
  line-height: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
@media screen and (max-width: 1128px) {
  .hedgehog{ margin: 0 auto -6% 18%; }
}
@media screen and (max-width: 768px) {
  .hedgehog{ margin: 0 auto -8% 8%; }
}

.hedgehog svg{
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.hedgehog .st0{ fill:#fff; }
.hedgehog .st1{ fill:#a5d9e6; }
.hedgehog .st2{ fill:#040000; }
.hedgehog .st3{ fill:#f6c4da; }

.hedgehog #hedgehog,
.hedgehog #left-pupil,
.hedgehog #right-pupil{
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

.hedgehog #hedgehog{
  opacity: 0;
  transform: translateX(-26px);
}

.hedgehog #left-pupil,
.hedgehog #right-pupil{
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce){
  .hedgehog #hedgehog{
    opacity: 1 !important;
    transform: none !important;
  }
}