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

#culture { margin: 0 auto; padding: 60px 0; }
#culture>.title { text-align: center; margin: 0 auto; padding: 50px 0; }
#culture>.title>h3 { font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto; }

#culture>.display { margin: 0 auto; padding: 50px 0; }
#culture>.display .item { position: relative; display: block; margin: 0 auto 50px auto; background: #f7f7f7; overflow: hidden; border-radius: 80px 0 80px 0; }
#culture>.display .item:last-child { margin-bottom: 0; }
#culture>.display .item>.img { display: block; width: 40%; float: left; overflow: hidden; }
#culture>.display .item>.img>img { width: 100%; height: auto; }
#culture>.display .item>.box { width: 60%; float: right; box-sizing: border-box; padding: 6% 8% 0 8%; text-align: left; }
#culture>.display .item>.box>.tit { font-size: 3rem; font-weight: bold; color: rgba(4,91,169,1); }
#culture>.display .item>.box>.sub { padding: 10px 0; font-size: 1.8rem; color: #999; }
#culture>.display .item>.box>.intro { height: 200px; overflow: auto; margin: 10px auto; padding-right: 10px; font-size: 1.6rem; color: #666; line-height: 2.4rem; }
#culture>.display .item>.box>.intro>p { margin-bottom: 20px; }
#culture>.display .item:nth-child(even) .img { float: right; }
#culture>.display .item:nth-child(even) .box { float: left; }

@media only screen and (max-width: 1480px) {
#culture>.display .item>.box>.intro { height: 160px; }
}

@media only screen and (max-width: 1280px) {
#culture>.display .item>.box>.tit { font-size: 2.4rem; }
#culture>.display .item>.box>.intro { height: 120px; }
}

@media only screen and (max-width: 1200px) {
#culture>.display .item>.box { padding-top: 4%; }
#culture>.display .item>.box>.sub { font-size: 1.6rem; }
#culture>.display .item>.box>.intro { font-size: 1.4rem; line-height: 2rem; }
}

@media only screen and (max-width: 980px) {
#culture { padding: 30px 0; }
#culture>.title { padding: 10px 0; }
#culture>.title>h3 { font-size: 3.2rem; }
#culture>.display .item>.img { width: 50%; }
#culture>.display .item>.box { width: 50%; }
#culture>.display .item>.box>.sub { font-size: 1.5rem; }
#culture>.display .item>.box>.intro { height: 160px; }
}

@media only screen and (max-width: 860px) {
#culture>.display .item>.img { float: none; width: 100%; }
#culture>.display .item>.box { float: none; width: 100%; padding: 5% 8%; }
#culture>.display .item>.box>.intro { height: auto; }
}

@media only screen and (max-width: 640px) {
#culture>.title>h3 { font-size: 2.8rem; }
#culture>.display .item { border-radius: 40px 0 40px 0; }
#culture>.display .item>.box>.tit { font-size: 2rem; }
}

@media only screen and (max-width: 520px) {
#culture>.title>h3 { font-size: 2.4rem; }
#culture>.display { padding: 30px 0; }
}