@charset "UTF-8";

#box_kv {
	width: 100%;
	height: calc(100vw * 0.29);

	background-image: url(../page_parts_list/fig_main.jpg);
	background-position: 0 0;
	background-repeat: no-repeat;

	background-size: auto 100%;
	-webkit-background-size: auto 100%;
	overflow: hidden;
}

#topicpath {
	width: 100%;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.6);
}

#topicpath ul {
	width: 1024px;
	margin: 0 auto;
	float: none;

}

#topicpath ul li {
	font-size: 1.3rem;
	padding: 0.6em 0;
}

#box_kv #topicpath li a:hover,
#topicpath ul li,
#topicpath li a:link,
#topicpath li a:visited {
	color: #444444;
}

#box_kv #topicpath li:before {
	display: none;
}

#topicpath li a:after {
	border-color: #444;
}

/*  */

#box_kv .inner {
	width: 1024px;
	margin: 40px auto 0;
	position: relative;
	text-align: right;
}

#box_kv ul {}

#box_kv li {
	display: inline-block;
	color: #fff;
	font-size: 1.2rem;
}

#box_kv li:before {
	content: '>';
	display: inline-block;
	padding-right: 0.4em;
}

#box_kv li:nth-of-type(1):before {
	display: none;
}

#box_kv li a {
	color: #fff;
	margin-right: 0.2em;
}

#box_kv li a:hover {
	color: #23b8fe;
}

#box_kv h1 {
	font-family: "DINNextLTPro-Light", "Roboto", sans-serif;
	font-weight: 100;
	color: #020202;
	font-size: 8.0rem;
	line-height: 1.1;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.05em;
}

#box_kv h1 span {
	font-size: 0.3em;
	display: block;
}

#box_kv h1 em {
	font-style: normal;
	color: #23b7fe;
}

#box_kv p {
	font-family: "DINNextLTPro-Light", "Roboto", sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	margin-top: -0.4em;
}

#box_kv p a {
	color: #020202;
}

#box_kv p a:hover {
	transition: all 0.15s ease-in;
	opacity: 0.8;
	color: #23b7fe;
}

#box_kv h2 {
	font-size: 2.4rem;
	margin-top: 0.4em;
}

/*  */

#c_nav {
	width: 100%;
	margin-top: 20px;
}

#li_nav {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

#li_nav li {
	padding: 0.4em 3em;
}

#li_nav li:not(:last-child) {
	border-right: #21aef2 1px solid;
}

#li_nav li a {
	color: #21aef2;
	font-size: 2.0rem;
	font-weight: 600;
}

#li_nav li a:hover {
	transition: all 0.15s ease-in;
	opacity: 0.8;
}

/*  */


#box_ttl {
	width: 1024px !important;
	margin: 2em auto 0;
	background-color: transparent;
	text-align: center;
	height: auto !important;

	border-top: none;
	position: static;
	overflow: visible;
}

#box_ttl h2,
#box_ttl p:first-of-type {
	font-family: 'Noto Serif JP', serif;
	color: #a28d51;
}

#box_ttl p:first-of-type {
	color: #333;
}

#box_ttl h2 {
	font-size: 4rem;
	/*margin-top: -0.3em;*/
}

#box_ttl p:first-of-type {
	font-size: 1.6rem;
	line-height: 1.7;
	margin-top: 1em;
}


#box_ttl p {
	font-size: 1.4rem;
	color: #444444;
	line-height: 1;
	margin-top: 1.4em;
}

#box_ttl ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;

	margin-top: 2.6em;
}

#box_ttl li {
	font-size: 1.8rem;
	font-weight: bold;
}

#box_ttl li a {
	color: #333;
	border: 3px solid #333;
	padding: 0.6em 0;
	display: block;
	min-width: 17em;
}

#box_ttl li:nth-of-type(2) a {
	border-left: none;
	border-right: none;
}


/*  */

#box_main {
	width: 100%;
	margin-top: 3em;
}

#box_main section {
	width: 100%;
	position: relative;
}

#box_main section h3 {
	text-align: center;
	background-image: url(../page_parts_list/bg_ttl.png);
	background-position: 0 0;
	background-repeat: no-repeat;

	background-size: 422px auto;
	-webkit-background-size: 422px auto;

	width: 422px;
	height: 134px;

	margin: 0 auto;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1.4;

	padding-top: 1.3em;

}

