@charset "UTF-8";
/* CSS Document */


/* PC
-----------------------------------------------------------------
----------------------------------------------------------------- */

nav ul li:nth-of-type(2) a{
	background: #000;
	color: #fff;
}

#pageContents{
	width: 100%;
	min-width: 1200px;
}
	.main{
		max-width: 1458px;
		width: 100%;
		margin: 0 auto;
	}
		.main .mainVisual{
			width: 100%;
			position: relative;
		}
			.main .mainVisual figure{
				width: 100%;
			}
				.main .mainVisual figure img{
					width: 100%;
					height: auto;
				}
			.main .mainVisual h1{
				font-size: 28px;
				line-height: 1.9;
				color: #f7f2de;
				position: absolute;
				top: 43%;
				left: 130px;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}
			.main .mainVisual .panBox{
				font-size: 13px;
				line-height: 1;
				color: #fff;
				position: absolute;
				top: 63%;
				left: 130px;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
			}
				.main .mainVisual .panBox a{
					color: #fff;
				}


/* foundation
-----------------------------------------------------------------*/
	section.foundation{
		width: 100%;
		margin-top: 80px;
	}
		section.foundation .foundationBox{
			max-width: 1920px;
			width: 100%;
			margin: 0 auto;
		}
			.foundationBox h2{
				width: 1200px;
				margin: 0 auto;
				text-align: center;
				font-size: 34px;
				letter-spacing: 0.08em;
			}
				.foundationBox h2 .inner{
					display: inline-block;
					width: 42%;
					padding-bottom: 10px;
					border-bottom: 1px solid #000;
				}
			.foundationBox p.copy{
				width: 1200px;
				margin: 26px auto 0;
				text-align: center;
				font-size: 16px;
				line-height: 2;
				letter-spacing: 0.08em;
			}

		section.foundation .sec{
			max-width: 1200px;
			width: 100%;
			margin: 0 auto;
		}
			section.foundation .sec .title{
				position: relative;
				width: 100%;
				padding: 6px 0;
				margin-top: 52px;
				text-align: center;
				font-size: 21px;
				color: #fff;
				background: #96171a;
			}
			section.foundation .sec .title::after{
				content: "";
				display: block;
				position: absolute;
				bottom: -3px;
				left: 0;
				width: 100%;
				border-bottom: 1px solid #96171a;
			}
			section.foundation .sec .contents{
				width: 100%;
				overflow: hidden;
				margin-top: 36px;
			}
				section.foundation .sec .contents figure{
					float: right;
					position: relative;
					width: 44%;
					line-height: 0;
				}
					section.foundation .sec .contents figure figcaption{
						position: absolute;
						top: 50%;
						left: 50%;
						-webkit-transform: translate(-50%,-50%);
						transform: translate(-50%,-50%);
						height: 59%;
						font-size: 26px;
						line-height: 1.8;
						-webkit-writing-mode: vertical-rl;
						-ms-writing-mode: tb-rl;
						writing-mode: vertical-rl;						
					}
				section.foundation .sec .contents .textBox{
					float: left;
					width: 52%;
					text-align: justify;
				}
					section.foundation .sec .contents .textBox p{
						margin-top: 20px;
						line-height: 2;
					}
					section.foundation .sec .contents .textBox p:first-of-type{
						margin-top: 0;
					}
					section.foundation .sec .contents .textBox .introTitle{
						width: 100%;
						font-size: 18px;
						font-weight: 900;
						letter-spacing: 0.06em;
						margin-top: 40px;
					}

			section.foundation .sec .contentsReverse{
				width: 100%;
				overflow: hidden;
				margin: 36px 0 0;
			}
				section.foundation .sec .contentsReverse figure{
					float: left;
					position: relative;
					width: 44%;
					line-height: 0;
				}
					section.foundation .sec .contentsReverse figure figcaption{
						position: absolute;
						top: 50%;
						left: 50%;
						-webkit-transform: translate(-50%,-50%);
						transform: translate(-50%,-50%);
						height: 59%;
						font-size: 26px;
						line-height: 1.8;
						-webkit-writing-mode: vertical-rl;
						-ms-writing-mode: tb-rl;
						writing-mode: vertical-rl;						
					}
				section.foundation .sec .contentsReverse .textBox{
					float: right;
					width: 52%;
					text-align: justify;
				}
					section.foundation .sec .contentsReverse .textBox p{
						margin-top: 20px;
						line-height: 2;
					}
					section.foundation .sec .contentsReverse .textBox p:first-of-type{
						margin-top: 0;
					}
					section.foundation .sec .contentsReverse .textBox .introTitle{
						width: 100%;
						font-size: 18px;
						font-weight: 900;
						letter-spacing: 0.06em;
						margin-top: 40px;
					}

			section.foundation .sec .typeBlock{
				width: 100%;
				overflow: hidden;
				margin: 36px 0 0;
				padding: 36px;
				background: #f4f4f4;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}
				section.foundation .sec .typeBlock h4{
					width: 100%;
					font-size: 18px;
					font-weight: 900;
					letter-spacing: 0.06em;
				}
				section.foundation .sec .typeBlock .typeBox{
					width: 100%;
					margin: 22px 0 0;
					padding: 26px;
					background: #fff;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					overflow: hidden;
				}
					section.foundation .sec .typeBlock .typeBox figure{
						float: left;
						width: 41%;
					}
						section.foundation .sec .typeBlock .typeBox figure img{
							width: 100%;
							height: auto;
						}
					section.foundation .sec .typeBlock .typeBox .typeText{
						float: right;
						width: 56%;
					}
						section.foundation .sec .typeBlock .typeBox .typeText h5{
							width: 100%;
							font-size: 21px;
							line-height: 1;
							letter-spacing: 0.05em;
							padding: 16px 0;
							border-bottom: 1px solid #aaa;
						}
						section.foundation .sec .typeBlock .typeBox .typeText p{
							width: 100%;
							font-size: 14px;
							line-height: 1.8;
							letter-spacing: 0.05em;
							padding: 16px 0;
						}
						section.foundation .sec .typeBlock .typeBox .typeText .tableBox{
							width: 100%;
						}
							section.foundation .sec .typeBlock .typeBox .typeText .tableBox tr:first-of-type{
								border-bottom: 3px solid #fff;
							}
							section.foundation .sec .typeBlock .typeBox .typeText .tableBox td{
								background: #d6d6d6;
								padding: 8px 1em;
							}
							section.foundation .sec .typeBlock .typeBox .typeText .tableBox td:first-of-type{
								background: #e5e5e5;
								text-align: center;
								border-right: 3px solid #fff;
							}


/* thought
-----------------------------------------------------------------*/
	section.thought{
		width: 100%;
		margin-top: 80px;
		margin-bottom: 50px;
	}
		section.thought .thoughtBox{
			max-width: 1920px;
			width: 100%;
			margin: 0 auto;
		}
			.thoughtBox h2{
				width: 1200px;
				margin: 0 auto;
				text-align: center;
				font-size: 34px;
				letter-spacing: 0.08em;
			}
				.thoughtBox h2 .inner{
					display: inline-block;
					width: 46%;
					padding-bottom: 10px;
					border-bottom: 1px solid #000;
				}
			.thoughtBox p.copy{
				width: 1200px;
				margin: 26px auto 0;
				text-align: center;
				font-size: 16px;
				line-height: 2;
				letter-spacing: 0.08em;
			}

		section.thought .sec{
			max-width: 1200px;
			width: 100%;
			margin: 0 auto;
		}
			section.thought .sec .title{
				position: relative;
				width: 100%;
				padding: 6px 0;
				margin-top: 52px;
				text-align: center;
				font-size: 21px;
				color: #fff;
				background: #96171a;
			}
			section.thought .sec .title::after{
				content: "";
				display: block;
				position: absolute;
				bottom: -3px;
				left: 0;
				width: 100%;
				border-bottom: 1px solid #96171a;
			}
			section.thought .sec .contents{
				width: 100%;
				overflow: hidden;
				margin-top: 36px;
			}
				section.thought .sec .contents > figure{
					position: relative;
					width: 100%;
					line-height: 0;
				}
					section.thought .sec .contents > figure figcaption{
						font-size: 24px;
						line-height: 1.9;
						color: #333;
						position: absolute;
						top: 50%;
						left: 130px;
						-webkit-transform: translateY(-50%);
						transform: translateY(-50%);
					}
					section.thought .sec .contents > figure img{
						width: 100%;
						height: auto;
					}
				section.thought .sec .contents .textBox{
					width: 100%;
					text-align: justify;
					margin-top: 20px;
				}
					section.thought .sec .contents .textBox p{
						margin-top: 20px;
						line-height: 2;
					}
					section.thought .sec .contents .textBox p:first-of-type{
						margin-top: 0;
					}
					section.thought .sec .contents .textBox .introTitle{
						width: 100%;
						font-size: 18px;
						font-weight: 900;
						letter-spacing: 0.06em;
						margin-top: 40px;
					}
				section.thought .sec .contents .tmbBox{
					width: 100%;
					overflow: hidden;
				}
					section.thought .sec .contents .tmbBox figure{
						float: left;
						width: 32%;
						margin-right: 2%;
						line-height: 0;
					}
					section.thought .sec .contents .tmbBox figure:last-of-type{
						margin-right: 0;
					}
						section.thought .sec .contents .tmbBox figure img{
							width: 100%;
							height: auto;
						}







/* SmartPhone
-----------------------------------------------------------------
----------------------------------------------------------------- */

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


nav ul li:first-of-type a{
	background: #96171a url(../../common/images/arrow_triangle_right_white.png) left 1em center no-repeat;
	color: #fff;
}
nav ul li:nth-of-type(2) a{
	background: none;
	color: #333;
}

#pageContents{
	width: 100%;
	min-width: inherit;
}
	.main{
		max-width: inherit;
	}
			.main .mainVisual h1{
				font-size: 18px;
				line-height: 1.6;
				top: 40%;
				left: 30px;
				width: 80%;
			}
			.main .mainVisual .panBox{
				font-size: 13px;
				line-height: 1.5;
				top: 60%;
				left: 30px;
			}

	.inpageNavBox{
		display: none;
	}

