@media only screen and (min-width:320px) {
	html {
		font-size: 70%
	}
}
@media only screen and (min-width:360px) {
	html {
		font-size: 76%
	}
}
@media only screen and (min-width:375px) {
	html {
		font-size: 78%
	}
}
@media only screen and (min-width:412px) {
	html {
		font-size: 82%
	}
}
@media(min-width:576px) {
	html {
		font-size: 81%
	}
}
@media(min-width:768px) {
	html {
		font-size: 82%
	}
}
@media(min-width:992px) {
	html {
		font-size: 90%
	}
}
@media(min-width:1200px) {
	html {
		font-size: 92%
	}
}
html, html a {
	text-shadow: 1px 1px 1px rgba(4, 8, 4, .004)
}
html {
	position: relative;
	background-color: #ffe200
}
body, html {
	overflow-x: hidden;
	height: 100%
}
body {
	position: relative;
	background-color: #fff;
	min-height: 100%;
	height: auto;
	color: #000;
	font-family: 'Noto Sans JP', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo;
	letter-spacing: .03rem;
	background: 0 0;
	font-weight: 600
}
.font-normal, input {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "hiragino kaku gothic pro", meiryo, sans-serif!important
}
.font-NotoSansJP-M {
	font-family: 'Noto Sans JP';
	font-weight: 400;
	
}
.font-NotoSansJP-DB {
	font-family: 'Noto Sans JP';
	font-weight: 500;
}
.font-NotoSansJP-B {
	font-family: 'Noto Sans JP';
	font-weight: 700;
}
.font-NotoSansJP-EB {
	font-family: 'Noto Sans JP';
	font-weight: 900;
}
.font-NotoSansJP-UB {
	font-family: 'Noto Sans JP';
	font-weight: 900;
}
.font-Oswald {
	font-family: Oswald, sans-serif;
	font-weight: 800
}
a:active, a:focus, a:hover {
	color: #333!important
}
.indent {
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	text-align: left
}
input, text-area {
	outline: 0
}
input::-webkit-input-placeholder {
	font-weight: 800!important
}
.ovv {
	overflow: visible!important
}
.ovyh {
	overflow-y: hidden
}
.z-0 {
	z-index: 0
}
.z-5 {
	z-index: 5
}
.z-20 {
	z-index: 20
}
.z-100 {
	z-index: 100
}
.trs-all-0 {
	transition: none
}
.ls-n004 {
	letter-spacing: -.004em
}
.ls-n003 {
	letter-spacing: -.003em
}
.ls-n002 {
	letter-spacing: -.002em
}
.ls-n001 {
	letter-spacing: -.001em
}
.ls-0075 {
	letter-spacing: .075em
}
.ls-0205 {
	letter-spacing: .25em
}
.ls-0305 {
	letter-spacing: .35em
}
.tdud {
	text-decoration: underline dotted;
	-webkit-text-decoration: underline dotted
}
#loading {
	transition-property: color;
	transition: all .5s
}
#loading.active {
	opacity: 0;
	z-index: -100;
	visibility: hidden;
	display: none!important;
	transform: scale(1.05)
}
.animated.slideLeft {
	animation: slideLeft .45s forwards .6s
}
@keyframes slideLeft {
	0% {
		transform: translateX(-1rem)
	}
	100% {
		opacity: 1;
		transform: translateX(0)
	}
}
.animated.slideRight {
	animation: slideRight .65s forwards 1.7s
}
@keyframes slideRight {
	0% {
		transform: translateX(1rem)
	}
	100% {
		opacity: 1;
		transform: translateX(0)
	}
}
.animated.slideDown {
	animation: slideDown .45s forwards 1.2s;
	opacity: 0;
}
@keyframes slideDown {
	/*50%, 65%, 90%, 0%, 100% {
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	*/
	0% {
		opacity: 0;
		transform: translate3d(0, -.2rem, 0) scaleY(1)
	}
	50% {
		opacity: 1;
		transform: translate3d(0, .2rem, 0) scaleY(.9)
	}
	65% {
		transform: translate3d(0, -.1rem, 0) scaleY(.95)
	}
	90% {
		transform: translate3d(0, .1rem, 0) scaleY(.985)
	}
	100% {
		transform: translate3d(0, 0, 0) scaleY(1);
		opacity: 1;
	}
}
.animated.slideUp {
	animation: slideUp .45s forwards 1.2s
}
@keyframes slideUp {
	0% {
		transform: translateY(.5rem)
	}
	100% {
		opacity: 1;
		transform: translateY(0)
	}
}
.animated.pulse {
	animation: pulse .55s ease-in-out forwards 2.15s
}
@keyframes pulse {
	from {
		transform: scale3d(1, 1, 1)
	}
	50% {
		transform: scale3d(1.1, 1.1, 1.1)
	}
	to {
		opacity: 1;
		transform: scale3d(.98, .98, .98)
	}
}
.bf-toranoko:before {
	content: '';
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	background-image: url(../img/global/icon-toranoko.png);
	background-size: contain;
	vertical-align: middle;
	background-repeat: no-repeat;
	margin-bottom: .1em
}
.w-2005rem {
	width: 20.5rem
}
.mh-2rem {
	min-height: 2rem
}
.mh-2025rem {
	min-height: 2.25rem
}
.mh-205rem {
	min-height: 2.5rem
}
.mah-15rem {
	max-height: 15rem!important
}
.mah-16rem {
	max-height: 16rem!important
}
.mah-17rem {
	max-height: 17rem!important
}
.mah-18rem {
	max-height: 18rem!important
}
.h-05rem {
	height: .5rem
}
.h-1025rem {
	height: 1.25rem
}
.h-1075rem {
	height: 1.75rem
}
.h-2025rem {
	height: 2.25rem
}
.h-2035rem {
	height: 2.35rem
}
.h-2075rem {
	height: 2.75rem
}
.h-204rem {
	height: 2.4rem
}
.h-405rem {
	height: 4.5rem
}
.h-4075rem {
	height: 4.75rem
}
.h-505rem {
	height: 5.5rem
}
.h-605rem {
	height: 6.5rem
}
.h-2305rem {
	height: 23.5rem
}
.h-2605rem {
	height: 26.5rem
}
.h-2805rem {
	height: 28.5rem
}
.h-74vh {
	height: 74vh
}
p {
	line-height: 1.7
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.7
}
.fz-tl {
	font-size: 3.85rem!important
}
#logo span {
	top: -6em;
	left: -7.3em
}
#logo-sm span {
	top: -6.5em;
	left: -8em
}
.liKome {
	padding-left: 1em
}
.liKome>li::before {
	top: -.3em;
	left: -1.2em;
	font-size: 0.8rem;
	line-height: 1.6rem;
}
.rounded-top-right {
	border-top-right-radius: .25rem!important
}
.rounded-top-left {
	border-top-left-radius: .25rem!important
}
.rounded-bottom-right {
	border-bottom-right-radius: .25rem!important
}
.rounded-bottom-left {
	border-bottom-left-radius: .25rem!important
}
.rounded-top-right-sm {
	border-top-right-radius: .75rem!important
}
.rounded-top-left-sm {
	border-top-left-radius: .75rem!important
}
.rounded-bottom-right-sm {
	border-bottom-right-radius: .75rem!important
}
.rounded-bottom-left-sm {
	border-bottom-left-radius: .75rem!important
}
.mt-sec {
	padding-top: 2rem;
	margin-top: 3rem
}
@media(min-width:768px) {
	.mt-sec {
		margin-top: 5.5rem
	}
}
@media(min-width:1200px) {
	.mt-sec {
		margin-top: 7.5rem
	}
}
@media(min-width:1600px) {
	.mt-sec {
		margin-top: 10rem
	}
}
.m-2075 {
	margin: .7rem
}
.mt-2075, .my-2075 {
	margin-top: .7rem
}
.mb-2075, .my-2075 {
	margin-bottom: .7rem
}
.ml-2075, .mx-2075 {
	margin-left: .7rem
}
.mr-2075, .mx-2075 {
	margin-right: .7rem
}
.m-n025 {
	margin: -.25rem
}
.mt-n025, .my-n025 {
	margin-top: -.25rem
}
.ml-n025, .mx-n025 {
	margin-left: -.25rem
}
.mb-n025, .my-n025 {
	margin-bottom: -.25rem
}
.mr-n025, .mx-n025 {
	margin-right: -.25rem
}
.m-n4075 {
	margin: -2.75rem
}
.mt-n4075, .my-n4075 {
	margin-top: -2.75rem
}
.ml-n4075, .mx-n4075 {
	margin-left: -2.75rem
}
.mb-n4075, .my-n4075 {
	margin-bottom: -2.75rem
}
.mr-n4075, .mx-n4075 {
	margin-right: -2.75rem
}
.m-n6 {
	margin: -4rem
}
.mt-n6, .my-n6 {
	margin-top: -4rem
}
.mb-n6, .my-n6 {
	margin-bottom: -4rem
}
.ml-n6, .mx-n6 {
	margin-left: -4rem
}
.mr-n6, .mx-n6 {
	margin-right: -4rem
}
.m-n7 {
	margin: -5rem
}
.mt-n7, .my-n7 {
	margin-top: -5rem
}
.mb-n7, .my-n7 {
	margin-bottom: -5rem
}
.ml-n7, .mx-n7 {
	margin-left: -5rem
}
.mr-n7, .mx-n7 {
	margin-right: -5rem
}
.m-n8 {
	margin: -6rem
}
.mt-n8, .my-n8 {
	margin-top: -6rem
}
.mb-n8, .my-n8 {
	margin-bottom: -6rem
}
.ml-n8, .mx-n8 {
	margin-left: -6rem
}
.mr-n8, .mx-n8 {
	margin-right: -6rem
}
.m-305 {
	margin: 1.25rem
}
.mt-305, .my-305 {
	margin-top: 1.25rem
}
.mb-305, .my-305 {
	margin-bottom: 1.25rem
}
.ml-305, .mx-305 {
	margin-left: 1.25rem
}
.mr-305, .mx-305 {
	margin-right: 1.25rem
}
.b-n2 {
	bottom: -.5rem
}
.b-n3 {
	bottom: -1rem
}
.bg-orange {
	background: #f5ab00
}
.bg-yellow {
	background: #ffe200
}
.bg-blue-light {
	background-color: #c3eeff
}
.bg-blue, .hvr-bg-blue:hover {
	background-color: #007ab8
}
.af-bc-gray-light:after, .bf-bc-gray-light:before {
	border-color: #f1efef!important
}
.bc-orange {
	border-color: #f5ab00!important
}
.rounded {
	border-radius: .375rem
}
.clr-orange {
	color: #f5ab00!important
}
.clr-yellow {
	color: #ffe200!important
}
.hvr-clr-tw:hover {
	color: #1da1f2!important
}
.hvr-clr-fb:hover {
	color: #3b5998!important
}
.hvr-clr-insta:hover {
	color: #262626!important
}
.hvr-clr-yt:hover {
	color: #da1725!important
}
#pagetop {
	z-index: 500;
	display: none
}
#pagetop:hover {
	opacity: 1;
	cursor: pointer
}
.text-flare:before {
	left: -1em;
	transform: rotate(70deg)
}
.text-flare:after {
	right: -1em;
	transform: rotate(-70deg)
}
.text-flare:after, .text-flare:before {
	content: "";
	height: .125em;
	width: 1.1em;
	background-color: #e60012;
	position: absolute;
	bottom: .7em
}
.rotate-n15 {
	transform: rotate(-15deg)
}
.rotate-n45 {
	transform: rotate(-45deg)
}
.box-brackets:before {
	left: -1.8rem;
	bottom: -1.8rem;
	border-left: .2rem solid #333;
	border-bottom: .2rem solid #333;
	border-bottom-left-radius: .5rem
}
.box-brackets:after {
	right: -1.8rem;
	top: -1.8rem;
	border-right: .2rem solid #333;
	border-top: .2rem solid #333;
	border-top-right-radius: .5rem
}
.box-brackets:after, .box-brackets:before {
	content: "";
	height: 3rem;
	width: 3em;
	position: absolute;
	z-index: 10
}
@media(min-width:576px) {
	#logo span {
		top: -7em;
		left: -8.3em
	}
	.bw-sm-04r {
		border-width: .4rem!important
	}
	#logo-sm span {
		top: -7.7em;
		left: -8.5em
	}
}
@media(min-width:768px) {
	.position-md-fixed {
		position: fixed!important
	}
}
@media(min-width:992px) {
	.ls-lg-005 {
		letter-spacing: .05em!important
	}
	.ls-lg-006 {
		letter-spacing: .06em!important
	}
	.ls-lg-007 {
		letter-spacing: .07em!important
	}
}
@media(min-width:1200px) {
	.container-xl {
		max-width: 1140px;
		width: 100%;
		padding-right: 1rem;
		padding-left: 1rem;
		margin-right: auto;
		margin-left: auto
	}
	#logo span {
		top: -6.8em;
		left: -8.8em
	}
}
@media(min-width:1600px) {
	.flex-3xl-row-reverse {
		-ms-flex-direction: row-reverse!important;
		flex-direction: row-reverse!important
	}
	.align-items-3xl-start {
		-ms-flex-align: start!important;
		align-items: flex-start!important
	}
	.mt-3xl-4075 {
		margin-top: 2.5rem
	}
}

@media only screen and (min-width: 375px) {
    .mt-xs-2 {
        margin-top: 2rem !important;
    }
}
