@charset "UTF-8";


/*
	

	Second Common



 */


/* Intro */
#intro {
	background-color: rgba(226, 91, 8, 1);
	position: relative;
	}
	#intro::after {
		background-image: url(/src/img/common/illust/city-white-01.png);
		background-position: left top;
		background-repeat: repeat-x;
		bottom: 0;
		content: '';
		display: block;
		left: 0;
		position: absolute;
		width: 100%;
		z-index: 2;
		}
	#int-wrap {
		display: table;
		position: relative;
		text-align: center;
		width: 100%;
		z-index: 1;
		}
		#int-inner {
			display: table-cell;
			vertical-align: middle;
			}
			#int-ttlarea { color: rgba(255, 255, 255, 1); }
				#int-ttl {}
				#int-ttl-sub { display: block; }

	#int-pattern {
		bottom: 0;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		}
		#int-pattern .com-ptn-item { position: absolute; }

/* Breadcrumbs */
.breadcrumbs {
	background-color: rgba(238, 238, 238, 1);
	position: relative;
	z-index: 1;
	}
	.breadcrumbs ul {
		list-style-type: none;
		letter-spacing: -0.4em;
		margin: 0 auto;
		text-align: left;
		}
		.breadcrumbs ul li {
			letter-spacing: 0em;
			position: relative;
			}
			.breadcrumbs ul li:after {
				content: '》';
				font-size: 11px;
				position: absolute;
				right: 0;
				top: 58%;
				width: 1px;

				-webkit-transform: translateY(-50%);
				-moz-transform: translateY(-50%);
				transform: translateY(-50%);
				}
			.breadcrumbs ul li:last-child:after { display: none; }
			.breadcrumbs ul li a,
			.breadcrumbs ul li span {
				color: rgba(0, 0, 0, .7);
				line-height: 1;
				}

/* Main */
#wrap {}

	/* Anchor */
	.sec-anchor {
		position: relative;
		z-index: 100;
		}
		.sec-anc-list { text-align: center; }
			.sec-anc-item {
				background-image: url(/src/img/common/arrow/facedown-orange.png);
				background-repeat: no-repeat;
				background-color: rgba(255, 255, 255, 1);
				color: rgba(50, 50, 50, 1);
				display: inline-table;
				position: relative;

				-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .2);
				box-shadow: 3px 3px 10px rgba(0, 0, 0, .2);
				}
				.sec-anc-item span {
					display: table-cell;
					vertical-align: middle;
					}

		/* Anchor > Scheme */
		.anc-fixed {
			left: 0;
			position: fixed;
			top: 0;
			width: 100%;
			}




/*
	

	MediaQuery



 */


@media screen and (min-width: 751px) {



/* Intro */
#intro { padding: 170px 0 150px; }
	#intro::after {
		background-size: auto 100px;
		height: 90px;
		}
	#int-wrap {}
		#int-inner {}
			#int-ttlarea {}
				#int-ttl {
					font-size: 50px;
					letter-spacing: 5px;
					}
				#int-ttl-sub {
					font-size: 14px;
					letter-spacing: 2px;
					margin-top: 10px;
					}

	#int-pattern {}
		#int-pattern .com-ptn-item { max-width: 80px; }
		#int-pattern .com-cloud-01 { bottom: 55%; left: 5%; }
		#int-pattern .com-cloud-02 { bottom: 60%; right: 5%; }
		#int-pattern .com-cloud-03 { bottom: 20%; left: 20%; }
		#int-pattern .com-cloud-04 { bottom: 30%; right: 20%; }

/* Breadcrumbs */
.breadcrumbs {}
	.breadcrumbs ul { width: 100%; }
		.breadcrumbs ul li {
			display: inline-block;
			padding: 10px 15px;
			}
			.breadcrumbs ul li:after {}
			.breadcrumbs ul li a,
			.breadcrumbs ul li span {
				display: inline-block;
				font-size: 12px;
				vertical-align: middle;
				}