/* foundation
-----------------------------------------------------------------*/
	section.foundation{
		margin-top: 30px;
	}
		section.foundation .foundationBox{
			max-width: 96%;
			width: 96%;
		}
			.foundationBox h2{
				width: 100%;
				margin: 0 auto;
				text-align: center;
				font-size: 18px;
				letter-spacing: 0.08em;
			}
				.foundationBox h2 .inner{
					width: 86%;
					padding-bottom: 10px;
				}
			.foundationBox p.copy{
				width: 100%;
				margin: 16px auto 0;
				font-size: 14px;
				line-height: 1.8;
			}
		section.foundation .sec{
			max-width: inherit;
			width: 96%;
		}
			section.foundation .sec .title{
				margin-top: 30px;
				font-size: 14px;
				line-height: 1.4;
			}
			section.foundation .sec .contents{
				margin-top: 20px;
			}
				section.foundation .sec .contents figure{
					float: none;
					width: 100%;
				}
					section.foundation .sec .contents figure img{
						width: 100%;
						height: auto;
					}
					section.foundation .sec .contents figure figcaption{
						height: inherit;
						width: 100%;
						text-align: center;
						font-size: 14px;
						-webkit-writing-mode: inherit;
						-ms-writing-mode: inherit;
						writing-mode: inherit;						
					}
				section.foundation .sec .contents .textBox{
					float: none;
					width: 100%;
				}
					section.foundation .sec .contents .textBox p{
						margin-top: 8px;
						line-height: 1.8;
					}
					section.foundation .sec .contents .textBox .introTitle:first-of-type{
						margin-top: 20px;
					}
					section.foundation .sec .contents .textBox .introTitle{
						font-size: 14px;
						line-height: 1.4;
						letter-spacing: 0.01em;
						margin-top: 20px;
					}

			section.foundation .sec .contentsReverse{
				margin-top: 20px;
			}
				section.foundation .sec .contentsReverse figure{
					float: none;
					width: 100%;
				}
					section.foundation .sec .contentsReverse figure img{
						width: 100%;
						height: auto;
					}
					section.foundation .sec .contentsReverse figure figcaption{
						height: inherit;
						width: 100%;
						text-align: center;
						font-size: 14px;
						-webkit-writing-mode: inherit;
						-ms-writing-mode: inherit;
						writing-mode: inherit;						
					}
				section.foundation .sec .contentsReverse .textBox{
					float: none;
					width: 100%;
				}
					section.foundation .sec .contentsReverse .textBox p{
						margin-top: 8px;
						line-height: 1.8;
					}
					section.foundation .sec .contentsReverse .textBox .introTitle:first-of-type{
						margin-top: 20px;
					}
					section.foundation .sec .contentsReverse .textBox .introTitle{
						font-size: 14px;
						line-height: 1.4;
						letter-spacing: 0.01em;
						margin-top: 20px;
					}

			section.foundation .sec .typeBlock{
				margin: 30px 0 0;
				padding: 18px;
			}
				section.foundation .sec .typeBlock h4{
					font-size: 14px;
				}
				section.foundation .sec .typeBlock .typeBox{
					margin: 16px 0 0;
					padding: 14px;
				}
					section.foundation .sec .typeBlock .typeBox figure{
						float: none;
						width: 100%;
					}
						section.foundation .sec .typeBlock .typeBox figure img{
							width: 100%;
							height: auto;
						}
					section.foundation .sec .typeBlock .typeBox .typeText{
						float: none;
						width: 100%;
					}
						section.foundation .sec .typeBlock .typeBox .typeText h5{
							font-size: 14px;
							padding: 12px 0;
						}
						section.foundation .sec .typeBlock .typeBox .typeText p{
							font-size: 12px;
							padding: 12px 0;
						}
						section.foundation .sec .typeBlock .typeBox .typeText .tableBox{
							width: 100%;
							font-size: 11px;
						}
							section.foundation .sec .typeBlock .typeBox .typeText .tableBox tr:first-of-type{
								border-bottom: 3px solid #fff;
							}
							section.foundation .sec .typeBlock .typeBox .typeText .tableBox td{
								background: #d6d6d6;
								padding: 6px 1em;
							}
							section.foundation .sec .typeBlock .typeBox .typeText .tableBox td:first-of-type{
								width: 34%;
								background: #e5e5e5;
								text-align: center;
								border-right: 3px solid #fff;
								padding: 6px 0.5em;
							}


