@media screen and (max-width: 1280px) {
	.post-list {
		grid-template-columns: repeat(2, 1fr); /* 平板 2 欄 */
	}
}
@media screen and (max-width: 768px) {
	body {
		padding-top: 62px;
	}
	.hide-sm {
		display: none;
	}
	.show-sm {
		display: block !important;
	}
	.block-sm {
		display: block;
	}
	.show-sm.col {
		display: inline-block !important;
	}

	.relative-sm {
		position: relative;
	}

	.flex-sm {
		display: flex;
	}
	.flex-left-sm {
		-webkit-justify-content: flex-start;
    	justify-content: flex-start;
	}
	.flex-between-sm {
		-webkit-justify-content: space-between;
    	justify-content: space-between;
	}
	.flex-center-sm {
		-webkit-justify-content: center;
    	justify-content: center;
	}
	.flex-al-center-sm {
		align-items: center;
	}
	.flex-al-start-sm {
		align-items: flex-start;
	}
	.flex-column-sm {
		flex-direction: column;
	}
	.flex-column-reverse-sm {
		flex-direction: column-reverse;
	}
	
	.container {
		padding: 4em 1.25em;
	}
	footer .container {
		padding: 2em 1.25em 2em 1.5em;
	}

	.fluid-sm {
		width: calc(100% + 2.5em);
		margin-left: -1.25em;
	}
	.w100-sm { width: 100%; }
	.w50-sm { width: 47%; }

	.max-w100-sm { max-width: 100%; }
	.max-w1-sm { max-width: 120px; }
	.max-w2-sm { max-width: 206px; }

	.t-xxl { font-size: 46px; /* 30px */ }
	.t-xl { font-size: 2em; /* 30px */ }
	.t-lg { font-size: 1.75em; /* 26px */ }
	.t-ml, h1 { font-size: 1.5em; /* 22px */ }
	.t-md, h2, .pass-title { font-size: 1.125em; /* 18px */ }
	.t-sm, .t-sm-sm { font-size: 0.875em; /* 16px */ }
	.t-xs { font-size: 0.75em; /* 14px */ }
	.t-xxs { font-size: 0.5em; /* 14px */ }

	.t-center-sm {
		text-align: center;
	}
	.t-left-sm {
		text-align: left;
	}
	.t-right-sm {
		text-align: right;
	}

	.ml-0-sm { margin-left: 0; }
	.ml-1-sm { margin-left: 0.6em; }
	.mr-1-sm { margin-right: 0.6em; }
	.mt-0-sm { margin-top: 0 !important; }
	.mt-1-sm { margin-top: 1em; }
	.mt-4-sm { margin-top: 4em; }
	.mb-0-sm { margin-bottom: 0; }
	.mb-1-sm { margin-bottom: 1em; }
	.mb-2-sm { margin-bottom: 2em; }
	.mb-6-sm { margin-bottom: 16em; }
	.ml-2-sm { margin-left: 2em; }

	.pt-0-sm { padding-top: 0; }
	.pb-0, .pb-0-sm { padding-bottom: 0em; }
	.pr-0-sm { padding-right: 0; }
	.py-0-sm { padding-top: 0; padding-bottom: 0; }

	.ml-1.mx-auto {
		margin-left: auto;
	}

	.border-0-sm {
		border: 0;
	}

	/* header */
	.logo {
		width: 60px;
		height: 30px;
	}
	.hbg-btn {
		display: inline-block;
	}
	.header .logo ~ div {
		display: none;
	}
	.main-title {
		max-width: 129px;
	}

	.navbar {
	    position: absolute;
	    right: 0;
	    top: 0;
	    padding: 0;
		z-index: 150;
	    transition: max-height 0.4s ease;
	    max-height: 62px;
	    padding-top: 61px;
	    overflow: hidden;
	}
	.navbar li {
	    display: block;
		margin-top: 0px;
    	padding: 0px;
    	border-bottom: 1px solid transparent;
    	border-image: var(--border-img-plum-pass);
    	text-align: center;
	}
	.navbar li + li {
		margin-left: 0;
	}
	.navbar li a {
		width: 100%;
		height: 62px;
		padding: 10px 20px 10px 18px;
	}
	.header.active {
		background: var(--bg-img-plum);
	}
	.header.active .navbar {
		max-height: 700px;
		background: var(--bg-img-plum);
	}
	.navbar .show-sm {
		padding: 27px 26px 20px 34px;
		border-left: 1px solid transparent;
  		border-image: var(--border-img-plum-pass);
	}
	header .container {
		padding: 0.5em 1em;
	}
	.header {
		position: fixed;
		height: auto;
		height: 62px;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 100%;
	}
	.navbar li a:hover span, .navbar li a:focus span, .navbar li a.active span {
		/* opacity: 0.001; */
		pointer-events: none;
	}
	
	#navbar-toggler {
		position: absolute;
		right: 0;
		top: 0;
		border: 0;
		padding: 10px 8px 10px 15px;
		max-height: 61px;
		width: auto;
	}
	.hover-switch-img img {
		width: 84px;
	}
	.hover-switch-img:hover img:nth-of-type(1) {
		opacity: 1;
	}
	.header.active .hover-switch-img img:nth-of-type(1) {
		opacity: 1;
	}
	.hover-switch-img:hover img:nth-of-type(2) {
		opacity: 0;
	}
	.header.active .hover-switch-img img:nth-of-type(2) {
		opacity: 1;
	}

	body::before {
		content: '';
		position: fixed;
		z-index: -10;
		width: 100%;
		height: 100vh;
		background: var(--color-dirty-pink-pass);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
	}
	body.navbar-show::before {
		z-index: 90;
		pointer-events: auto;
		opacity: 1;
		top: 0;
	}


	/* topsec */
	.topsec .top-banner {
		max-height: calc((var(--vh, 1vh) * 100) - 62px);
	}
	.topsec .container {
		padding-bottom: 0;
	}
	.video-bg video {
		position: absolute;
		min-width: 100%;
		min-height: 100%;
		object-fit: contain;
		object-position: center;
		background-color: var(--bg-img-plum);
		padding-bottom: 100px;
	}
	.top-banner .btn {
		padding: 10px 32px 8px;
	}

	/* post */
	.post-list {
		/* grid-template-columns: auto;
		grid-gap: 35px; */
		grid-template-columns: repeat(1, 1fr); /* 手機版 1 欄 */
		grid-gap: 20px;
	}
	.post-list article.news a {
		padding: 15px;
	}
	body.on-popup-opan {
	    height: 100vh;
	    padding-right: 0;
	}
	.popup-wrap {
		padding: 0 10px;
	}
	body.on-popup-opan .popup-wrap.active {
		padding: 0 10px;
	}
	.popup-card {
		display: flex;
    	flex-direction: column-reverse;
	}
	.popup-close {
		right: 20px;
		top: 20px;
	}
	.popup-card.popup-img-card .popup-content {
		padding: 35px 15px 15px;
	}
	.popup-card.popup-img-card .popup-close {
		right: 10px;
		top: 10px;
	}

	.bg-right {
	    width: 100%;
	    padding-top: 140%;
	    margin-left: 0;
	    margin-top: 0;
	    position: relative;
	}
	.bg-right + .container {
		margin-top: -50%;
	}

	.block-right {
		max-width: 100%;
	}
	.arrow-down-sm {
		transform: rotate(90deg);
		margin: 20px auto;
	}

	/* how */
	.info-block {
		max-width: 300px;
		margin: 0 auto;
	}
	.info-block .dashed-line {
	    transform: rotate(90deg);
	    transform-origin: right center;
	    width: 30%;
	    left: 20%;
	    top: -17px;
	}

	/* cards */
	.pass-card {
		padding: 37px 18px;
	}
	.pass-title.left {
		left: 18px;
	}
	.pass-title.right {
		right: 18px;
	}

	.question {
		padding: 15px 25px 15px;
	}
	.question.active + .answer {
		padding: 15px 15px;
	}

	.card-small {
		display: flex;
		flex-direction: column;
	}
	.card-small .card-content {
		padding: 0em 0;
	}


	/* stairs */
	.dec-stairs {
	}
	.dec-stairs::before {

	}
	.stairs-1::before {
		width: 120px;
	}
	.stairs-2::before {
		width: 175px;
	}
	.stairs-3::before {
		width: 120px;
	}
	.stairs-rt-1 { margin-top: 3em; }
	.stairs-rt-1::before { right: 0px; top: -210px; }
	.stairs-lb-1::before { left: 0px; bottom: -360px; }
	.stairs-rt-2 { margin-top: 13em; }
	.stairs-rt-2::before { right: 0px; top: -180px; }
	.stairs-rt-3 { margin-top: 10em;}
	.stairs-rt-3::before { right: 0px; top: -180px; }
	.stairs-lt-1 { margin-top: 4em; }
	.stairs-lt-1::before { left: 0px; top: -170px; }
	.stairs-rt-4 { margin-top: 6em; }
	.stairs-rt-4::before { right: 0px; top: -190px; }
	.stairs-lt-2 { margin-top: 6em; }
	.stairs-lt-2::before { left: 0px; top: -180px; }
	.stairs-rt-5 { margin-top: 2em; }
	.stairs-rt-5::before { right: 0px; top: -60px; }

	/* kit */
	.kits-wrap {
	    background-position: center 40%;
	    background-size: 95%;
	    width: calc(100% + 4em);
	    padding-top: 200%;
	    margin-left: -2em;
	    min-height: calc(100vh - 62px);
	}
	.kits-wrap .item-kit {
	    width: 37%;
	}
	.item-kit + div h2 {
		margin-top: 6px;
	}
	.item-kit {
		text-align: center;
	}
	.item-kit .dialog {
	}
	.item-kit#kit-05 .dialog {
		right: auto;
		left: 10%;
	}
	#kit-01 { top: 18%; right: auto; left: 5%; }
	#kit-02 { top: 3%; right: 30%; }
	#kit-03 { top: 13%; right: 2%; }
	#kit-04 { bottom: 0%; right: 28%; left: auto; margin: 0 auto; width: 46%;}
	#kit-05 { top: 59%; left: 4%; width: 31%;}
	#kit-06 { right: 5%; bottom: 18%; width: 41%; }

	.kits-list {
		position: relative;
	    transform: translateX(0);
	    right: auto;
	    bottom: auto;
	    display: grid;
	    grid-template-columns: repeat(2, 1fr);
		grid-gap: 20px;
		padding: 10px 10px;
		font-size: 14px;
	}
	.kits-list li {
		margin-top: 0;
	    line-height: 1;
	    padding: 10px 10px 8px;
	}
	.btn-circle {
		width: 56px;
		height: 56px;
	}
	.btn-circle .dialog {
		top: 13px;
	}
	.nav-kits li {
	    transition: margin-top 0.4s ease;
	}
	.nav-kits li + li,
	header.active .nav-kits li + li {
		margin-top: -65px;
	}
	.nav-kits.active li + li {
		margin-top: 0;
	}
	.nav-kits li a {
		opacity: 1;
		transition: all 0.4s ease;
	}
	.nav-kits.active a {
		opacity: 0.7;
	}
	.nav-kits.active a.hover {
		opacity: 1;
		transform: scale(1.05);
	}
	.flex-gap-2.flex-column-sm > * + *,
	.flex-gap-2.flex-column-reverse-sm > * + *,
	.flex-gap-3.flex-column-sm > * + *,
	.flex-gap-05.flex-column-sm > * + * {
		margin-left: 0;
	}
	.flex-gap-2.flex-column-sm > * + *,
	.flex-gap-2.flex-column-reverse-sm > * + *,
	.flex-gap-2-sm.flex-column-sm > * + *,
	.flex-gap-2-sm.flex-column-reverse-sm > * + * {
		margin-top: 2em;
	}

	.flex-gap-3.flex-column-sm > * + *,
	.flex-gap-3.flex-column-reverse-sm > * + *,
	.flex-gap-3-sm.flex-column-sm > * + *,
	.flex-gap-3-sm.flex-column-reverse-sm > * + * {
		margin-top: 4em;
	}

	.flex-gap-4.flex-column-sm > * + *,
	.flex-gap-4.flex-column-reverse-sm > * + *,
	.flex-gap-4-sm.flex-column-sm > * + *,
	.flex-gap-4-sm.flex-column-reverse-sm > * + * {
		margin-top: 8em;
	}

	.flex-gap-05.flex-column-sm > * + * {
		margin-top: 1em;
	}

	.fixed-right {
		right: 10px;
		bottom: 10px;
		top: auto;
	}
	.card-content {
		padding: 2.5em 1.5em;
	}
	.border-violet .card-content {
		padding: 15px;
	}

	.show-less-sm {
		max-height: 280px;
		overflow: hidden;
		position: relative;
		transition: max-height 1s;
	}
	.show-less-sm.active {
		max-height: 2000px;
	}
	.show-more-wrap {
		position: absolute;
		z-index: 1;
		bottom: 0;
		width: 100%;
		background: linear-gradient(to top, #ffffffff 50%, #ffffff00);
		margin: 0;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height: 100px;
	}
	.show-less-sm.active .show-more-wrap {
		display: none;
	}
	.show-more-btn {
		width: 100%;
		padding: 10px;
	}

	.tag {
		margin-top: 1.5em;
		margin-bottom: 1em;
	}
	.select {
		margin-left: 0;
		width: 100%;
	}

	/* bg */
	.bg-dice {
		background-size: 22%, 36%;
    	background-position: 100% 15vh, 12% 100%;
	}
	.bg-gallery {
		background-position: 0% 65vh;
    	background-size: 22%;
	}

	/* footer */
	.footer {
		background: url('../img/dots.png') no-repeat;
		background-position: 95% 70%;
		background-size: 50px;
	}
	.icon-links {
		position: absolute;
		right: 1.8em;
		top: 0.9em;
	}	
}
@media screen and (max-width: 375px) {
	.logo-nhrm {
		max-width: 140px;
		margin-top: 4px;
	}

}