@charset "utf-8";

body { background:#fff;}

#philosophy .container {max-width:750px;}

#philosophy .row0 {
color:#ffffff;
background-color:#0a5670;
border-color:#020229;
background-image: url("../img/philosophy/row0-bg.jpg");
background-repeat: no-repeat;
background-position: top;
}

#philosophy .row1 { width:100%; padding:0; margin:0;}
#philosophy img { width:100%;}
.philosophy main { padding-bottom:0;}

@media screen and (max-width:740px) {
	#philosophy .row0 { background-size: 200%;}
}


#philosophy h2 { 
	text-align:center;
	font-size: 32px;
	padding: 200px 8% 0.5em 8%;
	margin: 0;
	letter-spacing: 2px;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:block;
	text-shadow: #000 1px 0 10px;
	color:#fff;
}
@media screen and (max-width:740px) {
	#philosophy h2 { font-size: 26px; padding: 150px 8% 0.5em 8%;}
}

#philosophy h3 { 
	text-align:center;
	font-size: 18px;
	padding: 0 8% 100px 8%;
	margin: 0;
	letter-spacing: 2px;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:block;
	text-shadow: #000 1px 0 10px;
}
@media screen and (max-width:740px) {
	#philosophy h3 { font-size: 12px; padding: 0 8% 70px 8%;}
}

#philosophy h4 { 
	text-align:center;
	font-size: 24px;
	padding: 50px 8% 20px 8%;
	margin: 0;
	letter-spacing: 2px;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:block;
}
@media screen and (max-width:740px) {
	#philosophy h4 { font-size: 20px;}
}

#philosophy h5 { 
	text-align:center;
	font-size: 18px;
	padding: 10px 8% 0 8%;
	margin: 0;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:block;
	position: relative;
	margin-bottom: 1em;
}
#philosophy h5:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 50px;
  height: 2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #ffffff;
}
@media screen and (max-width:740px) {
	#philosophy h5 { font-size: 18px;}
}


#philosophy p { 
	text-align:left;
	font-size: 16px;
	line-height: 2em;
	padding: 1em 8%;
	margin: 0;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	display:block;
}
@media screen and (max-width:740px) {
	#philosophy p { font-size: 14px;}
}

#philosophy .about {
	margin: 3em 8% 1em 8%;
	background-color:#1b6e88;
	padding: 1.5em 0;
	display:block;
	border-radius: 10px;
}

#philosophy .about p { padding: 2em 8% 1em 8%;}

#philosophy img.brand-core {padding:0 8%;}

#philosophy .row1 {
color:#333;
background-color:#ffffff;
}

#philosophy .row1 h2 { 
	font-size: 32px;
	padding: 50px 8% 0.5em 8%;
	text-shadow: none;
	color: #b78c51;
}
@media screen and (max-width:740px) {
	#philosophy .row1 h2 { font-size: 26px; padding: 30px 8% 0.5em 8%;}
}

#philosophy .row1 h3 { 
	text-align:center;
	font-size: 18px;
	padding: 0 8% 70px 8%;
	text-shadow: none;
	color: #b78c51;
}
@media screen and (max-width:740px) {
	#philosophy .row1 h3 { font-size: 12px; padding: 0 8% 40px 8%;}
}


#philosophy .row3 {
color:#ffffff;
background-color:#315c46;
padding-bottom:100px;
}

#philosophy .row3 h2 { 
	font-size: 32px;
	padding: 0px 8% 0.5em 8%;
	letter-spacing: 1px;
	text-shadow: none;
	color: #ffffff;
}
@media screen and (max-width:740px) {
	#philosophy .row3 h2 { font-size: 26px; padding: 0px 8% 0.5em 8%;}
}

#philosophy .row3 h3 { 
	text-align:center;
	font-size: 20px;
	padding: 0 8% 70px 8%;
	text-shadow: none;
	color: #ffffff;
}
@media screen and (max-width:740px) {
	#philosophy .row3 h3 { font-size: 12px; padding: 0 8% 40px 8%;}
}

#philosophy .row3 h6 { 
	text-align:left;
	font-size: 20px;
	padding:0 0 0 1em;
	margin: 2em 8% 1em 8%;
	text-shadow: none;
	color: #e3cb89;
	border-left:5px solid #e3cb89;
}
@media screen and (max-width:740px) {
	#philosophy .row3 h6 { font-size: 18px; padding:0 0 0 1em;}
}

#philosophy .row3 dl {
	padding:1em 8%;
}

#philosophy .row3 dt {
	font-size: 20px;
	padding:0.8em 0 0em 0;
	margin:0;
	float:left;
	display:block;
	width:10%;
}
@media screen and (max-width:740px) {
	#philosophy .row3 dt { font-size: 18px;}
}

#philosophy .row3 dd {
	font-size: 16px;
	padding:1em 0;
	margin:0;
	float:left;
	display:block;
	width:90%;
}

@media screen and (max-width:740px) {
	#philosophy .row3 dd { font-size: 14px;}
}

#philosophy .row3 h2.top30 { clear:both; padding-top: 2.5em;}

#philosophy .purpose {
	margin: 3em 8% 1em 8%;
	background-color:#497e63;
	padding: 1.5em 0;
	display:block;
	border-radius: 10px;
}

#philosophy .clear {
	clear:both;
}

#philosophy .purpose p { padding: 2em 8% 1em 8%;}

#philosophy .youtube {
  width: 100%;
  margin:1em auto;
  aspect-ratio: 16 / 9;
}
#philosophy .youtube iframe {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 741px) {
    .philosophy #footer {
        margin-top: 0;
    }
}