@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400');
html, html * {
	padding: 0px;
	margin: 0px;
	font-family: 'Noto Sans JP';
	@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 1dppx) {
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Mincho Pro", "ＭＳ ゴシック", "MS Mincho","serif";
	}
	font-size: 36pt;
	font-weight: 300;
}

body {
	color: rgba(253,216,118,1.00);
	background-color: rgba(15,35,80,1.00);
	max-width: 1280px;
	min-width: 308px;
	margin-left: auto;
	margin-right: auto;
}

/*ヘッダー領域（メニュー、題字と写真）*/
header {
	background-image: url(../common/maezawaImage.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #FFFFFF;
	position: relative;
}

.title {
	display:block;
	padding: 96px 0px 256px 0px;
}
.title span {
	display:inline;
	font-size: 60px;
	font-weight: 400;
	text-shadow: 3px 3px 4px #000000;
}
header img {
	display: inline;
	height: 64px;
	vertical-align: -15px;
}

/*メニュー*/
nav {
	display: block;
	background: linear-gradient(to bottom, rgba(15,35,80,0.40), rgba(15,35,80,0.40), rgba(15,35,80,0.50), rgba(15,35,80,1.00));
	z-index: 980;
	position: static;
	text-align: center;
	padding: 18px 0px;
}
.subNav {
	border-top: 1px solid rgba(0,0,0,0.50);
	background: linear-gradient(to bottom, rgba(15,35,80,1.00), rgba(15,35,80,1.00));
}
nav li {
	display: block;
}
nav a {
	display: inline-block;
	padding: 6px 3px;
	min-width: 130px;
	text-align: center;
	border-style: solid;
	border-width: 1px;
	border-radius: 10px;
	color: rgba(255,255,255,1.00);
	border-color: rgba(0,0,0,0.00);
	font-size: 48px;
	font-weight: 400;
	text-decoration: none;
}
nav a:hover {
	border-color: rgba(253,216,118,1.00);
}
nav a:active {
	border-color: rgba(253,216,118,1.00);
	background-color: rgba(253,216,118,0.30);
}
nav .selected {
	color: rgba(253,216,118,1.00);
}

/*本文領域*/
main {
	text-align: center;
	display: block;
}
main .part {
	margin: 0px 0px 24px 0px;
}
main article {
	display: block;
	vertical-align: top;
	color: #000000;
	background-color: #FFFFFF;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 220px;
	margin: 12px 0px;
}
iframe{
	width: 100%;
}
main article .text {
	background-color: rgba(255,255,255,0.90);
}
main p {
	text-indent: 24pt;
	font-size: 24pt;
	text-align: left;
	line-height: 36pt;
	padding: 0px 12px 0px 36pt;
	vertical-align:top;
}
main span {
	vertical-align: baseline;
}

/*index*/
.index .topPart{
	margin: 0px;
	padding: 0px;
}

.index .topPart p {
	text-indent: 24pt;
	padding: 0px 10px;
}

.index .topArticle {
	display: block;
	width: 100%;
	max-width: 1280px;
	min-width: 0px;
	min-height: 0px;
	margin: 12px 0px 0px 0px;
	padding: 12px 0px;
	background-color: rgba(255,255,255,0.90);
}

.index p, .index .pickupView p {
	text-indent: 0px
}

.index .comment {
	padding: 9px 0px;
}
.index .comment p {
	padding: 0px 9px;
}

.index h1 {
	display: block;
	color: #000000;
	background-color: rgba(255,255,255,1.00);
	text-align: center;
	font-size: 48px;
	font-weight: 400;
	padding: 3px 0px 3px 6px;
}
.index h2 {
	display: block;
	color: rgba(15,35,80,1.00);
	background-color: rgba(253,216,118,0.90);
	text-align: center;
	font-size: 48px;
	font-weight: 400;
	padding: 9px 0px;
}
.index .newArticleStyle {
	color: rgba(255,255,255,1);
	animation-name: emphasis;
	animation-duration: 3600ms;
	animation-timing-function:ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-fill-mode:forwards;
}
/*アニメーションの設定*/
@keyframes emphasis {
	from {
		color: rgba(15,35,80,1.00);
		background-color: rgba(253,216,118,0.90);
	}
	to {
		color: rgba(253,216,118,1.00);
		background-color: rgba(15,35,80,0.90);
	}
}
.index h3 {
	display: block;
	text-align: left;
	font-size: 36px;
	font-weight: 400;
	padding: 9px 6px 3px 12px;
}

/*common*/
.common {
	color:  rgba(0,0,0,1.00);
	background-color: rgba(255,255,255,0.90);
}
.common h1 {
	display: block;
	color:  rgba(253,216,118,1.00);
	background-color: rgba(15,35,80,0.50);
	font-size: 40px;
	font-weight: 400;
	padding: 6px 0px 6px 12px;
	margin: 6px 0px 0px 0px;
	text-align: left;
	clear: both;
}
.common h2 {
	display: block;
	color:  rgba(253,216,118,1.00);
	background-color: rgba(15,35,80,0.50);
	font-weight: 400;
	text-align: left;
	font-size: 40px;
	margin: 9px 0px 0px 0px;
	padding: 3px 0px 3px 18px;
	clear: both;
}
.common h3 {
	display: block;
	text-align: left;
	text-decoration: underline;
	font-size: 36px;
	font-weight: 400;
	color:  rgba(191,0,0,1.00);
	padding: 12px 0px 3px 24px;
}
.common h4 {
	color: rgba(15,35,80,1.00);
	text-align: left;
	font-size: 30px;
	font-weight: 400;
	padding: 12px 0px 3px 30px;
}
.common h5 {
	color: rgba(0,0,127,1.00);
	text-align: left;
	font-size: 30px;
	font-weight: 400;
	padding: 12px 0px 3px 36px;
}
.common p {
	font-size: 24px;
	text-indent: 24px;
	padding: 0px 0px 0px 44px;
	line-height: 36px;
}
.common .imageR {
	float: right;
	margin: 6px 12px 0px 6px;
}
.common .imageL {
	float: left;
	margin: 6px 6px 0px 44px;
}
.common .imageR img, .common .imageL img {
	display: inline-block;
	text-align: center;
	max-width: 100%;
	max-height: 300px;
}
.common .imageR p, .common .imageL p {
	text-indent: 0px;
	text-align: center;
	line-height: 16px;
	margin: 6px 0px;
	padding: 0px;
}
.common .imageR a, .common .imageL a {
	border-width: 0px;
}
/* access */
.access {
	color:  rgba(0,0,0,1.00);
	background-color: rgba(255,255,255,0.90);
}
.access h1 {
	color: rgba(0,127,127,1.00);
	background: linear-gradient(to bottom, rgba(15,35,80,1.00), rgba(15,35,80,0.50), rgba(15,35,80,0.00), rgba(15,35,80,0.00), rgba(15,35,80,0.00), rgba(15,35,80,0.00));
	text-align: left;
	padding: 18px 0px 0px 12px;
	font-size: 40px;
	font-weight: 400;
}
.access h3 {
	text-align: left;
	font-size: 30px;
	font-weight: 400;
	padding: 0px 0px 0px 18px;
	margin: 12px 0px 0px 0px;
	color: rgba(127,127,255,1.00);
	background-color: rgba(255,255,255,0.50);
}
.access h4 {
	text-align: left;
	text-decoration: underline;
	padding: 12px 0px 0px 32px;
	font-size: 40px;
	font-weight: 400;
	color: rgba(127,63,255,1.00);
}
.access h5 {
	text-align: left;
	padding: 6px 0px 0px 64px;
	font-size: 40px;
	font-weight: 400;
	color: rgba(17,17,127,1.00);
}
.access p {
	padding: 0px 0px 0px 128px;
	font-size: 36px;
	text-indent: -36px;
}
#carTrip, #trainTrip {
	padding: 0px 0px 24px 0px;
}

