@charset "utf-8";
@media (max-width: 767px) {
	/* -------------------------------------------------- */
	/* 14px @ 320px increasing to 16px @ 767px */
	@media (min-width: 320px) {
		:root {
			font-size: calc(.875rem + ((1vw - 3.2px) * .4474));
			min-height: 0vw;
		}
	}
	@media (max-width: 320px) {
		:root {
			font-size: 14px;
		}
	}
	/* -------------------------------------------------- */
	a:hover {
		color: inherit;
	}
	.spSet {
		display: block !important;
	}
	.pcSet {
		display: none !important;
	}
	/* ------------------------------ */
	/* splashScreen */
	/* ------------------------------ */
	#splashScr .logo {
		width: 43.5%;
	}
	/* ------------------------------ */
	/* common */
	/* ------------------------------ */
	main {
		padding-bottom: 3rem;
	}
	section {
		margin: 1.5rem auto;
	}
	h2 {
		font-size: 3rem;
		text-align: center;
		margin-bottom: 2.5rem;
	}
	h2 span {
		border-bottom: .25rem solid #231815;
		font-size: 45%;
		margin: 0 auto .25rem;
		text-align: center;
	}
	h3 {
		font-size: 1.3rem;
		text-align: center;
	}
	/* ------------------------------ */
	/* header */
	/* ------------------------------ */
	header {
		position: fixed;
		top: 0;
		left: 0;
		height: 82px;
		box-shadow: 0 0 1px #a8a8a8;
	}
	header #guide {
		position: fixed;
		top: 0;
		right: 0;
		width: 164px;
		height: 82px;
		display: flex;
		flex-wrap: wrap;
		z-index: 1001;
	}
	#guide.is_visible {
		right: 0;
	}
	header #nav_trigger {
		display: block;
		background: #231815;
		width: 82px;
		height: 82px;
		position: relative;
		cursor: pointer;
	}
	#nav_trigger span,
	#nav_trigger span:before,
	#nav_trigger span:after {
		display: inline-block;
		width: 30px;
		height: 1px;
		background: #fff;
		position: absolute;
		transition: transform .3s;
	}
	#nav_trigger span {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	#nav_trigger span:before {
		content: '';
		transform: translateY(-10px) rotate(0deg);
	}
	#nav_trigger span:after {
		content: '';
		transform: translateY(10px) rotate(0deg);
	}
	#nav_trigger.opened span {
		background: transparent;
	}
	#nav_trigger.opened span:before {
		transform: rotate(-135deg);
	}
	#nav_trigger.opened span:after {
		transform: rotate(135deg);
	}
	#nav_trigger+a {
		width: 82px;
		height: 82px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: "Oswald", sans-serif;
		font-weight: 500;
		/*font-size: 1.25rem;*/
		font-size: 17px;
		letter-spacing: .02em;
		background: #fff;
		box-shadow: none;
	}
	ul#nav:not(.is_open) {
		display: none;
	}
	ul#nav.bgBK {
		transform: none;
		top: 82px;
		right: 0;
		width: 100%;
		height: calc(100vh - 82px);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		background: #231815;
		color: #fff;
		text-align: left;
		padding: 50px;
		overflow: hidden;
		transition: max-height .3s ease-in-out, top .3s ease-in-out;
		will-change: max-height, top;
		max-height: 0;
		font-size: 18px;
		display: block;
	}
	ul#nav.bgBK.is_open {
		max-height: 100vh;
		display: block;
		width: 100%;
		padding: 50px;
	}
	ul#nav.bgBK li {
		width: 100%;
		margin: .75rem auto;
		max-width: 7.5em;
		text-align: center;
	}
	ul#nav.bgBK li:nth-last-child(2) {
		padding-left: 0;
		padding-top: 2.5rem;
	}
	ul#nav.bgBK li:last-child {
		width: 42px;
		border-top: 1px solid #fff;
		padding-top: .5rem;
		padding-left: 0;
		margin: 0 auto;
	}
	ul#nav.bgBK li:last-child a img {
		transform: scale(.8) rotate(0deg);
		filter: invert(100%);
	}
	ul#nav.bgBK li:last-child a:hover img {
		opacity: .5;
	}
	ul#nav.bgBK li a {
		padding: .5rem 0;
	}
	header h1 {
		background: #fff;
		width: 100%;
		height: 82px;
		position: absolute;
		top: 0;
		left: 0;
		transform: none;
		display: flex;
		align-items: center;
	}
	header h1>img {
		filter: none;
		width: 75px;
		margin-left: 25px;
	}
	/* ------------------------------ */
	/* #kv */
	/* ------------------------------ */
	#kv {
		height: 700px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 82px;
	}
	#kv img {
		height: 103%;
		object-position: 30% center;
	}
	#kv a.app,
	#kv button.app {
		width: 120px;
		left: auto;
		right: 0;
	}
	/* ------------------------------ */
	/* #sec01 */
	/* ------------------------------ */
	#sec01 {
		max-width: 640px;
		padding: 1rem 5.5% 2rem;
	}
	#sec01 .flex>img {
		display: none;
	}
	#sec01 .flex>.setTxt {
		width: 100%;
		padding-left: 0;
	}
	#sec01 .setTxt>h3 {
		margin: .75rem 0;
	}
	#sec01 .setTxt>p {
		font-size: 1.1rem;
		letter-spacing: .15em;
		padding-left: .5rem;
		margin: 3.5rem 0 0;
		text-align: center;
	}
	/* ------------------------------ */
	/* #sec02 */
	/* ------------------------------ */
	#sec02 {
		width: 100%;
		max-width: 640px;
		padding: 1rem 0 2rem;
	}
	#sec02 .flex {
		display: block;
	}
	#sec02 .flex>h2 {
		width: 100%;
	}
	#sec02 .flex>a.btn_mdl {
		width: 100%;
		margin: .75rem 0;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
		pointer-events: none;
		cursor: default;
	}
	#sec02 a.btn_mdl>figure {
		aspect-ratio: 35 / 23;
	}
	#sec02 a.btn_mdl>span {
		position: static;
		width: 100%;
		font-size: 1.2rem;
		text-align: center;
		margin: 1rem 0 .5rem;
	}
	#sec02 figure.img_space01 {
		background-size: 102%;
		background-position: 50% 20%;
	}
	#sec02 figure.img_space02 {
		background-size: 102%;
		background-position: 100% 70%;
	}
	#sec02 figure.img_space03 {
		background-size: 104%;
		background-position: 25% 60%;
	}
	#sec02 figure.img_space04 {
		background-size: 102%;
		background-position: 50% 0;
	}
	#sec02 figure.img_space05 {
		background-size: 105%;
		background-position: 65% 85%;
	}
	#sec02 figure.img_space06 {
		background-size: 105%;
		background-position: 55% 45%;
	}
	#sec02 figure.img_space07 {
		background-size: 102%;
		background-position: 30% 65%;
	}
	#sec02 figure.img_space08 {
		background-size: 102%;
		background-position: 40% 20%;
	}
	#sec02 figure.img_space09 {
		background-size: 104%;
		background-position: 65% 0;
	}
	#sec02 figure.img_space10 {
		background-size: 105%;
		background-position: 50% 65%;
	}
	#sec02 figure.img_space11 {
		background-size: 104%;
		background-position: 60% 40%;
	}
	/* ------------------------------ */
	/* #sec03 */
	/* ------------------------------ */
	#sec03 {
		width: 100%;
		max-width: 640px;
		padding: 1rem 5.5% 2rem;
	}
	#sec03 h2 span {
		margin: 0 auto .25rem;
	}
	#sec03 .masonry_grid {
		margin: 3rem auto 1.5rem;
	}
	#sec03 .grid_item {
		width: 100%;
		margin-bottom: 1.5rem;
	}
	#sec03 .grid_item h3 {
		font-size: 1.7rem;
		margin-bottom: .5rem;
		text-align: left;
	}
	#sec03 dl {
		font-size: 1rem;
		padding-top: .5rem;
	}
	#sec03 dl dt {
		padding-top: .5rem;
	}
	#sec03 dl dd {
		font-size: 1.1rem;
		padding-top: .5rem;
	}
	#sec03 dl dd>span {
		font-size: 1rem;
	}
	#sec03 .masonry_grid>.boxBD {
		padding: .75rem .5rem;
		font-size: 1rem;
		margin-top: 1rem;
	}
	#sec03 .masonry_grid>.boxBD span {
		font-size: 98%;
		margin-top: .25rem;
	}
	/* ------------------------------ */
	/* #sec04 */
	/* ------------------------------ */
	#sec04 {
		width: 100%;
		max-width: 640px;
		padding: 1rem 5.5% 2rem;
	}
	#sec04 .flex {
		gap: 1.75rem .625rem;
	}
	#sec04 .flex>dl {
		width: calc(50% - .625rem);
	}
	#sec04 .flex>dl dt {
		aspect-ratio: 3 / 4;
		margin-bottom: .5rem;
	}
	#sec04 dl:nth-child(1) dt>img {
		transform: translate(-49%, -48%) scale(1.35);
	}
	#sec04 dl:nth-child(2) dt>img {
		transform: translate(-51%, -50%) scale(1.15);
	}
	#sec04 dl:nth-child(3) dt>img {
		transform: translate(-44%, -47%) scale(1.25);
	}
	#sec04 dl:nth-child(4) dt>img {
		transform: translate(-49%, -41%) scale(1.35);
	}
	#sec04 dl:nth-child(5) dt>img {
		transform: translate(-44%, -42%) scale(1.3);
	}
	#sec04 dl:nth-child(6) dt>img {
		transform: translate(-49%, -41%) scale(1.3);
	}
	#sec04 dl:nth-child(7) dt>img {
		transform: translate(-44%, -40%) scale(1.35);
	}
	#sec04 dl:nth-child(8) dt>img {
		transform: translate(-52%, -44%) scale(1.3);
	}
	#sec04 .flex>dl dd {
		font-size: 1.1rem;
	}
	/* ------------------------------ */
	/* #sec05 */
	/* ------------------------------ */
	#sec05 {
		width: 100%;
		max-width: calc(640px + .5rem);
		padding: 1rem 5.5% 2rem;
	}
	#sec05 .flex>h2 {
		width: 100%;
		padding-left: 0;
	}
	#sec05 .flex>a.btn_mdl {
		width: calc(100% / 3 - .5rem);
		/*pointer-events: none;
		cursor: default;*/
	}
	#sec05 .flex>a:nth-of-type(1),
	#sec05 .flex>a:nth-of-type(2),
	#sec05 .flex>a:nth-of-type(3),
	#sec05 .flex>a:nth-of-type(4),
	#sec05 .flex>a:nth-of-type(5) {
		order: 0;
	}
	#sec05 .flex>a.btn_mdl:nth-of-type(n+12) {
		display: block;
	}
	#sec05 .flex>a.btn_mdl:nth-of-type(n+13) {
		display: none;
	}
	#sec05 a#btn_viewMore {
		width: 6em;
		margin: 1.5rem auto 3rem;
		padding: .125rem;
		font-size: 1.85rem;
	}
	#sec05 a#btn_viewMore:after {
		height: 2.5rem;
	}
	/* ------------------------------ */
	/* #sec06 */
	/* ------------------------------ */
	#sec06 {
		width: 100%;
		max-width: 640px;
		padding: 1rem 5.5% 2rem;
		margin-bottom: 0;
	}
	#sec06 h2 span {
		margin: 0 auto .25rem;
	}
	#sec06 .flex {
		gap: 2rem 0;
		margin-bottom: 3rem;
	}
	#sec06 .flex>.boxBD {
		width: 100%;
		padding: 2.5rem 3rem;
		margin-top: 0;
	}
	#sec06 h3 {
		font-size: 2.5rem;
	}
	#sec06 h3>span {
		font-size: 1.1rem;
		padding-left: 0;
		padding-top: .125rem;
		display: block;
	}
	#sec06 .boxBD>h3 {
		margin-bottom: 0;
	}
	#sec06 p {
		font-size: 1.05rem;
	}
	#sec06 .boxBD>p {
		margin: 2rem 0 .25rem;
	}
	#sec06 .boxBD>a {
		font-size: 1.35rem;
		margin: 0;
	}
	#sec06 .boxBD>a+a {
		margin-top: .5rem;
	}
	#sec06>p {
		text-align: center;
		margin: 1.5rem auto 1.75rem;
	}
	#sec06 iframe {
		width: 111%;
		aspect-ratio: 1 / 1;
		margin-left: -5.5%;
	}
	/* ------------------------------ */
	/* footer */
	/* ------------------------------ */
	footer>.flex {
		width: 100%;
		max-width: 640px;
		min-width: auto;
		padding: 2rem 1.5rem 3rem;
	}
	footer #btnSet {
		gap: 1rem;
		margin-bottom: 1.5rem;
	}
	footer #btnSet>h6 {
		font-size: 1.2rem;
	}
	footer #btnSet>a {
		width: 100%;
		max-width: 240px;
		margin: auto;
	}
	footer #setZA,
	footer #setIZ {
		width: 100%;
		border: none;
	}
	footer #setZA img {
		max-width: 130px;
		margin: 1.5rem auto;
	}
	footer #setIZ img {
		max-width: 65px;
		margin: 1.5rem auto;
	}
	footer .setTxt {
		font-size: 1rem;
		line-height: 1.75;
		gap: .5rem 0;
		width: 23em;
	}
	footer .setTxt .pcSet {
		display: none !important;
	}
	footer p.copy {
		right: .75rem;
		bottom: .75rem;
	}
	a.pageTop:hover {
		background: #231815;
	}
	/* ------------------------------ */
	/* fancybox */
	/* ------------------------------ */


}