@charset "UTF-8";

#contents {
	overflow: hidden;
}
	#contents > * {
		position: relative;
	}


.human_color {
	color: #827702;
}

.technology_color {
	color: #343A72;
}
.culture_color {
	color: #822E35;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {

	.title {
		padding: 40px 0;
	}
		.title dl {
		}
			.title dl dt {
				font-size: 0;
				line-height: 1;
				width: 147px;
			}
			.title dl dd {
				margin-top: 15px;
			}
				.title dl dd h1 {
					font-size: 24px;
					line-height: 1.6;
					letter-spacing: 4px;
				}
	.main_img img {
		max-width: none;
		width: 100%;
	}

	#main {
		font-size: 0;
	}
		#main .sec {
			font-size: 14px;
			padding: 60px 0 60px;
		}
		#main .sec:nth-child(even) {
			background-color: #EDF5F5;
		}

		#main .sec ::after {
			content: "";
			display: table;
			clear: both;
		}

		#main .section_title dl dd {
			margin-top: 15px;
		}
		#main .section_title dl dd h3 {
			font-size: 15px;
			line-height: 1.6;
			letter-spacing: 4px;
		}
		#main .sub_title {
			margin-top: 30px;
			font-size: 40px;
			font-weight:bold;
			margin-bottom: 30px;

		}


		#main .sec .sec01_container{
			display: grid;
			column-gap: 30px;
			grid-template-rows: minmax(300px,3fr)  minmax(200px,2fr);
			grid-template-columns: minmax(300px,3fr) minmax(250px,2.5fr);

		}
		#main .sec .sec01_container .item01 {
			grid-row: 1 / 2;
			grid-column: 1 / 2;
		}
		#main .sec .sec01_container .item02 {
			grid-row: 1 / 3;
			grid-column: 2 / 3;
		}
		#main .sec .sec01_container .item03 {
			grid-row: 2 / 3;
			grid-column: 1 / 2;
		}

		#main .sec .sec02_container{
			display: grid;
			column-gap: 20px;
			grid-template-rows: minmax(300px,3fr) minmax(200px,2fr);
			grid-template-columns: minmax(250px,2.5fr) minmax(300px,3fr);
		}
		#main .sec .sec02_container .item01 {
			grid-row: 1 / 2;
			grid-column: 2 / 3;
		}
		#main .sec .sec02_container .item02 {
			grid-row: 1 / 3;
			grid-column: 1 / 2;
		}
		#main .sec .sec02_container .item03 {
			grid-row: 2 / 3;
			grid-column: 2 / 3;
		}
		#main .sec .sec03_category_title {
			padding-bottom: 7px;
		}

		#main .sec .sec03_subtitle{
			padding-top: 10px;
			font-size: 30px;
			line-height:1.4;
			font-weight: bold;
		}
		#main .sec .sec03_spirit{
			margin-bottom: 10px;
		}
		#main .sec .sec03_spirit_text{
			font-size: 24px;
			font-weight: bold;
		}
		
		#main .sec .sec03_spirit_title{
			font-size: 24px;
			line-height: 1.2;
			font-weight: bold;
			margin-bottom: 10px;
		}
		#main .sec .sec03 .section_title {
			text-align: center;
		}
		
		#main .sec .sec03 .item02 hr {
			height: 2px;
		}
		#main .sec .sec03 .item02 .background_color_human {
			background-color: #827702;
		}
		#main .sec .sec03 .item02 .background_color_culture {
			background-color: #822E35;
		}
		#main .sec .sec03 .item02 .background_color_technology {
			background-color: #343A72;
		}


		#main .sec .sec03_container_type01{
			display: grid;
			column-gap: 20px;
			row-gap: 10px;
			grid-template-rows: minmax(100px,2fr) minmax(150px,3fr);
			grid-template-columns: minmax(100px,1fr) minmax(200px,2fr) minmax(200px,2fr);
		}
		#main .sec .sec03_container_type01 .item01 {
			grid-row: 1 / 2;
			grid-column: 1 / 2;
		}
		#main .sec .sec03_container_type01 .item02 {
			grid-row: 1 / 2;
			grid-column: 2 / 3;
		}
		#main .sec .sec03_container_type01 .item03 {
			grid-row: 1 / 3;
			grid-column: 3 / 4;
		}
		#main .sec .sec03_container_type01 .item04 {
			grid-row: 2 / 3;
			grid-column: 1 / 3;
		}

		#main .sec .sec03_container_type02{
			display: grid;
			column-gap: 20px;
			row-gap: 10px;
			grid-template-rows: minmax(100px,2fr) minmax(150px,3fr);
			grid-template-columns: minmax(200px,2fr) minmax(100px,1fr) minmax(200px,2fr);
		}
		#main .sec .sec03_container_type02 .item01 {
			grid-row: 1 / 2;
			grid-column: 2 / 3;
		}
		#main .sec .sec03_container_type02 .item02 {
			grid-row: 1 / 2;
			grid-column: 3 / 4;
		}
		#main .sec .sec03_container_type02 .item03 {
			grid-row: 1 / 3;
			grid-column: 1 / 2;
		}
		#main .sec .sec03_container_type02 .item04 {
			grid-row: 2 / 3;
			grid-column: 2 / 4;
		}


		#main .sec .sec03_spirit{
			font-size: 20px;
			position: relative;
			display: flex;
			align-items: center;
		}

	
	
	
	
	
	
	
	
}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	#main{
		text-align: center;
	}
	.title {
		padding: 35px 0 30px;
	}
		.title dl {
		}
			.title dl dt {
				font-size: 0;
				line-height: 1;
				width: 147px;
			}
			.title dl dd {
				margin-top: 15px;
			}
				.title dl dd h1 {
					font-size: 20px;
					line-height: 1.6;
					letter-spacing: 2px;
				}
	.main_img {
		padding-bottom: 50vw;
		background-image: url("../img/philosophy/main_img.jpg");
		background-size: cover;
		background-position: 85% 50%;
	}

	#main {
		font-size: 0;
	}
		#main .sec {
			font-size: 14px;
			padding: 40px 0 40px;
		}
		#main .sec:nth-child(even) {
			background-color: #EDF5F5;
		}
	    #main .sec .sec01_container .item01{
	        text-align: left;
	        display: inline-block;
	    }
	    #main .sec .sec01_container .item03{
	        text-align: left;
	        display: inline-block;
	    }

		#main .section_title dl{
			padding-bottom: 10px;
		}
		#main .section_title dl dd {
			margin-top: 15px;
		}
		#main .section_title dl dd h3 {
			font-size: 20px;
			line-height: 1.6;
			letter-spacing: 4px;
		}
		#main .sub_title {
			margin-top: 10px;
			font-size: 30px;
			font-weight:bold;
			margin-bottom: 30px;
		}
		#main .sec01_content{
			margin-top: 30px;
			font-size:20px;
			line-height:1.6;
		}

		#main .sec02_content{
			margin-top: 30px;
			font-size:20px;
			line-height:1.6;
		}
		#main .sec .sec03_container_type01{
			margin-bottom: 60px;
		}
		#main .sec .sec03_container_type02{
			margin-bottom: 60px;
		}
		#main .sec .sec03 .section_title {
			text-align: center;
		}

		#main .sec .sec03 .item01{
			text-align: center;
			padding-bottom: 10px;
		}
		#main .sec .sec03 .item02{
			text-align: center;
			padding-bottom: 10px;
		}
		#main .sec .sec03_category_title {
			padding-bottom: 10px;
		}

		#main .sec .sec03 .item02 hr {
			height: 2px;
		}
		#main .sec .sec03_subtitle{
			padding-top: 10px;
			font-size: 30px;
			line-height:1.4;
			font-weight: bold;
		}
		#main .sec .sec03 .item02 .background_color_human {
			background-color: #827702;
		}
		#main .sec .sec03 .item02 .background_color_culture {
			background-color: #822E35;
		}
		#main .sec .sec03 .item02 .background_color_technology {
			background-color: #343A72;
		}
		#main .sec .sec03 .item03 {
			padding-bottom: 10px;
		}

		#main .sec .sec03 .item04{
			text-align: left;
			display: inline-block;
		}

		#main .sec .sec03_spirit{
			font-size: 20px;
			position: relative;
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}

		#main .sec .sec03_spirit_title{
			font-size: 24px;
			line-height: 1.2;
			font-weight: bold;
			margin-bottom: 10px;
		}
		
		#main .sec03_content{
			margin-top: 30px;
			font-size:20px;
			line-height:1.6;
		}
	
	
	
	
	
	
	

	
	
}



	.title dl {
		opacity: 0;
		transition-delay: 300ms;
		transition-duration: 1200ms;
	}
	.on .title dl {
		opacity: 1;
	}
	.main_img {
		position: relative;
	}
	.main_img::before {
		position: absolute;
		content: "";
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		transition-delay: 300ms;
		transition-duration: 600ms;
		transition-timing-function: ease-in-out;
		background-color: #fff;
	}
	.on .main_img::before {
		width: 0;
	}