#box_main #box_official h3 {
	background-image: url(../page_parts_list/bg_ttl_os.png);
}

#box_main section h3:before {
	content: '';
	display: block;
	width: 100vw;
	height: 5.5em;
	background-color: #ececec;
	position: absolute;
	left: 0;
	top: 2.2em;
	z-index: -1;
}

#box_main section h3:after {
	content: '';
	display: block;

	width: 255px;
	height: 5.5em;
	-webkit-transform: skew(-20deg);
	transform: skew(-20deg);
	background: #fff;
	position: absolute;
	top: 2.2em;
	z-index: -1;
	left: 50%;
	margin-left: -127.5px;
}

#box_main section h3 span {
	font-family: 'roboto';
	font-weight: 300;
	font-size: 2.5rem;
	display: block;
}

div#box_official_d {
	margin-top: 3em;
	margin-bottom: 20px;
}

/*  */

#box_official h4 {
	text-align: center;
	font-size: 1.4rem;
	position: relative;
	/*border-top: 1px solid #cccccc;*/
}

#box_official h4:after {
	content: '';
	display: block;
	width: 100%;
	border-top: 1px solid #cccccc;
	/*z-index: -1;*/
	position: absolute;
	top: 0.5em;
	left: 0;
}

#box_official h4 span {
	display: block;
	font-family: "Roboto", sans-serif;
	font-size: 1.8rem;
	font-weight: normal;
	color: #fff;
	line-height: 1;
	position: relative;
	margin-bottom: 0.8em;
	z-index: 9;

}

#box_official h4 span:after {
	content: '';
	display: block;
	width: 12em;
	height: 2em;
	background-color: #242222;
	position: absolute;
	top: -0.5em;
	left: calc(50% - 6em);
	z-index: -1;
	transform: skew(-20deg);
}

#box_official #asian_regional h4 span:after {
	width: 16em;
	left: calc(50% - 8em);
}

/*  */

#box_official #asian_regional {
	margin-top: 3em;
	margin-bottom: 50px;
}

/*  */

#box_main section ul {
	width: 1024px;
	margin: 0 auto;

	display: flex;
	display: -webkit-flex;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;

	align-items: center;
	-webkit-align-items: center;

	flex-direction: row;
	-webkit-flex-direction: row;

	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;

	/*border-top: 1px solid #cccccc;*/

	padding-top: 3.6em;
	padding-bottom: 1.8em;
}

#box_main #box_official ul {
	/*margin-top: -3em;*/
	overflow: visible;
}

div#box_official_a {
	margin-bottom: 100px;
	margin-top: 40px;
}

#box_main #box_official #box_official_a ul {
	/*margin-top: 0;*/
	padding-bottom: 0;
	width: 1000px;
	margin-bottom: 4em;
}

#box_main #box_kyosan ul {
	border-top: none;
	padding-top: 12px;
	padding-bottom: 48px;
}

#box_main #box_official_a ul {
	border-top: none;
	padding-top: 0;
	justify-content: center;
	gap: 50px;
}

#box_main section ul a {
	display: block;
	height: 100%;
	text-align: center;
}

#box_main section ul li {
	text-align: center;
}

#box_main section ul a img {
	width: 100%;
	height: auto;
	/* Chrome対応 */
	image-rendering: -webkit-optimize-contrast;
}

/* 最新のsafari用 */
_::-webkit-full-page-media,
_:future,
:root #box_main section ul a img {
	image-rendering: auto;
}

#box_main section ul .border img {
	border: 1px solid #c7c4c3;
}

/*  */

#box_official_a li:nth-child(1) {
	width: 16.9%;
}

#box_official_a li:nth-child(2) {
	width: 19.2%;
	padding-top: 2%;
}

#box_official_a li:nth-child(4) {
	width: 12.6%;
	margin-top: -3%;
}

#box_official_a li:nth-child(3) {
	width: 31.8%;
}

#box_official_a li:nth-child(5) {
	width: 25.4%;
}

#box_official_a li:nth-child(6) {
	/* width: 25.4%; */
	width: 13.0%;
	box-sizing: content-box;
	padding: 0 3%;
}

#box_official_a li:nth-child(7) {
	width: 16%;
	padding-top: 2%;
}

