@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 768px) {
	body {
		padding-top: 20px;
	}
	.hide-sm {
		display: none;
	}
	.show-sm {
		display: block;
	}
	.block-sm {
		display: block;
	}
	.show-sm.col {
		display: inline-block;
	}

	.relative-sm {
		position: relative;
	}

	.flex-sm {
		display: flex;
	}
	.flex-left-sm {
		-webkit-justify-content: flex-start;
    	justify-content: flex-start;
	}
	.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;
	}
	.flex-column > * + *,
	.flex-column-sm > * + *,
	.flex-column-reverse-sm > * + * {
		margin-top: 2em;
	}
	.container {
		padding: 4em 2em;
	}
	footer .container {
		padding: 2em;
	}

	.fluid-sm {
		width: calc(100% + 4em);
		margin-left: -2em;
	}

	.w100-sm { width: 100%; }
	.w50-sm { width: 47%; }

	.t-xxl { font-size: 46px; /* 30px */ }
	.t-xl { font-size: 1.666669em; /* 30px */ }
	.t-lg { font-size: 1.444445em; /* 26px */ }
	.t-ml { font-size: 1.22222em; /* 22px */ }
	.t-md, .t-md-sm { font-size: 1em; /* 18px */ }
	.t-sm { font-size: 0.89em; /* 16px */ }
	.t-xs { font-size: 0.72em; /* 14px */ }

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

	.ml-0-sm { margin-left: 0; }
	.mt-0-sm { margin-top: 0; }
	.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; }
	.ml-2-sm { margin-left: 2em; }

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

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

	/* header */
	.logo {
		width: 60px;
		height: 30px;
	}
	.hbg-btn {
		display: inline-block;
	}
	.header .logo ~ div {
		display: none;
	}
	.navbar {
	    position: absolute;
	    right: 0;
	    top: 55px;
	    padding: 0;
	    border: 2px solid;
	    background: #fff;
	    transition: transform 0.4s ease;
	    transform: translateX(100%);
	    z-index: 90;
	}
	.navbar li {
	    display: block;
		margin-top: 0px;
    	padding: 0px;
	}
	.navbar li + li {
		margin-left: 0;
	}
	.navbar li a {
		width: 100%;
	}
	.header.active .navbar {
		transform: translateX(2px);
	}
	header .container {
		padding: 1em 2em;
	}
	.header {
		position: fixed;
		height: auto;
		max-height: 55px;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 100%;
		background: #fff;
		z-index: 90;
	}
	.navbar li a:hover span, .navbar li a:focus span, .navbar li a.active span {
		opacity: 0.001;
		pointer-events: none;
	}
	
	/* topsec */
	.topsec .max-w10 {
		width: calc(100% + 4em);
		margin-left: -2em;
		overflow: hidden;
	}
	.topsec .max-w10 img {
		width: calc(150%);
		max-width: none;
		margin-left: -25%;
	}
	.topsec .container {
		padding-bottom: 0;
	}

	/* post */
	.post-list {
		grid-template-columns: auto;
	}
	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;
    	padding: 50px 20px;
	}

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

	/* kit */
	.kits-wrap {
	    background-image: url(../img/kit-mobile.jpg);
	    background-position: center -55px;
	    background-size: 110%;
	    width: calc(100% + 4em);
	    padding-top: 145%;
	    margin-left: -2em;
	    min-height: calc(100vh - 84px);
	}
	.kits-wrap .item-kit {
	    width: 40%;
	}
	#kit-01 { top: 5%; right: auto; left: 5%; }
	#kit-02 { top: 0%; right: 10%; }
	#kit-03 { top: 65%; right: 0%; }
	#kit-04 { bottom: 0%; right: 7%; left: auto; margin: 0 auto; width: 48%;}
	#kit-05 { top: 73%; left: 5%; width: 38%;}
	#kit-06 { top: 48%; left: 5%; }

	.flex-gap-2.flex-column-sm > * + *,
	.flex-gap-2.flex-column-reverse-sm > * + *,
	.flex-gap-3.flex-column-sm > * + * {
		margin-left: 0;
	}
	.fixed-right {
		transform: scale(0.85);
		transform-origin: right center;
		right: 5px;
	}
	.card-content {
		padding: 2.5em 1.5em;
	}
	

	.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 {
		padding: 3px 8px;
		font-size: 14px;
	}
	.tag + .tag {
		margin-left: 0.1em;
	}

}
@media screen and (max-width: 380px) {
	

}