@charset "UTF-8";
/*------------------------------------
#materials
------------------------------------*/
#materials h2 {
	width: calc(100% - 154px);
	font-size: 32px;
	text-align: center;
	margin: 0 auto;
	padding-bottom: 64px;
}
#materials .inner {
	display: grid;
	justify-content: flex-end;
	align-items: center;
	grid-template-columns: auto calc(50% + 5.75em);
}
#materials .inner .img {
	grid-column: 2;
}
#materials .inner .img img {
	border-radius: 24px 0 0 24px;
	width: 100%;
	filter: drop-shadow(1px 2px 7px rgba(0, 0, 0, 0.1));
}
#materials .inner .txt {
	grid-column: 1;
	grid-row: 1;
	max-width: calc(76.5em / 2 - 5.75em + 1.5em + 2.5em);
	padding: 0 128px 0 calc(1.5em + 2.5em);
}
#materials .inner .txt p:not(:last-child) {
	margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
	#materials h2 {
		width: calc(100% - 10vw);
		font-size: 20px;
		padding-bottom: 32px;
	}
	#materials .inner {
		grid-template-columns: 1fr;
	}
	#materials .inner .txt {
		padding: 0 10vw;
	}
	#materials .inner .txt .br-sp {
		margin: 0 calc(-1 * 10vw) 16px;
	}
}


/*------------------------------------
#store
------------------------------------*/
#store {
	padding-top: 200px;
}
#store h2 {
	width: calc(100% - 154px);
	font-size: 32px;
	text-align: center;
	margin: 0 auto;
	padding-bottom: 64px;
}
@media screen and (max-width: 768px) {
	#store {
		padding-top: 100px;
	}
	#store h2 {
		width: calc(100% - 10vw);
		font-size: 20px;
		padding-bottom: 32px;
	}
}

/*.inner*/
#store .inner {
	display: grid;
	justify-content: flex-end;
	align-items: center;
	grid-template-columns: calc(50% + 5.75em) 1fr;
	margin-bottom: 120px;
}
#store .inner .img img {
	border-radius: 0 24px 24px 0;
	filter: drop-shadow(1px 2px 7px rgba(0, 0, 0, 0.1));
}
#store .inner .txt {
	max-width: calc(76.5em / 2 - 5.75em + 1.5em + 2.5em);
	padding: 0 calc(1.5em + 2.5em) 0 128px;
}
#store .inner .txt h3 {
	font-size: 24px;
	margin-bottom: 24px;
}
#store .inner .txt p:not(:last-of-type) {
	margin-bottom: 24px;
}
#store .inner .txt .link {
	margin-top: 32px;
}
#store .inner .txt .link a {
	margin: 0;
}
#store .inner:nth-of-type(even) {
	grid-template-columns: auto calc(50% + 5.75em);
}
#store .inner:nth-of-type(even) .img {
	grid-column: 2;
}
#store .inner:nth-of-type(even) .img img {
	border-radius: 24px 0 0 24px;
}
#store .inner:nth-of-type(even) .txt {
	grid-column: 1;
	grid-row: 1;
	padding: 0 128px 0 calc(1.5em + 2.5em);
}
@media screen and (max-width: 768px) {
	#store .inner {
		grid-template-columns: 1fr;
		margin-bottom: 40px;
	}
	#store .inner .txt {
		padding: 0 10vw;
	}
	#store .inner .txt .br-sp {
		margin: 0 calc(-1 * 10vw) 16px;
	}
	#store .inner .txt h3 {
		font-size: 18px;
	}
	#store .inner .txt .link a {
		margin: 0 auto;
	}
	#store .inner:nth-of-type(even) {
		grid-template-columns: 1fr;
	}
	#store .inner:nth-of-type(even) .txt {
		padding: 0 10vw;
	}
}

