@charset "utf-8";


/*===cariier===cariier===cariier===
...................................

------------------------------ 余白

○(m or p)○(t or b)○(l or m or s)_○(none or l or s)

...................................
===cariier===cariier===cariier===*/

:root {
	--yohaku-llpx: 150px;
	--yohaku-lpx: 120px;
	--yohaku-lspx: 100px;
	--yohaku-mlpx: 80px;
	--yohaku-mpx: 60px;
	--yohaku-mspx: 50px;
	--yohaku-slpx: 30px;
	--yohaku-spx: 10px;
	--yohaku-sspx: 5px;

	--yohaku-llvw: 15vw;
	--yohaku-lvw: 12vw;
	--yohaku-lsvw: 10vw;
	--yohaku-mlvw: 8vw;
	--yohaku-mvw: 6vw;
	--yohaku-msvw: 5vw;
	--yohaku-slvw: 4vw;
	--yohaku-svw: 2vw;
	--yohaku-ssvw: 1vw;
}


@media screen and (max-width:780px) {
	.mtl_l {
		margin-top: var(--yohaku-llvw) !important
	}

	.mbl_l {
		margin-bottom: var(--yohaku-llvw) !important
	}

	.ptl_l {
		padding-top: var(--yohaku-llvw) !important
	}

	.pbl_l {
		padding-bottom: var(--yohaku-llvw) !important
	}

	.mtl {
		margin-top: var(--yohaku-lvw) !important
	}

	.mbl {
		margin-bottom: var(--yohaku-lvw) !important
	}

	.ptl {
		padding-top: var(--yohaku-lvw) !important
	}

	.pbl {
		padding-bottom: var(--yohaku-lvw) !important
	}

	.mtl_s {
		margin-top: var(--yohaku-lsvw) !important
	}

	.mbl_s {
		margin-bottom: var(--yohaku-lsvw) !important
	}

	.ptl_s {
		padding-top: var(--yohaku-lsvw) !important
	}

	.pbl_s {
		padding-bottom: var(--yohaku-lsvw) !important
	}

	.mtm_l {
		margin-top: var(--yohaku-mlvw) !important
	}

	.mbm_l {
		margin-bottom: var(--yohaku-mlvw) !important
	}

	.ptm_l {
		padding-top: var(--yohaku-mlvw) !important
	}

	.pbm_l {
		padding-bottom: var(--yohaku-mlvw) !important
	}

	.mtm {
		margin-top: var(--yohaku-mvw) !important
	}

	.mbm {
		margin-bottom: var(--yohaku-mvw) !important
	}

	.ptm {
		padding-top: var(--yohaku-mvw) !important
	}

	.pbm {
		padding-bottom: var(--yohaku-mvw) !important
	}

	.mtm_s {
		margin-top: var(--yohaku-msvw) !important
	}

	.mbm_s {
		margin-bottom: var(--yohaku-msvw) !important
	}

	.ptm_s {
		padding-top: var(--yohaku-msvw) !important
	}

	.pbm_s {
		padding-bottom: var(--yohaku-msvw) !important
	}

	.mts_l {
		margin-top: var(--yohaku-slvw) !important
	}

	.mbs_l {
		margin-bottom: var(--yohaku-slvw) !important
	}

	.pts_l {
		padding-top: var(--yohaku-slvw) !important
	}

	.pbs_l {
		padding-bottom: var(--yohaku-slvw) !important
	}

	.mts {
		margin-top: var(--yohaku-svw) !important
	}

	.mbs {
		margin-bottom: var(--yohaku-svw) !important
	}

	.pts {
		padding-top: var(--yohaku-svw) !important
	}

	.pbs {
		padding-bottom: var(--yohaku-svw) !important
	}

	.mts_s {
		margin-top: var(--yohaku-ssvw) !important
	}

	.mbs_s {
		margin-bottom: var(--yohaku-ssvw) !important
	}

	.pts_s {
		padding-top: var(--yohaku-ssvw) !important
	}

	.pbs_s {
		padding-bottom: var(--yohaku-ssvw) !important
	}
}

