@charset 'UTF-8';

/** |READ ME| **************************************************************************************

theme_sp.css
Ver.201806

----------------------------------------------------------------------------------------------------

01. HTML初期化
02. ページ設定
　02-01. ヘッダー
　02-02. コンテンツ
　02-03. フッター

************************************************************************************** |READ ME| **/





/** |01. HTML初期化| >> *************************************************************** >> START **/


* {font-size: inherit;}

hr {display: none;}

body, header, main, footer, section, article, aside, menu, nav,
address, div, h1, h2, h3, h4, h5, h6, p, hr,
ul, ol, li, dl, dt, dd, table, th, td, figure, figcaption {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 1;
	margin: 0;
	padding: 0;
}

header, main, footer, section, article, aside, nav, figure {display: block;}

html {font-size: 50%;/* 10px = 1rem(62.5% * 0.8) */}

@media screen and (max-width: 375px) {
	html {font-size: 40%;}
}

@media screen and (max-width: 320px) {
	html {font-size: 36%;}
}

body {
	background-color: #fff;
	color: #7f8283;
	font-family: 'Trade Gothic W01 Light', sans-serif;
	-moz-font-feature-settings: 'pkna' 1;
	-webkit-font-feature-settings: 'pkna' 1;
	font-feature-settings: 'pkna' 1;
	font-size: 2.4rem;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, th, strong {font-family: 'Trade Gothic W01 Bold', sans-serif;}

table {border-collapse: collapse;}

table, th, td, img, iframe {border: none;}

address {font-style: normal;}

li {list-style: none;}

img {
	height: auto;
	vertical-align: top;
	width: 100%;
}

a {color: #4aa6c3;}

.clearfix {zoom: 1;}

.clearfix::after {
	clear: both;
	content: '';
	display: block;
}


/** |01. HTML初期化| << ***************************************************************** << END **/





/** |02. ページ設定| >> *************************************************************** >> START **/


	/** |02-01. ヘッダー| **************************************************************** START **/


	.site {
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		width: 100%;/* 640px */
		z-index: 1000;
	}

		.site .prop {
			background-color: #fff;
			border-bottom: 1px solid #d4d5d6;
			padding: 3.44% 5%;
			width: 100%;/* 640px */
		}


		/** [サイトロゴ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.site .trademark {
			padding-top: 14.69%;
			position: relative;
			width: 22.81%;/* 146px */
		}

			.site .trademark a {
				background: url(/en/common/img/st_img_trademark.jpg) no-repeat 0 0;
				background-size: 100% auto;
				display: block;
				height: 100%;
				left: 0;
				overflow: hidden;
				position: absolute;
				text-indent: 100%;
				top: 0;
				white-space: nowrap;
				width: 100%;/* 146px */
			}


		/** [メニューアイコン] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.site .icons {
			bottom: 0;
			height: 0;
			padding-bottom: 13.13%;
			margin: auto 0.31% auto 0;
			position: absolute;
			right: 0;
			top: 0;
			width: 33.13%;/* 212px */
		}

			.site .icons li {
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: 50%;/* 106px */
			}

			.site .icons li:last-of-type {
				left: auto;
				right: 0;
			}

				.site .icons li span {
					background: no-repeat 50% 0;
					background-size: auto 100%;
					cursor: pointer;
					display: block;
					height: 100%;
					overflow: hidden;
					text-indent: 100%;
					white-space: nowrap;
					width: 81.13%;/* 86px */
				}

				.site .icons li .icnLang {background-image: url(/en/common/img/st_btn_language.gif);}
				.site .icons li .icnMenu {background-image: url(/en/common/img/st_btn_menu.gif);}

				.site .icons li .opened {background-image: url(/en/common/img/st_btn_close.gif);}


		/** [メニュー] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.site .menu {
			background-color: #fff;
			border-top: 1px solid #fff;
			bottom: 0;
			display: none;
			font-size: 2.6rem;
			left: 0;
			margin-top: 20.46%;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			position: fixed;
			right: 0;
			top: -1px;
		}


			/** [カテゴリリスト] >> +++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

			.site .menu .index {
				margin: 0 auto;
				width: 89.38%;/* 572px */
			}

				.site .menu .index li {border-bottom: 1px solid #d4d5d6;}

					.site .menu .index li li {
						border-top: 1px solid #d4d5d6;
						border-bottom: none;
					}

					.site .menu .index li span {
						display: block;
						background: url(/en/common/img/nvg_ico_close.png) no-repeat 94.76% 50%;
						background-image: url(/en/common/img/nvg_ico_open.png);
						background-size: 3.85% auto;
						font-size: 2.6rem;
						font-family: 'Trade Gothic W01 Bold', sans-serif;
						padding: 5.24% 14.34% 5.24% 0;
						position: relative;
					}

					.site .menu .index li .open {background-image: url(/en/common/img/nvg_ico_close.png);}

					.site .menu .index li a {
						color: #7f8283;
						display: block;
						padding: 5.24%;
						text-decoration: none;
					}

					.site .menu .index > li > a {
						background: url(/en/common/img/nvg_ico_goto.png) no-repeat 94.36% 50%;
						background-size: 2.48% auto;
						font-family: 'Trade Gothic W01 Bold', sans-serif;
						padding: 5.24% 14.34% 5.24% 0;
					}

					.site .menu .index li .blank {
						background: url(/en/common/img/nvg_ico_blank02.gif) no-repeat 94.76% 50%;
						background-size: 5.42% auto;
						padding-right: 14.34%;
					}


			/** [ストーリー] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

			.site .menu .story {
				border-bottom: 1px solid #d4d5d6;
				margin: 0 auto;
				width: 89.38%;/* 572px */
			}

				.site .menu .story a {
					background: url(/en/common/img/nvg_ico_blank02.gif) no-repeat 94.76% 50%;
					background-size: 5.42% auto;
					color: #7f8283;
					display: block;
					font-family: 'Trade Gothic W01 Bold', sans-serif;
					padding: 5.24% 14.34% 5.24% 0;
					text-decoration: none;
				}


			/** [表示言語] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

			.site .menu .language {
				margin: 0 auto;
				width: 89.38%;/* 572px */
			}

				.site .menu .language dt {display: none;}

				.site .menu .language dd {}

					.site .menu .language dd li {border-bottom: 1px solid #d4d5d6;}

						.site .menu .language dd a {
							color: #7f8283;
							display: block;
							padding: 5.24%;
							text-decoration: none;
						}


			/** [閉じる] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

			.site .menu .close {
				background: url(/en/common/img/nvg_ico_close.png) no-repeat 50% 50%;
				background-size: 4.55% auto;
				content: '';
				display: block;
				padding-bottom: 14.69%;
				width 100%:/* 572px */
			}


	/** |02-01. ヘッダー| ****************************************************************** END **/



	/** |02-02. コンテンツ| ************************************************************** START **/


		/** [テーマ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.theme {
			margin-top: 20.46%;
			padding-top: 9.38%;
			width: 100%;/* 640px */
		}


			/** [パンくず] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

			.theme .crumbs {display: none;}


			/** [フロントロウ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

			.theme .frontrow {}


		/** [コンテンツ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.contents {
			display: -webkit-flex;
			display: flex;
			-webkit-flex-direction: column;
			flex-direction: column;
			margin-top: 20.46%;
			padding-top: 9.38%;
			width: 100%;/* 640px */
		}

		.static {display: block;}

		.theme +.static {
			margin-top: 0;
			padding-top: 0;
		}

		.publish {display: block;}


			/** [パンくず] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

			.contents .crumbs {display: none;}


			/** [カテゴリ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

			.contents .category {
				border-left: 3px solid #4aa6c3;
				font-family: 'Trade Gothic W01 Bold', sans-serif;
				font-size: 3.2rem;
				line-height: 1.2;
				margin: 0 auto;
				-webkit-order: 1;
				order: 1;
				padding-left: 5.31%;
				width: 89.38%;/* 572px */
			}


			/** [コンテンツ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

			.contents .body {
				margin: 0 auto;
				-webkit-order: 3;
				order: 3;
				width: 89.38%;/* 572px */
			}

				.contents .body::before {
					content: '';
					display: block;
					padding-top: 9.38%;
					width: 100%;/* 572px */
				}

				.contents .crumbs + .body::before {content: none;}


				/** [汎用パーツ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

				.static .body section {
					padding-top: 13.99%;/* 80px */
					width: 100%;/* 572px */
				}

				.static .body section:first-child {padding-top: 0;}


				/* ヘッダ（ボタン無） */
				.static .body section > .title {
					background-color: #f4f4f5;
					font-size: 3rem;
					line-height: 1.2;
					padding: 2.8% 2.48%;/* 16px 14px */
				}


				/* ヘッダ（ボタン有） */
				.static .body section .header {
					background-color: #f4f4f5;
					padding: 2.8% 29.02% 2.8% 2.48%;/* 16px 166px 16px 14px */
					position: relative;
				}

					.static .body section .header .title {
						font-size: 2.6rem;
						line-height: 1.2;
					}

					.static .body section .header .more {
						position: absolute;
						top: 50%;
						margin: -0.9em 2.48% 0 0;/* x 14px 0 0 */
						right: 0;
					}

						.static .body section .header .more a {
							background-color: #fff;
							color: #7f8283;
							display: block;
							font-size: 2.4rem;
							text-align: center;
							text-decoration: none;
							padding: 0.4em 0.8em;
						}

				.static .body section > p {
					line-height: 1.67;
					padding-top: 6.99%;/* 40px */
				}


			/** [ナビゲーション] >> +++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

			.contents .navigation {
				margin: 0 auto;
				-webkit-order: 2;
				order: 2;
				width: 89.38%;/* 572px */
			}

			.static .navigation {
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: column;
				flex-direction: column;
				-webkit-order: 0;
				order: 0;
				width: auto;/* 640px */
			}

			.publish .navigation {width: auto;/* 640px */}

				.contents .navigation::before {
					content: '';
					display: block;
					padding-top: 13.99%;/* 80px */
					width: 100%;/* 572px */
				}


				/** [ページ検索] >> +++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

				.contents .navigation .search {border-top: 1px solid #d4d5d6;}

					.contents .navigation .search .condition {}


						/* 検索条件 */
						.contents .navigation .search .condition .label {
							background: url(/en/common/img/nvg_ico_close.png) no-repeat 94.76% 50%;
							background-image: url(/en/common/img/nvg_ico_open.png);
							background-size: 3.85% auto;
							border-bottom: 1px solid #d4d5d6;
							font-size: 2.6rem;
							font-family: 'Trade Gothic W01 Bold', sans-serif;
							padding: 5.24% 14.34% 5.24% 0;
							position: relative;
						}

						.contents .navigation .search .condition .open {background-image: url(/en/common/img/nvg_ico_close.png);}


						/* リスト */
						.contents .navigation .search .condition .list {font-size: 2.6rem;}

							.contents .navigation .search .condition ul {}

								.contents .navigation .search .condition li {border-bottom: 1px solid #d4d5d6;}

							.contents .navigation .search .condition dl {}

								.contents .navigation .search .condition dt {padding: 5.24%;}

								.contents .navigation .search .condition dd {border-bottom: 1px solid #d4d5d6;}

									.contents .navigation .search .condition a {
										color: #7f8283;
										display: block;
										line-height: 1.25;
										padding: 5.24%;
										text-decoration: none;
									}

									.contents .navigation .search .condition .blank {
										background: url(/en/common/img/nvg_ico_blank02.gif) no-repeat 94.76% 50%;
										background-size: 5.42% auto;
										padding-right: 14.34%;
									}


						/* 閉じる */
						.contents .navigation .search .condition .close {
							background: url(/en/common/img/nvg_ico_close.png) no-repeat 50% 50%;
							background-size: 4.55% auto;
							border-bottom: 1px solid #d4d5d6;
							content: '';
							display: block;
							padding-bottom: 14.69%;
							width 100%:/* 572px */
						}


				/** [施設ガイド] >> +++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

				.contents .navigation .guide {
					background-color: #f4f4f5;
					padding: 5.31% 0;
				}

				.static .navigation .guide {
					margin-top: 14.69%;
					-webkit-order: 4;
					order: 4;
				}

					.contents .navigation .guide dt,
					.contents .navigation .guide dd,
					.contents .navigation .guide > li {
						background-color: #fff;
						border-bottom: 1px solid #d4d5d6;
						margin: 0 auto;
						width: 89.38%;/* 572px */
					}

					.contents .navigation .guide dt,
					.contents .navigation .guide > li:first-of-type {border-top: 1px solid #d4d5d6;}

						.contents .navigation .guide a {
							background: url(/en/common/img/nvg_ico_goto.png) no-repeat 93.36% 50%;
							background-size: 2.48% auto;
							color: #7f8283;
							display: block;
							font-family: 'Trade Gothic W01 Bold', sans-serif;
							padding: 4.9% 14.34% 4.9% 5.59%;
							position: relative;
							text-decoration: none;
						}

						.contents .navigation .guide .label {
							background: url(/en/common/img/nvg_ico_close.png) no-repeat 93.46% 50%;
							background-image: url(/en/common/img/nvg_ico_open.png);
							background-size: 3.85% auto;
							font-family: 'Trade Gothic W01 Bold', sans-serif;
							padding: 4.9% 14.34% 4.9% 5.59%;
							position: relative;
						}

						.contents .navigation .guide .open {
							background-image: url(/en/common/img/nvg_ico_close.png);
							background-size: 3.85% auto;
						}


					/* リスト */
					.contents .navigation .guide .list {border-top: 1px solid #d4d5d6;}

						.contents .navigation .guide .list ul {}

							.contents .navigation .guide .list li {}


						/* 閉じる */
						.static .navigation .guide .list .close {
							background: url(/en/common/img/nvg_ico_close.png) no-repeat 50% 50%;
							background-size: 4.55% auto;
							border-top: 1px solid #d4d5d6;
							content: '';
							display: block;
							padding-bottom: 14.69%;
							width 100%:/* 572px */
						}


				/** [問い合わせ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

				.contents .navigation .contact {
					margin: 0 auto;
					-webkit-order: 1;
					order: 1;
					width: 89.38%;/* 572px */
				}

					.contents .navigation .contact .head {
						background-color: #f4f4f5;
						font-family: 'Trade Gothic W01 Bold', sans-serif;
						font-size: 3rem;
						padding: 2.8% 2.48%;
					}

					.contents .navigation .contact .address {padding-top: 5.59%;}

					.contents .navigation .contact p.address {
						line-height: 1.5;
						padding-top: 5.59%;
					}

						.contents .navigation .contact .address dt {font-family: 'Trade Gothic W01 Bold', sans-serif;}

						.contents .navigation .contact .address dd {
							line-height: 1.5;
							padding-top: 4.55%;
						}

					.contents .navigation .contact .tel {
						border: 1px solid #d4d5d6;
						font-family: 'Trade Gothic W01 Bold', sans-serif;
						font-size: 2.6rem;
						margin: 4.55% auto 0;
						width: 80.07%;/* 458px */
					}

						.contents .navigation .contact .tel a {
							display: block;
							color: #7f8283;
							padding: 0.5em;
							text-align: center;
							text-decoration: none;
						}

							.contents .navigation .contact .tel a::before {
								background: url(/en/common/img/nvg_ico_tel.gif) no-repeat 0 50%;
								background-size: auto 100%;
								content: '';
								display: inline-block;
								margin-right: 0.2em;
								vertical-align: -0.1em;
								height: 1em;
								width: 1.2em;
							}

					.contents .navigation .contact .etc {
						line-height: 1.5;
						padding-top: 5.59%;
					}

						.contents .navigation .contact .etc a[href*="//ws.formzu.net/"]::after {
							background: url(/en/common/img/nvg_ico_blank02.gif) no-repeat 0 50%;
							background-size: 100% auto;
							content: '';
							display: inline-block;
							height: 1em;
							margin-left: 0.4em;
							vertical-align: -0.1em;
							width: 1em;
						}

				/** [お知らせ] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

				.contents .navigation .info {
					border-top: 1px solid #d4d5d6;
					margin: 10.49% auto 0;
					padding-top: 10.49%;
					-webkit-order: 2;
					order: 2;
					width: 89.38%;/* 572px */
				}


				/** [LIXIL出版インデックス] >> ++++++++++++++++++++++++++++++++++++++++ >> START **/

				.contents .navigation .index {
					background-color: #f4f4f5;
					padding: 5.31% 0;
				}

				.static .navigation .index {
					margin-top: 14.69%;
					-webkit-order: 99;
					order: 99;
				}

					.contents .navigation .index dt,
					.contents .navigation .index dd {
						background-color: #fff;
						border-bottom: 1px solid #d4d5d6;
						margin: 0 auto;
						width: 89.38%;/* 572px */
					}

					.contents .navigation .index dt {border-top: 1px solid #d4d5d6;}

						.contents .navigation .index a {
							background: url(/en/common/img/nvg_ico_goto.png) no-repeat 93.36% 50%;
							background-size: 2.48% auto;
							color: #7f8283;
							display: block;
							font-family: 'Trade Gothic W01 Bold', sans-serif;
							padding: 4.9% 14.34% 4.9% 5.59%;
							position: relative;
							text-decoration: none;
						}

						.contents .navigation .index .home a {padding-left: 15.73%;}

							.contents .navigation .index .home a::before {
								background: url(/en/common/img/nvg_ico_publish.gif) no-repeat 0 0;
								background-size: 100% auto;
								content: '';
								display: block;
								padding-bottom: 1.26em;
								left: 0;
								margin: -0.64em 0 0 5.59%;
								position: absolute;
								top: 50%;
								width: 1.5em;
							}


				/** [カテゴリ一覧] >> +++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

				.contents .navigation .facilities {display: none;}


				/** [メールマガジン] >> +++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

				.contents .navigation .magazine {display: none;}


				/* 静的コンテンツ用 */
				.static .navigation .magazine {
					display: block;
					margin: 0 auto;
					-webkit-order: 3;
					order: 3;
					width: 89.38%;/* 572px */
				}

				.contents .navigation .contact ~ .magazine,
				.contents .navigation .info ~ .magazine{
					border-top: 1px solid #d4d5d6;
					margin-top: 10.49%;
					padding-top: 10.49%;
				}

					.static .navigation .magazine dd {
						line-height: 1.67;
						padding-top: 6.29%;
					}


				/** [関連情報] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

				.contents .navigation .relation {
					display: block;
					margin: 0 auto;
					-webkit-order: 3;
					order: 3;
					padding-top: 9.38%;
					width: 89.38%;/* 572px */
				}

					.static .navigation .relation dd {
						line-height: 1.67;
						padding-top: 6.29%;
					}


			/** [フリップフロップ] >> +++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

			.contents .flipflop {
				font-size: 0;
				margin: 0 auto;
				-webkit-order: 4;
				order: 4;
				padding-top: 2.19%;
				text-align: right;
				width: 89.38%;/* 572px */
			}

				.contents .flipflop a {
					background: url(/en/common/img/cnt_btn_top.gif) no-repeat 0 0;
					background-size: 100% auto;
					display: inline-block;
					padding-bottom: 15.38%;
					font-size: 0;
					width: 15.38%;/* 88px */
				}


	/** |02-02. コンテンツ| **************************************************************** END **/



	/** |02-03. フッター| **************************************************************** START **/


	.publication {
		background-color: #d4d5d6;
		width: 100%;/* 640px */
	}

		.publication .prop {
			margin: 0 auto;
			padding-bottom: 7.5%;
			width: 90.63%;/* 580px */
		}


		/** [関連サイト] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.publication .relation {font-size: 0;}

			.publication .relation li {
				color: #585a5a;
				display: inline-block;
				font-size: 2.4rem;
				margin-top: 8.28%;
				padding: 0 1em;
				position: relative;
				vertical-align: top;
				width: 50%;/* 290px */
			}

				.publication .relation li::before {
					background: url(/en/common/img/pbl_ico_link.gif) no-repeat 0 50%;
					background-size: auto 50%;
					content: '';
					display: block;
					height: 0;
					left: 0;
					padding-bottom: 1em;
					position: absolute;
					top: 0;
					width: 1em;/* px */
				}

				.publication .relation li a {
					color: inherit;
					font-family: inherit;
					text-decoration: none;
				}


		/** [メディア] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.publication .media {
			font-size: 0;
			padding-top: 8.62%;
			text-align: center;
		}

			.publication .media li {
				display: inline-block;
				margin-right: 5.52%;/*32*/
				padding-top: 11.72%;
				position: relative;
				width: 11.72%;/* 68px */
			}

			.publication .media li:last-of-type {margin-right: 0;}

				.publication .media li a {
					background: no-repeat 50% 50%;
					background-size: 100% auto;
					display: block;
					height: 100%;
					left: 0;
					overflow: hidden;
					position: absolute;
					text-indent: 100%;
					top: 0;
					white-space: nowrap;
					width: 100%;
				}

				.publication .media li .fb {background-image: url(/en/common/img/pbl_btn_facebook.gif);}
				.publication .media li .yt {background-image: url(/en/common/img/pbl_btn_youtube.gif);}


		/** [運営] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.publication .administration {
			margin: 7.93% auto 0;
			padding-top: 13.79%;
			position: relative;
			width: 25.86%;/* 150px */
		}

			.publication .administration a {
				background: url(/en/common/img/pbl_img_administration.jpg) no-repeat 50% 50%;
				background-size: 100% auto;
				display: block;
				height: 100%;
				left: 0;
				overflow: hidden;
				position: absolute;
				text-indent: 100%;
				top: 0;
				white-space: nowrap;
				width: 100%;
			}


		/** [コピーライト] >> +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ >> START **/

		.publication .copyright {
			color: #585a5a;
			font-size: 1.6rem;
			padding-top: 8.62%;
			text-align: center;
		}



	/** |02-03. フッター| ****************************************************************** END **/


/** |02. ページ設定| << ***************************************************************** << END **/