/* thought
-----------------------------------------------------------------*/
	section.thought{
		margin-top: 30px;
		margin-bottom: 33px;
	}
		section.thought .thoughtBox{
			max-width: 96%;
			width: 96%;
		}
			.thoughtBox h2{
				width: 100%;
				margin: 0 auto;
				text-align: center;
				font-size: 18px;
				letter-spacing: 0.08em;
			}
				.thoughtBox h2 .inner{
					width: 90%;
					padding-bottom: 10px;
				}
			.thoughtBox p.copy{
				width: 100%;
				margin: 16px auto 0;
				font-size: 14px;
				line-height: 1.8;
			}
		section.thought .sec{
			max-width: inherit;
			width: 96%;
		}
			section.thought .sec .title{
				margin-top: 30px;
				font-size: 14px;
				line-height: 1.4;
			}
			section.thought .sec .contents{
				margin-top: 20px;
			}
					section.thought .sec .contents > figure figcaption{
						font-size: 16px;
						line-height: 1.6;
						left: 30px;
					}
				section.thought .sec .contents .textBox{
					float: none;
					width: 100%;
				}
					section.thought .sec .contents .textBox p{
						margin-top: 8px;
						line-height: 1.8;
					}
					section.thought .sec .contents .textBox .introTitle:first-of-type{
						margin-top: 20px;
					}
					section.thought .sec .contents .textBox .introTitle{
						font-size: 14px;
						line-height: 1.4;
						letter-spacing: 0.01em;
						margin-top: 20px;
					}

}