/* Main */
#wrap { padding-top: 50px; }

	/* Anchor */
	.sec-anchor {
		height: 80px;
		margin-top: 30px;
		}
		.sec-anc-list {
			top: 0;

			-webkit-transition: .3s;
			transition: .3s;
			}
			.sec-anc-item {
				background-position: right 10px center;
				background-size: 20px;
				height: 80px;
				left: 0;
				margin: 0 10px 10px;
				top: 0;
				width: 300px;

				-webkit-border-radius: 40px;
				border-radius: 40px;

				-webkit-transition: .3s;
				transition: .3s;
				}
				.sec-anc-item span { font-size: 20px; }

		/* Anchor > Hover */
		.sec-anc-item:hover {
			color: rgba(223, 91, 8, 1);
			left: 3px;
			top: 3px;

			-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
			box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
			}

		/* Anchor > Scheme */
		.anc-fixed {
			left: 0;
			position: fixed;
			top: 10px;
			width: 100%;
			}
			.anc-fixed .sec-anc-item {
				height: 50px;

				-webkit-border-radius: 25px;
				border-radius: 25px;

				-webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, .05);
				box-shadow: 0 20px 20px rgba(0, 0, 0, .05);
				}
				.anc-fixed .sec-anc-item span { font-size: 18px; }
			.anc-fixed .sec-anc-item:hover {
				-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
				box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
				}


}


/* ------------------------------------------------ */


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


/* Intro */
#intro { padding: 100px 0 90px; }
	#intro::after {
		background-size: cover;
		height: 50px;
		}
	#int-wrap {}
		#int-inner {}
			#int-ttlarea {}
				#int-ttl {
					font-size: 25px;
					letter-spacing: 5px;
					line-height: 1.3;
					}
				#int-ttl-sub {
					font-size: 11px;
					letter-spacing: 2px;
					margin-top: 10px;
					}

	#int-pattern { overflow: hidden; }
		#int-pattern .com-ptn-item { max-width: 40px; }
		#int-pattern .com-cloud-01 { bottom: 50%; left: 5%; }
		#int-pattern .com-cloud-02 { bottom: 45%; right: 5%; }
		#int-pattern .com-cloud-03 { bottom: 20%; right: 20%; }
		#int-pattern .com-cloud-04 { bottom: 15%; left: 10%; }

/* Breadcrumbs */
.breadcrumbs {
	min-width: 0;
	overflow-x: scroll;
	}
	.breadcrumbs ul {
		display: block;
		width: 100%;
		white-space: nowrap;
		}
		.breadcrumbs ul li {
			display: inline-block;
			padding: 5px 12.5px 8px;
			}
			.breadcrumbs ul li:after {
				font-size: 10px;
				top: 50%;
				}
			.breadcrumbs ul li:last-child:after {}
			.breadcrumbs ul li a,
			.breadcrumbs ul li span {
				color: rgba(0, 0, 0, 0.6);
				font-size: 10px;
				}

/* Main */
#wrap {}

	/* Anchor */
	.sec-anchor {
		height: 60px;
		margin-top: 20px;
		}
		.sec-anc-list {
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: center;
			justify-content: center;

			top: 0;

			-webkit-transition: .3s;
			transition: .3s;
			}
			.sec-anc-item {
				background-position: center bottom 5px;
				background-size: 10px;
				margin: 0 5px;
				padding: 0 10px 10px;
				height: 60px;

				-webkit-border-radius: 15px;
				border-radius: 15px;
				}
				.sec-anc-item span { font-size: 12px; }

		/* Anchor > Scheme */
		.anc-fixed {
			left: 0;
			position: fixed;
			top: 5px;
			width: 100%;
			}
			.anc-fixed .sec-anc-item {
				height: 50px;

				-webkit-box-shadow: 0 15px 15px rgba(0, 0, 0, .05);
				box-shadow: 0 15px 15px rgba(0, 0, 0, .05);
				}
				.anc-fixed .sec-anc-item span { font-size: 12px; }


}