/* #box_official_a li:nth-child(8) {
	width: 25.4%;
} */

/* エフサステクノロジーズ */
#box_official_a li:nth-child(8) {
	width: 36%;
}

/* #box_official_a li:nth-child(10) {
	width: 34.6%;
} */


/*  */

#box_main #asian_regional ul,
#box_main #box_official_b ul {
	padding-top: 0.0em;
}

#box_main #asian_regional ul {
	justify-content: center;
	margin-top: 2em;
	flex-direction: column;
}

#box_official_b li {
	width: 20%;
	margin-top: 2em;
}

#box_main #asian_regional li img,
#box_main #box_official_b li img {
	width: 90%;
}


#box_main #box_official_c ul {
	padding-top: 0;
}

#box_official_c li {
	width: calc(100% / 7);
	margin-top: 2em;
}

#box_main #box_official_c li img {
	width: 94%;
}

#box_main #box_official_d ul {
	padding-top: 1em;
}

#asian_regional li,
#box_official_d li {
	width: calc(100% / 8);
	margin-top: 1em;
}

#asian_regional li:first-child {
	width: 20%;
}

#asian_regional li img,
#box_main #box_official_d li img {
	/*max-width: 103px;*/
	width: 90%;
	height: auto;
}

/*  */

#box_main div.box_support_com ul {
	border: none;
	padding-top: 0;
}

div.box_support_com ul li,
#box_kyosan ul li {
	/*width: calc(100% / 3);*/
	width: 32%;
	height: 4em;
	font-size: 1.6rem;
	margin-top: 1.2em;
	/*background-color: #e3f6ff;*/


	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;

	line-height: 1.4;
	background-color: #ececec;
}

div.box_support_com ul li.no_link,
#box_kyosan ul li.no_link {
	padding: 0 1em;
}

div.box_support_com ul li:nth-child(3n+2),
#box_kyosan ul li:nth-child(3n+2) {
	margin-left: 1.2em;
	margin-right: 1.2em;
}

#box_main div.box_support_com ul li a,
#box_kyosan ul li a {
	color: #333;
	display: block;
	width: 100%;
	height: 100%;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;

	padding: 0 1em;
	background-color: #e3f6ff;
}

#box_main div.box_support_com ul li a:hover,
#box_kyosan ul li a:hover {
	background-color: #25b5fe;
	color: #fff;

	-moz-transition: all 0.15s ease-in;
	transition: all 0.15s ease-in;

	opacity: 0.8;
}


/*  */

#box_main .c_nav {}

#box_main .c_nav ul {
	display: flex;
	display: -webkit-flex;

	justify-content: center;
	-webkit-justify-content: center;


	align-items: center;
	-webkit-align-items: center;
	flex-direction: row;
	-webkit-flex-direction: row;

	padding-bottom: 1em;
	border: none;
}

#box_main .c_nav li {
	font-size: 1.3rem;
	margin: 0 0.5em;
	font-weight: bold;

	overflow: hidden;

	border-radius: 3px;
	border: 1px solid #666666;
}

#box_main .c_nav li a {
	display: block;
	color: #333;


	height: 3em;
	width: 3em;

	line-height: 3em;


}

#box_main .c_nav li a:hover {
	background-color: #25b5fe;
	color: #fff;

	-moz-transition: all 0.15s ease-in;
	transition: all 0.15s ease-in;

	opacity: 0.8;
}


#box_main .c_nav:nth-of-type(10) ul li:nth-of-type(10),
#box_main .c_nav:nth-of-type(9) ul li:nth-of-type(9),
#box_main .c_nav:nth-of-type(8) ul li:nth-of-type(8),
#box_main .c_nav:nth-of-type(7) ul li:nth-of-type(7),
#box_main .c_nav:nth-of-type(6) ul li:nth-of-type(6),
#box_main .c_nav:nth-of-type(5) ul li:nth-of-type(5),
#box_main .c_nav:nth-of-type(4) ul li:nth-of-type(4),
#box_main .c_nav:nth-of-type(3) ul li:nth-of-type(3),
#box_main .c_nav:nth-of-type(2) ul li:nth-of-type(2),
#box_main .c_nav:nth-of-type(1) ul li:nth-of-type(1) {
	background-color: #26b6fe;
}