@media screen and (min-width:781px) {
	.mtl_l {
		margin-top: var(--yohaku-llpx) !important
	}

	.mbl_l {
		margin-bottom: var(--yohaku-llpx) !important
	}

	.ptl_l {
		padding-top: var(--yohaku-llpx) !important
	}

	.pbl_l {
		padding-bottom: var(--yohaku-llpx) !important
	}

	.mtl {
		margin-top: var(--yohaku-lpx) !important
	}

	.mbl {
		margin-bottom: var(--yohaku-lpx) !important
	}

	.ptl {
		padding-top: var(--yohaku-lpx) !important
	}

	.pbl {
		padding-bottom: var(--yohaku-lpx) !important
	}

	.mtl_s {
		margin-top: var(--yohaku-lspx) !important
	}

	.mbl_s {
		margin-bottom: var(--yohaku-lspx) !important
	}

	.ptl_s {
		padding-top: var(--yohaku-lspx) !important
	}

	.pbl_s {
		padding-bottom: var(--yohaku-lspx) !important
	}

	.mtm_l {
		margin-top: var(--yohaku-mlpx) !important
	}

	.mbm_l {
		margin-bottom: var(--yohaku-mlpx) !important
	}

	.ptm_l {
		padding-top: var(--yohaku-mlpx) !important
	}

	.pbm_l {
		padding-bottom: var(--yohaku-mlpx) !important
	}

	.mtm {
		margin-top: var(--yohaku-mpx) !important
	}

	.mbm {
		margin-bottom: var(--yohaku-mpx) !important
	}

	.ptm {
		padding-top: var(--yohaku-mpx) !important
	}

	.pbm {
		padding-bottom: var(--yohaku-mpx) !important
	}

	.mtm_s {
		margin-top: var(--yohaku-mspx) !important
	}

	.mbm_s {
		margin-bottom: var(--yohaku-mspx) !important
	}

	.ptm_s {
		padding-top: var(--yohaku-mspx) !important
	}

	.pbm_s {
		padding-bottom: var(--yohaku-mspx) !important
	}

	.mts_l {
		margin-top: var(--yohaku-slpx) !important
	}

	.mbs_l {
		margin-bottom: var(--yohaku-slpx) !important
	}

	.pts_l {
		padding-top: var(--yohaku-slpx) !important
	}

	.pbs_l {
		padding-bottom: var(--yohaku-slpx) !important
	}

	.mts {
		margin-top: var(--yohaku-spx) !important
	}

	.mbs {
		margin-bottom: var(--yohaku-spx) !important
	}

	.pts {
		padding-top: var(--yohaku-spx) !important
	}

	.pbs {
		padding-bottom: var(--yohaku-spx) !important
	}

	.mts_s {
		margin-top: var(--yohaku-sspx) !important
	}

	.mbs_s {
		margin-bottom: var(--yohaku-sspx) !important
	}

	.pts_s {
		padding-top: var(--yohaku-sspx) !important
	}

	.pbs_s {
		padding-bottom: var(--yohaku-sspx) !important
	}
}


/*===cariier===cariier===cariier===
...................................

-------------------------- SP ONLY

...................................
===cariier===cariier===cariier===*/

@media screen and (max-width:600px) {

	.pc_only,
	.pctb_only,
	.sp_none,
	.tb_only {
		display: none !important;
	}

	html {
		font-size: 2.5642vw;
	}

	body {}

	.inner {
		width: 35rem;
		margin-left: 2rem;
		margin-right: 2rem;
	}

	.inner_s {
		width: 37rem;
		margin-left: 1rem;
		margin-right: 1rem;
	}
}


/*===cariier===cariier===cariier===
...................................

-------------------------- PC/TB ONLY

...................................
===cariier===cariier===cariier===*/

@media screen and (min-width:601px),
print {

	.pc_none,
	.pctb_none,
	.sp_only,
	.tb_only {
		display: none !important;
	}

	body {
		min-width: 390px;
		overflow-x: auto;
	}

	#wrapper {
		width: 394px;
		border: 2px solid #ffffff;
		border-top: 0;
		border-bottom: 0;
		margin: 0 auto;
		box-shadow: 0 0px 50px rgba(120, 86, 165, 0.4);
	}

	.inner {
		width: 350px;
		margin-left: auto;
		margin-right: auto;
	}

	.inner_s {
		width: 370px;
		margin-left: auto;
		margin-right: auto;
	}
}