/*表*/
main table {
	margin: 6px 6px 6px 30px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(130,0,2,1.00);
	border-collapse: collapse;
	font-size: 24pt;
}
main table caption {
	color:  rgba(130,0,2,1.00);
	font-size: 24pt;
}
main th,main td {
	border-width: 1px;
	border-style: solid;
	padding: 6px 12px;
	border-color: rgba(130,0,2,1.00);
}
main th {
	color: rgba(130,0,2,1.00);
}
main td {
	text-align: center;
}

/*フッター*/
footer {
	text-align: center;
	color: rgba(255,255,255,0.80);
	background-color: rgba(255,255,255,0.10);
	padding: 12px 0px 24px 0px;
}
footer p {
	font-size: 12pt;
}
footer .contact {
	margin:  10px;
	display: inline-block;
	text-align: left;
	vertical-align: top;
}
footer .office {
	display: block;
	color: rgba(253,216,118,1.00);
}
footer .office p {
	font-size: 14pt;
}

footer .address {
	display: block;
}
footer .address p {
	font-size: 11pt;
}
/*拡大///////////////////////////////////////////////////////////////////*/
.pickupView {
	position: fixed;
	z-index: 990;
	text-align: center;
	top: 0%;
	bottom: 0%;
	left: 0%;
	right: 0%;
	animation-duration: 150ms;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	animation-name: pickupViewView;
}
/*アニメーションの設定*/
@keyframes pickupViewView {
	from{
		background-color: rgba(0,0,0,0.00);
	}
	to {
		background-color: rgba(0,0,0,0.90);
	}
}

.pickupView article {
	display: inline-block;
	vertical-align: middle;
	color: #000000;
	background-color: rgba(255,255,255,1.00);
	max-width: 1280px;
	min-width: 308px;
	margin:  12px 0%;
	word-wrap: break-word;
	overflow: auto;
	background-size: auto;
}

.pickupView article .text {
	vertical-align: top;
	display: none;
	background-color: rgba(255,255,255,1.00);
	max-width: 308px;
}

.pickupView .comment {
	padding: 9px 0px;
}
.pickupView .comment p {
	padding: 0px 9px;
}

.pickupView article img {
	width: 100%;
}