#box_main .c_nav:nth-of-type(10) ul li:nth-of-type(10) a,
#box_main .c_nav:nth-of-type(9) ul li:nth-of-type(9) a,
#box_main .c_nav:nth-of-type(8) ul li:nth-of-type(8) a,
#box_main .c_nav:nth-of-type(7) ul li:nth-of-type(7) a,
#box_main .c_nav:nth-of-type(6) ul li:nth-of-type(6) a,
#box_main .c_nav:nth-of-type(5) ul li:nth-of-type(5) a,
#box_main .c_nav:nth-of-type(4) ul li:nth-of-type(4) a,
#box_main .c_nav:nth-of-type(3) ul li:nth-of-type(3) a,
#box_main .c_nav:nth-of-type(2) ul li:nth-of-type(2) a,
#box_main .c_nav:nth-of-type(1) ul li:nth-of-type(1) a {
	color: #fff;
}


/*  */

#box_shop_banner {
	text-align: center;

	border-top: 1px solid #cccccc;
	width: 1024px;
	margin: 180px auto 0;
}

#box_shop_banner img {
	display: block;
	margin: 80px auto 1em;
	width: 927px;
	height: auto;
}

#box_shop_banner a {
	color: #222;
}

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

	#box_kv {
		height: 60vw;
		background-position: -40vw 0;
	}

	#box_kv li {
		/*font-size: 2.8125vw;*/
		/* 9px */

		font-size: 2.5vw;
		/* 8px */
	}

	#box_kv .inner {
		width: 100%;
		height: auto;
		padding: 0 2vw;
		position: relative;
		margin-top: 6vw;
	}

	#box_kv h1 {
		font-size: 6.875vw;
		/* 22px */
	}

	#box_kv p {
		font-size: 2.5vw;
		/* 8px */
		margin-top: 0.0em;
	}

	#box_kv h2 {
		font-size: 3.75vw;
		/* 12px */

	}

	/*  */

	#topicpath {
		overflow: hidden;
		height: auto;
		padding-bottom: 0;
	}

	#topicpath ul {
		width: 96vw;
		justify-content: flex-start;
	}

	#topicpath ul li {
		font-size: 3.125vw;
		/* 10px */
		font-size: 2.5vw;
		/* 8px */
		flex-grow: 0;
	}

	/*  */

	main {
		width: 100%;

	}

	#box_ttl {
		width: 100% !important;
		padding: 0 2vw;
	}

	#box_ttl h2 {
		/*font-size: 20.5vw;*/
		font-size: 7.5vw;
		/* 24px */
		/*font-size: 8.125vw;*/
		/* 26px */
		font-size: 7.8125vw;
		/* 25px */

		margin-top: 0;
		line-height: 1.2;
		text-align: center;
		font-feature-settings: "palt";
	}

	#box_ttl p:first-of-type {
		/*font-size: 10.25vw;*/
		/* font-size: 4.375vw; */
		/* 14px */
		font-size: 3.75vw;
		/* 12px */
	}

	#box_ttl p {
		font-size: 3.125vw;
		/* 10px */
	}


	/*  */

	#box_ttl ul {
		width: 100%;
		/*margin-top: 1.6em;*/
		align-items: normal;
	}

	#box_ttl li {
		font-size: 3.125vw;
		/* 10px */
		width: calc(100% / 3);

		display: flex;
		align-items: center;
		background-color: silver;
	}

	#box_ttl li a {
		width: 100%;
		height: 100%;
		display: block;
		min-width: initial;
		border-width: 2px;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		line-height: 1.4;
	}

	/*  */

	#box_main section h3 {

		width: 80vw;
		height: calc(80vw * 0.317);

		background-size: 100% auto;
		-webkit-background-size: 100% auto;

		/*background-color: rgba(0, 0, 0, 0.5);*/

		font-size: 4.375vw;
		/* 14px */

		font-size: 3.125vw;
		/* 10px */

		padding-top: 1.1em;

	}

	#box_main section h3 span {
		font-size: 13vw;
		/* 30px */
		font-size: 4.375vw;
		/* 14px */


	}

	#box_main section h3:before,
	#box_main section h3:after {
		top: 1.5em;
	}

	/*  */
	div#asian_regional,
	div#box_official_d,
	div#box_official_c,
	div#box_official_b {
		width: 94%;
	}

	#box_main section ul {
		width: 100%;
	}

	#box_official_b li {
		width: calc(100% / 3);
	}

	#box_official_c li {
		width: calc(100% / 4);
	}

	#asian_regional li,
	#box_official_d li {
		width: calc(100% / 5);
	}

	#asian_regional li:first-child {
		width: calc(100% / 3);
	}


	#box_main #box_official_d li img {
		max-width: 100%;
	}

	/*  */

	#box_main #box_official_a ul {
		gap: 4vw;
	}

	/*  */

	#box_official_a li {
		margin-bottom: 5vw;
	}

	#box_official_a li:nth-child(1) {
		width: 25.35%;
	}

	#box_official_a li:nth-child(2) {
		width: 28.8%;
		padding-top: 2%;
	}

	#box_official_a li:nth-child(4) {
		width: 18.9%;
		margin-top: -3%;
	}

	#box_official_a li:nth-child(3) {
		width: 47.7%;
	}

	#box_official_a li:nth-child(5) {
		width: 38.0%;
	}

	#box_official_a li:nth-child(6) {
		/* width: 38.0%; */
		width: 20.0%;
		padding: 0;
		box-sizing: border-box;
	}

	#box_official_a li:nth-child(7) {
		width: 24%;
		padding-top: 2%;
	}

	#box_official_a li:nth-child(8) {
		width: 38.0%;
	}

	#box_official_a li:nth-child(9) {
		width: 38.0%;
	}

	#box_official_a li:nth-child(10) {
		width: 51.9%;
	}

	/*  */

	#box_official h4 {
		font-size: 3.125vw;
		/* 10px */
	}

	#box_official h4 span {
		font-size: 3.75vw;
		/* 12px */
	}

	/*  */

	#box_main div.box_support_com ul,
	#box_main #box_kyosan ul {
		width: 94%;

		align-items: normal;
	}



	div.box_support_com ul li,
	#box_kyosan ul li {
		/*width: 31%;*/
		width: 48%;
		font-size: 3.125vw;
		/* 10px */
		font-weight: bold;

		height: auto;
		padding: 0;

		min-height: 4em;

		word-break: break-all;
	}

	div.box_support_com ul li:nth-child(3n+2),
	#box_kyosan ul li:nth-child(3n+2) {
		margin-left: 0;
		margin-right: 0;
	}

	div.box_support_com ul li:nth-child(even),
	#box_kyosan ul li:nth-child(even) {
		margin-left: auto;
	}

	#box_main div.box_support_com ul li a,
	#box_kyosan ul li a {
		/*		display: block;
		height: 100%;*/

		padding: 1em 0.6em;
	}

	/*  */

	#box_main .c_nav ul {
		/*		justify-content: space-between;
		-webkit-justify-content: space-between; */

		flex-wrap: wrap;
	}

	#box_main .c_nav li {
		font-size: 3.125vw;
		/* 10px */
		margin-bottom: 1.4em;
	}

	#box_main .c_nav li a {
		width: 4.4em;
	}

	#box_main .c_nav li:nth-of-type(n+6) {
		/*margin-top: 1em;*/
	}

	/*  */

	#box_shop_banner {
		width: 94%;
		margin-top: 20vw;
	}

	#box_shop_banner img {
		width: 100%;
		margin-top: 10vw;
	}

	#box_shop_banner a {
		font-size: 3.4375vw;
		/* 11px */

		line-height: 1.2;
	}

	/*  */

	div#box_official_a {
		margin-bottom: 10vw;
		margin-top: 6vw;
	}

	#box_main #box_official #box_official_a ul {
		width: 100%;
	}

	/*  */

	#c_nav {
		display: none;
	}

	#li_nav {
		justify-content: space-around;
	}

	#li_nav li {
		padding: 0;

	}

	#li_nav li:not(:last-child) {
		border: none;
	}

	#li_nav li a {
		font-size: 3.125vw;
		/* 10px */
		/* font-size: 3.75vw; */
		/* 12px */
		line-height: 1.2;
	}

}

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

	#box_main .c_nav li {
		font-size: 2.8125vw;
		/* 9px */
	}

	#box_main .c_nav li a {
		width: 2.5em;
		height: 2.5em;
	}

}




























/*  */