/*#access*/
#store #access {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 60px;
	max-width: 1260px;
	width: calc(100% - 154px);
	margin: 0 auto;
	padding-bottom: 200px;
}
#store #access li {
	width: calc((100% - 60px)/2);
}
#store #access li iframe {
	width: 100%;
	height: 450px;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
#store #access li h3 {
	font-size: 24px;
	margin-bottom: 24px;
}
#store #access li p:not(:last-of-type) {
	margin-bottom: 24px;
}
#store #access li .link {
	margin-top: 32px;
}
#store #access li .link a {
	margin: 0;
}
@media screen and (max-width: 768px) {
	#store #access {
		gap: 30px;
		width: calc(100% - 10vw);
		padding-bottom: 100px;
	}
	#store #access li {
		width: 100%;
	}
	#store #access li h3 {
		font-size: 18px;
	}
	#store #access li .link a {
		margin: 0 auto;
	}
}

/*.block*/
#store .block {
	padding: 160px 0;
}
#store .block#crashproject {
	background-color: #f2f9ff;
}
#store .block h3 {
	display: flex;
	flex-direction: column;
	width: calc(100% - 154px);
	font-size: 24px;
	letter-spacing: .08em;
	text-align: center;
	margin: 0 auto;
	padding-bottom: 32px;
}
#store .block h3 .en {
	font-size: 18px;
	color: #0062b1;
}
#store .block .top img {
	margin-bottom: 40px;
}
#store .block .top .container h4 {
	font-size: 24px;
	margin-bottom: 32px;
}
#store .block .top .container .list {
	border: 1px solid #ccd4e0;
	margin-top: 24px;
	padding: 24px 32px;
}
#store .block .top .container .list li {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-bottom: 10px;
}
#store .block .top .container .list li:before {
	content: "";
	display: block;
	background-color: #ccd4e0;
	border-radius: 50%;
	width: 8px;
	height: 8px;
	margin: 13px 15px 0 0;
}
#store .block .top .container .list li span {
	width: calc(100% - 23px);
}
#store .block .container {
	max-width: 1080px;
	width: calc(100% - 154px);
	margin: 0 auto;
}
#store .block .flex {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 90px;
	padding: 0 76px 86px;
}
#store .block .flex:before {
	content: "";
	display: block;
	background-color: #f2f9ff;
	width: 100%;
	height: calc(100% - 140px);
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
}
#store .block#crashproject .flex:before {
	background-color: #fff;
}
#store .block .flex li {
	width: 47.7%;
	z-index: 1;
}
#store .block .flex li img {
	border-radius: 16px;
	margin-bottom: 32px;
	filter: drop-shadow(1px 2px 7px rgba(0, 0, 0, 0.1));
}
#store .block .flex li h4 {
	font-size: 24px;
	margin-bottom: 16px;
}
#store .block .flex li p:not(:last-of-type) {
	margin-bottom: 24px;
}
#store .block .flex li .link {
	margin-top: 32px;
}
#store .block .flex li .link a {
	max-width: 350px;
}
@media screen and (max-width: 768px) {
	#store .block {
		padding: 80px 0;
	}
	#store .block h3 {
		width: calc(100% - 10vw);
		font-size: 18px;
	}
	#store .block h3 .en {
		font-size: 14px;
	}
	#store .block .top .container h4 {
		font-size: 18px;
		margin-bottom: 16px;
	}
	#store .block .top .container .list {
		padding: 20px;
	}
	#store .block .top .container .list li:before {
		width: 6px;
		height: 6px;
		margin-right: 10px;
	}
	#store .block .top .container .list li span {
		width: calc(100% - 16px);
	}
	#store .block .container {
		width: calc(100% - 10vw);
	}
	#store .block .flex {
		margin-top: 45px;
		padding: 0;
	}
	#store .block .flex li {
		width: 100%;
		padding: 0 5.1282vw 10.5128vw;
	}
	#store .block .flex li img {
		margin-bottom: 24px;
	}
	#store .block .flex li h4 {
		font-size: 18px;
		margin-bottom: 8px;
	}
}