.pickupView h2 {
	display: block;
	color: #000000;
	background-color:  rgba(239, 239, 239, 0.8);
	text-align: left;
	font-size: 18px;
	font-weight: 400;
	padding: 9px 0px 9px 18px;
}

.pickupView h3 {
	display: block;
	text-align: left;
	font-size: 18px;
	font-weight: 400;
	padding: 9px 6px 3px 12px;
}

.pickupView p {
	/*text-indent: 16px;*/
	text-align: left;
	line-height: 26px;
	padding: 0px 6px 0px 30px;
	vertical-align:top;
}

/*表*/
.pickupView table {
	margin: 6px 6px 6px 30px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(130,0,2,1.00);
	border-collapse: collapse;
}
.pickupView caption {
	font-size: 12pt;
	color:  rgba(130,0,2,1.00);
}
.pickupView th,.pickupView td {
	border-width: 1px;
	border-style: solid;
	padding: 6px 12px;
	border-color: rgba(130,0,2,1.00);
}
.pickupView th {
	color: rgba(130,0,2,1.00);
}
.pickupView td {
	text-align: right;
}

/* レスポンシブ ////////////////////////////////////////////////*/
@media (min-width: 768px) and (min-aspect-ratio: 3/4) {
	html, html * {
		font-size: 12pt;
	}
	header {
		min-height: 480px;
	}
	.title {
		position: absolute;
		padding: 128px 0px 0px 36px;
	}
	.title span {
		font-size: 48px;
	}
	/*メニュー共通*/
	nav {
		position: fixed;
		display: block;
		padding: 3px 0px;
		max-width: 1280px;
		width: 100%;
		background: linear-gradient(to bottom, rgba(15,35,80,0.90), rgba(15,35,80,0.90));
	}
	main nav {
		position: static;
	}
	.subNav {
		margin: 40px 0px 0px 0px;
		background: linear-gradient(to bottom, rgba(15,35,80,0.90), rgba(15,35,80,0.90));
	}
	#colorSelection {
		top: 445px;
		bottom: auto;
		left: auto;
		right: 6px;
	}
	#colorSelection .colorCube {
		margin: 3px;
		width: 24px;
		height: 12px;
		border-width: 6px;
	}

	/*メニュー*/
	nav li {
		display: inline-block;
	}
	nav a {
		padding: 2px 3px;
		font-size: 20px;
	}

	main p {
		text-indent: 12pt;
		font-size: 12pt;
		line-height: 18pt;
		padding: 0px 6pt 0px 24pt;
	}

	/*表*/
	table caption {
		font-size: 12pt;
	}
	main table caption {
		font-size: 12pt;
	}
	
	.index .part {
		margin:  12px 0px;
	}
	.index .topPart p {
		text-indent: 16px;
	}
	.index article {
		display: inline-block;
		width: 47%;
		min-height: 435px;
		max-height: 435px;
		margin: 12px 1%;
	}
	.index article .text {
		height: 383px;
		overflow: auto;
	}

	.index h1 {
		text-align: left;
		font-size: 24px;
	}
	.index h2 {
		font-size: 24px;
	}
	.index h3 {
		font-size: 18px;
	}

	.common h1 {
		font-size: 26px;
		padding: 6px 0px 6px 12px;
		margin: 6px 0px 0px 0px;
	}
	.common h2 {
		font-size: 22px;
		margin: 9px 0px 0px 0px;
		padding: 3px 0px 3px 18px;
	}
	.common h3 {
		font-size: 20px;
		color:  rgba(191,0,0,1.00);
		padding: 12px 0px 3px 24px;
	}
	.common h4 {
		font-size: 18px;
		padding: 12px 0px 3px 30px;
	}
	.common h5 {
		font-size: 16px;
		padding: 12px 0px 3px 36px;
	}
	.common p {
		font-size: 16px;
		text-indent: 16px;
		padding: 0px 0px 0px 44px;
		line-height: 28px;
	}

	.access h1 {
		font-size: 24px;
	}
	.access h3 {
		padding: 0px 0px 0px 12px;
		font-size: 22px;
	}
	.access h4 {
		padding: 12px 0px 0px 24px;
		font-size: 21px;
	}
	.access h5 {
		padding: 6px 0px 0px 36px;
		font-size: 20px;
	}
	.access p {
		padding: 0px 0px 0px 64px;
		font-size: 18px;
		text-indent: -18px;
	}

	footer {
		padding: 12px 0px 12px 0px;
	}

	/*拡大///////////////////////////////////////////////////////////////////*/
	.pickupView article .text {
		display: inline-block;
		max-width: 308px;
	}
	.pickupView article img {
		display: inline-block;
		width: 312px;
	}
}

/* レスポンシブ ////////////////////////////////////////////////*/
@media (min-width: 1280px) and (min-aspect-ratio: 3/4) {
	.index article {
		display: inline-block;
		width: 31%;
		margin:  12px 1%;
	}

	/*拡大///////////////////////////////////////////////////////////////////*/
	.pickupView article .text {
		max-width: 400px;
	}
	.pickupView article img {
		width: 480px;
	}
}